@@ -34,7 +34,8 @@ export default { | |||
oldPwd:'Old Password', | |||
confirmNewPwd:'Confirm new password', | |||
confirm:'Confirm', | |||
gohome:'Back to home page' | |||
gohome:'Back to home page', | |||
SMSCode:'SMS Code', | |||
}, | |||
// 导航栏国际化 | |||
@@ -89,6 +90,9 @@ export default { | |||
fontFamily:'Font Faily', | |||
XAxis:"X-axis", | |||
YAxis:"Y-axis", | |||
rows:"Row Number", | |||
rows1:"Single", | |||
rows2:"Double", | |||
fontSize:"Font Size", | |||
width:"Width", | |||
FontColor:"Font Color", | |||
@@ -34,7 +34,8 @@ export default { | |||
oldPwd:'旧密码', | |||
confirmNewPwd:'确认新密码', | |||
confirm:'确定', | |||
gohome:'回到首页' | |||
gohome:'回到首页', | |||
SMSCode:'短信验证码', | |||
}, | |||
// 导航栏国际化 | |||
@@ -87,6 +88,9 @@ export default { | |||
fontFamily:'字体', | |||
XAxis:"X轴", | |||
YAxis:"Y轴", | |||
rows:"单双行", | |||
rows1:"单行", | |||
rows2:"双行", | |||
fontSize:"字体大小", | |||
width:"宽度", | |||
FontColor:"字体颜色", | |||
@@ -2,6 +2,7 @@ | |||
export {} | |||
declare global { | |||
const EffectScope: typeof import('vue')['EffectScope'] | |||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | |||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | |||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | |||
@@ -270,6 +271,7 @@ import { UnwrapRef } from 'vue' | |||
declare module 'vue' { | |||
interface ComponentCustomProperties { | |||
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 ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | |||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | |||
@@ -31,15 +31,23 @@ | |||
/> | |||
</el-select></div> | |||
<!-- Y轴 --> | |||
<div class="item">{{$t('createVideo.YAxis')}}: <el-input | |||
<div v-show="false" class="item">{{$t('createVideo.YAxis')}}: <el-input | |||
v-model="SubtitlesTop" | |||
width="30" | |||
/></div> | |||
<!-- 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" | |||
width="30" | |||
/></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 | |||
v-model="SubtitlesSize" | |||
@@ -93,6 +101,7 @@ | |||
<img id="canvasImg" :src="imgUrl" alt="" class="" /> | |||
<div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag" :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox"> | |||
<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 box2"></div> | |||
<div class="stretchBox box3"></div> | |||
@@ -103,7 +112,7 @@ | |||
<div class="stretchBox box6"></div> | |||
<div class="stretchBox box7"></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> | |||
@@ -1446,6 +1455,16 @@ async function uploadProgress(videoId, isSaveVideo) { | |||
speakTypeStr: soundStyle.value, //声音风格 | |||
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传 | |||
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 { | |||
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 | |||
@@ -2002,6 +2021,7 @@ const canvasImgBox = ref(null); // 图片外盒子dom | |||
const SubtitlesFontFamily = ref(""); //字幕字体系列 | |||
const SubtitlesTop = ref(400); // 字幕Y轴 | |||
const SubtitlesLeft = ref(100); // 字幕X轴 | |||
const SubtitlesRow = ref(false); // 字幕单双行 | |||
const SubtitlesSize = ref(18); // 字幕字号 | |||
const isRotating = ref(false); //控制是否旋转 | |||
const rotationStartAngle = ref(0); //旋转中间件 | |||
@@ -2183,7 +2203,7 @@ watch( | |||
startX.value = event.clientX; | |||
} | |||
}; | |||
//旋转盒子 | |||
//旋转盒子 暂时弃用 | |||
const startRotation = (event) => { | |||
isRotating.value = true; | |||
isResizing.value = true; | |||
@@ -2202,7 +2222,7 @@ watch( | |||
const SubtitlesBoxCenterX = SubtitlesBox.value.offsetLeft + SubtitlesBox.value.offsetWidth / 2; | |||
const SubtitlesBoxCenterY = SubtitlesBox.value.offsetTop + SubtitlesBox.value.offsetHeight / 2; | |||
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)`; | |||
} | |||
}; | |||
@@ -2295,6 +2315,7 @@ onUnmounted(() => { | |||
} | |||
}); | |||
//#endregion ---------------------- | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -513,6 +513,74 @@ | |||
{{ $t("login.confirm") }} | |||
</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 style="margin-bottom: 5px" @click="loginFlag(1)"> | |||
<span class="join">{{ $t("login.signIn") }}</span> | |||
@@ -605,6 +673,9 @@ const loginData5 = ref({ | |||
newPwd: "", | |||
confirmNewPwd: "", | |||
}); | |||
const loginData6 = ref({ | |||
SMSCode: "", | |||
}); | |||
const loginRules = ref({ | |||
email: [ | |||
@@ -708,11 +779,16 @@ function emailValidator(rule: any, value: any, callback: any) { | |||
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 (!value) { | |||
callback(new Error(msg)); | |||
} else if (!emailReg.test(value)) { | |||
callback(new Error(msg2)); | |||
if (!phoneReg.test(value)) { | |||
callback(new Error(msg2)); | |||
} else { | |||
callback(); | |||
} | |||
// callback(new Error(msg2)); | |||
} else { | |||
callback(); | |||
} | |||
@@ -833,8 +909,19 @@ function handleRegister() { | |||
email: loginData2.value.email, | |||
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 { | |||
const msg = | |||
currentLan.value == "zh-cn" | |||
@@ -974,7 +1061,38 @@ async function doRegister(data: object) { | |||
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:登录 | |||
* @param {Object} data | |||