xmhjc-applet/pages/home/exchangeNew.vue

<template>
    <!-- 互动问答 -->
    <view class="bg">
        <view class="head">
            <view v-if="!showType" 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 v-if="showType" class="margintb tabwiew" >
                <u-tabs keyName='subIdName' @click="clicktabs" :list="list1"></u-tabs>
            </view>
		</view>


        <view class="wdbox" v-for="item in newsList" :key="item.id">
            <view class="wdflex">
                <view class="wen">问</view>
                <view class="wen_text">{{ item.content }}</view>
            </view>
            <view class="wdflex">
                <view class="wen" style="background: #ff8c33">答</view>
                <view class="wen_text" style="font-weight: 700;color: #666666;">{{ item.contentByLast || '暂无回答' }}</view>
            </view>
            <view class="wdflex" @click="openDetails(item)">
                <view class="wen_num">全部{{item.num}}个回答></view> 
            </view>
        </view>
    
        <view class="submitbtn" @click="openAskingQuestions">
            我也要提问
        </view>
        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
        <view style="height:100rpx"></view>
    </view>
</template>
<script>
import * as util from '@/pages/util/util.js'
import {getContentPage} from '@/http/api/common.js'
export default {
    components: {

    },
    
data() {
return {
    newsList:[],
    pageNum:1,
    num:0,
    searchword:'',
    jiazaitext:'加载更多',
    loadingType:false,
    showType:false,
    listType:'',
    list1:[
        {
            subIdName: '我的提问',
            key:'1'
        },
        {
            subIdName: '我的回复',
            key:'2'
        },
        {
            subIdName: '我的关注',
            key:'3'
        },
        {
            subIdName: '我的点赞',
            key:'4'
        }
    ],
}
},
onReachBottom() {
    this.loadmore()
},
onLoad(e) {
   console.log(e.showType);
   if (e?.showType == 'mywenda') {
        this.showType = true
        this.listType = '1'
   }
},
onShow(){
    
    this.pageNum = 1
    this.newsList = []
    this.initData()
},
methods: {
    async clicktabs(item){
        console.log(item.key);
        this.listType = item.key

        //每次切换页签初始化请求页签
        this.pageNum = 1
        this.newsList = []

        await this.initData()
    },
    openDetails(e){
        uni.navigateTo({ 
            url: '/pages/home/exchangeDetails?id='+e.id
        })
    },
    openAskingQuestions(e){
        uni.navigateTo({ 
            url: '/pages/home/AskingQuestions'
        })
    },

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

        await this.initData()
    },
     async initData(){
        //获取互动问答列表

        let data = {
            pageNum:this.pageNum,
            pageSize:10,
            listType:this.listType
        }
        let res = await getContentPage(data,2)
        if (res.data.code == 200 ) {
            let newrows = res.data.data.rows || []

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

<style>
.bg{
    background-color: #F6F6F6;
    width: 100vw;
    min-height: 100vh;
}
.head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    opacity: 1;
    height: 120rpx;
}
.u-search{
    width: 90vw;
}

.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}
.wdbox{
    width: 660rpx;
    min-height: 240rpx;
    background: #ffffff;
    margin: 26rpx;
    padding: 20rpx;
}
.wen{
    width: 40rpx;
    height: 40rpx;
    background: #0084ff;
    border-radius: 8rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 40rpx;
    color: #fff;
}
.wen_text{
    margin-left: 16rpx;
    width: 590rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.wen_num{
    margin-left: 56rpx;
    width: 590rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #0084ff;
}
.wdflex{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 24rpx;
}
.submitbtn{
    width: 700rpx;
    height: 80rpx;
    background: #46a6ff;
    border-radius: 40rpx;

    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #ffffff;
    line-height: 80rpx;

    position: fixed;
    bottom: 10rpx;
    left: 26rpx;
}
</style>