xmhjc-applet/pages/home/exchange.vue

<template>
    <view class="bg">
        <!-- 互动天地 -->
        <view class="head">
            <view v-if="list1.length>0" class="margintb">
                <u-tabs :current="tabCurrent" :list="list1" @click="tabsChange"></u-tabs>
            </view>
            <view class="search" style="margin-top: 10rpx;background: #F6F6F6;">
				<u-search bgColor='#F6F6F6' placeholder="请输入关键词" 
                :showAction='false'
                @custom="searchList"  v-model="searchword"></u-search>
                <view @click="searchList" class="searchBtn">搜索</view>
			</view>
		</view>

        <view>
            <exchangeItem :info="info" ></exchangeItem>
        </view>

        <view class="plbox">
            <view class="pl">{{total + ' '}}条互动</view>
            <view class="pl">{{mytotal + ' '}}我参与的</view>
            <view class="subsection" >
                <view :class="curNow==0?'checksub':'nocheck'" @click="sectionChange(0)">最新</view>
                <view :class="curNow==1?'checksub':'nocheck'" @click="sectionChange(1)">热门</view>

            </view>
        </view>

        <videoList v-if="currentview == 'videoList'" :listdata="newsList"></videoList>
        <wenzhanList v-if="currentview == 'wenzhanList'" :listdata="newsList"></wenzhanList>

        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
        <view style="height:100rpx"></view>
    </view>
</template>
<script>
import exchangeItem from '@/pages/components/exchange-item.vue'
import videoList from '@/pages/components/videoList.vue'
import wenzhanList from '@/pages/components/wenzhanList.vue'
import * as util from '@/pages/util/util.js'
import {moduleBySeven,getMenuListByOpen,joinCountByMe,contentPage} from '@/http/api/common.js'
export default {
    components: {
        videoList,
        exchangeItem,
        wenzhanList
    },
    
data() {
return {
    info:[],
    currentview:'wenzhanList',
    list1:[],
    list2:[],
    tabCurrent:0,
    pageNum:1,
    searchword:'',
    curNowid:'',
    curNowsubid:'',
    jiazaitext:'加载更多',
    newsList:[],
    num:999,
    curNow:0,
    total:0,
    mytotal:0,
    subsectionlist: [
        {
            name: '热门'
        },
        {
            name: '最新'
        } 
    ],
    loadingType:false,
}
},
onReachBottom() {
    this.loadmore()
},
onLoad(e) {
   this.getmoduleBySeven()
   this.initData()

},
methods: {
     sectionChange(index) {
        console.log(index);
        this.curNow = index;

        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []
        this.getArticleList()
    },
     async getmoduleBySeven(){
        //获取模块7
        let res = await moduleBySeven()
        if (res.data.code == 200) {
            this.info = res.data.data.contentVoList

        }
    },
    async searchList(){
        // if (this.searchword == '') {
        //     return
        // }
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        //获取页签
        await this.getArticleList()
    },
     async initData(){
        //获取文章分类和数据
        let res = await getMenuListByOpen()
        if (res.data.code == 200 ) {
            this.list1 = res.data.data

            let defaultData = this.list1[0]//默认选中第一项
            if (this.curNowid!='') {
                //如果是从菜单选中跳过来的
                defaultData = this.list1.find(v => v.id == this.curNowid)
                this.tabCurrent = this.list1.findIndex(v => v.id == this.curNowid)
            }

            this.tabsChange(defaultData)
        }
    },
     //tab第一级页签选择
    tabsChange(e) {
        //当前选中的id 存下来
        this.curNowid = e.id

        //切页签置空搜索
        this.searchword = ''
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        if (e && e?.columnMenuSubList) {
            this.list2 = e.columnMenuSubList.map(v => {
                return {
                    plain:true,
                    ...v
                }
            })

            if (this.list2[0].name == '视频资讯') {
                this.currentview = 'videoList'
            }else{
                this.currentview = 'wenzhanList'
            }

            //直接获取模块列表
            this.getArticleList()
        }else{
            util.toastFunc('获取分类失败')
        }
    },
    
    async getArticleList(){
        if (this.loadingType) {
            //加载中禁止重复加载
            return
        }
        this.loadingType=true
        let data = {
            columnId:this.curNowid,
            pageNum:this.pageNum,
            titleLike:this.searchword,
            pageSize:10,
        }
        // 1=热门回答；2=最新回答；3=带解答？暂时改成我的提问
        let res = await contentPage(data,this.curNow==0?'2':'1')
        if (res.data.code == 200) {
            //总条数
            this.total = res.data.data?.total 
            // 我参与的
            if (uni.getStorageSync('AppAuthorization')) {
                let res2 = await joinCountByMe()
                this.mytotal = res2?.data?.data || 0

            }
            let newrows = res.data.data?.rows || []

            this.newsList.push(...newrows)
            
            if(this.newsList.length!=res.data.data.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
        this.loadingType=false
    },
    //加载更多
    loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.jiazaitext=="加载更多") {
            this.pageNum=this.pageNum+1
            this.jiazaitext="加载中..."
            this.getArticleList()
        }
    },
}
}
</script>

<style>
.bg{
    background-color: #F6F6F6;
    width: 100vw;
    height: 100vh;
}
.head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    opacity: 1;
    height: 240rpx;
}
.u-notice-bar{
    width: 90vw;
    margin: 0 auto;
}
.u-search{
    width: 90vw;
}
.margintb{
    margin: 16rpx 0;
}
.list2{
    display: flex;
    justify-content: space-around;
    width: 90vw;
}


.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}

.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}

.plbox{
    width: 750rpx;
    background: #FFF;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 24rpx;
}
.pl{
    width: 170rpx;
    height: 45rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666;
    line-height: 36rpx;
}
</style>