deming/pages/index/index.vue

<template>
    <view class="index">
        <view class="top">
            <view class="sosuo"></view>
            <view class="tabs">
                <u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
                    'background-color':'#FF780F',
                    'bottom':'10rpx'
                }"
                inactive-color="#333"
                :active-item-style="{
                    'color':'#333'
                }"
                :bold="false"
                @change="dianji"></u-tabs>
            </view>
            <view class="sosuo"></view>
        </view>
        <swiper class="card" @change="dianji" :current="num">
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <!-- <indexad style="width:690rpx"></indexad> -->
						<u-swiper mode="dot" :list="indexImageSwiper" name="adv_code"></u-swiper>
                        <view class="list">
                            <view >
                                <videoItem v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
                            </view>
                            <view style="margin-left:20rpx">
                                <videoItem v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <u-swiper mode="dot" :list="zhiboImageSwiper" name="adv_code"></u-swiper>
                        <view class="list">
                            <view >
                                <zhiboItem v-for="item in 10"></zhiboItem>
                            </view>
                            <view style="margin-left:20rpx">
                                <zhiboItem v-for="item in 10"></zhiboItem>
                            </view>
                        </view>
                    </view>
                    
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view style="width:100%;height:100%" scroll-y="true">
                    <view class="box">
                        <view class="tuijian">
                            <view class="title" @click="toSearchPage">
                                <view class="left">
                                    <view></view>
                                    <text>推荐达人</text>
                                </view>
                                <image class="right" src="/static/image/common/1.png"></image>
                            </view>
                            <view class="tuijianlist">
                                <!-- <darenItem style="margin-right:23rpx"></darenItem>
                                <darenItem style="margin-right:23rpx"></darenItem> -->
                                <darenItem v-for="item in recommendList.slice(0,3)" :key="item.id" :info="item"></darenItem>
                            </view>
                        </view>
                        <view class="list">
                            <view >
                                <!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
								<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => !(index&1))" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
                            </view>
                            <view style="margin-left:20rpx">
                                <!-- <videoItem isguanzhu="true" v-for="item in 10"></videoItem> -->
								<videoItem isguanzhu="true" v-for="item in articleList.filter((_, index) => index&1)" :key="item.article_id" :item="item" @getArticlelist="getArticlelist"></videoItem>
                            </view>
                        </view>
                    </view>
                    
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>

</template>
<style lang="scss" scoped>
.index{
    width: 750rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;
    .top{
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 88rpx;
        align-items: center;
        flex-shrink: 0;
        .sosuo{
            width: 32rpx;
            height: 32rpx;

        }
        .tabs{
            width: 334rpx;
            /deep/ .u-tab-item{
                font-weight: bold;
            }
        }
    }
    .card{
        height: 100%;
        width: 100%;
        .box{
            width: 100%;
            padding: 0 30rpx;
        }
        .list{
            display: flex;
        }
    }
    .tuijian{
        width: 750rpx;
        margin-left: -30rpx;
        height: 400rpx;
        background-color: #ececec;
        padding: 30rpx;
        .title{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                >view{
                    width: 6rpx;
                    height: 30rpx;
                    background-color: #FF780F;
                }
                >text{
                    font-size: 30rpx;
                    color: 30rpx;
                    margin-left: 14rpx;
                }
            }
            .right{
                width: 14rpx;
                height: 24rpx;
            }
        }
        .tuijianlist{
            width: 100%;
            height: 282rpx;
            margin-top: 30rpx;
            display: flex;
			> view:not(:last-child) {
				margin-right: 23rpx;
			}
        }
    }
}
</style>
<script>
import videoItem from "@/components/index/video-item/index" 
import zhiboItem from "@/components/index/zhibo-item/index" 
import indexad from "@/components/index/ad/index" 
import darenItem from "@/components/index/daren-item/index" 

export default {
    name:"index",
    data(){
        return {
            list:[
                {
					name: '发现'
				}, {
					name: '直播'
				}, {
					name: '关注'
				}
            ],
			num:0,
			page: 0, // 0即第一页
			articleList: [],
			recommendList: [], // 推荐达人
			indexImageSwiper: [],
			zhiboImageSwiper: [],
        }
    },
    components:{
        videoItem,
        zhiboItem,
        indexad,
        darenItem
    },
    onShow(){
	   this.getArticlelist();
	   this.getRecommendList();
	   this.getSwiper();
	   this.getZhiBoSwiper();
    },
    methods:{
		getSwiper() {
			this.$u.api.getIndexSwiper().then(res => {
				if(res.errCode == 0) {
					this.indexImageSwiper = res.data;
				}
			})
		},
		getZhiBoSwiper() {
			this.$u.api.getZhiBoSwiper().then(res => {
				if(res.errCode == 0) {
					this.zhiboImageSwiper = res.data;
				}
			})
		},
        dianji(a){
            // console.log(a)
            if(typeof a == "object"){
                this.num = a.detail.current
            }else{
                this.num = a
            }
		},
		getArticlelist () {
			this.$u.api.getArticlelist({
				page: this.page,
				is_video_img: 0, // 查询视频1 图文2 都查0
			}).then(res => {
				if(res.errCode == 0) {
					this.articleList = res.data.list;
				}
			})
		},
		getRecommendList() {
			this.$u.api.getRecommendList().then(res => {
                console.log(res)
				if(res.errCode == 0) {
					this.recommendList = res.data.list;
				}
			})
		},
		toSearchPage() {
			uni.navigateTo({
				url: '/pageB/follow/index'
			})
		},
    },
}
</script>