<template> <view class="question-wrap"> <template v-if="hasAuth"> <view class="question-top" :class="{'noAuth':!(isUserResearcher||userInfo.status&&userAuth)}"> <view @click="showPopup" v-if="isUserResearcher||userInfo.status&&userAuth" style="display:flex;align-items: center;margin-left:30rpx;"> <image src="../../static/question/select.png" mode="widthFix" class="menu-icon"/> <text style="color:#E3B377;font-size:28rpx;">筛选</text> </view> <van-popup :show="isPopupShow" position="left" :close-on-click-overlay="true" @close="isPopupShow = false" custom-style="height: 100%;width:50%;" @touchmove.stop.prevent> <view class="pop-wrap"> <view class="pop-option-list"> <van-collapse :value="activeName" @change="changeSelecOption" accordion :border="false"> <van-collapse-item :border="false" :title="item.research_group_name" :name="index" v-for="(item, index) in optionList" :key="index"> <view class="option-btn-wrap"> <view class="option-btn" v-for=" i in item.children" :key="i.research_group_id" @click="handleOptionClick(i)" :class="{'active':selectName===i.research_group_name,'full':i.research_group_name.length>4}" > {{ i.research_group_name }} </view> </view> </van-collapse-item> </van-collapse> </view> </view> </van-popup> </view> <view class="report-empty-box" v-if="questionList.length==0"> <image :src="globalImgUrls.activityNoAuth" mode="widthFix" style="width:100%;"/> <view>暂无提问<text v-if="userInfo.is_inner!==1">,快试试提问功能吧</text></view> </view> <view class="question-list" :class="{'last':finished}"> <view class="question-item" v-for="item in questionList" :key="item.community_question_id"> <text class="item-time">提问时间:{{ item.create_time }}</text> <view class="question-info"> <view style="flex:1;" class="question-title"> <text class="item-label">{{item.research_group_second_name}}</text> <!-- <text class="item-title"> -->{{ item.question_content }}<!-- </text> --> </view> <view class="item-answer"> <view class="answer" @click="handleAudio(item)"> <template v-if="!item.loading"> <image class="music-img" :src="item.answer.isplay?playImgSrc:pauseImgSrc" mode="widthFix"/> <template v-if="item.answer.isplay || item.answer.ispause"> <text>{{ item.answer.audioTime - currentAudioMsg.audioCurrentTime>0? moment(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss') :'00:00'}} </text> </template> <template v-else> <text>{{ moment(item.answer.audioTime).format('mm:ss') }}</text> </template> </template> <template v-else> <image class="load-img" src="../../static/loading.png" mode="aspectFill" /> <text>{{ moment(item.answer.audioTime).format('mm:ss') }}</text> </template> </view> </view> </view> <!-- 评论区域 --> <questionComment :item="item" @show_comment="showCommentHandle"/> </view> </view> <view class="topage-btn" @click="toPage" v-if="isUserResearcher||userInfo.status&&userAuth"> <image v-if="!isUserResearcher" src="../../static/question/askquestion.png" mode="scaleToFill" style="width:34rpx;height:34rpx;" /> {{ isUserResearcher ? '待回答' : '我要提问' }} <text v-if="isUserResearcher" style="margin-left:5rpx;">{{'('+waitNum+')'}}</text> </view> </template> <!-- 没有权限 --> <template v-else> <view class="noAuth-wrap"> <image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image> <view class="auth-text">您暂无权限查看问答社区</view> <view class="auth-text" v-if="noAuthInfo.type==='contact'">若想查看可以联系对口销售</view> <view class="auth-text" v-else>若想查看可以申请开通</view> <view class="auth-text" v-if="noAuthInfo.type==='contact'"> {{noAuthInfo.name||''}}:<text @click="handleCallPhone(noAuthInfo.mobile+'')">{{noAuthInfo.mobile||''}}</text> </view> <view class="apply" @click="handleGoApply" v-else>立即申请</view> </view> </template> <!-- 弹窗 --> <van-popup :show="pupData.show" round @close="pupData.show = false" closeable :close-on-click-overlay="false"> <view class="global-pup"> <view class="content"> <rich-text style="flex:none;margin-bottom:20rpx;" :nodes="pupData.content"></rich-text> <view class="contact" v-if="pupData.type == 'contact'"> {{pupData.saleName||''}}:<text @click="handleCallPhone(pupData.mobile)">{{pupData.mobile||''}}</text> </view> <view class="apply" v-else-if="pupData.type == 'apply'"> <view @click="handleApply">立即申请</view> </view> </view> </view> </van-popup> <!-- 评论弹窗 --> <van-action-sheet :show="isShowComment" title="全部评论" @close="closeCommentHandle" @clickOverlay="isShowComment=false" > <view class="comment-cont" catchtouchmove="return"> <view class="commment-top"> <text class="title">{{comment_obj.title}} {{comment_obj.total}}</text> <view class="comment-top-right"> <text :class="select_comment_type === 1 && 'act'" @click="changeCommentTypeHandle(1)">精选</text> <text :class="select_comment_type === 2 && 'act'" @click="changeCommentTypeHandle(2)">我的</text> </view> </view> <scroll-view class="comment-list-cont" v-if="comment_obj.total" scroll-y> <view class="comment-list-item" v-for="(item,index) in commentList" :key="item.community_question_comment_id"> <view class="comment"> <text style="color: #333;">{{item.user_name}}:</text> {{item.content}} </view> <view class="del" v-if="select_comment_type === 2" @click="delCommentHandle(item,index)">删除该评论</view> </view> </scroll-view> <view class="nodata" v-else> <image src="@/static/nodata.png"></image> <view>暂无评论</view> </view> <view class="write-wrap"> <textarea v-model="comment_cont" placeholder="发布一条友善的评论" auto-height :show-confirm-bar="false" :cursor-spacing="20" class="write-ipt" @focus="checkNickHandle" /> <!-- <input v-model="message" class="write-ipt" placeholder="发布一条友善的评论" confirm-type="send" :cursor-spacing="20" /> --> <view class="confirm-btn" @click="publishMessageHandle">发布</view> </view> </view> </van-action-sheet> </view> </template> <script> import mixin from "../../mixin/questionMixin"; import { apiOptionGroupList, apiBarTotal, apiHotComment, apiMyComment, apiCheckNick, apiCanelNickTip, apiDelComment, apiPublishComment, } from '@/api/question' import questionComment from '@/components/questionComment/questionComment.vue' import Dialog from '@/wxcomponents/vant/dialog/dialog.js'; import { debounce } from '@/utils/common.js'; export default { mixins: [mixin], data() { return { questionList: [], isPopupShow: false,//弹出层是否展示 optionList: [], activeNames: [],//collapse activeName:'', selectName:'', pauseImgSrc:'../../static/question/recordplay.png', playImgSrc:'../../static/question/recordpause.png', waitNum:0, isShowComment: false, comment_cont: '', select_comment_type:1,//默认精选 select_question_item: {}, comment_obj: { title: '精选评论', total: 0 }, comment_total: 0, commentList: [] } }, watch:{ selectName(){ this.getQuestionList(3) } }, components:{ questionComment }, onLoad() { /* this.getVistor() this.getOptionList() this.getQuestionList(3) */ }, onShow() { this.getWaitNum() this.getOptionList() this.getQuestionList(3) }, onReachBottom() { if(this.finished) return this.page++ this.getQuestionList(3) }, onPullDownRefresh() { this.resetAudio() this.refreshPage() setTimeout(() => { uni.stopPullDownRefresh() }, 1500); }, methods: { //获取研究员问答列表数量统计 getWaitNum() { if(this.userInfo.is_inner!==1) return //如果是研究员,则请求问答列表数量统计 apiBarTotal().then(res=>{ if(res.code===200){ this.waitNum = res.data.wait } }) }, //获取筛选列表 async getOptionList(){ const res = await apiOptionGroupList() if(res.code===200){ this.optionList = res.data } }, //点击筛选 showPopup() { this.isPopupShow = true }, //点击一级分类 changeSelecOption(e) { this.activeName = e.detail }, //点击二级分类 handleOptionClick(item){ //重复点击代表取消 if(this.selectId===item.research_group_id){ this.selectId=-1 this.selectName='' }else{ this.selectId = item.research_group_id this.selectName = item.research_group_name } this.page = 1 this.isPopupShow = false }, //点击'我要提问' or '待回答' toPage() { //const {is_inner} = this.userInfo if (this.isUserResearcher) { uni.navigateTo({ url: '/pages-question/answerList' }) } else { uni.navigateTo({ url: '/pages-question/hasQuestion' }) } }, //转发分享 onShareAppMessage(){ return{ title:'问答社区', path:'/pages/question/question' } }, refreshPage() { this.page = 1 this.selectId = -1 this.questionList = [] this.finished = false this.getQuestionList(3) }, /* 打开评论弹窗 */ showCommentHandle(item) { this.select_question_item = item; this.getComment(); this.isShowComment = true; }, /* 关闭评论弹窗 */ closeCommentHandle() { this.isShowComment = false; this.select_question_item = {}; this.comment_cont = ''; this.select_comment_type = 1;//默认精选 }, /* 切换评论类型*/ changeCommentTypeHandle(type) { if(type === this.select_comment_type) return this.commentList = []; this.select_comment_type = type; this.getComment(); }, /* 获取评论 */ async getComment() { const params = { community_question_id: this.select_question_item.community_question_id, curr_page: 1, page_size: 10000 } const { code,data } = this.select_comment_type===1 ? await apiHotComment(params) : await apiMyComment(params); if(code !== 200) return this.commentList = data.list || []; this.comment_obj = { title: this.select_comment_type === 1 ? '精选评论' : '我的评论', total: data.paging.totals } }, /* 删除留言*/ delCommentHandle({community_question_comment_id},index) { wx.showModal({ title: "", content: "评论删除后不可恢复,确认删除吗?", confirmColor: "#EE3636", cancelColor: '#333', success: async(res) => { if( res.cancel) return const { code } = await apiDelComment({ community_question_comment_id }); if( code !== 200 ) return this.commentList.splice(index,1) wx.showToast({title: '删除成功'}); } }) }, /* 校验昵称状态*/ async checkNickHandle() { const { data,code } = await apiCheckNick(); if(code !== 200) return !data && wx.showModal({ title: '', content: '检测到您还未设置头像和昵称,您的留言将发布为匿名,是否立即去设置?', confirmText: '去设置', confirmColor: '#E3B377', cancelText : '暂时不用', cancelColor: '#666', success: (res)=> { res.confirm && wx.navigateTo({ url:'/pages-user/mysetting' }); res.cancel && this.setCancelNickHandle(); } }) }, /* 不在提醒弹窗 */ async setCancelNickHandle() { await apiCanelNickTip() }, /* 发布留言*/ publishMessageHandle: debounce( async function() { if(!this.comment_cont) return wx.showToast({title: '请输入留言内容',icon: 'none'}); const { code } = await apiPublishComment({ content: this.comment_cont, community_question_id: this.select_question_item.community_question_id }) if(code !== 200) return wx.showToast({title: '发布成功'}); this.comment_cont = ''; this.select_comment_type === 2 && this.getComment(); }) } } </script> <style lang="scss"> .question-wrap { .van-popup--bottom{ padding-bottom: 0 !important; } /deep/ .van-cell__title, .van-cell__value { flex: none !important; } .van-collapse-item{ &.van-hairline--top{ &::after{ border: none !important; } } .van-cell{ padding-left:0 !important; } } .van-collapse-item__content{ padding:0; } } page { padding-bottom: env(safe-area-inset-bottom); } </style> <style lang="scss" scoped> .question-wrap { padding: 0 30rpx 80rpx 30rpx; background-color: #FFFFFF; .question-top { display: flex; flex: auto; align-items: center; height: 100rpx; background-color: white; position: sticky; top: 0; left: 0; margin:0 -30rpx; z-index: 99; &.noAuth{ height:20rpx; } /* border-top: 1rpx solid rgba(0, 0, 0, 0.1); */ .text{ width:240rpx; height:70rpx; line-height: 70rpx; background-color: #F5F5F5; border-radius: 4rpx; color:#666666; text-align: center; &.active{ color:#E3B377; background-color: #FDF8F2; } } .auth-box { flex: 1; } .menu-icon { width: 34rpx; height:34rpx; } .pop-wrap{ height: 100%; padding: 50rpx 34rpx; .pop-option-list { .option-btn-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20rpx; .option-btn { min-width: 145rpx; height:76rpx; line-height: 76rpx; text-align: center; color: black; background-color: #F6F6F6; border-radius: 4rpx; margin-top: 10rpx; &.active{ background-color: #FAEEDE; } &.full{ width:100%; } } } } .pop-btn{ height:80rpx; margin:0 -34rpx; text-align: center; line-height: 80rpx; color:#FFFFFF; background-color: #E6B77D; } } } .question-list { padding-bottom: 34rpx; &.last{ padding-bottom: 260rpx; } } .topage-btn { position: fixed; left:50%; margin-left: -257rpx; bottom: 215rpx; width:514rpx; height: 80rpx; text-align: center; line-height: 80rpx; border-radius: 40rpx; background-color: #333333; box-shadow: 0px 4px 20px 1px rgba(160, 126, 84, 0.25); color: #E3B377; display: flex; justify-content: center; align-items: center; image{ margin-right: 10rpx; margin-top: -2rpx; } } .global-pup{ .content{ padding:90rpx 34rpx; flex-direction: column; .contact{ text{ margin-left: 15rpx; color:#E6B77D; } } .apply{ margin-top: 40rpx; width:390rpx; height:80rpx; background-color: #E6B77D; color: #FFFFFF; text-align: center; line-height: 80rpx; border-radius: 40rpx; } } } } .comment-cont { height: calc(100vh - 250rpx); border-top: 4rpx solid #F4F4F4; position: relative; padding: 24rpx 0; overflow: hidden; .commment-top { display: flex; justify-content: space-between; align-items: center; padding: 0 24rpx; .title { font-weight: bold; font-size: 30rpx; color: #000; } .comment-top-right { display: flex; align-items: center; background-color: #F6F6F6; border: 1px solid #F6F6F6; color: #666; border-radius: 48rpx; text { padding: 0 12rpx; height: 48rpx; line-height: 48rpx; &.act { background-color: #FFFFFF; color: #000; border-radius: 48rpx; } } } } .comment-list-cont { height: calc(100vh - 550rpx); overflow-y: auto; position: relative; padding: 30rpx 24rpx 0; .comment-list-item { margin-bottom: 30rpx; .comment { color: #666; } .del { color: #D80000;margin-top: 10rpx;width: 200rpx; } } } .write-wrap { padding: 0 24rpx; border-top: 4rpx solid #F4F4F4; position: absolute; bottom: 100rpx; left: 0; right: 0; display: flex; align-items: center; z-index: 99; background-color: #fff; padding-bottom: calc(5px + constant(safe-area-inset-bottom)); padding-bottom: calc(5px + env(safe-area-inset-bottom)); ::-webkit-scrollbar { display: none; } .write-ipt { padding: 30rpx 0; flex: 1; } .confirm-btn { width: 100rpx; margin-left: 20rpx; text-align: center; padding: 20rpx 0; color: #E3B377; } } } .nodata { text-align: center; color: #999; } </style>