zhishifufei_uniapp/pages/index/unified_list.vue

<template>
    
    <BaseContainer>
        <NavBar :title="title" />
        <view class="course-list index" id="app" v-cloak ref="index" style="-webkit-overflow-scrolling: touch;">
            <!--幻灯片-->
            <view v-if="swiperlist.length" class="header slider-banner">
                <swiper class="swiper-wrapper">
                    <swiper-item v-for="(swiper,index) in swiperlist" :key="swiper.id" class="swiper-slide">
                        <navigator :url="swiper.url" hover-class="none">
                            <image :src="swiper.pic" mode="aspectFill" />
                        </navigator>
                    </swiper-item>
                </swiper>
            </view>
            <view class="nav" v-if="Recommendlist.length">
                <view class="item" :class="where.subject_id==0 ? 'on':''" @click="where.subject_id=0">推荐</view>
                <view class="item" v-for="item in Recommendlist" :class="where.subject_id==item.id ? 'on':''"
                    @click="where.subject_id=item.id">{{item.title}}</view>
            </view>
            <view class="studyCourse" ref="list">
                <!--宫图-->
                <view v-if="where.typesetting==2" class="layout-first">
                    <navigator v-for="(item, index) in updateList" :key="index" class="item" :url="getDetails(item)">
                        <view class="image">
                            <image :src="item.image" class="img" />
                                <view class="label">{{ item.typeName }}</view>
                        </view>
                        <view class="text">
                            <view class="name">{{ item.title }}</view>
                            <view class="label">
                                <template v-for="(itm, idx) in item.label">
                                    <view v-if="idx < 2" :key="idx" class="cell">{{ itm }}</view>
                                </template>
                            </view>
                            <view class="group">
                                <template v-if="where.type==0">
                                    <template v-if="item.is_pink">
                                        <view v-if="item.pink_money <= 0" class="free">免费</view>
                                        <view v-else class="money">¥<text>{{item.pink_money}}</text></view>
                                        <text v-if="!item.is_light && item.type!=4"
                                            class="total">共{{item.count}}节</text>
                                    </template>
                                    <template v-else>
                                        <view v-if="item.money == 0" class="free">免费</view>
                                        <view v-else class="money">¥<text>{{item.money}}</text></view>
                                        <text v-if="!item.is_light && item.type!=4"
                                            class="total">共{{item.count}}节</text>
                                    </template>
                                </template>
                            </view>
                        </view>
                    </navigator>
                </view>
                <!--大图-->

                <view class="swiper-list2 swiper-list3" v-else-if="where.typesetting==1">
                    <navigator class="item acea-row row-between-wrapper" v-for="vo in updateList" :url="getDetails(vo)">
                        <view class="pictrue">
                            <image :src="vo.image" />
                                <view class="label">{{ vo.typeName }}</view>
                        </view>
                        <view class="text-pic acea-row row-column">
                            <view class="name line1" v-text="vo.title"></view>
                            <view class="bottom acea-row row-between-wrapper">
                                <view class="acea-row row-middle">
                                    <view class="num acea-row row-center-wrapper" v-for="(lab,index) in vo.label"
                                        v-if="index < max" v-text="lab"></view>
                                </view>
                                <template v-if="where.type==0">
                                    <template v-if="vo.is_pink">
                                        <view v-if="vo.pink_money <= 0" class="free">免费<text
                                                style="font-size:24rpx;color:#333;margin-left:10rpx"
                                                v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
                                        <view v-else class="money">¥<text>{{vo.pink_money}}</text><text
                                                style="font-size:24rpx;color:#333;margin-left:10rpx"
                                                v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
                                    </template>
                                    <template v-else>
                                        <view v-if="vo.money == 0" class="free">免费<text
                                                style="font-size:24rpx;color:#333;margin-left:10rpx"
                                                v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
                                        <view v-else class="money">¥<text>{{vo.money}}</text><text
                                                style="font-size:24rpx;color:#333;margin-left:10rpx"
                                                v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
                                    </template>
                                </template>
                            </view>
                        </view>
                    </navigator>
                </view>
                <!--小图-->
                <view class="swiper-list2" v-else-if="where.typesetting==3">
                    <navigator class="item acea-row" v-for="vo in updateList" :url="getDetails(vo)">
                        <view class="pictrue">
                            <image :src="vo.image" />
                                <view class="label">{{ vo.typeName }}</view>
                        </view>
                        <view class="text">
                            <view class="name line1" v-text="vo.title">非常语文课</view>
                            <view class="bottom acea-row row-middle">
                                <view class="num" v-for="(lab,index) in vo.label" v-if="index < max" v-text="lab">
                                </view>
                            </view>
                            <view class="group acea-row row-middle">
                                <template v-if="vo.is_pink">
                                    <view v-if="vo.pink_money == 0" class="free">免费</view>
                                    <view v-else class="money">¥<text>{{vo.pink_money}}</text></view>
                                    <text v-if="!vo.is_light && vo.type!=4" class="total">共{{vo.count}}节</text>
                                </template>
                                <template v-else>
                                    <view v-if="vo.money == 0" class="free">免费</view>
                                    <view v-else class="money">¥<text>{{vo.money}}</text></view>
                                    <text v-if="!vo.is_light && vo.type!=4" class="total">共{{vo.count}}节</text>
                                </template>
                            </view>
                        </view>
                    </navigator>
                </view>
                <!--纯图-->
                <view class="list" v-else-if="where.typesetting==4">
                    <navigator class="item" v-for="vo in List" :url="getDetails(vo)" style="display: inherit">
                        <image :src="vo.image" />
                    </navigator>
                </view>
            </view>
            <p class="loading-line" style="background-color: #ffffff">
                <text v-show="loading==true" class="fa fa-spinner loadingpic" style="font-size: 40rpx"></text>
                <text v-if="List.length" v-text="loadTitle">加载更多</text>
            </p>
            <view v-if="loadend && !List.length" class="empty">
                <image :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无课程" />
                    <view>暂无课程</view>
            </view>
        </view>
    </BaseContainer>
