hongze_yb_xcx/pages/question/question.vue

<template>
	<view class="question-wrap">
		<view class="question-top">
			<text>热门问答</text>
			<van-checkbox class="auth-box" shape="square" v-if="vistor.premission.seeAuth" :value="onlySeeAuth"
				@change="handleAuthChange" checked-color="#D5AD79" icon-size="16px">
				<view class="text">只看我的{{ vistor.type === 1 ? '回答' : '提问' }}</view>
			</van-checkbox>
			<image src="../../static/chart/menu.png" mode="widthFix" class="menu-icon" v-if="vistor.premission.option"
				@click="showPopup" />
			<van-popup :show="isPopupShow" position="bottom" closeable :close-on-click-overlay="true"
				@close="isPopupShow = false" :style="{ height: '30%' }">
				<view class="pop-title">全部筛选</view>
				<view class="pop-option-list">
					<van-collapse :value="activeNames" @change="changeSelecOption">
						<van-collapse-item :title="item.title" :name="index" v-for="(item, index) in optionList"
							:key="index">
							<view class="option-btn-wrap">
								<view class="option-btn" v-for="(i, _index) in item.btnList" :key="_index">
									{{ i.name }}
								</view>
							</view>

						</van-collapse-item>
					</van-collapse>
				</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)">
							{{ item.answer.isplay ? '暂停' : '播放' }}
							<template v-if="item.answer.isplay || item.answer.ispause">
								{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}
							</template>
							<template v-else>
								{{ item.answer.audioTime }}
							</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
			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:{}
			},
		}
	},
	onLoad() {
		this.initAudio()
		this.getVistor()
	},
	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: false,//只看我的筛选框
					option: false,//弹窗筛选框
					isApply: false,//之前是否提交过申请
					canPlay: false,//是否能够播放音频
				}
			}
		},
		//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
			}
		},
		//点击'只看我的
		handleAuthChange(e) {
			this.onlySeeAuth = e.detail
			console.log('ok')
		},
		//点击筛选
		showPopup() {
			console.log('a')
			this.isPopupShow = true
		},
		changeBtnShow() {
		},
		changeSelecOption(e) {
			this.activeNames = 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 {

	/deep/ .van-cell__title,
	.van-cell__value {
		flex: none !important;
	}
}

page {
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
<style lang="scss" scoped>
.question-wrap {
	padding: 0 30rpx;

	.question-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid black;
		background-color: white;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;

		.auth-box {
			flex: 1;
		}

		.menu-icon {
			width: 40rpx;
		}

		.pop-title {
			text-align: center;
		}

		.pop-option-list {
			.option-btn-wrap {
				display: flex;
				flex-wrap: wrap;

				.option-btn {
					min-width: 100rpx;
					text-align: center;
					color: black;
					background-color: gray;
					border-radius: 5rpx;
					margin: 10rpx 10rpx 0 0;
				}
			}
		}
	}

	.question-list {
		.question-item {
			margin-bottom: 20rpx;

			.item-title {
				display: block;
			}

			.item-time {
				color: gray;
			}

			.item-answer {
				display: flex;

				.answer-img {
					width: 75rpx;
					height: 75rpx;
					border: 1rpx solid black;
					border-radius: 50%;
					margin-right: 50rpx;
				}

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

					.answer-info {
						.name {
							color: black;
						}

						.group {
							color: grey;
						}

						.label {
							color: orange;
						}
					}
				}

				.answer {
					width: 420rpx;
					height: 50rpx;
					border-radius: 10rpx;
					border: 1rpx solid black;
				}
			}
		}
	}

	.topage-btn {
		position: fixed;
		width: 220rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		left: 50%;
		margin-left: -110rpx;
		bottom: 220rpx;
		background-color: orange;
		color: white;

	}
}
</style>