| @@ -13,166 +13,6 @@ export function modeListApi(sex, pageNum, pageSize) { | |||
| }) | |||
| } | |||
| /** | |||
| * @description 查询系统背景 | |||
| * @returns pageNum,pageSize,videoType | |||
| */ | |||
| export function systemBGIListApi(pageNum, pageSize, videoType) { | |||
| return request({ | |||
| url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 查询我上传的背景 | |||
| * @returns pageNum,pageSize,videoType | |||
| */ | |||
| export function personBGIListApi(pageNum, pageSize, videoType) { | |||
| return request({ | |||
| url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取系统素材列表 | |||
| * @param sex ,pageNum,pageSize | |||
| * @returns data | |||
| */ | |||
| export function systemSCIListApi(pageNum, pageSize) { | |||
| return request({ | |||
| url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 查询我上传的素材 | |||
| * @returns pageNum,pageSize,videoType | |||
| */ | |||
| export function personSCIListApi(pageNum, pageSize, videoType) { | |||
| return request({ | |||
| url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取人脸列表 | |||
| * @params pageNum, pageSize | |||
| * @returns data | |||
| */ | |||
| export function personPhotoList(pageNum, pageSize, sendType) { | |||
| return request({ | |||
| url: `api/personPhoto/list?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取人脸列表 | |||
| * @params pageNum, pageSize | |||
| * @returns data | |||
| */ | |||
| export function personPhotoUserListList(pageNum, pageSize, sendType) { | |||
| return request({ | |||
| url: `api/personPhoto/userList?pageNum=${pageNum}&pageSize=${pageSize}&sendType=${sendType}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 上传图片 | |||
| * @params data | |||
| * @returns data | |||
| */ | |||
| export function awsImgUpload(data) { | |||
| return request({ | |||
| url: `/api/upload/awsImgUpload`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| /** | |||
| * @description 上传图片 | |||
| * @params data | |||
| * @returns data | |||
| */ | |||
| export function saveImgApi(data) { | |||
| return request({ | |||
| url: `/api/personPhoto/save`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| /** | |||
| * @description 删除图片 | |||
| * @params id | |||
| * @returns data | |||
| */ | |||
| export function delImgApi(id) { | |||
| return request({ | |||
| url: `api/personPhoto/del?id=${id}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 上传视频 | |||
| * @params data | |||
| * @returns data | |||
| */ | |||
| export function videoUpload(data) { | |||
| return request({ | |||
| url: `api/video/upload`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取视频上传进度 | |||
| * @params videoId | |||
| * @returns data | |||
| */ | |||
| export function uploadProgressApi(videoId) { | |||
| return request({ | |||
| url: `api/video/uploadProgress?videoId=${videoId}`, | |||
| method: 'GET', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 保存音频 | |||
| * @params videoId | |||
| * @returns data | |||
| */ | |||
| export function saveAudioApi(data) { | |||
| return request({ | |||
| url: `/api/voiceMaterial/save`, | |||
| method: 'post', | |||
| data | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取语言 | |||
| * @params | |||
| @@ -198,71 +38,60 @@ export function chooseTypeApi(id) { | |||
| } | |||
| /** | |||
| * @description 试听 | |||
| * @params id | |||
| * @returns data | |||
| * @description 查询系统背景 &videoType=${videoType} | |||
| * @returns pageNum,pageSize,videoType | |||
| */ | |||
| // export function previewAudioApi(genTxt, voiceId, voiceStyle) { | |||
| // return request({ | |||
| // url: `api/voiceMould/preview?genTxt=${genTxt}&voiceId=${voiceId}&voiceStyle=${voiceStyle}`, | |||
| // method: 'GET', | |||
| // }) | |||
| // } | |||
| export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||
| export function systemBGIListApi(pageNum, pageSize, videoType) { | |||
| return request({ | |||
| url: `api/voiceMould/preview`, | |||
| method: 'POST', | |||
| data: { gen_txt, voice_id, voice_style } | |||
| url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 保存生成视频数据 | |||
| * @params data | |||
| * @returns data | |||
| * @description 查询我上传的背景 &videoType=${videoType} | |||
| * @returns pageNum,pageSize,videoType | |||
| */ | |||
| export function saveOrUpdateApi(data) { | |||
| export function personBGIListApi(pageNum, pageSize, videoType) { | |||
| return request({ | |||
| url: `/api/userPhotoVideo/saveOrUpdate`, | |||
| method: 'POST', | |||
| data | |||
| url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 生成视频 | |||
| * @params data | |||
| * @description 获取系统素材列表 | |||
| * @param pageNum,pageSize | |||
| * @returns data | |||
| */ | |||
| export function createVideoApi(data) { | |||
| export function systemSCIListApi(pageNum, pageSize) { | |||
| return request({ | |||
| url: `/api/userPhotoVideo/createVideo`, | |||
| method: 'POST', | |||
| data | |||
| url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 根据作品id查询作品信息 | |||
| * @params data | |||
| * @returns data | |||
| * @description 查询我上传的素材 | |||
| * @returns pageNum,pageSize, | |||
| */ | |||
| export function findByIdApi(id) { | |||
| export function personSCIListApi(pageNum, pageSize) { | |||
| return request({ | |||
| url: `/api/userPhotoVideo/findById?id=${id}`, | |||
| url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||
| method: 'get', | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取音乐列表 | |||
| * @params data | |||
| * @description 试听 | |||
| * @params id | |||
| * @returns data | |||
| */ | |||
| export function musicListApi() { | |||
| export function previewAudioApi(gen_txt, voice_id, voice_style) { | |||
| return request({ | |||
| url: `api/userPhotoVideo/music`, | |||
| method: 'get', | |||
| url: `api/voiceMould/preview`, | |||
| method: 'POST', | |||
| data: { gen_txt, voice_id, voice_style } | |||
| }) | |||
| } | |||
| } | |||
| @@ -86,6 +86,38 @@ export function doUpdPassApi(loginParams) { | |||
| }) | |||
| } | |||
| /** | |||
| * @description 获取手机验证码 | |||
| * @param {number} phone | |||
| * @returns data | |||
| */ | |||
| export function getSMSToLoginApi(phone) { | |||
| return request({ | |||
| url: `/api/user/sendLoginPhoneCode?phone=${phone}`, | |||
| method: 'get' | |||
| }) | |||
| } | |||
| /** | |||
| * @description 短信验证码登录 | |||
| * @param {object} loginParams (phone,code) | |||
| * @returns data | |||
| */ | |||
| export function loginByMSMApi(loginParams) { | |||
| return request({ | |||
| url: `/api/user/doLoginByPhone`, | |||
| method: 'post', | |||
| data: loginParams | |||
| }) | |||
| } | |||
| /** | |||
| /** | |||
| @@ -35,7 +35,10 @@ export default { | |||
| confirmNewPwd:'Confirm new password', | |||
| confirm:'Confirm', | |||
| gohome:'Back to home page', | |||
| SMSCode:'SMS Code' | |||
| SMSCode:'SMS Code', | |||
| SMSLogin:'SMS login', | |||
| pwsLogin:'Account password login', | |||
| sendSMS:'Send SMS', | |||
| }, | |||
| // 导航栏国际化 | |||
| @@ -71,7 +74,22 @@ export default { | |||
| Aipicture:'Ai-generated pictures', | |||
| AipictureTip:'Please customize your picture', | |||
| chooseMusic:'Choose music', | |||
| searchMusic:'Search music' | |||
| searchMusic:'Search music', | |||
| copywriting:'Copywriting', | |||
| BackgroundImage:'Background Image', | |||
| material:'Material', | |||
| subtitles:'Subtitles', | |||
| sex:"Sex", | |||
| videoRatio:"Video Ratio", | |||
| all:'All', | |||
| male:'Male', | |||
| female:'Female', | |||
| landscape:'Landscape', | |||
| portrait:'Portrait', | |||
| systemBGI:'System background diagram', | |||
| personBGI:'Person background diagram', | |||
| systemMaterial:'System Material', | |||
| personMaterial:'Person Material', | |||
| }, | |||
| // 我的视频 | |||
| @@ -23,8 +23,10 @@ export default { | |||
| loginBtn: "登 录", | |||
| registerBtn: "注 册", | |||
| verifyCode: "验证码", | |||
| signIn: "已有账号?现在登录!", | |||
| signUp: "没有账号?现在加入!", | |||
| // signIn: "已有账号?现在登录!", | |||
| // signUp: "没有账号?现在加入!", | |||
| signIn: "立即登录", | |||
| signUp: "立即注册", | |||
| forgetPwd: "忘记密码", | |||
| forgetPwdTitle:'忘记密码', | |||
| SendEmail:'发送短信验证码', | |||
| @@ -36,6 +38,9 @@ export default { | |||
| confirm:'确定', | |||
| gohome:'回到首页', | |||
| SMSCode:'短信验证码', | |||
| SMSLogin:'短信登录', | |||
| pwsLogin:'账号密码登录', | |||
| sendSMS:'发送短信验证码', | |||
| }, | |||
| // 导航栏国际化 | |||
| @@ -72,6 +77,21 @@ export default { | |||
| AipictureTip:'请自定义您的图片', | |||
| chooseMusic:'选择音乐', | |||
| searchMusic:'搜索音乐', | |||
| copywriting:'文案', | |||
| BackgroundImage:'背景', | |||
| material:'素材', | |||
| subtitles:'字幕', | |||
| sex:"性别", | |||
| videoRatio:"视频比例", | |||
| all:'全部', | |||
| male:'男性', | |||
| female:'女性', | |||
| landscape:'横屏', | |||
| portrait:'竖屏', | |||
| systemBGI:'系统背景', | |||
| personBGI:'个人背景', | |||
| systemMaterial:'系统素材', | |||
| personMaterial:'个人素材', | |||
| }, | |||
| // 我的视频 | |||
| @@ -21,68 +21,53 @@ | |||
| > | |||
| < | |||
| </div> | |||
| <!-- 箭头 --> | |||
| <!-- <div | |||
| v-if="showChooseModel && videoType" | |||
| class="openChooseModel" | |||
| @click="showChooseModel = false" | |||
| > | |||
| <img src="../../assets/img/arrowLeft.png" alt="" /> | |||
| </div> | |||
| <div | |||
| v-if="!showChooseModel" | |||
| class="closeChooseModel" | |||
| @click="showChooseModel = true" | |||
| > | |||
| <img src="../../assets/img/arrowRight.png" alt="" /> | |||
| </div> --> | |||
| <!-- tab栏 --> | |||
| <p>性别</p> | |||
| <p>{{ $t("createVideo.sex") }}</p> | |||
| <div class="tab" v-show="showChooseModel"> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive == 0 ? 'tabItemActive' : ''" | |||
| @click="changeTabSex(0)" | |||
| > | |||
| 全部 | |||
| {{ $t("createVideo.all") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive == 1 ? 'tabItemActive' : ''" | |||
| @click="changeTabSex(1)" | |||
| > | |||
| 男性 | |||
| {{ $t("createVideo.male") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive == 2 ? 'tabItemActive' : ''" | |||
| @click="changeTabSex(2)" | |||
| > | |||
| 女性 | |||
| {{ $t("createVideo.female") }} | |||
| </div> | |||
| </div> | |||
| <p>视频比例</p> | |||
| <p>{{ $t("createVideo.videoRatio") }}</p> | |||
| <div class="tab" v-show="showChooseModel"> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" | |||
| @click="changeTabVideoType(0)" | |||
| > | |||
| 全部 | |||
| {{ $t("createVideo.all") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" | |||
| @click="changeTabVideoType(2)" | |||
| > | |||
| 横屏 | |||
| {{ $t("createVideo.landscape") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" | |||
| @click="changeTabVideoType(1)" | |||
| > | |||
| 竖屏 | |||
| {{ $t("createVideo.portrait") }} | |||
| </div> | |||
| </div> | |||
| <!-- 模版列表 --> | |||
| @@ -124,28 +109,28 @@ | |||
| :class="tabItemActive == 1 ? 'tabItemActive' : ''" | |||
| @click="tabItemActive = 1" | |||
| > | |||
| 文案 | |||
| {{ $t("createVideo.copywriting") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="tabItemActive == 2 ? 'tabItemActive' : ''" | |||
| @click="tabItemActive = 2" | |||
| > | |||
| 背景 | |||
| {{ $t("createVideo.BackgroundImage") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="tabItemActive == 3 ? 'tabItemActive' : ''" | |||
| @click="tabItemActive = 3" | |||
| > | |||
| 素材 | |||
| {{ $t("createVideo.material") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="tabItemActive == 4 ? 'tabItemActive' : ''" | |||
| @click="tabItemActive = 4" | |||
| > | |||
| 字幕 | |||
| {{ $t("createVideo.subtitles") }} | |||
| </div> | |||
| </div> | |||
| <!-- 文案 只能使用v-if,不能使用v-show--> | |||
| @@ -171,13 +156,13 @@ | |||
| type="textarea" | |||
| :placeholder="$t('createVideo.aiText')" | |||
| /> | |||
| <span | |||
| class="pointer" | |||
| @click="getPreviewAudio" | |||
| style="margin-right: 10px; font-size: 20px" | |||
| >🔊</span | |||
| class="pointer" | |||
| @click="insertIcon" | |||
| >🕗</span | |||
| > | |||
| <span class="pointer" @click="insertIcon">🕗</span> | |||
| </div> | |||
| <p>{{ $t("createVideo.languages") }}</p> | |||
| <!-- 语言 --> | |||
| @@ -190,7 +175,7 @@ | |||
| <el-option | |||
| v-for="item in languageOptions" | |||
| :key="item.value" | |||
| :label="item.name" | |||
| :label="lanChange == 'zh-cn' ? item.chineseName : item.name" | |||
| :value="item.id" | |||
| > | |||
| <img | |||
| @@ -198,7 +183,9 @@ | |||
| alt="" | |||
| style="width: 20px; margin-right: 10px; vertical-align: text-top" | |||
| /> | |||
| <span style="line-height: 20px">{{ item.name }}</span> | |||
| <span style="line-height: 20px">{{ | |||
| lanChange == "zh-cn" ? item.chineseName : item.name | |||
| }}</span> | |||
| </el-option> | |||
| </el-select> | |||
| <p>{{ $t("createVideo.voices") }}</p> | |||
| @@ -213,7 +200,13 @@ | |||
| <el-option | |||
| v-for="item in soundOptions" | |||
| :key="item.value" | |||
| :label="item.displayName" | |||
| :label=" | |||
| (lanChange == 'zh-cn' | |||
| ? item.displayName + ` (${item.sex == 1 ? '男' : '女'})` | |||
| : item.localName + | |||
| ` (${item.sex == 1 ? 'male' : 'female'})`) + | |||
| returnAge(item.ageType) | |||
| " | |||
| :value="item.id" | |||
| /> | |||
| </el-select> | |||
| @@ -227,10 +220,19 @@ | |||
| > | |||
| <el-option | |||
| v-for="item in soundStyleOptions" | |||
| :key="item" | |||
| :label="item" | |||
| :value="item" | |||
| /> | |||
| :key="item.name" | |||
| :label="lanChange == 'zh-cn' ? item.name : item.engName" | |||
| :value="item.name" | |||
| > | |||
| <div style="padding: 0 20px"> | |||
| {{ lanChange == "zh-cn" ? item.name : item.engName }} | |||
| <span | |||
| style="float: right; cursor: pointer" | |||
| @click.stop="ListenVoices(item.url)" | |||
| >🔊</span | |||
| > | |||
| </div> | |||
| </el-option> | |||
| </el-select> | |||
| </div> | |||
| <!-- 背景 --> | |||
| @@ -241,18 +243,19 @@ | |||
| :class="bjTabItemActive == 1 ? 'tabItemActive' : ''" | |||
| @click="bjTabItemActive = 1" | |||
| > | |||
| 系统背景 | |||
| {{ $t("createVideo.systemBGI") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="bjTabItemActive == 2 ? 'tabItemActive' : ''" | |||
| @click="bjTabItemActive = 2" | |||
| > | |||
| 个人背景 | |||
| {{ $t("createVideo.personBGI") }} | |||
| </div> | |||
| </div> | |||
| <!-- 背景图片展示 --> | |||
| <!-- 系统背景图片展示 --> | |||
| <div | |||
| v-if="bjTabItemActive == 1" | |||
| class="bjSystemBox" | |||
| v-infinite-scroll="loadMoreSystemBGI" | |||
| :infinite-scroll-disabled="overLoadSystemBG" | |||
| @@ -265,6 +268,21 @@ | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| <!-- 个人背景图片展示 --> | |||
| <div | |||
| v-if="bjTabItemActive == 3" | |||
| class="bjSystemBox" | |||
| v-infinite-scroll="loadMorePersonBGI" | |||
| :infinite-scroll-disabled="overLoadpersonBG" | |||
| > | |||
| <div | |||
| class="bjSystemBoxItem" | |||
| v-for="item in personBGIList" | |||
| :key="item.id" | |||
| > | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 素材 --> | |||
| <div v-if="tabItemActive == 3" class="tabContent tab3"> | |||
| @@ -274,18 +292,19 @@ | |||
| :class="scTabItemActive == 1 ? 'tabItemActive' : ''" | |||
| @click="scTabItemActive = 1" | |||
| > | |||
| 系统素材 | |||
| {{ $t("createVideo.systemMaterial") }} | |||
| </div> | |||
| <div | |||
| class="tabItem" | |||
| :class="scTabItemActive == 2 ? 'tabItemActive' : ''" | |||
| @click="scTabItemActive = 2" | |||
| > | |||
| 个人素材 | |||
| {{ $t("createVideo.personMaterial") }} | |||
| </div> | |||
| </div> | |||
| <!-- 素材图片展示 --> | |||
| <!-- 系统素材图片展示 --> | |||
| <div | |||
| v-if="scTabItemActive == 1" | |||
| class="bjSystemBox" | |||
| v-infinite-scroll="loadMoreSystemSCI" | |||
| :infinite-scroll-disabled="overLoadSystemSC" | |||
| @@ -298,6 +317,21 @@ | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| <!-- 个人素材图片展示 --> | |||
| <div | |||
| v-if="scTabItemActive == 3" | |||
| class="bjSystemBox" | |||
| v-infinite-scroll="loadMorePersonSCI" | |||
| :infinite-scroll-disabled="overLoadpersonSC" | |||
| > | |||
| <div | |||
| class="bjSystemBoxItem" | |||
| v-for="item in personSCIList" | |||
| :key="item.id" | |||
| > | |||
| <img class="boxCentreImg" :src="item.material" alt="" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 字幕 --> | |||
| <div v-if="tabItemActive == 4" class="tabContent"></div> | |||
| @@ -332,6 +366,11 @@ const route = useRoute(); | |||
| const router = useRouter(); | |||
| const { locale } = useI18n(); | |||
| const lanChange = ref(locale); | |||
| // ElMessage.error( | |||
| // lanChange.value == "zh-cn" | |||
| // ? `您还没有输入文案` | |||
| // : `You have not entered the copy yet` | |||
| // ); | |||
| const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 | |||
| @@ -462,16 +501,7 @@ const language = ref(""); //选择的语言 | |||
| const sound = ref(""); // 选择的声音 | |||
| const soundStyle = ref(""); //选择的风格 | |||
| // 语言下拉框内容 | |||
| const languageOptions = ref([ | |||
| { | |||
| id: "0", | |||
| name: "中文", | |||
| }, | |||
| { | |||
| id: "1", | |||
| name: "English", | |||
| }, | |||
| ]); | |||
| const languageOptions = ref([]); | |||
| async function voiceTotal() { | |||
| const res = await voiceTotalApi(); | |||
| languageOptions.value = res.data; | |||
| @@ -531,13 +561,58 @@ async function getPreviewAudio() { | |||
| ElMessage.error(error); | |||
| } | |||
| } | |||
| // 根据ageType返回年龄 | |||
| function returnAge(ageType) { | |||
| if (!ageType) { | |||
| return ""; | |||
| } else if (ageType == 1) { | |||
| if (lanChange.value == "zh-cn") { | |||
| return " 儿童"; | |||
| } else { | |||
| return "Child"; | |||
| } | |||
| } else if (ageType == 2) { | |||
| if (lanChange.value == "zh-cn") { | |||
| return " 少年"; | |||
| } else { | |||
| return "Teen"; | |||
| } | |||
| } else if (ageType == 3) { | |||
| if (lanChange.value == "zh-cn") { | |||
| return " 年轻"; | |||
| } else { | |||
| return "YoungAdult"; | |||
| } | |||
| } else if (ageType == 4) { | |||
| if (lanChange.value == "zh-cn") { | |||
| return " 中年"; | |||
| } else { | |||
| return "OlderAdult"; | |||
| } | |||
| } else if (ageType == 5) { | |||
| if (lanChange.value == "zh-cn") { | |||
| return " 老年"; | |||
| } else { | |||
| return "Senior"; | |||
| } | |||
| } | |||
| } | |||
| // 新的试听 | |||
| function ListenVoices(url) { | |||
| previewAudioUrl.value = url; | |||
| let audioA = document.getElementById("audio"); | |||
| audioA.addEventListener("loadedmetadata", async () => { | |||
| audioA.muted = false; // 将 muted 属性设置为 false | |||
| await audioA.play(); | |||
| }); | |||
| } | |||
| //#endregion ---------------------------- | |||
| //#region 背景 | |||
| const bjTabItemActive = ref(1); //系统或个人tab高亮 | |||
| const systemBGIList = ref([]); //系统背景列表 | |||
| const systemBGPageNum = ref(1); //系统背景页数 | |||
| const overLoadSystemBG = ref(true); | |||
| const overLoadSystemBG = ref(true); //禁止系统背景触底刷新 | |||
| async function getSystemBGIList() { | |||
| const res = await systemBGIListApi( | |||
| systemBGPageNum.value, | |||
| @@ -561,19 +636,11 @@ async function loadMoreSystemBGI() { | |||
| systemBGPageNum.value = modelPageNum.value - 1; | |||
| } | |||
| } | |||
| // 当横屏竖屏改变时,重新获取背景列表 | |||
| watch( | |||
| () => videoType, | |||
| (newValue, oldValue) => { | |||
| systemBGPageNum.value = 1; | |||
| getSystemBGIList(); | |||
| }, | |||
| { deep: true } | |||
| ); | |||
| // 个人背景 | |||
| const personBGIList = ref([]); //系统背景列表 | |||
| const personBGPageNum = ref(1); //系统背景页数 | |||
| const overLoadpersonBG = ref(true); | |||
| const personBGIList = ref([]); //个人背景列表 | |||
| const personBGPageNum = ref(1); //个人背景页数 | |||
| const overLoadpersonBG = ref(true); //禁止个人背景触底刷新 | |||
| async function getpersonBGIList() { | |||
| const res = await personBGIListApi( | |||
| personBGPageNum.value, | |||
| @@ -583,7 +650,7 @@ async function getpersonBGIList() { | |||
| personBGIList.value = res.data.list; | |||
| overLoadpersonBG.value = false; | |||
| } | |||
| // 加载更多系统背景图 | |||
| // 加载更多个人背景图 | |||
| async function loadMorePersonBGI() { | |||
| personBGPageNum.value += 1; | |||
| const res = await personBGIListApi( | |||
| @@ -597,13 +664,26 @@ async function loadMorePersonBGI() { | |||
| personBGPageNum.value = modelPageNum.value - 1; | |||
| } | |||
| } | |||
| // 当横屏竖屏改变时,重新获取背景列表,且还原页数和禁止刷新状态 | |||
| watch( | |||
| () => videoType, | |||
| async (newValue, oldValue) => { | |||
| systemBGPageNum.value = 1; | |||
| personBGPageNum.value = 1; | |||
| overLoadSystemBG.value = true; | |||
| overLoadpersonBG.value = true; | |||
| await getSystemBGIList(); | |||
| await getpersonBGIList(); | |||
| }, | |||
| { deep: true } | |||
| ); | |||
| //#endregion ---------------------------- | |||
| //#region 素材 | |||
| const scTabItemActive = ref(1); //系统或个人tab高亮 | |||
| const systemSCIList = ref([]); //系统素材列表 | |||
| const systemSCPageNum = ref(1); //系统素材页数 | |||
| const overLoadSystemSC = ref(true); | |||
| const overLoadSystemSC = ref(true); //禁止系统素材触底刷新 | |||
| async function getSystemSCIList() { | |||
| const res = await systemSCIListApi( | |||
| systemSCPageNum.value, | |||
| @@ -629,9 +709,9 @@ async function loadMoreSystemSCI() { | |||
| } | |||
| // 个人素材 | |||
| const personSCIList = ref([]); //系统素材列表 | |||
| const personSCPageNum = ref(1); //系统素材页数 | |||
| const overLoadpersonSC = ref(true); | |||
| const personSCIList = ref([]); //个人素材列表 | |||
| const personSCPageNum = ref(1); //个人素材页数 | |||
| const overLoadpersonSC = ref(true); //禁止个人素材触底刷新 | |||
| async function getpersonSCIList() { | |||
| const res = await personSCIListApi( | |||
| personSCPageNum.value, | |||
| @@ -675,9 +755,12 @@ const string = "createVideo.typeScript"; | |||
| const t = globalProperties.$t(string); | |||
| onMounted(async () => { | |||
| voiceTotal(); | |||
| voiceTotal(); //获取声音列表 | |||
| // getSystemSCIList(); | |||
| // getpersonBGIList(); | |||
| await getModeList("", 1, 20); //获取模版列表 | |||
| getpersonSCIList(); | |||
| getSystemSCIList(); | |||
| await getModeList("", 1, 20); | |||
| }); | |||
| </script> | |||
| @@ -706,26 +789,14 @@ onMounted(async () => { | |||
| position: absolute; | |||
| top: 0px; | |||
| left: 0px; | |||
| width: 30%; | |||
| width: 50%; | |||
| height: 100%; | |||
| padding: 30px; | |||
| transition: all 0.3s; | |||
| // background-color: #f1f2f6; | |||
| background-color: #454545; | |||
| z-index: 9; | |||
| .openChooseModel, | |||
| .closeChooseModel { | |||
| position: absolute; | |||
| top: 50%; | |||
| width: 50px; | |||
| height: 20px; | |||
| z-index: 999; | |||
| cursor: pointer; | |||
| img { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| // 伸缩按钮 | |||
| .shrinkBtn { | |||
| position: absolute; | |||
| @@ -774,6 +845,7 @@ onMounted(async () => { | |||
| margin: auto; | |||
| margin-top: 10px; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| width: 100%; | |||
| height: 40px; | |||
| // background-color: #fff; | |||
| @@ -781,14 +853,16 @@ onMounted(async () => { | |||
| border-radius: 25px; | |||
| color: #b9b9b9; | |||
| .tabItem { | |||
| flex: 1; | |||
| font-size: 16px; | |||
| // flex: 1; | |||
| width: 30%; | |||
| font-size: 14px; | |||
| text-align: center; | |||
| line-height: 40px; | |||
| border-radius: 15px; | |||
| transition: all 0.3s; | |||
| cursor: pointer; | |||
| margin: 0 10px; | |||
| // margin: 0 10px; | |||
| // padding: 0 5px; | |||
| background-color: #000; | |||
| } | |||
| .tabItemActive { | |||
| @@ -812,9 +886,10 @@ onMounted(async () => { | |||
| position: relative; | |||
| padding: 20px; | |||
| width: 45%; | |||
| height: 110px; | |||
| margin: 0 10px 10px 0; | |||
| height: 190px; | |||
| margin: 0 20px 20px 0; | |||
| border-radius: 15px; | |||
| // padding: 20px; | |||
| // background: rgba(0, 0, 0, 0.1); | |||
| background-color: #fff; | |||
| z-index: 2; | |||
| @@ -114,6 +114,11 @@ | |||
| <div style="margin-bottom: 5px" @click="loginFlag(2)"> | |||
| <span class="join">{{ $t("login.signUp") }}</span> | |||
| </div> | |||
| <div style="margin-bottom: 5px"> | |||
| <span class="join" @click="loginFlag(7)">{{ | |||
| $t("login.SMSLogin") | |||
| }}</span> | |||
| </div> | |||
| <div> | |||
| <span class="join" @click="loginFlag(3)">{{ | |||
| $t("login.forgetPwd") | |||
| @@ -604,6 +609,103 @@ | |||
| </div> | |||
| </div> | |||
| </el-form> | |||
| <!-- 短信登录 isLogin == 7--> | |||
| <el-form | |||
| v-if="isLogin == 7" | |||
| ref="loginFormRef" | |||
| :model="loginData7" | |||
| :rules="loginRules" | |||
| class="login-form" | |||
| > | |||
| <div class="flex text-white items-center"> | |||
| <span class="flex-1 text-center">{{ | |||
| $t("login.title") + " " + $t("login.login") | |||
| }}</span> | |||
| <el-tooltip | |||
| class="box-item" | |||
| effect="dark" | |||
| :content="$t('navbar.LanguageChange')" | |||
| placement="top-start" | |||
| > | |||
| <lang-select class="navItem" style="color: #ffffff" /> | |||
| </el-tooltip> | |||
| </div> | |||
| <el-form-item prop="email"> | |||
| <div class="text-white"> | |||
| <svg-icon icon-class="user" /> | |||
| </div> | |||
| <el-input | |||
| class="flex-1" | |||
| ref="email" | |||
| size="large" | |||
| v-model="loginData7.email" | |||
| :placeholder="$t('login.email')" | |||
| name="email" | |||
| /> | |||
| </el-form-item> | |||
| <!-- 验证码 --> | |||
| <el-form-item prop="verifyCode"> | |||
| <span class="text-white"> | |||
| <svg-icon icon-class="verify_code" /> | |||
| </span> | |||
| <el-input | |||
| v-model="loginData7.verifyCode" | |||
| auto-complete="off" | |||
| :placeholder="$t('login.SMSLogin')" | |||
| class="flex-1" | |||
| /> | |||
| <span class="captcha"> | |||
| <div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn"> | |||
| {{ $t("login.sendSMS") }} | |||
| </div> | |||
| <div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div> | |||
| </span> | |||
| </el-form-item> | |||
| <el-button | |||
| size="default" | |||
| :loading="loading" | |||
| type="primary" | |||
| class="loginBtn" | |||
| @click.prevent="handleLoginBySMS" | |||
| > | |||
| <el-icon | |||
| v-if="isLogining" | |||
| style="margin-right: 10px" | |||
| class="is-loading" | |||
| > | |||
| <svg | |||
| viewBox="0 0 1024 1024" | |||
| xmlns="http://www.w3.org/2000/svg" | |||
| data-v-ea893728="" | |||
| > | |||
| <path | |||
| fill="currentColor" | |||
| d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z" | |||
| ></path> | |||
| </svg> | |||
| </el-icon> | |||
| {{ $t("login.loginBtn") }} | |||
| </el-button> | |||
| <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | |||
| <div style="margin-bottom: 5px" @click="loginFlag(2)"> | |||
| <span class="join">{{ $t("login.signUp") }}</span> | |||
| </div> | |||
| <div style="margin-bottom: 5px"> | |||
| <span class="join" @click="loginFlag(1)">{{ | |||
| $t("login.pwsLogin") | |||
| }}</span> | |||
| </div> | |||
| <div> | |||
| <span class="join" @click="loginFlag(3)">{{ | |||
| $t("login.forgetPwd") | |||
| }}</span> | |||
| </div> | |||
| </div> | |||
| </el-form> | |||
| </div> | |||
| </template> | |||
| @@ -619,6 +721,8 @@ import { | |||
| doUpdPassApi, | |||
| resetPwdEmailApi, | |||
| resetPwdFormApi, | |||
| getSMSToLoginApi, | |||
| loginByMSMApi, | |||
| } from "@/apis/login"; | |||
| import axios from "axios"; | |||
| // 状态管理依赖 | |||
| @@ -695,7 +799,10 @@ const loginData5 = ref({ | |||
| const loginData6 = ref({ | |||
| SMSCode: "", | |||
| }); | |||
| const loginData7 = ref({ | |||
| email: "", | |||
| verifyCode: "", | |||
| }); | |||
| const loginRules = ref({ | |||
| email: [ | |||
| { | |||
| @@ -1038,6 +1145,87 @@ function resetPwdForm() { | |||
| } | |||
| //#endregion -------------------------- | |||
| //#region 短信登录 表单7 | |||
| // 获取验证码 | |||
| const SMSTimeOut = ref(0); | |||
| async function getSMSToLogin() { | |||
| let phoneReg = /^[1][3-9]\d{9}$/; | |||
| let phoneValide = phoneReg.test(loginData7.value.email); | |||
| if (!phoneValide) { | |||
| ElMessage.error( | |||
| currentLan.value == "zh-cn" | |||
| ? "请输入正确的手机号!" | |||
| : "Please enter the correct phone number!" | |||
| ); | |||
| return; | |||
| } | |||
| try { | |||
| await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => { | |||
| ElMessage.success( | |||
| currentLan.value == "zh-cn" | |||
| ? "短信验证码发送成功!" | |||
| : "SMS verification code sent successfully!" | |||
| ); | |||
| SMSTimeOut.value = 60; | |||
| const timer = setInterval(() => { | |||
| if (SMSTimeOut.value != 0) { | |||
| SMSTimeOut.value--; | |||
| } else { | |||
| clearInterval(timer); | |||
| } | |||
| }, 1000); | |||
| }); | |||
| } catch (error: any) { | |||
| ElMessage.error(error.message); | |||
| } | |||
| } | |||
| // 登录行为 | |||
| function handleLoginBySMS() { | |||
| loginFormRef.value.validate((val: any) => { | |||
| if (val) { | |||
| const data = { | |||
| phone: loginData7.value.email, | |||
| code: loginData7.value.verifyCode, | |||
| }; | |||
| isLogining.value = true; | |||
| doLoginByMSM(data); | |||
| } else { | |||
| const msg = | |||
| currentLan.value == "zh-cn" | |||
| ? "请检查信息格式!" | |||
| : "Please check the format !"; | |||
| ElMessage.error(msg); | |||
| return; | |||
| } | |||
| }); | |||
| } | |||
| async function doLoginByMSM(data: any) { | |||
| const msg = | |||
| currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; | |||
| await loginByMSMApi(data) | |||
| .then((res: any) => { | |||
| console.log(res, "res"); | |||
| localStorage.setItem("AccessToken", res.data.token); | |||
| ElMessage.success(msg); | |||
| router.push("/createVideo"); | |||
| // 注册成功将账号密码保存到本地 | |||
| saveInfo(data); | |||
| isLogining.value = false; | |||
| userInfoPinia.getUserInfo(); //保存邮箱到pinia | |||
| }) | |||
| .catch((err) => { | |||
| console.log(err, "err"); | |||
| // 登录失败刷新验证码 | |||
| getCode(); | |||
| ElMessage.error(err.message); | |||
| isLogining.value = false; | |||
| if (err.code == 2112) { | |||
| reSendEmail(data.email); | |||
| } | |||
| }); | |||
| } | |||
| //#endregion -------------------------- | |||
| function getCode() { | |||
| showCodeImg.value = false; | |||
| axios({ | |||
| @@ -1197,6 +1385,14 @@ onMounted(() => { | |||
| height: 48px; | |||
| cursor: pointer; | |||
| } | |||
| .sendSMSBtn { | |||
| width: 120px; | |||
| height: 48px; | |||
| line-height: 48px; | |||
| color: #fff; | |||
| text-align: center; | |||
| background: linear-gradient(270deg, #4b61dc, #15d1b8); | |||
| } | |||
| } | |||
| &:hover { | |||
| backdrop-filter: blur(7px); | |||
| @@ -12,9 +12,9 @@ | |||
| <!-- <div class="other"></div> --> | |||
| </canvas> | |||
| <img | |||
| style="display: none; width: 200px; height: 100px" | |||
| style="display: none; width: 200px; height: 200px" | |||
| id="bjImg" | |||
| src="../../assets/img/lake.jpg" | |||
| src="../../assets/img/star.png" | |||
| alt="" | |||
| /> | |||
| </div> | |||
| @@ -29,6 +29,7 @@ | |||
| <script setup> | |||
| //#region 导入 | |||
| import { fabric } from "fabric"; | |||
| //#endregion --------------------------- | |||
| //#region 画布交互 | |||
| @@ -38,23 +39,16 @@ let canvas = new fabric.Canvas("canvas"); | |||
| onMounted(() => { | |||
| let canvas = new fabric.Canvas("canvas"); | |||
| // let rect = new fabric.Rect({ | |||
| // left: 0, //距离画布左侧的距离,单位是像素 | |||
| // top: 0, //距离画布上边的距离 | |||
| // fill: "red", //填充的颜色 | |||
| // width: 50, //方形的宽度 | |||
| // height: 50, //方形的高度 | |||
| // }); | |||
| // canvas.add(rect); | |||
| let imgElement = document.getElementById("bjImg"); //声明我们的图片 | |||
| let imgInstance = new fabric.Image(imgElement, { | |||
| //设置图片位置和样子 | |||
| left: 100, | |||
| top: 100, | |||
| width: 200, | |||
| height: 100, | |||
| angle: 30, //设置图形顺时针旋转角度 | |||
| // left: 100, | |||
| // top: 100, | |||
| // width: 400, | |||
| // height: 200, | |||
| // angle: 30, //设置图形顺时针旋转角度 | |||
| }); | |||
| console.log(imgInstance); | |||
| canvas.add(imgInstance); | |||
| // canvas.on("mouse:up", function (options) { | |||
| // console.log(options.e.clientX, options.e.clientY); | |||