digitalMen/pages/robot/generate/index1.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" @click="show4=true">
				<view class="videoBox1" v-if="bgItem.scale==1&&selBgPic">
					<view class="img16" style="background-size: 100% 100%;background-repeat:no-repeat;"
						:style="{background:'url('+selBgPic+')',backgroundSize:selBgPic?'100% 100%':'100% 100%'}">
						<image class="role" :src="selRoleItem.url" mode=""></image>
					</view>
				</view>

				<view class="videoBox2" v-if="bgItem.scale==2&&selBgPic" :style="{}">
					<view class="img16" style="background-size: 100% 100%;background-repeat:no-repeat;"
						:style="{background:'url('+selBgPic+') ',backgroundSize:'100% 100%'}">
						<image class="role" :src="selRoleItem.url" mode=""></image>
					</view>
				</view>


				<view class="videoBox" v-if="!bgItem.scale&&!selBgPic" :style="{minHeight:!selBgPic?'465rpx':''}">
					<view class="emptyVideo" style="background: #ccc;height: 100%;"></view>
				</view>
			</view>
			<view class="selCon">
				<view class="item" @click="show=true" v-if="!audioUrl">
					<view class="label">
						语速：
					</view>
					<view class="con">
						{{roundRate}}X
					</view>
				</view>
				<view class="item" @click="show1=true" v-if="!audioUrl">
					<view class="label">
						声音：{{selVoiceItem.name}}
					</view>
					<image class="conImg" :src="selVoiceItem.url">
					</image>
				</view>
				<view class="item" @click="show3=true">
					<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" style="display: flex;justify-content: flex-end;align-items: center;">
						<!-- <text class="iconfont " :class="[item.icon]" style="color: #26b3a0;font-weight: 600;"></text> -->
						<image :src="item.icon" 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="" :disabled="audioUrl?true:false" border="none" :autoHeight="true" maxlength="9999"
				v-model="textAreaValue" placeholder="请输入播报内容"></u--textarea>

			<button @click="uploadVideo">上传录音文件</button>
			<view class="audioList" v-if="audioUrl">
				<view class="">
					已上传的音频：
				</view>
				<view class="audioListBox">
					<view class="con">
						{{audioUrl}}
					</view>
					<text @click="audioUrl=''" class="iconfont icon-shanchu rightIcon"
						:style="{fontSize:isPc?'64rpx':'32rpx'}"></text>
				</view>
			</view>

			<view class="btnBox">
				<view class="btn draft" @click="saveDraft">
					存草稿
				</view>
				<view class="btn" @click="genRobot" style="background: linear-gradient(to right,#06C68E,#02BCCD);">
					合成
				</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="close1" @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)">
							<view class="imgBox">
								<image :class="[currTabIndexAll==index?'sel':'']" :src="item.url" mode="">
							</view>
							</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="close3" @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="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="close4" @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';

	import
	uploadImgUrl
	from '@/common/config.js';
	export default {
		data() {
			return {
				audioUrl: '',

				bgItem: {

				},
				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: require('@/static/images/yusu.png'),
						name: '全局语速'
					},
					{
						icon: require('@/static/images/audio.png'),
						name: '声音'
					},
					{
						icon: require('@/static/images/bg.png'),
						name: '背景'
					},
					{
						icon: require('@/static/images/role.png'),
						name: '角色'
					},
				],
				videoSrc: '',
				showMoreMenu: false,
				columns: [
					[]
				],
				selVoiceItem: {
					name: '',
					url: ''
				},
				selRoleItem: {
					name: '',
					url: ''
				},

				detail: {},

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

		},

		onReady() {

		},
		onUnload() {

		},
		onLoad(o) {
			if (o.type == 'create') {
				this.isCreate = true
				this.selRoleId = 5
				this.selBgId = 0
				this.selVoiceId = 9
				this.roundRate = 1
				this.voiceRate = 1
				return
				console.log('create')
			}




			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.bgItem = getApp().draftDetail.backs

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


			this.audioUrl = getApp().draftDetail.audio_url
			console.log('传过来的草稿项：', this.detail);
		},
		async onShow() {
			let res = await roleList({})
			if (res.code == 0) {

				this.roleList = res.msg
				console.log('数字人角色列表返回值：', res);
				this.currTabIndexModal = res.msg.findIndex((item, index) => {
					return item.id == this.selRoleId + 1
				})

				if (this.isCreate) {
					this.selRoleItem = this.roleList[5]
				}
			} 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
				})
				if (this.isCreate) {
					this.selVoiceItem = this.allList[9]
				}

			} 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
				})
				if (this.isCreate) {
					this.selBgPic = this.bgPicList[0].url
					this.bgItem = this.bgPicList[0]
				}
				console.log('index3', this.currTabIndexBgc);
			} else {
				uni.showToast({
					title: res3.msg,
					icon: 'none'
				})
			}
		},
		onShareAppMessage: function(res) {

		},

		methods: {
			uploadVideo() {
				let _this = this
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.mp3'],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: "上传中...",
						});

						uni.uploadFile({
							url: uploadImgUrl.baseImgUrl,
							filePath: tempFilePaths[0],
							// filePath: JSON.stringify(res.tempFilePaths),
							name: 'file',
							fileType: "audio",
							formData: {
								accept: 'audio',
								upload_type: 'ali-oss'
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								const ret = JSON.parse(uploadFileRes.data);
								if (ret.code == 0) {
									_this.audioUrl = ret.data.path
									console.log(ret);
								}

							}
						});
					}
				});
			},


			close() {
				this.show = false
			},
			close1() {
				this.show1 = false
			},
			close3() {
				this.show3 = false
			},
			close4() {
				this.show4 = false
			},
			handleSelBg(item, index) {
				this.selRoleItem = {}


				this.bgItem = item
				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,
					audio_url: this.audioUrl,
					is_draft: 1
				}
				if (this.selRoleId != -1) {
					parmas['role'] = this.selRoleId
				}
				if (this.selBgId != -1) {
					parmas['back'] = this.selBgId
				}
				if (this.selVoiceId != -1) {
					parmas['audio'] = this.selVoiceId
				}


				console.log('保存数字人草稿参数：', parmas);
				// return
				let res = await generateWork(parmas)
				if (res.code == 0) {
					uni.showToast({
						title: '保存成功！',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				console.log('保存数字人草稿返回值：', res);
			},
			async genRobot() {

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


				let parmas = {}
				if (this.audioUrl) {
					parmas = {
						name: this.robotName,
						// content: this.textAreaValue,
						role: this.selRoleId,
						back: this.selBgId,
						// audio: this.selVoiceId,
						// stage: this.roundRate,
						audio_url: this.audioUrl
					}
				} else {
					parmas = {
						name: this.robotName,
						content: this.textAreaValue,
						role: this.selRoleId,
						back: this.selBgId,
						audio: this.selVoiceId,
						stage: this.roundRate,
						audio_url: this.audioUrl
					}
				}
				console.log('创建数字人参数：', parmas);
				// return
				let res = await generateWork(parmas)
				if (res.code == 0) {
					this.isGenerate = true
					uni.showToast({
						title: '创建数字人成功！',
						icon: 'success'
					})
					getApp().from = 'create'
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				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 == '全局语速') {
					if (this.audioUrl) {
						return uni.showToast({
							title: '上传音频不支持全局语速',
							icon: 'none'
						})
					}
					this.show = true
				} else if (item.name == '声音') {
					if (this.audioUrl) {
						return uni.showToast({
							title: '上传音频不支持声音选择',
							icon: 'none'
						})
					}
					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
			},
			open() {
				// console.log('open() ');
			}
		}
	};
</script>

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