NewZkgj/pages/center/prohibited/details.vue

<template>
	<view class="details">
		<!-- 头部违禁信息 -->
		<view class="header">
			<view class="h-box">
				<view class="h-b-top">
					<text class="name">{{ userlistobj.agentName || '' }}</text>
					<view class="status">
						<text class="item">{{ userlistobj.validInvalidName }}</text>
						<text class="item" style="margin: 0 .5em;">|</text>
						<text class="item">{{ userlistobj.violatedStatus | ViolatedStatus }}</text>
					</view>
				</view>
				<!-- 详细信息 -->
				<view class="h-b-btm">
					<view class="item">
						<image class="item-imgs" src="@/static/images/img/time.png" mode=""></image>
						{{ userlistobj.createTime || '' }}
					</view>
					<view class="item">
						<image class="item-imgs" src="@/static/images/img/voice.png" mode=""></image>
						{{ userlistobj.mm || '' }}m
					</view>
					<view class="item hit">
						<image class="item-imgs" src="@/static/images/img/hit.png" mode=""></image>
						{{ userlistobj.violatedFrequency || '0' }}
					</view>
				</view>
			</view>
		</view>
		<!-- tab选择框 -->
		<u-tabs :list="list" :is-scroll="false" bg-color="transparent" :show-bar="false" :current="current"
			@change="change"></u-tabs>

		<template v-if="current == 1">
			<!-- 音频 -->
			<view class="audio">
				<!-- 标记顾问 -->
				<view class="headboxbott">
					<view class="headovfu">
						<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="roleindex"
							@change="tapspagek()" inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist"
							:is-scroll="true">
						</u-tabs-swiper>
					</view>
					<view v-if="permissions.bjgw" class="headpade">
						<view class="biaoji" @tap="tagtap()">标记</view>
					</view>
				</view>
			</view>
		</template>


		<scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()" upper-threshold='40px'
			@scrolltoupper="rolltoupper()" :scroll-into-view="scrollId" scroll-y="true" class="zhuti text scroll-Y">
			<!-- 聊天记录-->
			<view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i">
				<view :id="'dialog'+i" class="fileName">录音文件</view>
				<block v-for="(item,index) in dialog.message" :key="index">
					<view class="text" :id="'dialog'+csdFileindex+'text'+item.bg"
						:class="{active: item.bg < playNow &&  item.ed > playNow, reverse: Number(item.speaker) % 2 == 0}"
						:data-speaker="item.speaker">
						<view class="avatar">
							<view :style="[SPEAKERSTYLE(item.speaker)]">
								<image v-if="item.isShow == 0" :src="Aimg" mode="widthFix"></image>
								<text v-else>{{ item.speaker | toCapital }}</text>
							</view>
						</view>
						<view class="content">
							<view v-html="item.onebest"></view>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>


		<view class="bottombox">
			<!-- 播放块 -->
			<view class="bottomhead">
				<view class="audio-play" @tap="changePlayState">
					<image class="image" mode="widthFix"
						:src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'">
					</image>
				</view>
				<view class="audio-slider">
					<view class="audio-time">
						<text>{{currentTimeStr}}</text>
					</view>
					<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
						:value="sliderValue" activeColor="blue"></slider>
					<view class="audio-time">
						<text>{{timeStr}}</text>
					</view>
				</view>
			</view>

			<template v-if="userlistobj.invalidViolatedCause">
				<view class="bottomtips">
					无效原因：{{ userlistobj.invalidViolatedCause }}
				</view>
			</template>

			<view class="botbotmm">
				<view class="item" @click="preValid">上一条</view>
				<template v-if="userlistobj.violatedStatus == 0">
					<view class="item" @click="setViolated(1)">确认有效</view>
					<view class="item" @tap="showTagValid">确认无效</view>
				</template>
				<template v-if="userlistobj.violatedStatus == 1">
					<view class="item" @tap="showTagValid">无效</view>
				</template>
				<template v-if="userlistobj.violatedStatus == 2">
					<view class="item" @click="setViolated(1)">确认有效</view>
				</template>
				<view class="item" @click="nextValid">下一条</view>
			</view>
		</view>

		<!-- 标记顾问 -->
		<u-popup v-model="biojiisshow" mode="center">
			<view class="bounced">
				<view class="jiajinghuatit">标记为顾问</view>
				<view
					style="width: 95%;display: flex;flex-wrap: wrap;margin: 0 auto;padding-top: 30rpx;padding-bottom: 30rpx;">
					<view class="viewclace" :class="roleindexbiaoji == index ? 'bosdttom' : ''"
						@click="biaojixuanze(index)" v-for="(item,index) in tablist.slice(1,tablist.length)"
						:key="index">
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="bounced3" style="margin-top: 20rpx;">
					<view class="bounced3-1" @tap="unmarktap">取消</view>
					<view class="bounced3-2" @tap="Confirmthetag">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 标记无效原因  border-radius="16" -->
		<u-popup v-model="tagValidShow" mode="center">
			<view class="reason">
				<text class="resaon-title">无效原因</text>
				<view class="resaon-textbox">
					<textarea v-model="reasonSrc" placeholder="请输入无效原因" maxlength="60" />
					<text class="lastlength">{{ reasonSrc.length }}/60</text>
				</view>
				<view class="button">
					<text @click="inputDone">完成</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var util = require("@/utils/util.js");
	var config = require("@/config");
	export default {
		data() {
			return {
				Aimg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACqVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9/f3////9/f39/f3////////9/f3////////////9/f3////9/f39/f3////9/f3////////9/f3////9/f3////////////////9/f39/f3////////9/f39/f3////9/f39/f3////////9/f39/f3////////9/f39/f39/f3////////////////+/v7+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7////////////////////////////+/v7////+/v7////+/v7+/v7////////////+/v7////+/v7////+/v7+/v7////////+/v7////+/v7////////+/v7////////+/v7////+/v7+/v7+/v7////////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7////+/v7+/v7////+/v7+/v7////+/v7////+/v7////+/v7+/v7////+/v5jdC9iAAAA4nRSTlMAAQIDBAUGBwgLDA0ODxARExQVFhgbHB4fICEiIyQmJygpKy4wMTIzNDY3ODk6Oz0+P0BBQkRGR0lKTE5PUFFTVFVXWFlcXV9gYWJjZWZnaGlqa2xtbm9wcXJzdHV2d3h6e319foGBgoODh4mKiouMjI2QkZKSk5OUlpeYmZmam5ycnZ+foKGio6SmqKmpq6yur7CwsbGytba5uru8wMDBwcLCw8XGx8jJysrLzM7P0dLT1dXW1tfY2drc3N7f4OHh5Obm5+jp6uvs7vDx8vLz8/T09fX29/f4+fn6+vz8/f7+RVDt+wAAA55JREFUGBntwf9/1HMAB/DX7XYbuXWV1cyMoixfugrRGNXytW33pbVdJ83XkiMLSb4LJd/zZUi0SKT5FmGS77HUVaixnHP2+kt8vt3Zbp/3+7P3XR5+8XziP1E4uiYcrh1bjMNi6NzXumnoeX3eSOSrpHUv+zi0ogJ5qd3JLN1XuJGzwqW0sW4oclT0Im19XIqcuNdQ4D0vcnEDhdYgB2f+SbFZUHbEdkrsLYeqFko9CEVH7qJUohxqLqODO6BmLR18XwAVRQfpZDxUnExHjVBRR0eroGIZHX0AFe10tA8qdtNZIRR00VEPVLxLRzuh4jk62gIVy+joSaiI0tECqPDT0blQ4f6RDpI+KHmYDjZBzWQ6aIaibZSK+6BoOqViUOXqoER8BJSdlqJYFDm4h0LveJAD7+cUiFciJ1U/01aiGjk65zfaSF6EnE3azQEO1iAPFZuZZes45MUT3cM+emLFyNfwK3fQ8k1sFA6L0cElTzx9d1OVC/8bNG/gzY+GQaKk461gCQZr8iMHSNZD4nySv6wYj0EYFv2UhqcgcTsN70ePhtzER3+lJe6BxXP9jTctvrl1yS1jkLaNlkTbBR6IlF3dyT78sHh+oqkSlrJe/uOH1jGw4apem2I/1yLtGRo6kRZiP73t57mQxb+Z2dqRdikNtyLtBWb78Cz05bomyQH+KIGljIYaWNxxDtC72ouMgsdpZzosHhqqYDmFdraOQNpttHUfLKU0TITlKtra6IZpCu3tgMVPQx0sG2ivDqaVFDgOppk0LIbJm6C9DTB1UCAMU4SGZ2GqocAumL6jQBtMMRq2wLScAik3dMV/UWB/EQwrafgSpk6KlEJ3LIXOgGE9DQdgqKDQSdBNoNAiGL6i6SjowhSaAt1UCm2CzpOk6QTonqfQJdBdSKGkD5pKWqZCU7iHQtdB10KxWmjOpqUJmtMp9gB091LsIWiCtCyFZiHFXoZuHcW+hiZGy0vQvE2xT6DbTolKAI/R8hmA4SmKdUG3jxIhAG/QkigAZlAi6QJQTJk2AF1MGwXcRRkfgJGU2V8EHzP8wBeUqQQwllKTcCozpuFESk0AMJNSC3AxM8KYT6lpAFootRGLmLEQ6ynVCCBAqcSQ1cy4f8ghSs0HcMzvlKp+lRmvVFMqNQ6aaIoyd3Yy49vllOmuh+H4WZFIpFnTpJmjadTM1oQ1oVAgFNQENA0N9f01BIKh8OzGOU3NkbmXzwuV41/wNztgHKhu7WKTAAAAAElFTkSuQmCC",
				list: [{
					name: '违禁话术'
				}, {
					name: '音频识别'
				}],
				current: 0, // tab下表
				tablist: [], // 顾问标记列表
				roleindex: 0, // 选中顾问下标

				luyinList: [], // 录音文件
				newluyinList: [],
				dialogList: [], // 录音识别列表渲染数据

				permissions: {}, // 权限菜单
				biojiisshow: false, // 标记顾问弹窗

				textindex: 0, //下拉  转写文件下标
				toptextindex: 0, //上拉  转写文件下标

				dshfkjsdkksodofydwfkhwdfkjh: 0, // 顾问的id之类的
				status: 0, // 状态（不明白是什么状态）
				speaker: '', // 角色身份
				customerId: '', // 楼盘id吧（猜）
				infos: {}, // 音频内容
				stateisshow: '', // 
				itemobj: {}, // 本地缓存的音频信息
				userlistobj: {}, // 获取到的顾问信息
				csdFileindex: 0, // 当前使用录音转写的下标

				// 录音信息
				innerAudioContext: null, // 音频对象
				currentTimeStr: "00:00", //当前进度的时间
				timeStr: "00:00", //总的时间
				recordPath: "", // 录音地址
				audioPlay: false, //当前的播放状态控制
				sliderValue: 0, //进度条最小值
				sliderMax: 0, //进度条最大值
				playNow: 0, // 当前播放时间
				scrollId: "", // 当前播放滚动到的位置
				tagValidShow: false, // 标记弹窗
				reasonSrc: '', // 标记无效的原因

				nextPageObj: JSON.parse(uni.getStorageSync('nextPageObj')), // 当前页面筛选内容
			}
		},
		onLoad(option) {
			this.status = option.status;
			this.customerId = option.customerId;
			this.stateisshow = option.stateisshow;
			this.itemobj = uni.getStorageSync('searchobj');
		},

		onShow() {
			this.permissions = uni.getStorageSync('weapp_session_Menu_data') // 权限

			this.roleindex = 0;
			if (this.stateisshow == 2) {
				this.infos = this.itemobj;
			} else {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				this.infos = currPage.data.info;
			}
			this.initAudioFnc()
			this.gituserlist()
		},

		methods: {
			// 确认无效标记 setViolatedStatus = 2
			inputDone() {
				this.setViolated(2)
			},

			// 下一条
			nextValid() {
				this.nextPageObj.pageSize++
				this.keyWordsMatching(this.nextPageObj)
			},

			// 上一条
			preValid() {
				if (this.nextPageObj.pageSize == 0) {
					uni.showToast({
						title: '没有更早的了~'
					})
				} else {
					this.nextPageObj.pageSize--
					this.keyWordsMatching(this.nextPageObj)
				}
			},

			// 获取违禁话术详情
			keyWordsMatching(params) {
				this.$u.post('/customer/findbynum', params).then(res => {
					this.customerId = res.customerId;
					uni.setStorageSync('nextPageObj', JSON.stringify(this.nextPageObj))
					this.prohibitedMatch()
				}).catch(e => {
					this.nextPageObj = JSON.parse(uni.getStorageSync('nextPageObj')), // 当前页面筛选内容
						uni.showToast({
							title: e.message,
							icon: 'none',
							duration: 2000
						})
				})
			},

			// 违禁词播放位置
			prohibitedMatch() {
				this.$u.post('/customer/prohibitedMatch', {
					customerId: this.customerId
				}).then(res => {
					let newweijin = res[0];
					newweijin.transferContent = JSON.parse(newweijin.transferContent)
					var item = {
						bg: newweijin.transferContent.bg,
						customerId: newweijin.corpusId,
					}
					// 获取是否有转写的音频
					this.$u.post("/corpus/findByPage", {
						pageNum: 1,
						pageSize: 100,
						query: {
							customerId: this.customerId,
						}
					}).then(res => {
						if (res == null) {
							uni.showToast({
								icon: "none",
								title: "暂无音频"
							})
							return
						} else {
							let newobj = res[0];
							if (res[0].merge == 0) {
								this.infos = item
								this.itemobj = item
								uni.setStorageSync("searchobj", item); //写入缓存
								this.roleindex = 0;
								this.initAudioFnc()
								this.gituserlist()
							} else {
								uni.showToast({
									icon: "none",
									title: "暂无音频"
								})
							}
						}
					})
				})
			},
			
			// 检查是否有录音

			// 设置违禁状态
			setViolated(status) {
				let params = {
					customerId: this.customerId,
					violatedStatus: status,
					invalidViolatedCause: this.reasonSrc,
				}
				this.$u.post('/customer/setViolatedStatus', params).then(res => {
					uni.showToast({
						title: '标记成功',
						duration: 2000
					});
					setTimeout(() => {
						this.tagValidShow = false
						this.reasonSrc = ''
					}, 2000)
				}).catch(e => {
					uni.showToast({
						title: e.message,
						duration: 2000
					});
				})
			},

			// 展示确认无效原因输入框
			showTagValid() {
				this.tagValidShow = true
			},

			//获取用户信息
			gituserlist() {
				this.$u.get("/matchKeywords/personalReceptionRecord", {
					customerId: this.customerId
				}).then(res => {
					res.endTime1 = res.endTime.substring(0, 19);
					this.userlistobj = res;
				})
			},

			//标记顾问
			tagtap() {
				this.biojiisshow = !this.biojiisshow;
			},

			//取消标记
			unmarktap() {
				this.roleindexbiaoji = this.dshfkjsdkksodofydwfkhwdfkjh;
			},

			//确认标记
			Confirmthetag() {
				var num = this.roleindexbiaoji + 1;
				let params = {
					id: this.luyinList[this.csdFileindex].id,
					speaker: num,
					customerId: this.customerId
				}
				this.$u.get(config.service.markConsultant, params).then((data) => {
					this.biojiisshow = false;
					this.biaojiyuyi()
					this.fenjiaoseunfo()
					uni.showToast({
						title: '标记成功',
						duration: 2000
					});
				})
			},


			// 切换角色展示
			tapspagek(index) {
				this.roleindex = index;
				this.newluyinList = [];
				this.fenjiaoseunfo()
				this.$forceUpdate()
			},


			// 初始化音频以及页面数据
			init(info) {
				this.sliderMax = 0; //进度条最大值
				this.timeStr = "00:00"; //总的时间
				const parames = {
					pageNum: 1,
					pageSize: 100,
					query: {
						customerId: this.customerId
					}
				}
				this.$u.post("/corpus/findByPage", parames).then(res => {
					if (res && res.length) {
						let alltime = 1 + res[0].recordDuration;
						this.calibration = res[0].calibration;
						if (this.calibration == 0) {
							this.kehuyixiangcenterindex = 0;
						} else {
							this.kehuyixiangcenterindex = 1;
						}
						this.alltimeStr = this.getTime(alltime)
						if (info.bg != 0) {
							this.luyinList = res;
							this.recordPath = res[0].recordPath
							this.sliderMax = this.getTime(res[0].recordDuration)
							this.timeStr = this.getTime(res[0].recordDuration)
							this.date = res[0].receptionTime;

							this.getCorpusAnalysis(info);
							this.creatAudio()
						} else {
							this.luyinList = res;
							this.recordPath = res[0].recordPath
							this.sliderMax = this.getTime(res[0].recordDuration)
							this.timeStr = this.getTime(res[0].recordDuration)
							this.date = res[0].receptionTime;

							this.getCorpusAnalysis(info);
							this.creatAudio()
						}
					}
				})
			},


			// 获取转义后的对话结果
			getCorpusAnalysis(info) {
				this.dialogList = [];
				this.newluyinList = []
				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + info.bg + "&speaker=" + this.roleindex, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						this.roleindexbiaoji = 0;
						let jsonInfo = JSON.parse(data.data.data.audioContent);

						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}
						if (data.data.data.speaker == null) {
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
								.name + "顾问";
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}

						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;

						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex;
							if (info.onebest) {
								item.message.forEach(che => {
									if (che.onebest == info.onebest) {
										che.onebest =
											`<font style='color: red'>${che.onebest}</font>`;
									}
								})
							}
						})
						this.newluyinList = jsonInfo;
						this.dialogList.push(jsonInfo[this.textindex]);
						var itc = parseInt(info.bg / 1000)
						this.adasdasdasd(itc)
					}
				})
			},


			//下一页
			ltolower() {
				var lengthcz = this.newluyinList.length - 1;
				if (this.textindex >= lengthcz) {
					uni.showToast({
						title: '到底了',
						duration: 2000
					});
					return
				} else {
					this.textindex = this.textindex + 1;
					this.newluyinList[this.textindex].message.forEach(item => {
						this.dialogList[0].message.push(item)
					})
				}
			},

			//上一页
			rolltoupper() {
				if (this.toptextindex == 0) {
					return
				} else {
					if (this.dialogList[0] == undefined) {
						return
					} else {
						this.toptextindex = this.toptextindex - 1;
						let reverselist = this.newluyinList[this.toptextindex].message;
						let runlist = reverselist.reverse();
						runlist.forEach(item => {
							this.dialogList[0].message.unshift(item)
						})
					}
				}
			},

			//搜索跳转
			adasdasdasd(e) {
				const currTimeStr = this.formatTime(e)
				this.currentTimeStr = currTimeStr
				this.innerAudioContext.seek(e);
				if (uni.getStorageSync('entrance') == 1) {
					return
				} else {
					this.innerAudioContext.play();
				}
			},


			//分角色标记刷新
			fenjiaoseunfo() {
				var bgcd = this.sliderValue * 1000;
				this.newluyinList = [];
				this.dialogList = [];
				uni.request({
					url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + bgcd + "&speaker=" + this.roleindex, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.tablist = [];
						let jsonInfo = JSON.parse(data.data.data.audioContent);
						for (var i = 0; i <= data.data.data.speakerNum; i++) {
							if (i === 0) {
								this.tablist.push({
									name: '全部'
								})
							} else {
								this.tablist.push({
									name: String.fromCharCode(i + 64)
								})
							}
						}

						if (data.data.data.speaker == null) {
							this.roleindexbiaoji = 0;
							this.dshfkjsdkksodofydwfkhwdfkjh = 0;
						} else {
							this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
								.name + "顾问";
							this.roleindexbiaoji = data.data.data.speaker - 1;
							this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
						}
						if (this.roleindex > this.tablist.length - 1) {
							this.roleindex = this.tablist.length - 1
							this.fenjiaoseunfo()
						}


						this.speaker = data.data.data.speaker;
						//上拉标记点
						this.textindex = data.data.data.index;
						//下拉标记点
						this.toptextindex = data.data.data.index;

						jsonInfo.forEach(item => {
							item.message = JSON.parse(item.onebest)
							item.backindex = this.csdFileindex
						})
						console.log(jsonInfo)

						this.newluyinList = jsonInfo;
						if (this.textindex == null) {
							return
						} else {
							this.dialogList.push(jsonInfo[this.textindex]);
						}
					}
				})
			},

			// 选中下标
			change(index) {
				console.log(index)
				this.current = index;
			},


			// 录音暂停播放
			changePlayState() {
				if (this.audioPlay == false) {
					this.innerAudioContext.play();
				} else {
					this.innerAudioContext.pause()
				}
			},

			// 初始化音频方法
			initAudioFnc() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = false;
				this.innerAudioContext.title = '音频';

				this.onPlay()
				this.onPause()
				this.onCanplay()
				this.onEnded()
				this.onSeeking()
				this.onSeeked()
				this.TimeUpdate()
				this.init(this.infos)
			},


			//录音实例
			creatAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
				if (uni.getStorageSync('entrance') == 1) {
					this.innerAudioContext.autoplay = false;
				} else {
					this.innerAudioContext.autoplay = true;
				}

				this.innerAudioContext.src = this.recordPath;
				this.innerAudioContext.title = '音频';
				this.onPlay()
				this.onPause()
				this.onCanplay()
				this.onEnded()
				this.onSeeking()
				this.onSeeked()
				this.TimeUpdate()
			},

			onPlay() {
				this.innerAudioContext.onPlay(() => {
					// 播放监听
					console.log('播放!');
					this.audioPlay = true;
					wx.enableAlertBeforeUnload({
						message: "是否确认退出详情页面？",
						success: function(res) {
							console.log("方法注册成功：", res);
						},
						fail: function(errMsg) {
							console.log("方法注册失败：", errMsg);
						},
					});
				});
			},
			onPause() {
				this.innerAudioContext.onPause(() => {
					wx.disableAlertBeforeUnload({
						success: function(res) {
							console.log(res)
						},
						fail: function(e) {
							console.log(e)
						}
					});
					// 暂停监听
					console.log('暂停播放!');
					this.audioPlay = false
				});
			},
			onCanplay() {
				this.innerAudioContext.onCanplay((callback) => {
					console.log("缓冲回调", this.innerAudioContext.duration);
				})
			},
			onEnded() {
				this.innerAudioContext.onEnded(() => {
					// 结束播放监听
					console.log('播放结束!');
					this.audioPlay = false;
				});
			},
			onSeeking() {
				this.innerAudioContext.onSeeking((res) => {
					console.log("进行跳转", res);
				})
			},
			onSeeked() {
				this.innerAudioContext.onSeeked((res) => {
					console.log("结束跳转", res);
					this.$forceUpdate()
				});
			},
			TimeUpdate() {
				this.innerAudioContext.onTimeUpdate(() => {
					const {
						currentTime,
						duration
					} = this.innerAudioContext;
					this.playNow = parseInt(currentTime * 1000)
					if (this.dialogList.length == 0) {
						return
					} else {
						const message = this.dialogList[0].message;
						for (let i = 0; i < message.length; i++) {
							if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
								this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
								break;
							}
						}
					}
					const currTimeStr = this.formatTime(currentTime);
					this.sliderValue = parseInt(currentTime);
					// 变动的时间
					this.currentTimeStr = currTimeStr;
					//进度条最大值
					this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
					this.$forceUpdate()
				});
			},

			//音频前进回退
			sliderChangeComplate(e) {
				let platetime = e.detail.value * 1000;
				this.dialogList = []
				uni.request({
					url: config.service.fastForward + '?corpusId=' + this.luyinList[this.csdFileindex].id +
						"&bg=" + platetime, //仅为示例，并非真实接口地址。	
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						this.textindex = data.data.data.index;
						this.toptextindex = data.data.data.index;
						if (data.data.data.index > this.newluyinList.length) {
							this.dialogList.push(this.newluyinList[0])
						} else {
							this.dialogList.push(this.newluyinList[data.data.data.index])
						}
						const currTimeStr = this.formatTime(e.detail.value)
						this.currentTimeStr = currTimeStr
						this.innerAudioContext.seek(e.detail.value);
						this.innerAudioContext.play();
					}
				})
			},


			// 格式化时间
			getTime(time) {
				return util.formatSecond(time)
			},

			// 格式化时间
			formatTime(num) {
				//格式化时间格式
				num = num.toFixed(0);
				let second = num % 60;
				if (second < 10) second = '0' + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = '0' + min;
				return min + ":" + second;
			},
		},
		filters: {
			// violatedStatus 
			ViolatedStatus(status) {
				let str = '';
				switch (status) {
					case 0:
						str = '待处理'
						break;
					case 1:
						str = '有效违禁'
						break;
					case 2:
						str = '无效违禁'
						break;
				}
				return str
			},
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100vw;
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;

		.header {
			padding: 20rpx;
			width: 100%;
			height: 180rpx;
			background: #038EF5;

			.h-box {
				padding: 0 16rpx;
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 16rpx;

				.h-b-top {
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.h-b-btm {
					display: flex;
					justify-content: space-between;

					.item {
						flex-shrink: 0;
						display: flex;
						align-items: center;

						&.hit {
							color: #E7483C;
							font-size: bold;
						}

						.item-imgs {
							margin-right: .5em;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}

		.audio {

			.headboxbott {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.headovfu {
					flex: 1;
					height: 88rpx;
					overflow: hidden;
				}

				.headpade {
					width: 160rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-left: 1px solid #D6D6D6;

					.biaoji {
						min-width: 120rpx;
						height: 48rpx;
						background: #E6625B;
						border-radius: 24rpx;
						text-align: center;
						line-height: 48rpx;
						color: #FFFFFF;
						font-size: 26rpx;
					}
				}
			}

		}

		.scroll-Y {
			flex: 1;
			overflow: auto;
			font-size: 36upx;
			color: #999999;
			background: #FFFFFF;
			margin-top: 30upx;
			flex: 1;
			overflow-y: scroll;
			width: 100%;


			.dialog-block {
				margin: 20rpx 0;
				border-bottom: 1px solid #ccc;

				.fileName {
					text-align: center;
					margin: 10rpx auto;
					width: 115rpx;
					height: 42rpx;
					line-height: 42rpx;
					background: #EFEFEF;
					border-radius: 4rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.text {
				margin: 50upx 30upx;
				line-height: 80upx;
				display: flex;
				align-items: center;


				.avatar {
					width: 64upx;
					height: 64upx;
					line-height: 64upx;
					text-align: center;
					font-size: 36rpx;
					border-radius: 50%;
					background: #F2F2F2;
					color: #008EF2;

					image {
						width: 40upx;
					}
				}

				.content {
					margin-left: 30upx;
					line-height: 60rpx;
					text-align: left;
					padding: 0 5px;
					background: #2BC805;
					border-radius: 8upx;
					max-width: 442rpx;
					color: #FFFFFF;
					position: relative;

					.tankuangcss {
						position: absolute;
						top: -140rpx;
						left: -120rpx;
						width: 308rpx;
						height: 130rpx;
						background-color: #333333;
						font-size: 24rpx;
						color: #FFFFFF;
						padding-top: 4rpx;
						padding-bottom: 4rpx;
						display: flex;
						flex-wrap: wrap;
						border-radius: 15rpx;
						z-index: 1000;
					}

					.bottoms {
						top: unset;
						bottom: -140rpx;
					}
				}

				&.active {
					.content {
						color: #FF7538 !important;
						position: relative;
					}
				}

				&.reverse {
					flex-direction: row-reverse;
					text-align: right;

					.content {
						margin-left: 0;
						margin-right: 30upx;
						background: #F6F6F6;
						color: #999999;
					}
				}
			}
		}

		.bottombox {
			width: 100%;
			min-height: 170rpx;
			border-top: 1px solid #E0E0E0;

			.bottomhead {
				width: 100%;
				height: 81rpx;
				border-bottom: 1px solid #E0E0E0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.audio-slider {
					width: 87%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 30rpx;
				}

				.audio-slider .slider {
					width: 100%;
					padding: 0px 15rpx;
					box-sizing: border-box;
				}

				.audio-time {
					width: 110rpx;
					text-align: right;
					font-size: 26rpx;
					line-height: 28rpx;
					color: #70798D;
					display: flex;
					justify-content: space-between;
				}

				.audio-play {
					width: 48rpx;
					height: 48rpx;
					flex-shrink: 0;
				}

				.audio-play .image {
					width: 100%;
					height: 100%;
					margin-left: 30rpx;
				}
			}

			.bottomtips {
				padding: 0 32rpx;
				min-height: 70rpx;
				display: flex;
				align-items: center;
				background: #FDEBC6;
			}

			.botbotmm {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;

				.item {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #E0E0E0;
					border-top: none;
				}

			}
		}

		.bounced {
			width: 570rpx;
			background: #FFFFFF;
			z-index: 1000;
			border-radius: 10rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.headpade {
				margin-top: 10rpx;
				padding: 8rpx 8rpx 8rpx 8rpx;
				background: #108ee9;
				color: #fff;
				border-radius: 16rpx;
			}

			/* 50%为自身尺寸的一半 */
			.jiajinghuatit {
				width: 100%;
				height: 68rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 68rpx;
			}

			.jiajinghuaview {
				padding: 18rpx 18rpx 18rpx 18rpx;
				display: flex;
				flex-wrap: wrap;

				.jiajinghuaview1 {
					padding: 8rpx 8rpx 8rpx 8rpx;
					font-size: 26rpx;
					border-radius: 12rpx;
					border: 1px solid #979797;
					margin-left: 8rpx;
				}

				.jighuaview2 {
					padding: 8rpx 18rpx 8rpx 18rpx;
					font-size: 26rpx;
					border-radius: 12rpx;
					border: 1px solid #979797;
					margin-left: 20rpx;
					margin-top: 10rpx;
					display: flex;

					.view1-text {
						text-align: center;
					}

					.view1-img {
						width: 50rpx;
					}
				}
			}

			.bounced3 {
				height: 100rpx;
				width: 100%;
				margin-top: 40rpx;
				border-top: 1px solid #dddddd;
				display: flex;
			}

			.bounced3-1 {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 100rpx;
				border-right: 1px solid #dddddd;
				font-size: 36rpx;
				color: #999999;
			}

			.bounced3-2 {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 100rpx;
				font-size: 36rpx;
				color: #108ee9;
			}
		}

		.reason {
			padding: 0 32rpx 32rpx;
			width: 686rpx;
			min-height: 350rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.resaon-title {
				padding: 24rpx 0;
				flex-shrink: 0;
				line-height: 32rpx;
				font-size: 32rpx;
				box-sizing: border-box;
			}

			.resaon-textbox {
				padding: 12rpx 16rpx 36rpx;
				position: relative;
				flex-grow: 1;
				box-sizing: border-box;
				border: 1rpx solid #979797;
				// border-radius: 16rpx;
				display: flex;

				textarea {
					flex-grow: 1;
					box-sizing: border-box;
				}

				.lastlength {
					position: absolute;
					right: 32rpx;
					bottom: 12rpx;
					font-size: 24rpx;
					box-sizing: border-box;
				}
			}

			.button {
				margin-top: 24rpx;
				width: 100%;
				display: flex;
				justify-content: flex-end;

				text {
					padding: 10rpx 35rpx;
					color: #fff;
					background: #008EF2;
					border-radius: 16rpx;
				}
			}
		}
	}


	/deep/.u-tab-item {
		border: 1rpx solid #dedede;
	}
</style>