| @@ -34,7 +34,8 @@ export default { | |||||
| oldPwd:'Old Password', | oldPwd:'Old Password', | ||||
| confirmNewPwd:'Confirm new password', | confirmNewPwd:'Confirm new password', | ||||
| confirm:'Confirm', | confirm:'Confirm', | ||||
| gohome:'Back to home page' | |||||
| gohome:'Back to home page', | |||||
| SMSCode:'SMS Code', | |||||
| }, | }, | ||||
| // 导航栏国际化 | // 导航栏国际化 | ||||
| @@ -89,6 +90,9 @@ export default { | |||||
| fontFamily:'Font Faily', | fontFamily:'Font Faily', | ||||
| XAxis:"X-axis", | XAxis:"X-axis", | ||||
| YAxis:"Y-axis", | YAxis:"Y-axis", | ||||
| rows:"Row Number", | |||||
| rows1:"Single", | |||||
| rows2:"Double", | |||||
| fontSize:"Font Size", | fontSize:"Font Size", | ||||
| width:"Width", | width:"Width", | ||||
| FontColor:"Font Color", | FontColor:"Font Color", | ||||
| @@ -34,7 +34,8 @@ export default { | |||||
| oldPwd:'旧密码', | oldPwd:'旧密码', | ||||
| confirmNewPwd:'确认新密码', | confirmNewPwd:'确认新密码', | ||||
| confirm:'确定', | confirm:'确定', | ||||
| gohome:'回到首页' | |||||
| gohome:'回到首页', | |||||
| SMSCode:'短信验证码', | |||||
| }, | }, | ||||
| // 导航栏国际化 | // 导航栏国际化 | ||||
| @@ -87,6 +88,9 @@ export default { | |||||
| fontFamily:'字体', | fontFamily:'字体', | ||||
| XAxis:"X轴", | XAxis:"X轴", | ||||
| YAxis:"Y轴", | YAxis:"Y轴", | ||||
| rows:"单双行", | |||||
| rows1:"单行", | |||||
| rows2:"双行", | |||||
| fontSize:"字体大小", | fontSize:"字体大小", | ||||
| width:"宽度", | width:"宽度", | ||||
| FontColor:"字体颜色", | FontColor:"字体颜色", | ||||
| @@ -2,6 +2,7 @@ | |||||
| export {} | export {} | ||||
| declare global { | declare global { | ||||
| const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
| const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
| const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
| const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
| @@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||||
| declare module 'vue' { | declare module 'vue' { | ||||
| interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
| readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | ||||
| readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> | |||||
| readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
| readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
| readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
| @@ -31,15 +31,23 @@ | |||||
| /> | /> | ||||
| </el-select></div> | </el-select></div> | ||||
| <!-- Y轴 --> | <!-- Y轴 --> | ||||
| <div class="item">{{$t('createVideo.YAxis')}}: <el-input | |||||
| <div v-show="false" class="item">{{$t('createVideo.YAxis')}}: <el-input | |||||
| v-model="SubtitlesTop" | v-model="SubtitlesTop" | ||||
| width="30" | width="30" | ||||
| /></div> | /></div> | ||||
| <!-- X轴 --> | <!-- X轴 --> | ||||
| <div class="item" style="font-family: ;">{{$t('createVideo.XAxis')}}: <el-input | |||||
| <div v-show="false" class="item" style="">{{$t('createVideo.XAxis')}}: <el-input | |||||
| v-model="SubtitlesLeft" | v-model="SubtitlesLeft" | ||||
| width="30" | width="30" | ||||
| /></div> | /></div> | ||||
| <!-- 单双行 --> | |||||
| <div class="item" >{{$t('createVideo.rows')}}:  <el-switch | |||||
| v-model="SubtitlesRow" | |||||
| inline-prompt | |||||
| style="--el-switch-on-color: #000; --el-switch-off-color: #13ce66;" | |||||
| :active-text="$t('createVideo.rows2')" | |||||
| :inactive-text="$t('createVideo.rows1')" | |||||
| /></div> | |||||
| <!-- 字号大小 --> | <!-- 字号大小 --> | ||||
| <div class="item">{{$t('createVideo.fontSize')}}: <el-input | <div class="item">{{$t('createVideo.fontSize')}}: <el-input | ||||
| v-model="SubtitlesSize" | v-model="SubtitlesSize" | ||||
| @@ -93,6 +101,7 @@ | |||||
| <img id="canvasImg" :src="imgUrl" alt="" class="" /> | <img id="canvasImg" :src="imgUrl" alt="" class="" /> | ||||
| <div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag" :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox"> | <div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag" :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox"> | ||||
| <div class="SubtitlesTip">{{$t('createVideo.SubtitlesTip')}}</div> | <div class="SubtitlesTip">{{$t('createVideo.SubtitlesTip')}}</div> | ||||
| <div v-show="SubtitlesRow" class="SubtitlesTip">{{$t('createVideo.SubtitlesTip')}}</div> | |||||
| <div class="stretchBox box1"></div> | <div class="stretchBox box1"></div> | ||||
| <div class="stretchBox box2"></div> | <div class="stretchBox box2"></div> | ||||
| <div class="stretchBox box3"></div> | <div class="stretchBox box3"></div> | ||||
| @@ -103,7 +112,7 @@ | |||||
| <div class="stretchBox box6"></div> | <div class="stretchBox box6"></div> | ||||
| <div class="stretchBox box7"></div> | <div class="stretchBox box7"></div> | ||||
| <div class="stretchBox box8"></div> | <div class="stretchBox box8"></div> | ||||
| <div class="stretchBox box9" @mousedown="startRotation" @mousemove="rotateBox" @mouseup="stopRotation"></div> | |||||
| <div v-show="false" class="stretchBox box9" @mousedown="startRotation" @mousemove="rotateBox" @mouseup="stopRotation"></div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -1446,6 +1455,16 @@ async function uploadProgress(videoId, isSaveVideo) { | |||||
| speakTypeStr: soundStyle.value, //声音风格 | speakTypeStr: soundStyle.value, //声音风格 | ||||
| voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 | voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 | ||||
| voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 | voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传 | ||||
| // subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关 | |||||
| // subtitleParams:{ | |||||
| // Fontname:SubtitlesFontFamily.value, | |||||
| // Fontsize:SubtitlesSize.value, | |||||
| // Boxwidth:SubtitlesWidth.value, | |||||
| // // Boxheight:Number(SubtitlesSize.value+10), | |||||
| // Boxheight:SubtitlesBox.value.style.height, | |||||
| // SecondaryColour:SubtitlesColorBGRA.value, | |||||
| // Marginl:SubtitlesLeft.value, | |||||
| // } | |||||
| }; | }; | ||||
| try { | try { | ||||
| const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | ||||
| @@ -2002,6 +2021,7 @@ const canvasImgBox = ref(null); // 图片外盒子dom | |||||
| const SubtitlesFontFamily = ref(""); //字幕字体系列 | const SubtitlesFontFamily = ref(""); //字幕字体系列 | ||||
| const SubtitlesTop = ref(400); // 字幕Y轴 | const SubtitlesTop = ref(400); // 字幕Y轴 | ||||
| const SubtitlesLeft = ref(100); // 字幕X轴 | const SubtitlesLeft = ref(100); // 字幕X轴 | ||||
| const SubtitlesRow = ref(false); // 字幕单双行 | |||||
| const SubtitlesSize = ref(18); // 字幕字号 | const SubtitlesSize = ref(18); // 字幕字号 | ||||
| const isRotating = ref(false); //控制是否旋转 | const isRotating = ref(false); //控制是否旋转 | ||||
| const rotationStartAngle = ref(0); //旋转中间件 | const rotationStartAngle = ref(0); //旋转中间件 | ||||
| @@ -2183,7 +2203,7 @@ watch( | |||||
| startX.value = event.clientX; | startX.value = event.clientX; | ||||
| } | } | ||||
| }; | }; | ||||
| //旋转盒子 | |||||
| //旋转盒子 暂时弃用 | |||||
| const startRotation = (event) => { | const startRotation = (event) => { | ||||
| isRotating.value = true; | isRotating.value = true; | ||||
| isResizing.value = true; | isResizing.value = true; | ||||
| @@ -2202,7 +2222,7 @@ watch( | |||||
| const SubtitlesBoxCenterX = SubtitlesBox.value.offsetLeft + SubtitlesBox.value.offsetWidth / 2; | const SubtitlesBoxCenterX = SubtitlesBox.value.offsetLeft + SubtitlesBox.value.offsetWidth / 2; | ||||
| const SubtitlesBoxCenterY = SubtitlesBox.value.offsetTop + SubtitlesBox.value.offsetHeight / 2; | const SubtitlesBoxCenterY = SubtitlesBox.value.offsetTop + SubtitlesBox.value.offsetHeight / 2; | ||||
| const mouseAngle = Math.atan2(event.clientY - SubtitlesBoxCenterY, event.clientX - SubtitlesBoxCenterX); | const mouseAngle = Math.atan2(event.clientY - SubtitlesBoxCenterY, event.clientX - SubtitlesBoxCenterX); | ||||
| SubtitlesAngle.value = (mouseAngle - rotationStartAngle.value)*5; | |||||
| SubtitlesAngle.value = (mouseAngle - rotationStartAngle.value); | |||||
| SubtitlesBox.value.style.transform = `rotate(${SubtitlesAngle.value}rad)`; | SubtitlesBox.value.style.transform = `rotate(${SubtitlesAngle.value}rad)`; | ||||
| } | } | ||||
| }; | }; | ||||
| @@ -2295,6 +2315,7 @@ onUnmounted(() => { | |||||
| } | } | ||||
| }); | }); | ||||
| //#endregion ---------------------- | //#endregion ---------------------- | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| @@ -513,6 +513,74 @@ | |||||
| {{ $t("login.confirm") }} | {{ $t("login.confirm") }} | ||||
| </el-button> | </el-button> | ||||
| <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | |||||
| <div style="margin-bottom: 5px" @click="loginFlag(1)"> | |||||
| <span class="join">{{ $t("login.signIn") }}</span> | |||||
| </div> | |||||
| </div> | |||||
| </el-form> | |||||
| <!-- 手机注册得到验证码 6--> | |||||
| <el-form | |||||
| v-if="isLogin == 6" | |||||
| ref="loginFormRef" | |||||
| :model="loginData6" | |||||
| :rules="loginRules" | |||||
| class="login-form" | |||||
| > | |||||
| <div class="flex text-white items-center"> | |||||
| <span class="flex-1 text-center">{{ | |||||
| $t("login.title") + " " + $t("login.register") | |||||
| }}</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="SMSCode"> | |||||
| <div class="text-white"> | |||||
| <svg-icon icon-class="user" /> | |||||
| </div> | |||||
| <el-input | |||||
| class="flex-1" | |||||
| ref="email" | |||||
| size="large" | |||||
| v-model="loginData6.SMSCode" | |||||
| :placeholder="$t('login.SMSCode')" | |||||
| name="email" | |||||
| /> | |||||
| </el-form-item> | |||||
| <el-button | |||||
| size="default" | |||||
| :loading="loading" | |||||
| type="primary" | |||||
| class="loginBtn" | |||||
| @click.prevent="handleRegister" | |||||
| > | |||||
| <el-icon | |||||
| v-if="isRegistering" | |||||
| 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.registerBtn") }} | |||||
| </el-button> | |||||
| <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'"> | ||||
| <div style="margin-bottom: 5px" @click="loginFlag(1)"> | <div style="margin-bottom: 5px" @click="loginFlag(1)"> | ||||
| <span class="join">{{ $t("login.signIn") }}</span> | <span class="join">{{ $t("login.signIn") }}</span> | ||||
| @@ -605,6 +673,9 @@ const loginData5 = ref({ | |||||
| newPwd: "", | newPwd: "", | ||||
| confirmNewPwd: "", | confirmNewPwd: "", | ||||
| }); | }); | ||||
| const loginData6 = ref({ | |||||
| SMSCode: "", | |||||
| }); | |||||
| const loginRules = ref({ | const loginRules = ref({ | ||||
| email: [ | email: [ | ||||
| @@ -708,11 +779,16 @@ function emailValidator(rule: any, value: any, callback: any) { | |||||
| const emailReg = | const emailReg = | ||||
| /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | ||||
| const phoneReg = /^[1][3-9]\d{9}$/; | |||||
| if (!value) { | if (!value) { | ||||
| callback(new Error(msg)); | callback(new Error(msg)); | ||||
| } else if (!emailReg.test(value)) { | } else if (!emailReg.test(value)) { | ||||
| callback(new Error(msg2)); | |||||
| if (!phoneReg.test(value)) { | |||||
| callback(new Error(msg2)); | |||||
| } else { | |||||
| callback(); | |||||
| } | |||||
| // callback(new Error(msg2)); | |||||
| } else { | } else { | ||||
| callback(); | callback(); | ||||
| } | } | ||||
| @@ -833,8 +909,19 @@ function handleRegister() { | |||||
| email: loginData2.value.email, | email: loginData2.value.email, | ||||
| password: loginData2.value.password, | password: loginData2.value.password, | ||||
| }; | }; | ||||
| isRegistering.value = true; | |||||
| doRegister(data); | |||||
| const emailReg = | |||||
| /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; | |||||
| const phoneReg = /^[1][3-9]\d{9}$/; | |||||
| // 如果是邮箱 | |||||
| if (emailReg.test(data.email)) { | |||||
| isRegistering.value = true; | |||||
| doRegister(data); | |||||
| // 如果是手机 | |||||
| } else if (phoneReg.test(data.email)) { | |||||
| isRegistering.value = true; | |||||
| doRegisterByPhone(data); | |||||
| } else { | |||||
| } | |||||
| } else { | } else { | ||||
| const msg = | const msg = | ||||
| currentLan.value == "zh-cn" | currentLan.value == "zh-cn" | ||||
| @@ -974,7 +1061,38 @@ async function doRegister(data: object) { | |||||
| ElMessage.error(err.message); | ElMessage.error(err.message); | ||||
| }); | }); | ||||
| } | } | ||||
| // 发送手机验证码 | |||||
| const SMSTimeOut = ref(0); //倒计时 | |||||
| async function doRegisterByPhone(data: object) { | |||||
| const msg = | |||||
| currentLan.value == "zh-cn" | |||||
| ? "确认短信验证码已发送至您的手机,请注意查收" | |||||
| : "An SMS has been send to you, Please pay attention to confirm"; | |||||
| await register(data) | |||||
| .then((res) => { | |||||
| SMSTimeOut.value = 60; | |||||
| const timer = setInterval(() => { | |||||
| if (SMSTimeOut.value != 0) { | |||||
| SMSTimeOut.value--; | |||||
| } else { | |||||
| clearInterval(timer); | |||||
| } | |||||
| }, 1000); | |||||
| console.log(res, "res"); | |||||
| isRegistering.value = false; | |||||
| isLogin.value = 6; | |||||
| ElMessage.success(msg); | |||||
| // 注册成功将账号密码保存到本地 | |||||
| saveInfo(data); | |||||
| }) | |||||
| .catch((err) => { | |||||
| // 注册失败刷新验证码 | |||||
| getCode(); | |||||
| isRegistering.value = false; | |||||
| console.log(err, "err"); | |||||
| ElMessage.error(err.message); | |||||
| }); | |||||
| } | |||||
| /** | /** | ||||
| * @description:登录 | * @description:登录 | ||||
| * @param {Object} data | * @param {Object} data | ||||