shuju_ui/qs_zhaoshang/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 弹窗 -->
		<view class="fixedbox" v-if="type==1">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">
			暂缓/销号
			</view>
			<view class="boxs">
				<view class="box">
					<view class="flexcc boxcen" :class="zanflag?'act':''" @click="zanflag=true">
						<image :src="checkimg" v-if="zanflag"></image>
						<image :src="checknimg" v-else></image>
						<view>暂缓</view>
					</view>
					<view class="flexcc boxcen" :class="zanflag?'':'act'" @click="zanflag=false">
						<image :src="checknimg" v-if="zanflag"></image>
						<image :src="checkimg" v-else></image>
						<view>销号</view>
					</view>
				</view>
			</view>
			<view class="fixedbtn" @click="getSubmit">提交</view>
		</view>
			
		<!-- 审核意见 -->
		<view class="fixedbox" v-if="type==2">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">审核意见</view>
			<view  class="boxs">
				<view class="mb30">
					<view class="f16 fw mb10">是否通过</view>
					<view class="flexc">
						<view class="flexc boxcen" :class="shenflag?'act':''" @click="shenflag=true">
							<image :src="gcheckimg" v-if="shenflag"></image>
							<image :src="checknimg" v-else></image>
							<view :class="shenflag?'co28':''">通过</view>
						</view>
						<view class="flexc boxcen" :class="shenflag?'':'act'" @click="shenflag=false">
							<image :src="checknimg" v-if="shenflag"></image>
							<image :src="gcheckimg" v-else></image>
							<view :class="shenflag?'':'co28'">不通过</view>
						</view>
					</view>
				</view>
				<view class="flexcj mb16">
					<view class="f16 fw">反馈意见</view>
					<view class="flexc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea @blur="getBlur" style="height: 256rpx;" v-model="psnr" placeholder="选择不通过必须填写反馈意见，限1000 字内…" maxlength="1000" class="textar"></textarea>
			</view>
			<view class="fixedbtn" @click="getyjSubmit">提交</view>
		</view>
		<!-- 批示弹窗 -->
		<view class="fixedbox" v-if="type==3">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">批示</view>
			<view class="chebox" v-if="status=='update'&&checkPermi(['system:ldps:delete'])" @click="getDelFn">
				<image :src="cheimg"></image>
				<view>撤回</view>
			</view>
			<view class="boxs">
				<view class="flexcj mb16">
					<view class="f16 fw">批示详情</view>
					<view class="flexc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea  @blur="getBlur" v-model="psnr" placeholder="批示详情，限1000 字内…" maxlength="1000" class="textar"></textarea>
			</view>
			<!-- 判断权限 -->
			<block v-if="(status=='update'&&checkPermi(['system:ldps:update']))||(status=='add'&&checkPermi(['system:ldps:add']))">
				<view class="fixedbtn btn1" @click='getLinSubmit(0)'>暂存</view>
				<view class="fixedbtn" @click="getLinSubmit(1)">提交</view>
			</block>			
			
		</view>
		<!-- 项目进展弹窗 -->
		<view class="fixedbox inform" v-if="type==4">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">对接模块</view>
			<view class="boxs">
				<view class="flexcj mb16">
					<view class="f16 fw">对接情况</view>
					<view class="flexc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea @blur="getBlur"  v-model="psnr" placeholder="对接情况，限1000 字内…" maxlength="1000" class="textar mb30"></textarea>
				<view class="flexc infolist mb6">
				 	<view class="f16 fw c34 flex0 pr">附件</view>
					<view class="infolist_a co28">
						<!-- 上传附件 -->
						<lsj-upload 
						    ref="lsjUpload"
						    childId="upload1"
						    :width="width"
						    :height="height"
						    :option="option"
						    :size="size"
						    :formats="formats"
						    :debug="debug"
						    :instantly="instantly"
						    @progress=""
							@uploadEnd="onuploadEnd" >
						        <view class="btn" :style="{width: width,height: height}">选择附件</view>
						</lsj-upload>
					</view>
				 </view>
				<!-- 附件展示 -->
				<view class=" cldelistbf"  v-for="(ite,idx) in filelist" :key='idx'>
					<view class="flext f15 c6" @click="getDown(ite.path)">
						<view class="imgl"><image :src="wimg" ></image></view>
						<view>{{ite.fjName}}</view>
					</view>
					<!-- 删除 -->
					<view class="delimg flex0" @click.stop="getDelFj(idx)">
						<image :src="delimg"></image>
					</view>
				</view>
				
				<view class="infolist_b"><text>*</text>请上传大小不超过<text>100MB</text>格式为<text>doc/xls/ppt/txt/pdf/zip/rar/word</text>的文件</view>
			</view>
			<view class="fixedbtn" @click="getXmSubmit">提交</view>
		</view>
		<!-- 专班跟进 -->
		<view class="fixedbox" v-if="type==5">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">专班跟进</view>
			<view  class="boxs">
				<view class="mb30">
					<view class="f16 fw mb10">是否专班跟进</view>
					<view class="flexc">
						<view class="flexc boxcen" :class="zbflag?'act':''" @click="zbflag=true">
							<image :src="gcheckimg" v-if="zbflag"></image>
							<image :src="checknimg" v-else></image>
							<view :class="zbflag?'co28':''">是</view>
						</view>
						<view class="flexc boxcen" :class="zbflag?'':'act'" @click="zbflag=false">
							<image :src="checknimg" v-if="zbflag"></image>
							<image :src="gcheckimg" v-else></image>
							<view :class="zbflag?'':'co28'">否</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fixedbtn" @click="getzbSubmit">提交</view>
		</view>
		<!-- 重点项目进展 -->
		<view class="fixedbox inform" v-if="type==6">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">上报进度</view>
			<view class="boxs">
				<view class="flexcj mb16">
					<view class="f16 fw">项目进展情况</view>
					<view class="flexc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea @blur="getBlur" style="height: 200rpx;" v-model="psnr" placeholder="项目进展情况，限1000 字内…" maxlength="1000" class="textar mb30"></textarea>
				<view class="flexcj mb16">
					<view class="f16 fw">施工力量</view>
					<view class="flexc speech" @click="getSeep('sgll')">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea @blur="getBlur" style="height: 200rpx;"  v-model="sgll" placeholder="请输入施工力量（包含人、材、机）…" maxlength="1000" class="textar mb30"></textarea>
				<view class="flexc infolist mb6">
				 	<view class="f16 fw c34 flex0 pr">附件</view>
					<view class="infolist_a co28">
						<!-- 上传附件 -->
						<lsj-upload 
						    ref="lsjUpload"
						    childId="upload1"
						    :width="width"
						    :height="height"
						    :option="option"
						    :size="size"
						    :formats="formats"
						    :debug="debug"
						    :instantly="instantly"
						    @progress=""
							@uploadEnd="onuploadEnd" >
						        <view class="btn" :style="{width: width,height: height}">选择附件</view>
						</lsj-upload>
					</view>
				 </view>
				<!-- 附件展示 -->
				<view class=" cldelistbf"  v-for="(ite,idx) in filelist" :key='idx'>
					<view class="flext f15 c6" @click="getDown(ite.path)">
						<view class="imgl"><image :src="wimg" ></image></view>
						<view>{{ite.fjName}}</view>
					</view>
					<!-- 删除 -->
					<view class="delimg flex0" @click.stop="getDelFj(idx)">
						<image :src="delimg"></image>
					</view>
				</view>
				
				<view class="infolist_b"><text>*</text>请上传大小不超过<text>100MB</text>格式为<text>doc/xls/ppt/txt/pdf/zip/rar/word</text>的文件</view>
			</view>
			<view class="fixedbtn" @click="getXmSubmitzd">提交</view>
		</view>
		<!-- 重点领导批示 -->
		<view class="fixedbox" v-if="type==7">
			<image :src="closeimg" class="choseimg" @click="getClose"></image>
			<view class="top">批示</view>
			<view class="chebox" v-if="status=='update'&&checkPermi(['fgw:ldps:remove'])" @click="getDelFn">
				<image :src="cheimg"></image>
				<view>撤回</view>
			</view>
			<view class="boxs">
				<view class="flexcj mb16">
					<view class="f16 fw">批示详情</view>
					<view class="flexc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea  @blur="getBlur" v-model="psnr" placeholder="批示详情，限1000 字内…" maxlength="1000" class="textar"></textarea>
			</view>
			<!-- 判断权限 -->
			<block v-if="(status=='update'&&checkPermi(['fgw:ldps:edit']))||(status=='add'&&checkPermi(['fgw:ldps:add']))">
				<view class="fixedbtn btn1" @click='getLinSubmit(0)'>暂存</view>
				<view class="fixedbtn" @click="getLinSubmit(1)">提交</view>
			</block>			
			
		</view>
		<!-- 重点项目 一键催报 -->
		<!-- 语音识别 -->
		<view class="bgbox bgvoice"  v-if="voiceflag"  @click="getClosevoice"></view>
		<view class="voice" v-if="voiceflag">
			<image :src="closeimg" class="choseimg" @click="getClosevoice"></image>
			<view v-if="isShow">
				<view v-if="sendLock" class="tip">
					<view class="txt">试试这样说</view>
					<view class="txt-bt">科技项目</view>
				</view>
				<view v-else>
					<!-- @click="resultClick" -->
					
					<view class="res-txt" >
						<!-- 实时翻译 -->
						<text :style="{
							color: (resultText == '正在识别中2...' || resultText == '未检测到语音，请重试') ? 
							'#919098' : 
							'#2979ff'}">
							{{resultText}}
						</text>
						<!-- <image v-if="resultText != '正在识别中.1..' && resultText != '未检测到语音，请重试'"
							src="/static/img/xiaoshou.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		 
			<view v-else class="tip">
				<view v-if="!sendLock" class="tipbox">{{voicetext}}</view>
				<view v-html="text" class="txt" style="color: #8e8d9a;"></view>
				
				<view v-if="!sendLock" class="prompt-loader">
					<view class="em" :style="randomRgb()" v-for="(item,index) in 30" :key="index"></view>
				</view>
				<view v-else class="prompt-loader"></view>
			</view>
		 
			<view class="btn" @longpress="handleRecordStart" @touchmove="handleTouchMove" @touchend="handleRecordStop">
				<view class="btn-cont">
					长按开始语音搜索
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	const recorderManager = uni.getRecorderManager();
	//播放录音
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	export default{
		props:{
			type: {
				type: Number,
				default () {
					return 0
				}
			},
			status:{
				type: String,
				default () {
					return 'add'
				}
			},
			iteminfo:{},
			xmjzinfo:{},
		},
		data(){
			return{
				//附件
				  option: {
				        // 上传服务器地址，需要替换为你的接口地址
				        url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
				        // 上传附件的key
				        name: 'file',
				        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				        header: {
				            // 示例参数可删除
				            'Authorization':  'Bearer ' + getToken(),
				        },
				        // 根据你接口需求自定义body参数
				        formData: {
				        }
				    },
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '',
				height: '48rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: 'doc,docx,xls,ppt,txt,pdf,zip,rar,word',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制 默认10
				count: 5,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				filelist:[],
				delimg:require("@/static/images/mine/del.png"),
				
				checkimg:require("@/static/images/mine/oicon.png"),
				checknimg:require("@/static/images/mine/jnicon.png"),
				gcheckimg:require("@/static/images/mine/jicon.png"),
				upimg:require('@/static/images/index/up.png'),
				wimg:require('@/static/images/index/wicon.png'),
				downimg:require('@/static/images/index/down.png'),
				speechimgs:require('@/static/images/index/speechs.png'),
				cheimg:require('@/static/images/index/cheicon.png'),
				
				closeimg:require('@/static/images/close.png'),
				wimg:require('@/static/images/index/wicon.png'),
				downimg:require('@/static/images/index/down.png'),
				zanflag:true,
				shenflag:true,
				shyj:'',//审核意见
				psnr:'',//领导批示
				jzqk:'',//项目进展
				sgll:'',//施工力量
				
				voiceflag:false,
				voiceToken: '',
				timer: null,
				text: '',
				resultText: '正在识别中...',
				startPoint: {},
				sendLock: true,
				isShow: true,
				adioFileData: '',
				adioSize: '',
				resContent: '',
				luyinStatus: true,
				voicetext:'',
				options: {}, // 语音转文字的设置
				partialResult:'',//临时语音
				zbflag:true,
				cursor:0,
				seeptype:'',//重点项目进展
			}
		},
		watch:{
			iteminfo(val){
				var that=this;
				that.psnr='';
				// console.log(val,0)
				if(val.zcpsnr){
					that.psnr=val.zcpsnr;
				}else if(val.psnr){
					that.psnr=val.psnr;
				}
				// console.log(that.psnr,8855)
				// if(val.psnr){
					
				// }else if(val.zcpsnr){
					
				// }
			},
			xmjzinfo(val){
				var that=this;
				if(that.type==6){
					that.psnr=val.jzqk||'';
					that.sgll=val.sgll||'';
					that.filelist=[];
					if(val.fjList&&val.fjList.length){
						that.filelist=JSON.parse(JSON.stringify(val.fjList))
					}
				}
			},
			sendLock(newVal, oldVal) {
				var that=this;
				recorderManager.onStop(res => {
					if (newVal) return //上锁不发送
					//解锁发送网络请求
					setTimeout(function(res){
						if(!that.voicetext&&!that.partialResult){
							that.resultText='未检测到语音，请重试'
						}else{
							that.resultText=that.voicetext||that.partialResult;
							var cursor=that.cursor;
							if(cursor==0){
								if(that.seeptype=='sgll'){
									that.sgll=that.sgll+that.resultText;
								}else{
									that.psnr=that.psnr+that.resultText;
								}
								
							}else{
								if(that.seeptype=='sgll'){
									that.sgll=that.sgll.slice(0,cursor)+that.resultText+that.sgll.slice(cursor);
								}else{
									that.psnr=that.psnr.slice(0,cursor)+that.resultText+that.psnr.slice(cursor);
								}
								
							}
							
							
							that.voiceflag=false;
						}
						that.sendLock=true;
						
					},1000)
					// console.log(res.tempFilePath, '获取录音文件')
				});
			},
		},
		onShow() {
			
		},
		mounted() {
			var that=this;
					// #ifdef APP-PLUS
					// 监听语音识别事件
					plus.speech.addEventListener('recognizing', this.onRecognizing, false);
					// #endif	
							  
					recorderManager.onStop(function(res) {
						//录音后的回调函数
						if(!this.sendLock){
							console.log(that.voicetext,that.partialResult)
						}
						console.log('recorder stop' + JSON.stringify(res));
					});  
							  
		},
		methods:{
			checkPermi, checkRole,
			getBlur(e){
				this.cursor=e.detail.cursor;
			},
			// 语音转文字
			getClosevoice(){
				this.voiceflag=false
			},
			onRecognizing(e){
				this.partialResult=e.partialResult;
			},
			// 录音转文字
			handleVoice() {
				// console.log('语音输入')
				let _this = this;
				// _this.psnr = '';
				this.options.engine = 'baidu'
				// this.options.timeout = 60 * 1000; //超时时间
				this.options.continue = true;//语音识别是否采用持续模式
				this.options.punctuation = true; // 是否需要标点符号 
				this.options.userInterface = false; // 是否显示语音界面
				plus.speech.startRecognize(this.options, (s) => {
					_this.voicetext+=s;
					console.log(s,9)
					// plus.speech.stopRecognize(); // 关
				});
			},
			//长按录音方法
			handleRecordStart(e) {
				this.voicetext='';
				this.partialResult='';
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				recorderManager.start({duration: 60000}); //开始录音
				this.handleVoice()
				this.text = `<text style="color:#333">上划取消搜索</text>`;
				this.sendLock = false; //长按时不上锁。
				this.isShow = false;
				this.resultText = '正在识别中...';
				// 按钮
				// console.log(67)
			},
			//结束录音 (手指松开)时触发
			handleRecordStop(e) {
				var that=this;
				this.isShow = true;
				setTimeout(function(){
					plus.speech.stopRecognize();
					recorderManager.stop(); //结束录音
				},1300)
				
			},
			//上划取消搜索
			handleTouchMove(e) {
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY;
				if (Math.abs(moveLenght) > 50) {
					this.text = `松开手指，<text style="color:#333">取消搜索</text>`;
					this.sendLock = true; //触发了上滑取消搜索，上锁
					this.isShow = false;
				} else {
					this.text = `<text style="color:#333">上划取消搜索</text>`;
					this.sendLock = false; //上划距离不足，可以搜索，不上锁
					this.isShow = false;
				}
			},
			//获取录音结果子传父
			resultClick() {
				if (this.resultText == '正在识别中...' || this.resultText == '未检测到语音，请重试') return;
				
				this.$emit('voiceResult', this.resultText)
			},
			//弹窗关闭之后的操作，点击遮罩层或关闭按钮
			// afterHide() {
			// 	this.sendLock = true;
			// 	this.$emit('closePopup');
			// 	clearInterval(this.timer);
			// 	this.resultText = '正在识别中...';
			// },
			randomRgb() {
				let R = Math.floor(Math.random() * 130 + 110);
				let G = Math.floor(Math.random() * 130 + 110);
				let B = Math.floor(Math.random() * 130 + 110);
				return {
					background: `rgb(${R},${G},${B}, 1)`
				};
			},
			// 语音转文字
			getSeep(e){
				this.seeptype=e||'';
				this.voicetext='';
				this.partialResult='';
				this.voiceflag=true;		
			},
			ontStart() {
				// recorderManager.start();
						console.log('startRecognize');
			
					},
			onEnd() {
				// recorderManager.stop();
						console.log('endRecognize');
			
					},
			getClose(){
				this.$emit("getClose")
			},
			// 专班
			getzbSubmit(){
				var that=this;
				var zanstr='N'
				if(that.zbflag){
					zanstr='Y'
				}else{
					zanstr='N'
				}
				uni.showModal({
					title: '确认信息',
					content: "确认是否专班跟进",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit("getzbSubmit",zanstr)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			// 暂缓提交
			getSubmit(){
				var str='';
				var that=this;
				if(this.zanflag){
					str='暂缓'
				}else{
					str='销号'
				}
				uni.showModal({
					title: '确认'+str,
					content: "是否确认"+str+"该条线索",
					cancelText: '取消'+str,
					confirmText: '确认'+str,
					success: function(res) {
						if (res.confirm) {
							that.$emit("getzanFn",that.zanflag)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
			// 意见
			getyjSubmit(){
				var data={};
				var that=this;
				var str=""
				if(!this.shenflag){
					data.shjg='3';
					str='不通过'
					if(!this.psnr){
						this.$toast('请输入反馈意见')
						return
					}else{
						data.shyj=this.psnr
					}
				}else{
					str='通过'
					data.shjg='2',
					data.shyj=this.psnr
				}
				// 确认框
				uni.showModal({
					title: '确认审核',
					content: "是否确认"+str+'审核',
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit("getyjSubmit",data)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
			// 领导批示
			getLinSubmit(e){
				if(!this.psnr){
					this.$toast('请输入批示详情')
				}else{
					var newObj={
						type:e,
						psnr:this.psnr
					}
					this.$emit("getLinSubmit",newObj)
				}
			},
			//撤销批示
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认撤回',
					content: "是否撤回该条批示",
					cancelText: '取消撤回',
					confirmText: '确认撤回',
					success: function(res) {
						if (res.confirm) {
							that.$emit("getldDelFn")
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
			// 项目进展
			getXmSubmit(){
				var that=this;
				if(!this.psnr){
					this.$toast('请输入对接情况')
				}else{
					var obj={
						jzqk:this.psnr
					}
					obj.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
					
					uni.showModal({
						title: '确认添加',
						content: "是否添加对接情况",
						cancelText: '取消',
						confirmText: '确认',
						success: function(res) {
							if (res.confirm) {
								that.$emit("getXmSubmitFn",obj)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			//重点项目进展
			getXmSubmitzd(){
				var that=this;
				if(!this.psnr){
					this.$toast('请输入项目进展情况')
				}else{
					var obj={
						jzqk:this.psnr,
						sgll:this.sgll
					}
					obj.fjList=JSON.parse(JSON.stringify(this.filelist))
					
					uni.showModal({
						title: '确认添加',
						content: "是否确认添加上报进度",
						cancelText: '取消',
						confirmText: '确认',
						success: function(res) {
							if (res.confirm) {
								that.$emit("getXmSubmitFn",obj)
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				newobj.fjName=responseText.originalFilename;
				newobj.path=responseText.fileName;
				if(this.type==6){
					newobj.xmId=this.xmjzinfo.xmId;
					newobj.xmmc=this.xmjzinfo.xmmc;
					newobj.type=18;
				}
				this.filelist.push(newobj)
			},
			getDelFj(idx){
				this.filelist.splice(idx,1)
			},
			getDown(e){
				var url=baseUrl+e;
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
						uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
// 弹窗
.fixedbox{position: fixed;left: 66rpx;right: 66rpx;background: #fff;border-radius: 10rpx;min-height: 468rpx;top: 50%;transform: translateY(-50%);z-index: 20;padding: 48rpx 56rpx 68rpx;max-height: calc(100vh - 300rpx);overflow: auto;box-sizing: border-box;
.choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;z-index: 22;}
.chebox{position: absolute;right: 36rpx;top:54rpx;display: flex;align-items: center;
	image{width: 30rpx;height: 32rpx;margin-right: 12rpx;}
	view{font-size: 32rpx;font-weight: 500;color: #F13800;;}
}
.top{position: relative;text-align: center;font-size: 34rpx;font-weight: bold;color: #343434;}
.boxs{padding: 60rpx 0;
	.box{display: flex;align-items: center;min-height:100rpx;}
	.boxcen{flex:1;
		&.act{
			view{color: #FF6400;}
		}
		image{width: 32rpx;height: 32rpx;margin-right: 20rpx;}
		view{font-size: 32rpx;font-weight: 500;
color: #666666;}
	}
	
	// 语音
	.speech{
		image{width: 26rpx;height: 34rpx;margin-right: 10rpx;}
		view{font-size: 32rpx;font-weight: 500;color: #20ABCE;}
	}
	.textar{width: 100%;border: 2rpx solid #FF6400;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 30rpx;color: #343434;height: 376rpx;}
}
.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
	&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
}
.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
  	image{width: 30rpx;height: 30rpx;}
  }

// 附件
.infolist_a{height: 44rpx;flex: 1;text-align: right;font-size: 32rpx;color: #343434;}


.bgvoice{z-index: 1900;}
.choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;}
.voice {
		min-height: 500rpx;
		padding: 100rpx 60rpx 0 60rpx;
		position: relative;
		background-color: #fff;
		position: fixed;
		left:0;right:0;bottom:0;z-index: 2000;
		padding-bottom: 180rpx;
		.res-txt {
			text-align: center;
			margin-top: 40rpx;
			font-size: 36rpx;
			color: #919098;
 
			image {
				display: block;
				margin: auto;
				margin-top: 10rpx;
				width: 60rpx;
				animation: bounce-down 2.6s linear infinite;
			}
		}
 
		.tip {
			margin-top: 15rpx;
			text-align: center;
 
			.txt {
				font-size: 36rpx;
				color: #151823;
			}
 
			.txt-bt {
				margin-top: 20rpx;
				color: #919098;
			}
		}
 
		.btn {
			width: 50%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 50rpx;
			background: #3484fd;
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
 
			.btn-cont {
				display: flex;
				align-items: center;
			}
		}
	}
 
	@-webkit-keyframes bounce-down {
		25% {
			-webkit-transform: translateY(-10px);
		}
 
		50%,
		100% {
			-webkit-transform: translateY(0);
		}
 
		75% {
			-webkit-transform: translateY(13px);
		}
	}
	.content{background-color: #f5f5f5;position: fixed;left: 0;right: 0;bottom: 0;z-index: 10000;height: 500rpx;}
	/* 语音动画 */
	.prompt-loader {
		width: 100%;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx auto;
	}
 
	.prompt-loader .em {
		height: 15%;
		width: 2px;
		float: left;
		display: block;
		background: #333333;
	}
 
	.prompt-loader .em:last-child {
		margin-right: 0px;
	}
 
	.prompt-loader .em:nth-child(1) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(2) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(3) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(4) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(5) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(6) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(7) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(8) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(9) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(10) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(11) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(12) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(13) {
		animation: load 1.3s 1s infinite linear;
	}
 
	.prompt-loader .em:nth-child(14) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(15) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(16) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(17) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(18) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(19) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(20) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(21) {
		animation: load 1.3s 0.5s infinite linear;
	}
 
	.prompt-loader .em:nth-child(22) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(23) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(24) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(25) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(26) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(27) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(28) {
		animation: load 1.3s 0.1s infinite linear;
	}
 
	.prompt-loader .em:nth-child(29) {
		animation: load 1.3s 0.3s infinite linear;
	}
 
	.prompt-loader .em:nth-child(30) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	@keyframes load {
		0% {
			height: 15%;
		}
 
		50% {
			height: 100%;
		}
 
		100% {
			height: 15%;
		}
	}

</style>