</template>

<script>
    import {
        getUnifiedListMa,getUnifiedList
    } from "@/api/index";
    export default {
        data() {
            return {
                where: {
                    type: 0,
                    recommend_id: 0,
                    page: 1,
                    limit: 10,
                    typesetting: 0,
                    subject_id: 0,
                },
                Recommendlist: [],
                swiperlist: [],
                loading: false,
                loadend: false,
                loadTitle: '上拉加载更多',
                List: [],
                max: 2,
                title: ''
            };
        },
        computed: {
            updateList: function () {
                return this.List.map(function (value) {
                    switch (value.type) {
                        case 1:
                            value.typeName = '图文';
                            break;
                        case 2:
                            value.typeName = '音频';
                            break;
                        case 3:
                            value.typeName = '视频';
                            break;
                        case 4:
                            value.typeName = '直播';
                            break;
                        case 5:
                            value.typeName = '专栏';
                            break;
                        default:
                            value.typeName = '其他';
                            break;
                    }
                    return value;
                });
            }
        },

        watch: {
            'where.subject_id': function (n) {
                this.where.page = 1;
                this.loadend = false;
                this.$set(this, 'List', []);
                this.get_unifiend_list();
            }
        },
        mounted: function () {
            //this.get_unifiend_list();
        },
        onLoad({ type, title, recommend_id }) {
            this.where.type = type
            this.where.recommend_id = recommend_id
            this.title = title
            this.get_list_info()
           
        },
        onReachBottom(){
            this.loading == false && this.get_unifiend_list();
        },
        methods: {
            get_list_info() {
                getUnifiedListMa({
                    type: this.where.type,
                    recommend_id: this.where.recommend_id
                }).then(res => {
                    const { type, recommend_id, typesetting, swiperlist, Recommendlist } = res.data
                    Object.assign(this.where, {
                        type,
                        recommend_id,
                        typesetting,
                    })
                    Object.assign(this, {
                        swiperlist,
                        Recommendlist
                    })
                    this.get_unifiend_list()
                }).catch(err => {

                })
            },
            getDetails(vo) {
                if (this.where.type === 1) {
                    return `/pages/article/news_detail?id=${vo.id}`
                }
                return vo.is_light ?`/pages/special/single_details?id=${vo.id}`  :`/pages/special/details?id=${vo.id}`;
            },
            get_unifiend_list() {
                if (this.loading) return;
                if (this.loadend) return;
                this.loadTitle = '';
                this.loading = true;
                uni.showLoading({
                    title: '加载中'
                });
                getUnifiedList(this.where).then(res=>{
                    var list = res.data.list;
                    var List =this.$util.SplitArray(list, this.List);
                    this.loading = false;
                    this.where.page = res.data.page;
                    this.loadend = list.length < this.where.limit;
                    this.loadTitle = this.loadend ? '我是有底线的' : '上拉加载更多';
                    this.$set(this, 'List', List);
                    uni.hideLoading();
                }).catch(err=>{
                    this.loadTitle = '加载更多';
                    this.loading = false;
                })
            }
        },
    };
