<template>
    <view class="waper">
        <u-navbar :autoBack="true" bgColor="#fff">
        	<view slot='center' class="navbar_title">精彩活动</view>
        </u-navbar>
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
            <view class="list_waper">
                <navigator hover-class="none" class="list" v-for="(item, index) in list" :url="'/pages/strategy/detail?id=' + item.id" :key="index">
                    <view class="img">
                        <image :src="$utils.setImgUrl(item.image)" mode=""></image>
                    </view>
                	<view class="info">
                		<view class="title">{{item.title}}</view>
                		<view class="msg">{{item.description || ''}}</view>
                		<view class="from">
                			<view class="left">{{$utils.formatDate('Y-M-D', item.publishtime * 1000)}}</view>
                			<view class="right">
                				<u-icon name="eye" size="28rpx" color="#999" top="2rpx"></u-icon>
                				<view class="num">{{item.views}}</view>
                			</view>
                		</view>
                	</view>
                </navigator>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data() {
        return {
            paddingTop: 0,
            list: []
        }
    },
    onLoad () {
        this.paddingTop = this.$paddingTop;
    },
    methods: {
        async upCallback (page) {
            let obj = { pageNum: page.num, pageSize: page.size };
            let info = await this.$http.activityZoneList(obj);
            if (page.num == 1) this.list = [];
            this.list = this.list.concat(info.rows)
            this.mescroll.endBySize(info.rows.length, info.total);
        }
    }
}
</script>

<style lang="scss">

.menu{
    width: 100%; height: 110rpx; background: #fff; box-sizing: border-box; padding: 0 154rpx; display: flex; justify-content: space-between; align-items: center; position: fixed; left: 0; z-index: 11;
    view{
        color: #333; height: 46rpx; line-height: 46rpx; font-size: 32rpx; font-weight: 500;
        &.active{
            color: #00BE69; font-weight: bold; position: relative;
            &::after{ content: ""; width: 30rpx; height: 8rpx; background: #00BE69; border-radius: 12rpx; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12rpx; }
        }
    }
}
.list_waper{
    width: 100%; box-sizing: border-box; padding: 32rpx;
    .list{
        width: 100%; box-sizing: border-box; margin-bottom: 20rpx; padding: 24rpx; padding-left: 314rpx; position: relative; height: 250rpx; border-radius: 10rpx; background: #fff;
        &:last-child{ margin-bottom: 0; }
        .img{
            width: 270rpx; height: 202rpx; position: absolute; left: 24rpx; top: 24rpx;
            image{ border-radius: 10rpx; }
        }
        .info{
            width: 100%; height: 100%; box-sizing: border-box; padding-top: 4rpx;
            .title{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .msg{ margin-top: 12rpx; line-height: 34rpx; color: #666; font-size: 24rpx; height: 68rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
        }
        .from{
            width: 100%; margin-top: 42rpx; height: 34rpx; display: flex; justify-content: space-between; align-items: center;
            .left{ color: #999; font-size: 22rpx; }
            .right{
                display: flex; align-items: center;
                .num{ color: #999; font-size: 24rpx; margin-left: 10rpx; }
            }
        }
    }
}
</style>