hongze_yb_xcx/pages/question/question.vue

<template>
	<view class="question-wrap">
		<view class="question-top">
			<text class="text" :class="{'active':selectType==='all'}" @click="changeSelect('all')">热门问答</text>		
			<view class="text" :class="{'active':selectType==='me'}" @click="changeSelect('me')">我的{{ vistor.type === 1 ? '回答' : '提问' }}</view>
			<template>
			<image src="../../static/chart/menu.png" mode="widthFix" class="menu-icon"
				@click="showPopup" />
			筛选	
			</template>
			
			<van-popup :show="isPopupShow" position="bottom"  round  :close-on-click-overlay="false"
				@close="isPopupShow = false" :style="{ height: '30%' }">
				<view class="pop-wrap">
					<view class="pop-top">
						<text>全部筛选</text>
						<text @click="isPopupShow=false">取消</text>
					</view>	
					<view class="pop-option-list">
						<van-collapse :value="activeName" @change="changeSelecOption" accordion :border="false">
							<van-collapse-item :border="false" :title="item.title" :name="index" v-for="(item, index) in optionList"
								:key="index">
								<view class="option-btn-wrap">
									<view class="option-btn" @click="selectName=i.name" :class="{'active':selectName===i.name}" v-for="(i, _index) in item.btnList" :key="_index">
										{{ i.name }}
									</view>
								</view>
							</van-collapse-item>
						</van-collapse>
					</view>
					<view class="pop-btn" @click="changeSelect('name')">完成</view>
				</view>	
			</van-popup>
		</view>
		<view class="question-list">
			<view class="question-item" v-for="item in quesionList" :key="item.id">
				<text class="item-title">{{ item.question.text }}</text>
				<text class="item-time">提问时间:{{ item.question.time }}</text>
				<view class="item-answer">
					<view class="answer-img"></view>
					<view class="answer-other">
						<view class="answer-info">
							<text class="name">{{ item.answer.name }}</text>
							<text class="group">弘则{{ item.answer.group }}组研究员</text>
							<text class="label">{{ item.label }}</text>
						</view>
						<view class="answer" @click="handleAudio(item)">
							<text>{{ item.answer.isplay ? '暂停' : '播放' }}</text>
							<template v-if="item.answer.isplay || item.answer.ispause">
								<text>{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}</text>
							</template>
							<template v-else>
								<text>{{ item.answer.audioTime }}</text>
							</template>

						</view>
					</view>
				</view>
				<text class="item-time">回答时间:{{ item.answer.time }}</text>
			</view>
		</view>
		<view class="topage-btn" @click="toPage(vistor)">
			{{ vistor.type === 1 ? '待回答' : '我要提问' }}
		</view>
		<!-- 弹窗 -->
		<van-popup :show="pupData.show" @close="pupData.show = false" closeable :close-on-click-overlay="false">
			<view class="global-pup">
				<view class="content">
					<rich-text :nodes="pupData.content"></rich-text>
				</view>
				<view class="flex bot" v-if="pupData.type == 'contact'">
					<view @click="handleCallPhone(pupData.mobile)">拨号</view>
				</view>
				<view class="flex bot" v-else-if="pupData.type == 'apply'">
					<view @click="handleApply">立即申请</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
