hongze_yb_xcx/pages/question/question.vue

<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="showAudioPop?showAudioBigPop?'list-bot3':'list-bot2':'list-bot1'">
				<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.variety_tag_name}}</text>
							<!-- <text class="item-title"> -->{{ item.question_content }}<!-- </text> -->
						</view>	
						<view class="item-answer">
							<!-- 改为背景音频播放 -->
							<view class="answer" @click.stop="handlePlayAudioByBg(item)">
								<image class="music-img" :src="item.community_question_id==curVoiceId&&!curAudioPaused?playImgSrc:pauseImgSrc" mode="widthFix"/>
								<text>{{ formatAudioTime(item.answer.audioTime) }}</text>
							</view>
							  
							<!-- <view class="answer" @click.stop="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?
											dayjs(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss')
											:'00:00'}}
										</text>
									</template>
									<template v-else>
										<text>{{ dayjs(item.answer.audioTime).format('mm:ss') }}</text>
									</template>
								</template>
								<template v-else>
									<image class="load-img" src="../../static/loading.png" mode="aspectFill" />
									<text>{{ dayjs(item.answer.audioTime).format('mm:ss') }}</text>
								</template>
							</view> -->
						</view>
					</view>
					
					<!-- 评论区域 -->
					<questionComment :item="item" @show_comment="showCommentHandle"/>
				</view>
			</view>
			<template v-if="isUserResearcher">
				<view class="btn-wrap" :class="showAudioPop?showAudioBigPop?'btn-bot3':'btn-bot2':'btn-bot1'">
					<view class="btn topage-button" @click="toPage('question')" v-if="userInfo.status&&userAuth">
						<image 
							src="../../static/question/askquestion.png"
							mode="scaleToFill"
							style="width:34rpx;height:34rpx;"
						/>
						<text>我要提问</text>
					</view>
					<view class="btn topage-button" @click="toPage('ask')" v-if="userInfo.status&&userAuth">
						<view>待回答<text v-if="isUserResearcher" style="margin-left:5rpx;">{{'('+distributeNum+')'}}</text></view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="topage-btn topage-button" :class="showAudioPop?showAudioBigPop?'btn-bot3':'btn-bot2':'btn-bot1'" @click="toPage('question')" v-if="userInfo.status&&userAuth">
					<image 
						src="../../static/question/askquestion.png"
						mode="scaleToFill"
						style="width:34rpx;height:34rpx;"
					/>
					<text>我要提问</text>
				</view>
			</template>
			<!-- <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;">{{'('+distributeNum+')'}}</text>
			</view> -->
		</template>
		 <!-- 没有权限 -->
		<template v-else>
			<view class="noAuth-wrap">
				<image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image>
				<template v-if="momentUser&&momentUser.is_bind==0">
					<view class="auth-text">您尚未登录，请登录后查看更多信息</view>
					<view class="global-btn-yellow-change btn" @click="handleGoLogin">立即登录</view>
				</template>
				<template v-else>
					<view class="auth-text" style="margin-bottom:15px">您暂无权限查看问答社区</view>
					<view class="auth-text" style="margin-bottom:15px" v-if="noAuthInfo.type==='contact'">若想查看可以联系对口销售</view>
					<view class="auth-text" style="margin-bottom:15px" 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="global-btn-yellow-change btn" @click="handleGoApply" v-else>立即申请</view>
				</template>
			</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>

		<!-- 音频悬浮 -->
        <view v-if="showPage">
            <audioBox v-if="showAudioPop"/>
        </view>
		
		<!-- 评论弹窗 -->
		<van-action-sheet 
			:show="isShowComment" 
			title="问答评论"
			@close="closeCommentHandle"
			@clickOverlay="isShowComment=false"
			z-index="99999"
		>
			<view class="comment-cont" @touchmove.stop>
			   <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="flex comment">
						<image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="true"/>
						<view style="display:flex;align-items:center">{{item.content}}</view>
						  
                     <!-- <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" :style="{bottom: writeBottom+'px'}">
               <textarea 
                  v-model="comment_cont" 
                  placeholder="发布一条友善的评论" 
                  auto-height
                  :adjust-position="false"
                  :show-confirm-bar="false"
                  :cursor-spacing="20"
                  class="write-ipt"
                  @blur="setWritePosition(0)"
					@focus="checkNickHandle"
               />
				  <view class="confirm-btn" @click="publishMessageHandle">发布</view>
				</view>
			</view>
		</van-action-sheet>
	</view>
</template>

