增加音色选择页面

pages.json

@@ -82,6 +82,12 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "voice",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "roleDetail",
 					"style": {

pagesRole/voice.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='音色'></cus-header>
+		<template v-if="list.length">
+			<div class="list">
+				<div class="item adfacjb" :class="{'active':index===idx}" v-for="(item,index) in list" :key="index" @tap="selectVoice(item,index)">
+					<div class="il">{{item.name}}</div>
+					<div class="ir" v-if="index===idx">已选择</div>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<page-empty :height="'calc(100vh - 160rpx)'"></page-empty>
+		</template>
+		<div class="zt_btn" @tap="confirm">确认选择</div>
+	</view>
+</template>
+
+<script>
+	import pageEmpty from '@/components/pageEmpty/index.vue'
+	export default {
+		components:{pageEmpty},
+		data(){
+			return {
+				idx:'',
+				list:[],
+				voice:null
+			}
+		},
+		onLoad() {
+			this.getModelVoiceList();
+		},
+		methods:{
+			getModelVoiceList(){
+				this.$api.get(`/models/${'TTS_EdgeTTS'}/voices`).then(res=>{
+					if(res.data.code!==0) return this.$showToast(res.data.msg)
+					this.list = res.data.data;
+				})
+			},
+			selectVoice(item,index){
+				this.voice = item;
+				this.idx = index;
+			},
+			confirm() {
+				if(!this.voice) return this.$showToast('请选择音色');
+				this.getOpenerEventChannel().emit('selectVoice',this.voice)
+				uni.navigateBack();
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.page{
+		width: 100%;
+		padding: 0 30rpx 140rpx;
+		background: #FFFFFF;
+		box-sizing: border-box;
+		
+		.list{
+			margin-top: 35rpx;
+			.item{
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E2E2E2;
+				padding: 41rpx 30rpx 41rpx 0;
+				width: 100%;
+				box-sizing: border-box;
+				&>div{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 30rpx;
+					color: #111111;
+					line-height: 32rpx;
+				}
+				&.active{
+					&>div{
+						color: #72832B;
+					}
+				}
+			}
+		}
+		
+		.zt_btn{
+			width: calc(100% - 60rpx);
+			position: fixed;
+			left: 30rpx;
+			bottom: 30rpx;
+			z-index: 999;
+		}
+	}
+</style>