</script>
<style>
    .course-list.index .swiper-list2 {
        padding-top: 26rpx;
        padding-bottom: 26rpx;
    }

    .course-list.index .swiper-list2 .item {
        padding-right: 20rpx;
        padding-left: 20rpx;
    }

    .course-list.index .swiper-list2 .item~.item {
        margin-top: 26rpx;
    }

    .course-list.index .swiper-list2 .item .pictrue {
        position: relative;
        width: 250rpx;
        height: 140rpx;
        border-radius: .10rpx;
        overflow: hidden;
    }

    .course-list.index .studyCourse .swiper-list3 .pictrue {
        position: relative;
        width: 710rpx;
        height: 380rpx;
        border-radius: .10rpx;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
    }

    .course-list.index .swiper-list2 .item .pictrue image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        -webkit-touch-callout: none;
    }

    .course-list.index .swiper-list2 .item .text {
        position: relative;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        margin-left: 20rpx;
    }

    .course-list.index .swiper-list2 .item .name {
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333;
    }

    .course-list.index .swiper-list2 .item .bottom {
        margin-top: .10rpx;
        flex: 1;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .course-list.index .swiper-list2 .item .bottom>.acea-row {
        flex: 1;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .course-list.index .swiper-list2 .item .bottom .num {
        flex-shrink: 0;
        height: 40rpx;
        padding-right: 12rpx;
        padding-left: 12rpx;
        border-radius: 3rpx;
        background-color: rgba(44, 142, 255, .06);
        font-weight: 400;
        font-size: 24rpx;
        line-height: 40rpx;
        color: #2c8eff;
    }

    .course-list.index .swiper-list2 .item .bottom .num~.num {
        margin-left: 14rpx;
    }

    .course-list.index .swiper-list2 .item .group {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .course-list.index .swiper-list2 .item .free {
        font-weight: 400;
        font-size: 24rpx;
        color: #FF6B00;
    }

    .course-list.index .swiper-list2 .item .money {
        font-weight: 500;
        font-size: 24rpx;
        color: #FF6B00;
    }

    .course-list.index .swiper-list2 .item .money text {
        font-size: 32rpx;
        line-height: 45rpx;
    }

    .course-list.index .swiper-list2 .item .total {
        margin-left: .10rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
    }

    .layout-first {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 29rpx 20rpx;
    }

    .layout-first .item {
        width: 345rpx;
        margin-top: 29rpx;
    }

    .layout-first .item:nth-child(-n+2) {
        margin-top: 0;
    }

    .layout-first .item .image {
        position: relative;
        height: 192rpx;
        border-radius: .10rpx;
        overflow: hidden;
    }

    .layout-first .item .image .img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .layout-first .item .text {
        position: relative;
        height: 161rpx;
        padding-top: 14rpx;
    }

    .layout-first .item .text .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333;
    }

    .layout-first .item .text .label {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        margin-top: 12rpx;
        overflow: hidden;
    }

    .layout-first .item .text .label .cell {
        flex-shrink: 0;
        height: 40rpx;
        padding-right: 12rpx;
        padding-left: 12rpx;
        border-radius: 10rpx;
        background-color: rgba(44, 142, 255, .06);
        font-weight: 400;
        font-size: 20rpx;
        line-height: 40rpx;
        color: #2c8eff;
    }

    .layout-first .item .text .label .cell~.cell {
        margin-left: 14rpx;
    }

    .layout-first .item .text .group {
        position: absolute;
        bottom: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 100%;
    }

    .layout-first .item .text .group .money {
        font-weight: 500;
        font-size: 24rpx;
        color: #FF6B00;
    }

    .layout-first .item .text .group .money text {
        font-size: 32rpx;
        line-height: 45rpx;
    }

    .layout-first .item .text .group .free {
        font-weight: 400;
        font-size: 24rpx;
        line-height: 45rpx;
        color: #FF6B00;
    }

    .layout-first .item .text .group .total {
        margin-left: 10rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #999999;
    }

    .empty {
        margin-top: 100rpx;
        font-size: 28rpx;
        text-align: center;
        color: #bbb;
    }

    .empty image {
        display: block;
        width: 414rpx;
        height: 305rpx;
        margin: 0 auto;
    }

    .layout-first .item .image .label {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        padding-right: 11rpx;
        padding-left: 11rpx;
        border-radius: 3rpx;
        background-color: rgba(0, 0, 0, .5);
        font-size: 22rpx;
        line-height: 34rpx;
        color: #ffffff;
    }
</style>