<script>
import mixin from "../../mixin/questionMixin";
import {apiGetTagTree} from '@/api/common'
import {
   apiOptionGroupList,
   apiBarTotal,
   apiHotComment,
   apiMyComment,
   apiCheckNick,
   apiCanelNickTip,
   apiDelComment,
   apiPublishComment,
   apiCountAudioClick
} from '@/api/question'
import questionComment from '@/components/questionComment/questionComment.vue'
import audioBox from '@/components/audioBox/audioBox.vue'
import { debounce } from '@/utils/common.js';
export default {
	mixins: [mixin],
	components:{
        audioBox,
		questionComment
    },
	data() {
		return {
			questionList: [],
			isPopupShow: false,//弹出层是否展示
			optionList: [],
			activeNames: [],//collapse
			activeName:'',
			selectName:'',
			pauseImgSrc:'../../static/question/recordplay.png',
			playImgSrc:'../../static/question/recordpause.png',
			distributeNum:0,
			/* userInfo:{
				is_inner:1,//0:外部客户;1内部员工
				status:'试用',
				is_suspend:0,
				is_researcher:0,
				//seal_name:'梁娜',
				//seal_mobile:123456,
			},//mock用户信息 */
			showPage:false,

			waitNum:0,
			
			isShowComment: false,
			comment_cont: '',
			writeBottom: 0,
			select_comment_type:1,//默认全部
			select_question_item: {},
			comment_obj: {
				title: '全部评论',
				total: 0
			},
			comment_total: 0,
			commentList: []
		}
	},
	watch:{
		selectName(){
			this.getQuestionList(3)
		}
	},
	computed:{
		momentUser() {
		  return this.$store.state.user.userInfo;
		},
		showAudioPop(){//是否显示音频弹窗
            return this.$store.state.audio.show
        },
        showAudioBigPop(){
            return this.$store.state.audio.showBig
        },
        curVoiceId(){//当前正在播放的音频id
            return this.$store.state.audio.questionId
        },
        curAudioPaused(){//当前音频是否暂停状态
            return this.$store.state.audio.paused
        },
	},
	onLoad() {
		/* this.getVistor()
		this.getOptionList()
		this.getQuestionList(3) */
	},
	onShow() {
		this.getdistributeNum()
		this.getOptionList()
		this.getQuestionList(3)
		this.showPage=true
	},
	onHide(){
        this.showPage=false
    },
	onReachBottom() {
		if(this.finished) return
		this.page++
		this.getQuestionList(3)
 	},
	onPullDownRefresh() {
		this.resetAudio()
		this.refreshPage()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1500);
	},
	//转发分享
	onShareAppMessage(){
		return{
			title:'问答社区',
			path:'/pages/question/question'
		}
	},
	methods: {
		//获取研究员问答列表数量统计
		getdistributeNum() {
			if(this.userInfo.is_inner!==1) return
			//如果是研究员,则请求问答列表数量统计
			apiBarTotal().then(res=>{
				if(res.code===200){
					this.distributeNum = res.data.distribute
				}
			})
		},
		//获取筛选列表
		async getOptionList(){
		/* 	const res = await apiOptionGroupList()
			if(res.code===200){
				this.optionList = res.data
			} */
			const res = await apiGetTagTree()
			if(res.code===200){
				const result = res.data
				this.optionList = result.map((item)=>{
					let obj = {}
					obj.research_group_name = item.classify_name
					obj.children = item.tags.map((i)=>{
						return {research_group_id:i.tag_id,research_group_name:i.tag_name}
					})
					return obj
				})
			}
		},	
		//点击筛选
		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(type) {
			if(type==='question'){
				uni.navigateTo({ url: '/pages-question/hasQuestion' })
			}else{
				uni.navigateTo({ url: '/pages-question/answerList' })
			}
		},
		refreshPage() {
			this.page = 1
			this.selectId = -1
			this.questionList = []
			this.finished = false
			this.getQuestionList(3)
        },
		//跳转详情
		handleGoDetail(item){
			uni.navigateTo({ url: `/pages-question/answerDetail?id=${item.community_question_id}` })
		},
		
		/* 打开评论弹窗 */  
		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)
			   this.comment_obj.total--
                        
               wx.showToast({title: '删除成功'});
			   this.refreshPage()
            }
         })
      },
      
      setWritePosition(val=50) {
         console.log(val)
         this.writeBottom = val < 50 ? 0 : val;
      },
	  
      
      /* 校验昵称状态*/
	  /**
	   * 此方法不在调用(但是还是留着吧 万一哪天又要用呢)
	   * 改版不用再校验是否设置过昵称，老板说要和报告不一样并且要好玩，所以改成随机生成的头像昵称（当然是后端去生成） 
	   */
      async checkNickHandle(e) {
         this.setWritePosition(e.detail.height);
         
        //  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();
		this.getComment()
		this.refreshPage()//刷新列表
      }),
	}
}
</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;
		}
	}
	.list-bot1{
		padding-bottom: 200rpx;
	}
	.list-bot2{
		padding-bottom: 340rpx;
	}
	.list-bot3{
		padding-bottom: 440rpx;
	}

	.topage-btn {
		position: fixed;
		left:50%;
		margin-left: -257rpx;
		bottom: 215rpx;
		width:514rpx;
	}
	.topage-button{
		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;
		}
	}

	.btn-wrap{
		position: fixed;
		width:100%;
		margin-left: -30rpx;
		display: flex;
		justify-content: center;
		bottom: calc(120rpx + constant(safe-area-inset-bottom));
		bottom: calc(120rpx + env(safe-area-inset-bottom));
		.btn{
			width:300rpx;
			height:80rpx;
			&:first-child{
				margin-right: 30rpx;
			}
		}
	}

	.btn-bot1{
		bottom: calc(120rpx + constant(safe-area-inset-bottom));
		bottom: calc(120rpx + env(safe-area-inset-bottom));
	}
	.btn-bot2{
		bottom: calc(260rpx + constant(safe-area-inset-bottom));
		bottom: calc(260rpx + env(safe-area-inset-bottom));
	}
	.btn-bot3{
		bottom: calc(355rpx + constant(safe-area-inset-bottom));
		bottom: calc(355rpx + env(safe-area-inset-bottom));
	}

	.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 0;
      .comment-list-item {
			margin-bottom: 30rpx;
			padding: 0 24rpx;
			.comment { 
				color: #666; 
				.avatar{
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				view{
					flex: 1;
				}
			}
			.del { 
				color: #D80000;
				margin-top: 10rpx;
				margin-left: 76rpx;
				width: 200rpx; 
			}
      }
   }
   .write-wrap {
      padding: 0 24rpx;
      border-top: 4rpx solid #F4F4F4;
      position: absolute;
      // bottom: 50px;
      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>