digitalMen/pages/robot/generate/index.vue

<template>
	<view class="container">
		<tn-nav-bar :isBack="true" backgroundColor="#fff" :bottomShadow="false">数字人创建</tn-nav-bar>
		<view class="pos">
		</view>
		<view class="context">
			<view class="top">
				<view class="videoBox">
					<image v-if="selBgPic" :src="selBgPic"></image>
					<view v-else class="emptyVideo"></view>
				</view>
			</view>
			<view class="selCon">
				<view class="item">
					<view class="label">
						语速：
					</view>
					<view class="con">
						{{roundRate}}X
					</view>
				</view>
				<view class="item">
					<view class="label">
						声音：{{selVoiceItem.name}}
					</view>
					<image class="conImg" :src="selVoiceItem.url">
					</image>
				</view>
				<view class="item">
					<view class="label">
						角色：{{selRoleItem.name}}
					</view>
					<image class="conImg" :src="selRoleItem.url">
					</image>
				</view>
			</view>
			<view class="centerMenuBar">
				<view class="barItem" v-for="(item,index) in menuList" @click="handleSetBox(item)">
					<view class="left">
						<image src="/static/images/head.jpg" mode=""></image>
					</view>
					<view class="right">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="robotNameBox">
				<!-- 	<view class="name">
					播报标题：
				</view> -->
				<uni-easyinput :inputBorder="true" :clearable="false" v-model="robotName"
					placeholder="请输入播报标题"></uni-easyinput>
			</view>
			<u--textarea height="" border="none" :autoHeight="true" maxlength="9999" v-model="textAreaValue"
				placeholder="请输入播报内容"></u--textarea>

			<view class="btnBox">
				<view class="btn" @click="genRobot">
					合成
				</view>
				<view class="btn draft" @click="saveDraft">
					存草稿
				</view>
			</view>

		</view>
		<u-picker :showIcon="true" :show="showMoreMenu" :columns="columns" title="更多" confirmColor=""
			@cancel="showMoreMenu=false" @confirm="handleConfirm"></u-picker>

		<u-popup :show="show" @close="close" @open="open">
			<view class="contentBox">
				<view class="toolBar">
					<view class="cancel" @click="show=false">
						<image src="/static/images/closeBtn.png" mode=""></image>
					</view>
					<view class="center">
						全局语速
					</view>
					<view class="confirm" @click="handleBtnConfirm">
						<image src="/static/images/selected.png" mode=""></image>
					</view>
				</view>
				<view class="content" style="min-height: 300rpx;">
					<u-slider height="50" min="0.7" max="1.3" step="0.1" class="slider" :showValue='false'
						@change="handleChange" activeColor="#26b3a0" v-model="voiceRate"></u-slider>
					<view class="sliderValue">
						{{roundRate}}X
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 声音 -->
		<u-popup :show="show1" @close="close" @open="open">
			<view class="contentBox">
				<view class="toolBar">
					<view class="cancel" @click="show1=false">
						<image src="/static/images/closeBtn.png" mode=""></image>
					</view>
					<view class="center">
						声音
					</view>
					<view class="confirm" @click="handleBtnConfirm1">
						<image src="/static/images/selected.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<!-- 			<view class="filterBox">
						<view class="tabList">
							<view class="item1" v-for="(item,index) in voiceList"
								:class="[currTabIndex==index?'tabActive':'']" @click="currTabIndex=index">
								{{item}}
							</view>
						</view>
						<view class="filterBtn" @click="handleFilter">
							<text class="iconfont icon-shaixuanguolv" style="font-size: 44rpx; color: #26b3a0;"></text>

						</view>
					</view> -->

					<view class="filterConList" style="max-height: 500rpx;min-height: 500rpx;overflow-y: scroll;">
						<view class="item" v-for="(item,index) in allList" @click="handleVoiceSel(item,index)">
							<image :class="[currTabIndexAll==index?'sel':'']" :src="item.url" mode="">
							</image>
							<view class="nameDes">
								{{item.title}}
							</view>
							<view class="name" :class="[currTabIndexAll==index?'selTxt':'']">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 模型 -->
		<u-popup :show="show3" @close="close" @open="open">
			<view class="contentBox2">
				<view class="toolBar">
					<view class="cancel" @click="show3=false">
						<image src="/static/images/closeBtn.png" mode=""></image>
					</view>
					<view class="center">
						角色
					</view>
					<view class="confirm" @click="handleBtnConfirm2">
						<image src="/static/images/selected.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<!-- 	<view class="filterBox">
						<view class="tabList">
							<view class="item1" style="padding-left: 40rpx;padding-right: 40rpx;"
								v-for="(item,index) in viewList" :class="[currTabIndex1==index?'tabActive':'']"
								@click="currTabIndex1=index">
								{{item}}
							</view>
						</view>
					</view> -->

					<view class="filterConList">
						<view class="item" v-for="(item,index) in roleList" @click="handleRoleSel(item,index)">
							<image :class="[currTabIndexModal==index?'sel':'']" :src="item.url" mode="">
							</image>
							<view class="name" :class="[currTabIndexModal==index?'selTxt':'']">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 背景 -->
		<u-popup :show="show4" @close="close" @open="open">
			<view class="contentBox2">
				<view class="toolBar">
					<view class="cancel" @click="show4=false">
						<image src="/static/images/closeBtn.png" mode=""></image>
					</view>
					<view class="center">
						背景
					</view>
					<view class="confirm" @click="handleBtnConfirm3">
						<image src="/static/images/selected.png" mode=""></image>
					</view>
				</view>
				<view class="content">
					<!-- 	<view class="filterBox">
						<view class="tabList">
							<view class="item1" style="padding-left: 40rpx;padding-right: 40rpx;"
								v-for="(item,index) in bgList" :class="[currTabIndex2==index?'tabActive':'']"
								@click="currTabIndex2=index">
								{{item}}
							</view>
						</view>
					</view> -->

					<view class="filterConList2" style="max-height: 500rpx;min-height: 500rpx;overflow-y: scroll;">
						<view class="pictureBox" v-if="currTabIndex2==0">
							<image :class="[currTabIndexBg==index?'sel':'']" :src="item.url" mode=""
								v-for="(item,index) in bgPicList" @click="handleSelBg(item,index)"></image>
						</view>
						<view class="pictureBox" v-if="currTabIndex2==1">
							<view class="color" :style="{background:item}" :class="[currTabIndexBgc==index?'sel':'']"
								v-for="(item,index) in bgColorList" @click="currTabIndexBgc=index"></view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 声音筛选弹框 -->
		<u-popup :show="show2" @close="close" @open="open">
			<view class="contentBox">
				<view class="toolBar2">
					<view class="closeBtn" @click="show2=false">
						<!-- <image src="/static/images/selected.png" mode=""></image> -->
						X
					</view>
				</view>
				<view class="content">
					<!-- 场景 -->
					<view class="scenList">
						<view class="item " v-for="(item, index) in scenList"
							:class="[currScenIndex==index?'active':'']" @click="currScenIndex=index">
							{{item}}
						</view>
					</view>
					<!-- 性别-->
					<view class="sexList">
						<view class="item " v-for="(item, index) in sexList" :class="[currSexIndex==index?'active':'']"
							@click="currSexIndex=index">
							{{item}}
						</view>
					</view>
					<!-- 年龄-->
					<view class="ageList">
						<view class="item " v-for="(item, index) in ageList" :class="[currAgeIndex==index?'active':'']"
							@click="currAgeIndex=index">
							{{item}}
						</view>
					</view>

					<view class="filterBtn2" @click="filter">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 备用-视频尺寸 -->
		<u-popup :show="show5" @close="close" @open="open">
			<view class="contentBox">
				<!-- 	<view class="toolBar2">
					<view class="closeBtn" @click="show5=false">
						X
					</view>
				</view> -->
				<view class="toolBar toolBar2">
					<view class="cancel">
					</view>
					<view class="center">
						视频尺寸
					</view>
					<view class="confirm" @click="handleBtnConfirm2">
						<!-- <image src="/static/images/selected.png" mode=""></image> -->
						<view class="closeBtn" @click="show5=false">
							X
						</view>
					</view>
				</view>
				<view class="content">
					<view class="videoRatioBox">
						<view class="item">
							<view class="top">
								竖版视频
							</view>
							<view class="bottom">
								9:16
							</view>
						</view>
						<view class="item">
							<view class="top">
								横版视频
							</view>
							<view class="bottom">
								16:9
							</view>
						</view>
					</view>
					<view class="filterBtn2" @click="show5=false">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <wike-tabbar :onTabbar="true" :isShowAnimate="true"></wike-tabbar> -->
	</view>
	</view>
