deming/pageB/details/index.vue

<template>
    <view class="details">
        <view style="border-top: 1rpx solid #ececec;"></view>
        <userinfo :list="userInfo"></userinfo>
        <view style="border-top: 20rpx solid #ececec;"></view>
        <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':'#FF780F'
            }"
            :bold="false"
            @change="dianji"
            :show-bar="false">
        </u-tabs>
        <scroll-view class="scroll-box" scroll-y="true">
            <view class="box">
            	<videoItem v-for="item in listInfo" :key="item.article_id" :item="item"
            	 @getArticlelist="getArticlelist"></videoItem>
                 <view class="no-data" v-show="!listInfo && !page">暂无数据</view>
            </view>
        </scroll-view>
    </view>
</template>
<style lang="scss" scoped>
.details{
      .card{
        height: 100vh;
        width: 100%;
        .box{
            width: 100%;
            padding: 0 30rpx;
        }
        .list{
            display: flex;
        }
    }
    .scroll-box {
        // display: flex;
        padding: 20rpx;
        box-sizing: border-box;
        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .no-data {
                margin: 100rpx auto 0;
            }
        }
    }
}
</style>
<script>
import userinfo from "../components/details/userinfo"
import videoItem from "@/components/index/video-item/index"
export default {
    // name:"details",
    components:{
       userinfo,
       videoItem
    },
    data(){
        return {
            list:[
                {
					name: '图文'
				}, {
					name: '短视频'
				}
            ],
            num: 0,
            userInfo: {}, // 用户信息
            listInfo: [], // 列表详情
            member_id: 0,
            page: 0,
        }
    },
    onLoad(option) {
        // console.log(option);
        this.member_id = option.id;
        this.getUserInfo(option.id);
        this.getArticlelist();
    },
    methods:{
        // 获取信息
        getUserInfo(id) {
            this.$u.post("MemberExpert/expertInfo",{member_id: id}).then(res => {
                // console.log(res);
                this.userInfo = res.data.info;
                // console.log(this.userInfo);
            })
        },
        // 获取列表
        getArticlelist() {
            this.$u.api.getArticlelist({
                page: this.page,
                is_video_img: this.num + 1,
                member_id: this.member_id,
            }).then(res => {
                if (res.errCode == 0) {
                    // console.log(res);
                    this.listInfo = res.data.list;
                    // console.log(this.listInfo);
                } else {
                    console.log(res.message);
                }
            })
        },
        dianji(a){
            console.log(a);
            if(typeof a == "object"){
                this.num = a.detail.current
            }else{
                this.num = a
            }
            this.getArticlelist();
        }
    }
}
</script>