changshu_other/pages/my/myActivity/index.vue

<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
            <view class="body_content">
                <view class="tab_con2 d_flex j_between a_center">
                    <view v-for="(item, index) in tabs" :key="index" v-text="item.title" class="tab_nav" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)"></view>
                </view>
                <view class="activity_list">
                    <navigator hover-class="none" url="" class="activity_nav" v-for="(item, index) in items" :key="index">
                        <view class="activity_nav_img">
                            <image class="img" :src="item.imgurl"></image>
                            <image v-if="item.isActivity == 1" class="activity_icon" src="/static/activity_icon1.png"></image>
                            <image v-else class="activity_icon" src="/static/activity_icon2.png"></image>
                        </view>
                        <view class="activity_nav_content">
                            <view class="activity_nav_title two_hidden" v-text="item.cgname"></view>
                            <view class="activity_nav_subtitle text_hidden" v-text="item.content2"></view>
                            <view class="activity_nav_time" v-text="item.startDate + ' - ' + item.endDate"></view>
                            <view class="activity_nav_label d_flex" v-if="item.dyw.length>0">
                                <view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.dyw" :key="index2" v-text="item2" v-if="index2<3"></view>
                            </view>
                        </view>
                    </navigator>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
    mixins: [MescrollMixin],
    components: {},
    data() {
        return {
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: true, //是否启用上拉加载更多
                auto: true //是否自动加载
            },
            tabIndex: 0,
            tabs: [
                {
                    title: '审核中'
                },
                {
                    title: '已入选'
                },
                {
                    title: '未入选'
                }
            ],
            items: []
        };
    },
    onLoad(options) {
        let that = this;
        that.tabIndex = options.tabIndex || 0;
    },
    onReady() {},
    onShow() {},
    methods: {
        tabClick(e) {
            this.tabIndex = e;
            this.mescroll.resetUpScroll();
        },
        getData(mescroll) {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getMyHD',
                page: mescroll.num,
                pagesize: mescroll.size,
                issh:that.tabIndex
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item,index){
                    item.imgurl = that.baseImgUrl + item.imgurl;
                    if(!item.dyw){
                        item.dyw = [];
                    }else{
                        item.dyw = item.dyw.split("|");
                    }
                    if(new Date() > that.$util.strDateFormat(item.endDate)){
                        item.isActivity = 0;
                    }else{
                        item.isActivity = 1;
                    }
                    item.startDate = that.$util.strDateFormat(item.startDate,"yyyy.MM.dd");
                    item.endDate = that.$util.strDateFormat(item.endDate,"yyyy.MM.dd");
                    
                })
                if (mescroll.num == 1) {
                    that.items = body;
                } else {
                    that.items = that.items.concat(body);
                }
                mescroll.endSuccess(body.length);
            })
            .catch(err => {
                that.$util.showToast('网络错误，稍后重试');
                mescroll.endErr();
                console.log('request fail', err);
            });
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        downCallback(mescroll) {
            setTimeout(function() {
                mescroll.endSuccess(0);
            }, 600);
        }
    },
    onShareTimeline(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            query: ''
        };
    },
    onShareAppMessage(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            path: ''
        };
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #fff;
}
.tab_con2 {
    padding: 0 30upx;
    position: fixed;
    width: calc(100% - 60upx);
    left: 0;
    top: 0;
    z-index: 1000;
    background: #fff;
    height: 70upx;
    line-height: 70upx;
}
.tab_con2 .tab_nav {
    color: #999;
    font-size: 30upx;
    position: relative;
}
.tab_con2 .tab_nav::after {
    width: 40upx;
    height: 4upx;
    background: #fff;
    border-radius: 10upx;
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -20upx;
    bottom: 0;
}
.tab_con2 .tab_nav.on::after {
    background: #ffb155;
}
/*活动列表*/
.activity_list {
    width: 100%;
    overflow: hidden;
    padding-top: 70upx;
}
.activity_nav {
    border-radius: 20upx;
    box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
    height: 224upx;
    margin: 0 30upx 50upx 30upx;
    position: relative;
    z-index: 10;
}
.activity_nav:first-child {
    margin-top: 50upx;
}
.activity_nav .activity_nav_img {
    width: 302upx;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
    float: left;
    position: relative;
}
.activity_nav .activity_nav_img .img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
}
.activity_nav .activity_nav_img .activity_icon {
    position: absolute;
    width: 94upx;
    height: 42upx;
    left: 20upx;
    top: -20upx;
    z-index: 10;
}
.activity_nav .activity_nav_content {
    width: calc(100% - 338upx);
    margin-left: 20upx;
    float: left;
    padding-right: 16upx;
}
.activity_nav .activity_nav_title {
    font-size: 30upx;
    color: #3c3d3b;
    margin-top: 10upx;
    line-height: 40upx;
}
.activity_nav .activity_nav_subtitle {
    color: #767676;
    font-size: 24upx;
    margin-top: 8upx;
    margin-bottom: 8upx;
}
.activity_nav .activity_nav_time {
    color: #767676;
    font-size: 24upx;
}
.activity_nav .activity_nav_label {
    margin-top: 10upx;
}
.activity_nav .activity_nav_label_txt {
    padding: 0 10upx;
    height: 34upx;
    line-height: 34upx;
    text-align: center;
    font-size: 24upx;
    color: #fff;
    margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label1 {
    background: #f27491;
    margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label2 {
    background: #eaa24e;
}

.activity_nav .activity_nav_label_txt:last-child{
    margin-right: 0;
}
</style>