memory/pages/index/detail/detail.vue

<template>
	<view class="wrap">
		<div class="preview-conatiner">
			<view class="title">{{viewData.taskTitle}}</view>		
		</div>
		<view class="content">				
			<view class="result">
				<view class="title">
					<text>内容</text>
					<button @click="read" class="submit-bt read">朗读</button>
				</view>
				<view class="result-conatiner">
					<uni-forms ref="form" :modelValue="formData" :label-width="90">
						<uni-forms-item :label="item.text" v-for="(item,key) in viewData.taskContent" :key="key" required >
							<uni-data-checkbox v-model="item.checked" :localdata="range"></uni-data-checkbox>
						</uni-forms-item>
						<uni-forms-item>
							<button @click="submitForm" class="submit-bt">提交</button>							
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
	import {updateMemory} from '@/api/user.js'
	export default{
		data(){
			return{
				readSrc:"",
				innerAudioContext:null,
				viewData:{
					taskTitle:"",
					taskContent:[]	
				},
				range: [{
						"value": 0,
						"text": "正确"
					},
					{
						"value": 1,
						"text": "错误"
					}
				],
				formData:{}
			}
		},
		onShow() {
			let info=uni.getStorageSync('index-detail-info')
			this.viewData=info
			let taskContentNew=[]
			let items=info.taskContent.split(/[\s\n]/).filter(item=>item!=="");
			items=items.map((item,index)=>{
				return {
					text: item,
					value: index,
					checked:0
				}
			})
			if(!this.isEmpty(info.taskContentNew)){
				taskContentNew=info.taskContentNew.split(/[\s\n]/).filter(item=>item!=="");
				taskContentNew=taskContentNew.map((item,index)=>{
					return {
						text: item,
						value: index,
						checked:1
					}
				})				
			}
			this.viewData.taskContent=items.concat(taskContentNew)
		},
		created() {
			this.getTTStoken()
		},
		onUnload() {
			uni.removeStorageSync('index-detail-info')
			if(this.innerAudioContext){
				this.innerAudioContext.stop();				
				this.innerAudioContext.destroy()
				this.innerAudioContext=null;
			}
		},
		methods:{
			submitForm(){
				let right=this.viewData.taskContent
							  .filter(item=>item.checked==0)
							  .map(item=>item.text)
							  .join(" ")
				let error=this.viewData.taskContent
							  .filter(item=>item.checked==1)
							  .map(item=>item.text)
							  .join(" ")
				updateMemory({
				  "taskId": this.viewData.taskId,
				  "accountId":  this.viewData.accountId,
				  "taskTitle":  this.viewData.taskTitle,
				  "taskContent": right,
				  "expectedFinishDate": this.viewData.expectedFinishDate,
				  "taskPhase": this.viewData.taskPhase,
				  "taskContentNew": error					
				}).then(()=>{
						uni.showToast({
							title:"提交成功！",
							icon:"none"
						})	
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})	
						},1000)
				})			
			},
			async read(){
			  let taskContent=this.viewData.taskContent
			  
			  let time=3;
			  if(this.innerAudioContext){
				  this.innerAudioContext.stop();			   				  
			  }else{
				this.innerAudioContext = uni.createInnerAudioContext();				  
			  }
			  for(let i=0;i<taskContent.length;i++){
				  for(let j=0;j<time;j++){
					 await this.playAudio(this.getreadSrc(taskContent[i].text))
				  }
			  }
			},
			getreadSrc(ttsText){
				let cuid="hyy-"+(new Date().getTime());
				let access_token=this.tts_token
				let spd=3
				let per=0;
				let readUrl=`https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=${cuid}&tok=${access_token}&vol=9&per=${per}&spd=${spd}&pit=5&aue=3&tex=${ttsText}`;		
				return readUrl;
			},
			playAudio(src,sleep=3000){
				return new Promise((resolve, reject)=>{
					var innerAudioContext = this.innerAudioContext;
					innerAudioContext.autoplay = true;
					innerAudioContext.src = src;
					innerAudioContext.onPlay(() => {
					  console.log('开始播放');
					});
					innerAudioContext.onError((res) => {
						uni.showToast({
							title:"播放异常!"
						})
					});
					innerAudioContext.onEnded(()=>{
						setTimeout(()=>{
							resolve()
						},sleep)
					})
				})
			},
			async getTTStoken() {
			  let tts_token=uni.getStorageSync('tts-token')
			  if(this.isEmpty(tts_token)||tts_token&&this.detectionToken(tts_token.time)){
					var [err, res] = await uni.request({
					  url: "http://back.haiyaya.club:8083/hyy/GetAccessToken",
					});	 
					 uni.setStorageSync('tts-token',{
						 token:res.data.refresh_token,
						 time:new Date().getTime()
					 })
					 tts_token=res.data.refresh_token
			  }else{
				  tts_token=tts_token.token
			  }
			  this.tts_token=tts_token;
			},
			detectionToken(token){
				let now=new Date().getTime();
				return now-token.time>5*60*60*24*1000
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		}
	}
</script>

<style lang="scss" scoped>
*{
	padding: 0;
	margin: 0;
}
.wrap{	
	padding:20rpx;
	.title{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;	
		padding:0 0 36rpx 20rpx;
		position: relative;
		&::after{
			width: 12rpx;
			height: 28rpx;
			background:#2A83EF;
			opacity: 1;
			border-radius: 6px;					
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 8rpx;
		}
	}	
	.content{
		padding: 10rpx;
		margin-top: 24rpx;
		::v-deep .uni-forms-item__content{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}	
	.submit-bt{
		width: 400rpx;
		height: 72rpx;
		line-height: 72rpx;	
		text-align: center;							
		background:#3D90F4;
		border-radius: 36rpx;	
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		z-index: 999;
		margin-top: 50rpx;
		&.read{
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;	
			margin-top: 20rpx;
		}
	}
}
</style>