AiToyCXWx/pagesRole/voice.vue

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