hongze_yb_xcx/pages/question/question.vue

<template>
	<view class="question-wrap">
		<view class="question-top">
			<view @click="showPopup" v-if="vistor.type===1||vistor.status&&!noAuth.includes(vistor.status)"
				  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.ClassifyName" :name="index" v-for="(item, index) in optionList"
								:key="index">
								<view class="option-btn-wrap">
									<view class="option-btn" 
										v-for=" i in item.Items" :key="i.PermissionId"
										@click="handleOptionClick(i)" 
										:class="{'active':selectName===i.PermissionName,'full':i.PermissionName.length>4}" 
										>
											{{ i.PermissionName }}
									</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" />
      		<view>暂无提问<text v-if="visitor.type===2">,快试试提问功能吧</text></view>
    	</view>
		<view class="question-list">
			<view class="question-item" v-for="item in questionList" :key="item.community_question_id">
				<view class="question-info">
					<view style="flex:1;" class="question-title">
						<text class="item-label">{{item.chart_permission_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">
								<!-- <text>{{ item.answer.isplay ? '暂停' : '播放' }}</text> -->
								<image class="music-img" :src="item.answer.isplay?playImgSrc:pauseImgSrc" mode="aspectFill"/>
								<template v-if="item.answer.isplay || item.answer.ispause">
									<!-- <text>{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}</text> -->
									<text>{{moment(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss')}}</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>
				<text class="item-time">提问时间:{{ item.create_time }}</text>
			</view>
		</view>
		<view class="topage-btn" @click="toPage(vistor)" v-if="vistor.type===1||vistor.status&&!noAuth.includes(vistor.status)">
			{{ vistor.type === 1 ? '待回答' : '我要提问' }}
		</view>
		<!-- 弹窗 -->
		<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||'123456'}}</text>
					</view>
					<view class="apply" v-else-if="pupData.type == 'apply'">
						<view @click="handleApply">立即申请</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
import mixin from "../../mixin/questionMixin";
import {apiOptionList} from '@/api/question'
export default {
	mixins: [mixin],
	data() {
		return {
			questionList: [],
			isPopupShow: false,//弹出层是否展示
			optionList: [],
			activeNames: [],//collapse
			activeName:'',
			vistor: {//用户信息
				type: 1,//1研究员,2客户
				status: '正式',//type为2的时候才判断
			},
			selectName:'',
			pauseImgSrc:'../../static/audio-pause-2.png',
			playImgSrc:'../../static/audio-doing.png',
			noAuth:['潜在','流失','冻结客户','暂停试用']
		}
	},
	watch:{
		selectName(){
			this.getQuestionList(3)
		}
	},
	onLoad() {
		this.getVistor()
		this.getOptionList()
		this.getQuestionList(3)
	},
	onShow() {
		
	},
	onReachBottom() {
		if(this.finished) return
		this.page++
		this.getQuestionList(3)
 	},
	methods: {
		//获取访客信息:研究员/客户
		getVistor() {
			const {userInfo} = this.$store.state.user
			//如果用户在ficc研究部下(departmentId:1),则为研究员.其他情况为客户
			if(userInfo.admin_info&&userInfo.admin_info.departmentId===1){
				this.vistor.type = 1
			}else{
				this.vistor.type = 2
			}
			//this.vistor.status = userInfo.status
		},
		//获取筛选列表
		async getOptionList(){
			const res = await apiOptionList()
			if(res.code===200){
				this.optionList = res.data
			}
		},	
		//点击筛选
		showPopup() {
			this.isPopupShow = true
		},
		//点击一级分类
		changeSelecOption(e) {
			this.activeName = e.detail
		},
		//点击二级分类
		handleOptionClick(item){
			//重复点击代表取消
			if(this.selectId===item.PermissionId){
				this.selectId=-1
				this.selectName=''
			}else{
				this.selectId = item.PermissionId
				this.selectName = item.PermissionName	
			}
			this.page = 1
			this.isPopupShow = false
		},
		//点击'我要提问' or '待回答'
		toPage(item) {
			const { type } = item
			if (type === 1) {
				uni.navigateTo({ url: '/pages-question/answerList' })
			} else {
				uni.navigateTo({ url: '/pages-question/hasQuestion' })
			}
		}
	}
}
</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;
		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 {
		.question-item {
			margin-bottom: 20rpx;
			&::after{
				content: '';
				display: block;
				height:10rpx;
				margin:0 -30rpx;
				background-color: #F9F9F9;
			}
			&:last-child{
				&::after{
					background-color: #FFFFFF;
				}
			}
			.question-info{
				display: flex;
				padding: 10rpx 0;
				.question-title{
					font-size: 32rpx;
					color:#333333;
					.item-label{
						padding:7rpx 12rpx;
						font-size: 22rpx;
						text-align: center;
						background-color: #333333;
						color: #E4B478;	
						border-radius: 21rpx;
						margin-right:15rpx ;		
					}
				}
				.item-answer {
					display: flex;
					align-items: center;
					.answer {
						width:150rpx;
						height: 97rpx;
						box-sizing: border-box;
						padding:30rpx 15rpx;
						border-radius: 18rpx;
						background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
						display: flex;
						justify-content: space-between;
						color: #FFFFFF;
						font-size: 24rpx;
						.load-img{
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
							animation: circle 1s linear infinite;
						}
						.music-img{
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}
						@keyframes circle {
							0%{
								transform: rotateZ(0);
							}
							100%{
								transform: rotateZ(360deg);
							}
						}
					}
				}
			}
			.item-time {
				color: #999999;
				font-size: 24rpx;
				margin:20rpx 0;
				display: block;
			}
			
		}
	}

	.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;
	}
	.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;
			}
		}
	}
}
</style>