bjhedasx/webcode/uni-app/pages/expertCenter/orderAnswer.vue

<template>
	<view class="page">
		<view class="pageMain">
			<!-- 文本 -->
			<view class="padding-top-20">
				<view class="textareaBox" v-if="type == 1">
					<textarea placeholder="请输入" placeholder-class="text-aa" v-model="answerText" class="text-30 line-45"
						maxlength="500"></textarea>
				</view>
			</view>
			<!-- 语音 -->
			<view class="padding-tb-20 padding-lr-30" v-if="type == 2">
				<view class="height-100 flex">
					<view class="flex align-center height-100 radius-50 bg-2f9 padding-left-35 text-ff"
						style="width: 260rpx;box-sizing: border-box;" v-if="recordMsg != ''" @click="playVoice">
						<view class="icon-icon-tongzhi iconfont text-48 margin-right-40"></view>
						<view class="text-34 text-bold">{{recordTime}}”</view>
					</view>
				</view>
				<view class="flex flex-direction align-center" style="margin-top: 780rpx;">
					<view class="text-24 text-ff85">每次只能提交一个语音回答，如果重复</view>
					<view class="text-24 text-ff85">按住说话将覆盖未提交的语音内容</view>
					<view class="margin-top-40 text-32 text-bold text-center yyBtn"
						:class="recordDown ? 'bg-cc text-ff' : 'bg-ff'" @touchstart="recordStart"
						@touchend="recordStop">
						{{recordDown ? '抬起结束' :'按住说话'}}
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view class="padding-tb-20 padding-lr-30" v-if="type == 3">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-33 text-bold">相关图片</text>
					<text class="text-24 text-aa">（最多5张）</text>
				</view>
				<ty-image-images-upload :count="5" :video-count="0" @imageChange="imageChange" :image_list="image_list">
				</ty-image-images-upload>
			</view>
			<!-- 视频 -->
			<view class="padding-tb-20 padding-lr-30" v-if="type == 4">
				<view class="line-40 margin-bottom-15 text-30 text-33 text-bold">相关视频</view>
				<ty-image-images-upload :count="0" :video-count="1" @videoChange="videoChange" :video_list="video_list">
				</ty-image-images-upload>
			</view>
			<!-- 资料 -->
			<view class="padding-tb-20 padding-lr-30" v-if="type == 5">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-33 text-bold">资料</text>
					<text class="text-24 text-aa">（最多5个）</text>
				</view>
				<view class="margin-bottom-30">
					<view v-for="(item,index) in file_list" :key="index" class="flex align-center"
						:class="index == 0 ? '' : 'margin-top-20'">
						<view class="flex-one text-28 text-4b8 line-40" style="text-decoration:underline">
							{{item.file_name}}
						</view>
						<view class="text-28 text-e62 margin-left-30 line-40" @click="delFile(index)">删除</view>
					</view>
				</view>
				<view class="margin-top-30" v-if="file_list.length < 5" @click="upLoadFile">
					<image src="/static/home/uploadFile.png" class="fileUpImg"></image>
				</view>
			</view>
		</view>


		<view class="bottomBox">
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold" @click="tapSub">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import file from '@/components/hzjc/utils/functions/file.js'
	import record from '@/components/hzjc/utils/functions/record.js'
	export default {
		data() {
			return {
				type: 5, // 1-文本解答 2-语音解答 3-图片解答 4-视频解答 5-资料解答
				oid: '', //订单id
				answerText: '', //文本
				// 语音
				recordMsg: '',
				recordDown: false, //按住了
				canTapRecord: true,
				recordTime: 0,
				recordTimer: null,
				recordTimerTime: 0,
				// 图片
				image_list: [],
				// 视频
				video_list: [],
				// 资料
				file_list: [],
			}
		},

		onLoad(options) {
			this.type = options.type;
			this.oid = options.oid;
			// 录音
			recorderManager.onStop((res) => {
				console.log('recorder stop' + JSON.stringify(res));
				this.recordDown = false;
				this.recordTime = Math.round(res.duration / 1000);
				this.recordMsg = res.tempFilePath;
				console.log('录音时长', this.recordTime)
			});
			innerAudioContext.onPlay((res) => {
				console.log('开始播放', res, innerAudioContext.src);
			});
			innerAudioContext.onError((res) => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});

		},
		onHide() {
			if (this.type == 2) {
				recorderManager.stop();
				if (innerAudioContext.src) {
					innerAudioContext.stop()
				}
			}
		},
		onUnload() {
			if (this.type == 2) {
				recorderManager.stop();
				if (innerAudioContext.src) {
					innerAudioContext.stop()
				}
			}
		},
		methods: {
			tapSub() {
				if (this.type == 1) {
					if (this.answerText == '') {
						this.cn.alert('请输入文本解答');
						return;
					}
				}
				if (this.type == 2) {
					if (this.recordMsg == '') {
						this.cn.alert('请录入语音解答');
						return;
					}
				}
				if (this.type == 3) {
					if (this.image_list.length == 0) {
						this.cn.alert('请上传图片解答');
						return;
					}
				}

				if (this.type == 4) {
					if (this.video_list.length == 0) {
						this.cn.alert('请上传视频解答');
						return;
					}
				}

				if (this.type == 5) {
					if (this.file_list.length == 0) {
						this.cn.alert('请上传资料解答');
						return;
					}
				}

				this.rq.getData('fire/api/Expert/expertAskOrder', {
					order_id: this.oid,
					type: this.type == 1 ? 5 : (Number(this.type) - 1),
					answer_audio_url: this.recordMsg,
					answer_audio_second: this.recordTime,
					answer_img_url: this.image_list.join(','),
					answer_video_url: this.video_list.length ? this.video_list[0].video_url : '',
					answer_text: this.answerText,
					answer_data_url: JSON.stringify(this.file_list)
				}).then(res => {
					if (res.code == 0) {
						this.cn.alert('提交成功').then(() => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			// 开始录音
			recordStart() {
				if (this.recordDown == true) {
					clearInterval(this.recordTimer)
					recorderManager.stop();
				} else {
					record.isAuth().then(r => {
						if (!r) {
							return;
						} else {
							if (innerAudioContext.src) {
								innerAudioContext.stop()
							}
							this.recordDown = true;
							recorderManager.start({
								duration: 180000
							});
						}
					})
				}
			},
			recordStop() {
				clearInterval(this.recordTimer)
				recorderManager.stop();
			},
			playVoice() {
				console.log('播放录音');
				if (innerAudioContext.src) {
					innerAudioContext.stop()
				}
				if (this.recordMsg) {
					innerAudioContext.src = this.recordMsg;
					innerAudioContext.play();
				}
			},
			// 图片
			imageChange(e) {
				this.image_list = e.image_list;
			},
			// 视频
			videoChange(e) {
				this.video_list = e.video_list;
			},
			// 文件
			upLoadFile() {
				wx.chooseMessageFile({
					count: 5 - this.file_list.length,
					type: 'file',
					success: (r) => {
						uni.showLoading({
							title: '上传中...'
						})
						console.log(1007, r)
						var tempFiles = r.tempFiles;
						let files = []

						tempFiles.forEach(value => {
							// 原文件名称
							let localFileName,
								// 上传后文件名称
								fileName
							// 获取源文件名称
							localFileName = value.name
							if (localFileName) {
								fileName = localFileName
							} else {
								let suffix = this.cn.getSuffix(localFileName)
								fileName = this.cn.getRandomStr(10) + suffix
							}
							let file = {
								path: value.path,
								fileName: fileName
							}
							files.push(file)
						})

						// 上传到OSS
						file.uploadFilesToOss(files, [], {}, true, 'file').then(res => {
							uni.hideLoading()
							console.log(1005, res)
							res.forEach((item, index) => {
								var n = item.split("/");
								this.file_list.push({
									file_name: n[n.length - 1],
									file_url: item
								})
							})

						}).catch(res => {
							uni.hideLoading()
							console.log(1006, res)
						})
					},
					fail: (ff) => {
						uni.hideLoading()
						console.log(1008, ff)
					}
				})
			},
			delFile(i) {
				this.file_list.splice(i, 1)
			},
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.textareaBox {
		width: calc(100vw - 60rpx);
		margin-left: 30rpx;
		height: 300rpx;
		border-radius: 10rpx;
		border: 1rpx solid #DDDDDD;
		padding: 15rpx 20rpx;
		box-sizing: border-box;
	}

	.textareaBox>textarea {
		width: 100%;
		height: 100%;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.yyBtn {
		width: 250rpx;
		padding: 26rpx 0;
		border-radius: 10rpx;
		border: 1rpx solid #CCCCCC;
	}

	.fileUpImg {
		width: 160rpx;
		height: 160rpx;
	}
</style>