import { varietyData, questionData } from './mock.js'
import { apiApplyPermission, apiUserInfo } from '@/api/user'
const moment = require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
export default {
	data() {
		return {
			onlySeeAuth: false,//只看我的
			quesionList: questionData,
			isPopupShow: false,//弹出层是否展示
			optionList: varietyData,
			activeNames: [],//collapse
			activeName:'',
			innerAudio: null,//该页面的音频
			vistor: {//用户信息
				type: 1,//1研究员,2客户
				status: '潜在',//type为2的时候才判断
				premission: {
					seeAuth: true,//只看我的筛选框
					option: true,//弹窗筛选框
					isApply: false,//之前是否提交过申请
					canPlay: false,//是否能够播放音频
				}
			},
			currentAudioMsg: {
				id: '',
				audioCurrentTime: 0,//音频播放实时时间
				audioTime: 0,//当前音频时间
				audioCurrentUrl: '',//当前音频地址
			},//当前正在播放音频的一些信息
			pupData: {
				show: false,
				content: '',//弹窗html字符串
				type: '',
				mobile: "",
				customer_info:{}
			},
			selectType:'all',
			selectName:'宏观'
		}
	},
	onLoad() {
		this.initAudio()
		this.getVistor()
	},
	onShow() {
		
	},
	ononUnload() {
		this.destoryAudio()
	},
	methods: {
		//初始化audio
		initAudio() {
			this.innerAudio = uni.createInnerAudioContext()
			this.handleAudioFun()
		},
		//销毁audio
		destoryAudio() {
			if (this.innerAudio) {
				this.innerAudio.destory()
			}
		},
		//获取访客信息:研究员/客户
		getVistor() {
			this.vistor = {
				type: 2,
				status: '正式',
				premission: {
					seeAuth: true,//只看我的筛选框
					option: true,//弹窗筛选框
					isApply: true,//之前是否提交过申请
					canPlay: true,//是否能够播放音频
				}
			}
		},
		//audio事件
		handleAudioFun() {
			this.innerAudio.onPlay(() => {
				console.log('开始了')
			})
			this.innerAudio.onTimeUpdate(() => {
				//console.log('时间更新')
				this.currentAudioMsg.audioCurrentTime = moment(this.innerAudio.currentTime * 1000).format('mm:ss')
				//console.log('duration',this.innerAudio.duration)
			})
			this.innerAudio.onEnded(() => {
				console.log('音频播放完毕')
				const { id } = this.currentAudioMsg
				this.quesionList.map(i => {
					if (i.id === id) {
						i.answer.isplay = false
						i.answer.ispause = false
					}
				})
				this.changeCurrentAudio({ id: '', answer: { source: '', audioTime: 0 } })
			})
		},
		//初始化无权限弹窗
		initPupData() {
			let str = '<p>您暂无权限查看语音回复</p>'
			const { status} = this.vistor
			if (['潜在', '流失'].includes(status)) {
				this.pupData.type = 'apply'
				str += '<p>若想查看可以申请开通</p>'
			}
			if (['冻结', '暂停试用'].includes(status)) {
				this.pupData.mobile = 123456
				this.pupData.type = 'contact'
				str += '<p>若想查看可以联系对口销售</p>'
			}
			this.pupData.customer_info.status = status
			this.pupData.customer_info.has_apply = this.vistor.premission.isApply
			this.pupData.content = str
			this.pupData.show = true
		},
		//拨号
		handleCallPhone(mobile) {

		},
		//申请权限
		async handleApply() {
			if (this.pupData.customer_info.has_apply) {//已经申请过
				this.pupData.content = `<p>您已提交过申请，请耐心等待</p>`
				this.pupData.type = ''
			} else {
				if (!this.pupData.customer_info.status || this.pupData.customer_info.status != '流失') {
					uni.navigateTo({
						url: "/pages-applyPermission/applyPermission?source=4"
					})
				} else {//主动调一次申请权限接口 
					/*  const res=await apiApplyPermission({
						 company_name:this.pupData.customer_info.company_name,
						 real_name:this.pupData.customer_info.name,
						 source:2,
						 from_page:'活动列表'
					 })
					 if(res.code===200){} */
					this.pupData.content = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`
					this.pupData.type = ''

				}
			}
		},
		//播放音频
		handleAudioPlay() {
			this.innerAudio.onCanplay(() => {
				this.innerAudio.play()
				//console.log('音频长度:', this.innerAudio)
				//this.currentAudioMsg.audioTime = this.innerAudio.duration
			})
		},
		//切换当前播放音频
		changeCurrentAudio(item) {
			const { id } = item
			const { source, audioTime } = item.answer
			this.currentAudioMsg = {
				id: id,
				audioCurrentTime: 0,
				audioTime: audioTime,
				audioCurrentUrl: source
			}
		},
		//点击'热门回答'/'只看我的'/筛选弹窗的按钮
		changeSelect(type) {
			if(type!=='name'){
				this.selectType = type
			}else{
				this.isPopupShow = false
			}
			//getData()
		},
		//点击筛选
		showPopup() {
			console.log('a')
			this.isPopupShow = true
		},
		changeBtnShow() {
		},
		changeSelecOption(e) {
			this.activeName = e.detail
		},
		//点击某条音频
		handleAudio(item) {
			//如果没有权限,弹窗并return
			if (!this.vistor.premission.canPlay) {
				this.initPupData()
				return
			}
			const { source, isplay } = item.answer
			if (isplay) {
				//说明是播放->暂停
				this.innerAudio.pause()
			} else if (item.id === this.currentAudioMsg.id) {
				//说明是暂停->播放
				this.innerAudio.play()
			} else {
				console.log('aaa', source, this.innerAudio.src)
				//说明是第一次播放或点击其他播放项
				this.changeCurrentAudio(item)
				this.innerAudio.stop()
				this.innerAudio.src = source
				/* this.innerAudio.play() */
				this.handleAudioPlay()

			}
			this.quesionList.map((i) => {
				if (i.id === item.id) {
					if (i.answer.isplay) {
						i.answer.ispause = true
					}
					i.answer.isplay = !i.answer.isplay
				} else {
					i.answer.isplay = false
					i.answer.ispause = false
				}
			})
		},
		//点击'我要提问'/'待回答'
		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;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: white;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
		.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: 40rpx;
		}
		.pop-wrap{
			padding: 50rpx 34rpx 0 34rpx;
			.pop-top {
				display: flex;
				justify-content: space-between;
				text{
					font-size: 32rpx;
					&:first-child{	
						color: #000000;
					}
					&:last-child{
						color: #E3B377;
					}
				}
			}

			.pop-option-list {
				.option-btn-wrap {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 20rpx;
					.option-btn {
						width: 215rpx;
						height:76rpx;
						line-height: 76rpx;
						text-align: center;
						color: black;
						background-color: #F6F6F6;
						border-radius: 4rpx;
						margin: 10rpx 10rpx 0 0;
						&.active{
							background-color: #FAEEDE;
						}
					}
				}
			}
			.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;
				}
			}
			.item-title {
				display: block;
				font-size: 32rpx;
				color:#333333
			}

			.item-time {
				color: #999999;
				font-size: 24rpx;
				margin:20rpx 0;
				display: block;
			}

			.item-answer {
				display: flex;
				width:100%;
				height: 213rpx;
				background-color: #FDF8F2;
				box-sizing: border-box;
				padding:20rpx;
				align-items: center;
				position:relative;
				.answer-img {
					width: 146rpx;
					height: 146rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.answer-other {
					display: flex;
					flex-direction: column;

					.answer-info {
						.name {
							color: #333333;
							font-size: 28rpx;
							margin-right: 20rpx;
						}

						.group {
							color: #999999;
							font-size: 24rpx;
						}

						.label {
							position: absolute;
							right:0;
							top:0;
							width: 90rpx;
							height:41rpx;
							font-size: 24rpx;
							text-align: center;
							line-height: 41rpx;
							background-color: #333333;
							color: #E4B478;
						}
					}
				}

				.answer {
					margin-top: 20rpx;
					width: 340rpx;
					height: 74rpx;
					box-sizing: border-box;
					padding:20rpx 30rpx;
					border-radius: 37rpx;
					background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
					display: flex;
					justify-content: space-between;
					color: #FFFFFF;
				}
			}
		}
	}

	.topage-btn {
		position: fixed;
		left:0;
		right:0;
		bottom: 0;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #333333;
		box-shadow: 0px 4px 20px 1px rgba(160, 126, 84, 0.25);
		color: #E3B377;
	}
}
</style>