|
|
@@ -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>
|