</template>

<script>
	import {
		generateWork,
		roleList,
		voiceList,
		backList
	} from '@/api/robot/index.js'
	import indexVue from './index.vue';
	export default {
		data() {
			return {
				show5: false,

				show4: false,
				bgList: ['图片', '颜色'],
				currTabIndex2: 0,
				currTabIndexBg: -1,
				currTabIndexBgc: -1,
				bgPicList: [],
				bgColorList: ['red', 'green', 'blue', 'orange', 'green', 'blue', 'orange'],

				show3: false,
				viewList: ['2D', '3D'],
				currTabIndex1: 0,
				currTabIndexModal: -1,
				modalList: [{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
					{
						img: '',
						name: '模型名称'
					},
				],

				show2: false,
				currTabIndexAll: -1,

				scenList: ['全部场景', '热门', '新闻咨询', '影视咨询', '热门', '新闻咨询', '影视咨询'],
				currScenIndex: 0,

				sexList: ['全部性别', '男声', '女声'],
				currSexIndex: 0,

				ageList: ['全部年龄', '儿童', '少年', '青年', '中年', '老年'],
				currAgeIndex: 0,

				allList: [],
				// voiceList: ['全部', '热门', '新闻咨询', '影视综艺', '其他'],
				show1: false,
				currTabIndex: 0,

				robotName: '',
				textAreaValue: '',
				voiceRate: 1,
				selRoleId: -1,
				selVoiceId: -1,
				selBgId: -1,
				selBgPic: '',

				roleList: [],

				value: 1,
				show: false,
				menuList: [{
						icon: '',
						name: '全局语速'
					},
					{
						icon: '',
						name: '声音'
					},
					{
						icon: '',
						name: '角色'
					},
					{
						icon: '',
						name: '背景'
					},
				],
				videoSrc: '',
				showMoreMenu: false,
				columns: [
					[]
				],
				selVoiceItem: {
					name: '',
					url: ''
				},
				selRoleItem: {
					name: '',
					url: ''
				},

				detail: {},

				roundRate: 1,
				isGenerate: false
			};
		},
		computed: {

		},

		onReady() {

		},
		onUnload() {

		},
		onLoad() {
			this.detail = getApp().draftDetail

			this.robotName = getApp().draftDetail.name
			this.textAreaValue = getApp().draftDetail.content
			this.selRoleId = getApp().draftDetail.role - 1
			this.selBgId = getApp().draftDetail.back - 1
			this.selVoiceId = getApp().draftDetail.audio - 1
			this.voiceRate = getApp().draftDetail.stage

			this.selBgPic = getApp().draftDetail.backs.url
			this.roundRate = getApp().draftDetail.stage
			this.selVoiceItem = getApp().draftDetail.audios
			this.selRoleItem = getApp().draftDetail.roles

			console.log('传过来的草稿项：', this.detail);
		},
		async onShow() {
			let res = await roleList({})
			if (res.code == 0) {
				// this.roleList = res.data
				this.roleList = res.msg
				console.log('数字人角色列表返回值：', res);
				this.currTabIndexModal = res.msg.findIndex((item, index) => {
					return item.id == this.selRoleId + 1
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}

			let res1 = await voiceList({})
			if (res1.code == 0) {
				// this.roleList = res.data
				this.allList = res1.msg
				console.log('数字人声音列表返回值：', res1);
				this.currTabIndexAll = res1.msg.findIndex((item, index) => {
					return item.id == this.selVoiceId + 1
				})

			} else {
				uni.showToast({
					title: res1.msg,
					icon: 'none'
				})
			}

			let res3 = await backList({})
			if (res3.code == 0) {
				// this.roleList = res.data
				this.bgPicList = res3.msg
				console.log('数字人背景列表返回值：', res3);
				this.currTabIndexBg = res3.msg.findIndex((item, index) => {
					return item.id == this.selBgId + 1
				})
				console.log('index3', this.currTabIndexBgc);
			} else {
				uni.showToast({
					title: res3.msg,
					icon: 'none'
				})
			}
		},
		onShareAppMessage: function(res) {

		},

		methods: {
			handleSelBg(item, index) {
				this.selBgPic = item.url
				this.selBgId = item.id - 1
				this.currTabIndexBg = index
			},
			handleVoiceSel(item, index) {
				this.selVoiceItem = item
				this.selVoiceId = item.id - 1
				this.currTabIndexAll = index
			},
			handleRoleSel(item, index) {
				this.selRoleItem = item
				this.selRoleId = item.id - 1
				this.currTabIndexModal = index
			},
			async saveDraft() {
				let parmas = {
					name: this.robotName,
					content: this.textAreaValue,
					role: this.selRoleId,
					back: this.selBgId,
					audio: this.selVoiceId,
					stage: this.roundRate,
					is_draft: 1
				}
				console.log('保存数字人草稿参数：', parmas);
				let res = await generateWork(parmas)
				if (res.code == 0) {
					uni.showToast({
						title: '保存成功！',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
				console.log('保存数字人草稿返回值：', res);
			},
			async genRobot() {

				if (this.isGenerate) {
					uni.showToast({
						title: '请等待上一次生成完成后提交！',
						icon: 'none'
					})
					return
				}


				let parmas = {
					name: this.robotName,
					content: this.textAreaValue,
					role: this.selRoleId,
					back: this.selBgId,
					audio: this.selVoiceId,
					stage: this.roundRate
				}
				console.log('创建数字人参数：', parmas);
				// return
				let res = await generateWork(parmas)
				if (res.code == 0) {
					this.isGenerate = true
					uni.showToast({
						title: '创建数字人成功！',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
				console.log('生成数字人返回值：', res);
			},

			filter() {
				this.show2 = false
			},
			handleFilter() {
				// this.show1 = false
				this.show2 = true
			},
			handleBtnConfirm1() {
				this.show1 = false
			},
			handleBtnConfirm2() {
				this.show3 = false
			},
			handleBtnConfirm3() {
				this.show4 = false
			},

			handleSetBox(item) {
				if (item.name == '全局语速') {
					this.show = true
				} else if (item.name == '声音') {
					this.show1 = true
				} else if (item.name == '角色') {
					this.show3 = true
				} else if (item.name == '背景') {
					this.show4 = true
				}
			},
			handleChange(e) {
				console.log(e);
				this.roundRate = e.toFixed(1)
			},

			handleBtnConfirm() {
				this.show = false
			},

			handleCreatePro() {
				uni.navigateTo({
					url: ''
				})
			},
			handleShowMoreMenu() {
				this.showMoreMenu = true
			},
			handleConfirm(e) {
				this.showMoreMenu = false
			},
			close() {
				// console.log('close()');
			},
			open() {
				// console.log('open() ');
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>