changshu_other/pages/tab/index/index.vue

<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" :up="upOption" :down="downOption">
            <view class="body_content">
                <view class="changguan_list">
                    <navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.BsId" class="changguan_nav" v-for="(item,index) in items" :key="index">
                        <view class="changguan_nav_img">
                            <image class="img" :src="item.ImgUrl"></image>
                        </view>
                        <view class="changguan_nav_content">
                            <view class="changguan_nav_title font_bold text_hidden" v-text="item.Title"></view>
                            <view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
                            <view class="changguan_nav_label d_flex">
                                <view v-for="(item2,index2) in item.Source" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></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: true, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: true, //是否启用上拉加载更多
                auto: true //是否自动加载
            },
            items:[]
        };
    },
    onLoad(options) {
        let that = this;
    },
    onReady() {
        
    },
    onShow() {
         
    },
    methods: {
        getData(mescroll){
            let that = this;
            that.$doPost('Server.aspx', {
                mod:"getCSlist",
                page:mescroll.num,
                pagesize:mescroll.size
            })
            .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.Source){
                        item.Source = item.Source.split("|");
                    }
                })
                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);
            });
        },
        downCallback(mescroll) {
            this.mescroll.resetUpScroll();
        }
    },
    onShareTimeline(res) {
        return {
            title: '场馆列表',
            imageUrl: '',
            query: ''
        };
    },
    onShareAppMessage(res) {
        return {
            title: '场馆列表',
            imageUrl: '',
            path: ''
        };
    }
};
</script>

<style lang="scss">
    page,.body{
        background: #fff;
    }
   /*场馆列表*/
    .changguan_list{
        width: 100%;
        overflow: hidden;
    }
    .changguan_nav{
        border-radius: 20upx;
        box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
        height: 183upx;
        margin: 0 30upx 50upx 30upx;
        position: relative;
        z-index: 10;
    }
    .changguan_nav:first-child{
        margin-top: 50upx;
    }
    .changguan_nav .changguan_nav_img{
        width: 302upx;
        height: 100%;
        border-top-left-radius: 20upx;
        border-bottom-left-radius: 20upx;
        float: left;
        position: relative;
    }
    .changguan_nav .changguan_nav_img .img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 20upx;
        border-bottom-left-radius: 20upx;
    }
    .changguan_nav .changguan_nav_content{
        width: calc(100% - 338upx);
        margin-left: 20upx;
        float: left;
        padding-right: 16upx;
    }
    .changguan_nav .changguan_nav_title{
        font-size: 30upx;
        color:#3c3d3b;
        margin-top: 18upx;
        line-height: 40upx;
    }
    .changguan_nav .changguan_nav_subtitle{
        color:#767676;
        font-size: 24upx;
        margin-top: 18upx;
        margin-bottom: 18upx;
    }
    .changguan_nav .changguan_nav_label{
        
    }
    .changguan_nav .changguan_nav_label_txt{
        padding:0 10upx;
        height: 34upx;
        line-height: 34upx;
        text-align: center;
        font-size: 24upx;
        color:#fff;
    }
    .changguan_nav .changguan_nav_label_txt.label1{
        background: #fdf6e5;
        color:#f4bd67;
        margin-right: 20upx;
    }
    .changguan_nav .changguan_nav_label_txt.label2{
        background: #f2fcfe;
        color:#80a9f4;
        margin-right: 20upx;
    }
    .changguan_nav .changguan_nav_label_txt.label3{
        background: #f3f5f8;
        color:#9f9d9d;
    }
</style>