h5-webgl-program/src/components/newBottomCom/viewAI/viewAI.html

<div class="ai-view">
	<div class="ai-title rows">
		<!-- v-if="relationId" -->
		<div v-if="relationId" class="title-btn rows justify-center" :class="{active:tabIndex==2}" @click.stop="tabChange(2)">
			<img class="redbox_icon" src="https://dm.static.elab-plus.com/miniProgram/redbox_icon.png" alt=""></img>
			活动
		</div>
		<div class="title-btn rows justify-center" :class="{active:tabIndex==0}" @click.stop="tabChange(0)">数字人</div>
		<div class="title-btn rows justify-center" :class="{active:tabIndex==1}" @click.stop="tabChange(1)">数字宠物</div>
		<div class="title-btn rows justify-center" :class="{active:tabIndex==3}" @click.stop="tabChange(3)">音乐</div>
	</div>
	<div class="ai-people" v-if="tabIndex==0">
		<div class="main grid-view1">
			<div :class="['item', peopleIndex==idx ? 'active': '']" v-for="(item, idx) in leftList"
				:key="idx">
				<template v-if="item.userUpload">
					<div v-if="!videoUrl">
						<div class="empty-item" @click="showMask">
							<div class="add-icon rows justify-center">
								<img class="bg" :src="uploadStatus==1 || uploadStatus==2 || uploadStatus==4?'https://dm.static.elab-plus.com/miniProgram/person_icon1.png':'https://dm.static.elab-plus.com/miniProgram/person_icon.png'"/>
							</div> 
							<div class="rows justify-center" v-if="uploadStatus==1" style="width: 100%;height: 100%;">
								<el-progress :format="format" :stroke-width="8"
								define-back-color="#fff" color="#92CE8B" 
								text-color="#92CE8B" type="circle" :percentage="progress"></el-progress>
							</div>
							<div class="rows justify-center" v-if="uploadStatus==2" style="width: 100%;height: 100%;">
								<el-progress :format="format" :stroke-width="8"
								define-back-color="#fff" color="#92CE8B" 
								text-color="#92CE8B" type="circle" :percentage="ktProgress"></el-progress>
							</div>
						</div>
						<div class="item-name rows justify-center empty-text" v-if="uploadStatus==0">个人形象</div>
						<div class="item-name rows justify-center empty-text" v-else-if="uploadStatus==1 || uploadStatus==2"  @click.stop="showPopViewHandle">
							<div class="close-view rows justify-center">
								<i class="iconfont icon-close rows justify-center"></i>
							</div>
							取消
						</div>
					</div>
					<div v-else>
						<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)" />
						<div class="item-name rows justify-center">
							<i class="iconfont icon-ic-huanyihuan rows justify-center"></i>
							替换
							<form id='uploadVideoFrom1' class="uploadVideoFrom">
								<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom1',2)"
								 name="file" accept="video/*" class="el-upload__input">
							</form>
						</div>
					</div>
				</template>
				<template v-else>
					<img class="itemImg" :src="item.icon" @click.stop="selectAction(item,idx)"/>
					<div class="item-name rows justify-center" @click.stop="selectAction(item,idx)">{{item.value}}</div>
				</template>
			</div>
		</div>
	</div>
	<div class="ai-people" v-else-if="tabIndex==1">
		<div class="main grid-view1">
			<div :class="['item', petIndex==idx ? 'active': '']" v-for="(item, idx) in rightList"
				:key="idx" @click="selectAction(item,idx)">
				<img class="itemImg" :src="item.icon"/>
				<div class="item-name rows justify-center">{{item.value}}</div>
			</div>
		</div>
	</div>
	<!-- 红包视图 -->
	<div class="redbox" v-else-if="tabIndex==2">
		<div class="main-box rows rows-between flex-start">
			<div class="left-box">
				<div class="left-main rows">
					<div class="main-red columns justify-center">
						<img class="red-img" src="https://dm.static.elab-plus.com/miniProgram/redbox.gif"/>
						<!-- <div v-if="hasRedBox==false" class="red-btn rows justify-center" @click="addRedBox">添加红包</div>
						<div class="rows justify-center" v-else>
							<div class="iconfont icon-icon_delete rows justify-center" @click="removeRedBox"></div>
							<div class="red-btn rows justify-center red-adjust" @click="setRedBox">
								红包调整
							</div>
						</div> -->
						<div class="red-info" v-if="amount">
							<div class="red-money">
								<span class="tips">￥</span>{{amount}}
							</div>
							<div class="word">
								场景礼包总奖励金
							</div>
						</div>
					</div>
					<div class="plus">+</div>
					<div id="special-img" class="special-img"></div>
				</div>
				<div class="title"></div>
			</div>
			<div class="right-box">
				<div class="select-view columns" style="justify-content:space-around">
					<div class="select-btn" :class="{active:specialIndex==0}" @click.stop="specialChange(0)">金光闪闪</div>
					<div class="select-btn" :class="{active:specialIndex==1}" @click.stop="specialChange(1)">烟花喷射</div>
					<div class="select-btn" :class="{active:specialIndex==2}" @click.stop="specialChange(2)">彩带飘落</div>
				</div>
				<div class="title">打开特效</div>
			</div>
		</div>
		<div class="playTips rows justify-center" @click="setRedBox">
			玩法说明 >
		</div>
	</div>
	<!-- 音乐列表 -->
	<div class="ai-people" v-else-if="tabIndex==3">
		<div class="main grid-view1">
			<div :class="['item', musicIndex==idx ? 'active': '']" v-for="(item, idx) in musicList"
				:key="idx" @click="selectAction(item,idx)">
				<img class="itemImg" :src="item.icon?item.icon:'https://dm.static.elab-plus.com/miniProgram/ai-icon.png'"/>
				<div class="item-name rows justify-center">{{item.value}}</div>
			</div>
		</div>
	</div>
	<div class="ai-tips">
		{{tabIndex==0?'点击添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==1?'点击宠物添加到场景中，可调整大小和拖动到摆放位置':(tabIndex==3?'点击音乐添加到场景中':''))}}
	</div>
	<div class="ai-bottom rows justify-center" @click.stop="mynavigateFuc">立即发布</div>
	<!-- 弹出层-添加个人形象 -->
	<div class="mask-view" v-if="showPersonView" @touchmove.stop="catchTapEvent" @click.stop="catchTapEvent">
		<div class="content">
			<i class="iconfont icon-close close rows justify-center" @click.stop="showPersonView=false;"></i>
			<div class="title rows justify-center">添加个人形象</div>
			<div class="desc rows justify-center">
				生成时间较长约3-5分钟，<br />
				生成前会以人物剪影的方式在场景中占位
			</div>
			<img class="img" src="https://dm.static.elab-plus.com/miniProgram/mask-img.png"/>
			<div class="section-text">
				1.文件小于50M，时长小于20秒<br />
				2.人物需全身照，拍摄时需保持稳定<br />
				3.人物双脚需靠近摄像画面底部<br />
				4.背景不要太乱，推荐美颜相机
			</div>
			<div class="btn">
				<div class="bg rows justify-center">上传</div>
				<form id='uploadVideoFrom' class="uploadVideoFrom">
					<input type="file" ref="uploadModuleImage1Form" @change.stop="uploadImgObj($event,'uploadVideoFrom',1)"
					 name="file" accept="video/*" class="el-upload__input">
				</form>
			</div>
		</div>
	</div>
	<!-- 取消弹出确认框 -->
	<div class="pop-view" v-if="showPopView">
		<div class="content">
			<i class="iconfont icon-close close" @click.stop="showPopView=false;"></i>
			<div class="title">
				是否终止添加个人形象？<br />
				终止后重新添加需重新等待
			</div>
			<div class="btns rows rows-between">
				<div class="btn sty1 rows justify-center" @click.stop="stopUpload">终止上传</div>
				<div class="btn sty2 rows justify-center" @click.stop="showPopView=false;">继续添加</div>
			</div>
		</div>
	</div>
	<video id="videoPlayer" loop muted autoplay style="display: none;" controls="false" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src=""></video>
</div>