xmhjc-applet/pages/home/Information.vue

<template>
    <view class="bg">
        <view class="head">
			<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>
				<!-- <u-search @custom="searchList" placeholder="请输入关键词" v-model="searchword"></u-search> -->
			</view>
			<view class="margintb w750" >
                <view v-if="list1.length>0" class="w700">
                    <u-tabs :current="tabCurrent" :list="list1" @change="tabsChange"></u-tabs>
                </view>
                <view @click="openMuen">
                    <u--image width="40rpx" height="40rpx" src="/static/market/iconx__caidan1.png" ></u--image>
                </view>
			</view>
            <view class="list2">
                <view @click="changeType(index)" 
                    :class="item.plain ?'btnview': 'checkbtnview'" 
                    v-for="(item,index) in list2" :key="index">
                    {{ item.name }}
                </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>
</template>
<script>
import videoList from '@/pages/components/videoList.vue'
import wenzhanList from '@/pages/components/wenzhanList.vue'
import * as util from '@/pages/util/util.js'
import {getMenuListByOpen,getArticleByOpen} from '@/http/api/common.js'
export default {
    components: {
        videoList,
        wenzhanList,
    },
    
data() {
return {
    currentview:'wenzhanList',
    list1:[],
    list2:[],
    tabCurrent:0,
    pageNum:1,
    searchword:'',
    curNowid:'',
    curNowsubid:'',
    jiazaitext:'加载更多',
    newsList:[],
    loadingType:false,
}
},
onReachBottom() {
    this.loadmore()
},
onUnload(){
},
async onLoad() {
    
},
async onShow(){
    let curNowdata = uni.getStorageSync('curNowdata')
    if (curNowdata&&curNowdata!='') {
        curNowdata = JSON.parse(curNowdata)
        this.curNowid = curNowdata?.curNowid || ''
        this.curNowsubid = curNowdata?.curNowsubid || ''
        this.tabCurrent = this.list1.findIndex(v => v.id == this.curNowid) || 0
    }else{
        this.tabCurrent = 0
    }
    await this.initData()
    uni.setStorageSync('curNowdata','')
},
methods: {
    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

            this.list1.push({
                name:'互动天地',
                id:'互动天地',
            })
            
            let defaultData = this.list1[0]//默认选中第一项
            if (this.curNowid!='') {
                console.log('this.curNowid',this.curNowid);
                //如果是从菜单选中跳过来的
                defaultData = this.list1.find(v => v.id == this.curNowid)
                // this.tabCurrent = this.list1.findIndex(v => v.id == this.curNowid) || 0
            }
            this.tabsChange(defaultData)
        }
    },
    //tab第一级页签选择
    tabsChange(e) {
        console.log('22222',e);
        if (e && e?.index) {
            this.tabCurrent = e.index
        }else{
            if (this.curNowid!='') {
                this.tabCurrent = this.list1.findIndex(v => v.id == this.curNowid) || 0
            }
        }
        if (e.id == '互动天地') {
            let curNowdata = {
                curNowid :this.curNowid,
                curNowsubid :this.curNowsubid
            }
            uni.setStorageSync('curNowdata',JSON.stringify(curNowdata));


            uni.navigateTo({
                url: '/pages/home/exchange'
            });
            return
        }

        //当前选中的id 存下来
        this.curNowid = e.id

        //切页签置空搜索
        this.searchword = ''

        if (e && e?.columnMenuSubList) {
            this.list2 = e.columnMenuSubList.map(v => {
                return {
                    plain:true,
                    ...v
                }
            })
            let defaultData = 0//默认选中第一项
            if (this.curNowsubid!='') {
                //如果是从菜单选中跳过来的
                defaultData = this.list2.findIndex(v => v.id == this.curNowsubid)
            }
            //默认获取第一项分类数据
            this.changeType(defaultData<0?0:defaultData)
        }else{
            util.toastFunc('获取分类失败')
        }
    },
    //第二级 子页签选择
    async changeType(index) {
        this.list2.forEach(item => {
            item.plain = true
        });

        this.list2[index].plain = false
        //当前选中的子页签id 存下来
        this.curNowsubid = this.list2[index].id
        if (this.list2[index].name == '视频资讯') {
            this.currentview = 'videoList'
        }else{
            this.currentview = 'wenzhanList'
        }
        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        //获取页签
        await this.getArticleList()
    },
    async getArticleList(){
        if (this.loadingType) {
            //加载中禁止重复加载
            return
        }
        this.loadingType=true
        let data = {
            subId:this.curNowsubid,
            pageNum:this.pageNum,
            titleLike:this.searchword,
            pageSize:10,
        }
        let res = await getArticleByOpen(data)
        if (res.data.code == 200) {
            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()
        }
    },
    openMuen(){
        let curNowdata = {
            curNowid :this.curNowid,
            curNowsubid :this.curNowsubid
        }
        uni.setStorageSync('curNowdata',JSON.stringify(curNowdata) );
        uni.navigateTo({
            url: '/pages/home/allview?curNowid='+this.curNowid+'&curNowsubid='+this.curNowsubid
        });
    }
}
}
</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: 340rpx;
    margin-bottom: 32rpx;
}
.u-notice-bar{
    width: 90vw;
    margin: 0 auto;
}
.u-search{
    width: 702rpx;
    margin: 0 auto;
}
.margintb{
    margin: 16rpx 0;
    display: flex;
    align-items: center;
}
.list2{
    display: flex;
    justify-content: flex-start;
    width: 90vw;
    overflow-x: auto;  
    scroll-snap-type: x mandatory;  
    scroll-padding: 50rpx; /* 为滚动容器提供内边距，确保内容不会紧贴边缘 */ 
}


.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}
.box{
    display: flex;
    margin: 20rpx auto;
    justify-content: flex-start;
    width: 90vw;
    height: 160rpx;
}
.box_img{
    width: 224rpx;
    height: 150rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.box_title{
    width: 454rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.box_type{
    display: flex;
    justify-content: space-between;

    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}


.checkbtnview{
    width: 160rpx;
    height: 64rpx;
    background: #DEEEFC;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #46A6FF;
    line-height: 64rpx;
    text-align: center;
    
    margin-right: 20rpx;
    flex: 0 0 auto;
    scroll-snap-align: start;

}
.btnview{
    width: 160rpx;
    height: 64rpx;
    background: #F1F1F1;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    line-height: 64rpx;
    text-align: center;
    margin-right: 20rpx;
    flex: 0 0 auto;
    scroll-snap-align: start;

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