diff --git a/src/apis/login.js b/src/apis/login.js index a5c8b29..66e2d71 100644 --- a/src/apis/login.js +++ b/src/apis/login.js @@ -16,7 +16,7 @@ export function register(data) { } /** - * @description 登录 + * @description 邮箱登录 * @params email,password,code * @returns data */ @@ -28,6 +28,21 @@ export function login(data) { }) } +/** + * @description 手机+密码登录 + * @params phone password code + * @returns data + */ +export function loginByPhoneApi(data) { + return request({ + // url: `/api/user/loginByEmail`, + url: `/api/user/login`, + method: 'post', + data + }) +} + + /** /** * @description:重新发送邮件 @@ -87,7 +102,56 @@ export function resetPwdFormApi(data) { data }) } +/** + * @description 手机注册 + * @params email,password + * @returns data + */ +export function registerByPhoneApi(data) { + return request({ + // url: `/api/user/doRegisterByEmail`, + url: `/api/user/doRegisterByPhone`, + method: 'post', + data + }) +} +/** + * @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 + }) +} +/**`/api/user/sendLoginPhoneCode?phone=${phone}` + * @description 忘记密码,短信验证码和新密码 + * @param {object} loginParams (phone,code,pwd) + * @returns data + */ +export function doUpdPassApi(loginParams) { + return request({ + url: `/api/user/updPass`, + method: 'post', + data: loginParams + }) +} /** * @description:获取图形验证码 diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index eae23bb..d89c9e8 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -23,8 +23,10 @@ export default { loginBtn: "Sign In", registerBtn: "Sign Up", verifyCode: "Verify Code", - signIn: "Already got an account? Sign in here", - signUp: "Don't have an account? Sign up here", + // signIn: "Already got an account? Sign in here", + // signUp: "Don't have an account? Sign up here", + signIn: "Sign in here", + signUp: "Sign up here", forgetPwd: "I forgot my password", forgetPwdTitle:'Forgot Password', SendEmail:'Send an email/SMS', @@ -101,7 +103,7 @@ export default { width:"Width", FontColor:"Font Color", backgroundColor:"Background color", - SubtitlesTip:"Please edit text in copy area", + SubtitlesTip:"Subtitles will be shown here", }, // 我的视频 @@ -137,6 +139,7 @@ export default { upSharpnessTips:'If you are satisfied with the preview, you can click here to improve the video sharpness ~', freeUserTip:'Free user-generated videos are limited to 1 minute', hasNewVideo:'You have a new video status!', + reset:"reset", }, // 个人账户 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 0353900..e654220 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -23,8 +23,10 @@ export default { loginBtn: "登 录", registerBtn: "注 册", verifyCode: "验证码", - signIn: "已有账号?现在登录!", - signUp: "没有账号?现在加入!", + // signIn: "已有账号?现在登录!", + // signUp: "没有账号?现在加入!", + signIn: "直接登录", + signUp: "立即注册", forgetPwd: "忘记密码", forgetPwdTitle:'忘记密码', SendEmail:'发送邮件/短信', @@ -99,7 +101,7 @@ export default { width:"宽度", FontColor:"字体颜色", backgroundColor:"背景颜色", - SubtitlesTip:"请在文案区编辑您的正文", + SubtitlesTip:"字幕将在此处展示", }, // 我的视频 @@ -135,6 +137,7 @@ export default { upSharpnessTips:'如果对预览效果满意,您可以点击此处来提升视频清晰度~', freeUserTip:'免费用户生成视频时长限制为1分钟', hasNewVideo:'您有新的视频状态!', + reset:"重置", }, // 个人账户 diff --git a/src/styles/my.scss b/src/styles/my.scss index 3edb8c7..81929e0 100644 --- a/src/styles/my.scss +++ b/src/styles/my.scss @@ -32,6 +32,7 @@ div { text-align: center; border: 1px solid #000; border-radius: 5px; + cursor: pointer; } p { diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index c79bfc6..2ca7f19 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -36,10 +36,10 @@ width="30" /> -
{{$t('createVideo.XAxis')}}: {{$t('createVideo.XAxis')}}: 
+ /> -->
{{$t('createVideo.rows')}}: 
-
- + -->
- -
+ +
{{$t('createVideo.SubtitlesTip')}}
{{$t('createVideo.SubtitlesTip')}}
-
-
@@ -1462,13 +1462,14 @@ async function uploadProgress(videoId, isSaveVideo) { subtitleParams:{ Fontname:SubtitlesFontFamily.value, //字体名字 Fontsize:SubtitlesSize.value, //字体大小 - Boxwidth:SubtitlesWidth.value, //字幕宽 - Boxheight:Number(SubtitlesSize.value+10), //字幕高 + // Boxwidth:SubtitlesWidth.value, //字幕宽 + // Boxheight:Number(SubtitlesSize.value+10), //字幕高 // Boxheight:SubtitlesBox.value.style.height, - Marginl:SubtitlesLeft.value, //左边距 - Marginy:SubtitlesTop.value, //上边距 + // Marginl:SubtitlesLeft.value, //左边距 + Marginv:SubtitlesTop.value, //上边距 SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色 - OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 + // OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 + Aignment:6 } }; try { @@ -1546,13 +1547,14 @@ async function saveOrUpdate(index, isSaveVideo) { subtitleParams:JSON.stringify({ Fontname:SubtitlesFontFamily.value, //字体名字 Fontsize:SubtitlesSize.value, //字体大小 - Boxwidth:SubtitlesWidth.value, //字幕宽 - Boxheight:Number(SubtitlesSize.value+10), //字幕高 + // Boxwidth:SubtitlesWidth.value, //字幕宽 + // Boxheight:Number(SubtitlesSize.value+10), //字幕高 // Boxheight:SubtitlesBox.value.style.height, - Marginl:SubtitlesLeft.value, //左边距 - Marginy:SubtitlesTop.value, //上边距 + // Marginl:SubtitlesLeft.value, //左边距 + Marginv:SubtitlesTop.value, //上边距 SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色 - OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 + // OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色 + Aignment:6 }) }; if (index == 1) { @@ -1794,15 +1796,15 @@ async function findById(findId) { console.log(subtitleParamsToObj); SubtitlesFontFamily.value=subtitleParamsToObj.Fontname SubtitlesSize.value=subtitleParamsToObj.Fontsize - SubtitlesWidth.value=subtitleParamsToObj.Boxwidth - SubtitlesSize.value=Number(subtitleParamsToObj.Boxheight-10) + // SubtitlesWidth.value=subtitleParamsToObj.Boxwidth + // SubtitlesSize.value=Number(subtitleParamsToObj.Boxheight-10) // Boxheight:SubtitlesBox.value.style.height, - SubtitlesLeft.value=subtitleParamsToObj.Marginl - SubtitlesTop.value=subtitleParamsToObj.Marginy + // SubtitlesLeft.value=subtitleParamsToObj.Marginl + SubtitlesTop.value=subtitleParamsToObj.Marginv SubtitlesColor.value=BgraToRgba(subtitleParamsToObj.SecondaryColour ) - SubtitlesBgc.value=BgraToRgba(subtitleParamsToObj.OutlineColour -) +// SubtitlesBgc.value=BgraToRgba(subtitleParamsToObj.OutlineColour +// ) } //#endregion ---------------------------- @@ -2074,6 +2076,7 @@ function copyAnswerContent() { //#region 字幕部分 const canvasImgBox = ref(null); // 图片外盒子dom +const ImgBox = ref(null); // 图片渲染dom const SubtitlesBox = ref(null); // 字幕盒子dom const SubtitlesSwitch = ref(false); // 字幕开关 const SubtitlesWidth = ref(250); // 字幕宽度 @@ -2085,11 +2088,11 @@ const canvasImgBox = ref(null); // 图片外盒子dom const isRotating = ref(false); //控制是否旋转 const rotationStartAngle = ref(0); //旋转中间件 const SubtitlesAngle = ref(20); //旋转度数 - const lastMouseAngle = ref(0); - const initialRotation = ref(0); + const imgWitdt=ref(0); //图片宽度 + const imgHeight=ref(0); //图片高度 const SubtitlesColor = ref('#ff0000'); // 字幕字色 // const SubtitlesColorBGRA = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 - const SubtitlesBgc = ref('#ffffff'); // 字幕背景色 + const SubtitlesBgc = ref('rgba(0,0,0,0)'); // 字幕背景色 // const SubtitlesBgcBGRA = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色 // 调色板 const colorList = [ @@ -2162,14 +2165,17 @@ function BgraToRgba(hexColor) { const convertedColor = `#${red}${green}${blue}`; return convertedColor; } -// watch( -// () => SubtitlesColor, -// (newValue, oldValue) => { -// SubtitlesColorBGRA.value = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色 - -// }, -// { deep: true } -// ); +watch( + () => imgUrl, + async(newValue, oldValue) => { + await nextTick() + console.log(ImgBox.value.width); + imgWitdt.value=ImgBox.value.width + imgHeight.value=ImgBox.value.height + SubtitlesWidth.value=imgWitdt.value*0.7 + }, + { deep: true } +); // watch( // () => SubtitlesBgc, // (newValue, oldValue) => { @@ -2182,7 +2188,8 @@ function BgraToRgba(hexColor) { return { width: SubtitlesWidth.value + 'px', top: SubtitlesTop.value + 'px', - left: SubtitlesLeft.value + 'px', + // left: SubtitlesLeft.value + 'px', + left: (imgWitdt.value/2)-(SubtitlesWidth.value/2) + 'px', fontSize: SubtitlesSize.value + 'px', fontFamily: SubtitlesFontFamily.value, color: SubtitlesColor.value, @@ -2206,6 +2213,12 @@ function BgraToRgba(hexColor) { const newY = event.clientY - offsetY; SubtitlesLeft.value = newX; SubtitlesTop.value = newY; + if(SubtitlesTop.value<0) { + SubtitlesTop.value = 0; + } + if(SubtitlesTop.value>imgHeight.value-25) { + SubtitlesTop.value = imgHeight.value-25 + } }; const onMouseUp = () => { diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 59a4a81..5fda2b5 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -9,7 +9,7 @@ loop >
- +
- +
- + - + - + -
+
{{ $t("login.sendSMS") }}
{{ SMSTimeOut }}s
@@ -598,7 +598,7 @@
- + -
+
{{ $t("login.sendSMS") }}
{{ SMSTimeOut }}s
@@ -660,13 +664,13 @@ - + {{ $t("login.signIn") }}
-
+
- +
{{ - $t("login.title") + " " + $t("login.register") + $t("login.title") + " " + $t("login.login") }} -
+
{{ $t("login.sendSMS") }}
{{ SMSTimeOut }}s
@@ -778,7 +786,7 @@ :loading="loading" type="primary" class="loginBtn" - @click.prevent="handleRegister" + @click.prevent="handleLoginByPhone" > - {{ $t("login.registerBtn") }} + {{ $t("login.loginBtn") }}
@@ -819,6 +827,11 @@ import { sendUpdPwdEmailApi, resetPwdEmailApi, resetPwdFormApi, + loginByPhoneApi, + registerByPhoneApi, + getSMSToLoginApi, + loginByMSMApi, + doUpdPassApi, } from "@/apis/login"; import axios from "axios"; // 状态管理依赖 @@ -897,7 +910,7 @@ const loginData6 = ref({ const loginData7 = ref({ SMScode: "", password: "", - confirmPassword4: "", + confirmPassword7: "", }); const loginData8 = ref({ phone: "", @@ -933,6 +946,9 @@ const loginRules = ref({ confirmPassword4: [ { required: true, trigger: "blur", validator: confirmPasswordValidator4 }, ], + confirmPassword7: [ + { required: true, trigger: "blur", validator: confirmPasswordValidator7 }, + ], newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }], confirmNewPwd: [ { required: true, trigger: "blur", validator: confirmPasswordValidator5 }, @@ -968,13 +984,23 @@ function loginFlag(type: number) { * @param:email,password */ function saveInfo(data: any) { - const userInfo = JSON.stringify({ - email: data.email, - password: data.password, - }); - // 将用户信息加密 - const enCodeUserInfo = encodeURI(userInfo); - localStorage.setItem("userInfo", enCodeUserInfo); + if (data.email) { + const userInfo = JSON.stringify({ + email: data.email, + password: data.password, + }); + // 将用户信息加密 + const enCodeUserInfo = encodeURI(userInfo); + localStorage.setItem("userInfo", enCodeUserInfo); + } else if (data.phone) { + const userInfo = JSON.stringify({ + email: data.phone, + password: data.password, + }); + // 将用户信息加密 + const enCodeUserInfo = encodeURI(userInfo); + localStorage.setItem("userInfo", enCodeUserInfo); + } } /** @@ -1086,6 +1112,24 @@ function confirmPasswordValidator4(rule: any, value: any, callback: any) { callback(); } } +function confirmPasswordValidator7(rule: any, value: any, callback: any) { + const msg = + currentLan.value == "zh-cn" + ? "确认密码不能为空!" + : "The Confirm password can not be empty"; + const msg2 = + currentLan.value == "zh-cn" + ? "两次输入密码不一致!" + : "Confirm Passward entered should match"; + + if (!value) { + callback(new Error(msg)); + } else if (value !== loginData7.value.password) { + callback(new Error(msg2)); + } else { + callback(); + } +} function confirmPasswordValidator5(rule: any, value: any, callback: any) { const msg = currentLan.value == "zh-cn" @@ -1115,8 +1159,62 @@ function handleLogin() { password: loginData.value.password, code: loginData.value.verifyCode, }; + 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)) { + isLogining.value = true; + doLogin(data); + // 如果是手机 + } else if (phoneReg.test(data.email)) { + const data2 = { + phone: loginData.value.email, + password: loginData.value.password, + code: loginData.value.verifyCode, + }; + isRegistering.value = true; + doLoginByPhone(data2); + } else { + } + } else { + const msg = + currentLan.value == "zh-cn" + ? "请检查信息格式!" + : "Please check the format !"; + ElMessage.error(msg); + return; + } + }); +} +//#region 手机号+密码登录 +function doLoginByPhone(data: any) { + loginFormRef.value.validate(async (val: any) => { + if (val) { isLogining.value = true; - doLogin(data); + const msg = + currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"; + await loginByPhoneApi(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: any) => { + console.log(err, "err"); + // 登录失败刷新验证码 + // getCode(); + ElMessage.error(err.message); + isLogining.value = false; + if (err.code == 2112) { + // reSendEmail(data.email); + } + }); } else { const msg = currentLan.value == "zh-cn" @@ -1127,7 +1225,6 @@ function handleLogin() { } }); } - // 注册行为 function handleRegister() { loginFormRef.value.validate((val: any) => { @@ -1145,8 +1242,12 @@ function handleRegister() { doRegister(data); // 如果是手机 } else if (phoneReg.test(data.email)) { + const data2 = { + phone: loginData2.value.email, + password: loginData2.value.password, + }; isRegistering.value = true; - doRegisterByPhone(data); + doRegisterByPhone(data2); } else { } } else { @@ -1160,6 +1261,93 @@ function handleRegister() { }); } +//#region 手机号+SMS登录 +function handleLoginByPhone() { + loginFormRef.value.validate(async (val: any) => { + if (val) { + const data = { + phone: loginData8.value.phone, + code: loginData8.value.SMScode, + }; + isLogining.value = true; + 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: any) => { + console.log(err, "err"); + // 登录失败刷新验证码 + // getCode(); + ElMessage.error(err.message); + isLogining.value = false; + if (err.code == 2112) { + // reSendEmail(data.email); + } + }); + } else { + const msg = + currentLan.value == "zh-cn" + ? "请检查信息格式!" + : "Please check the format !"; + ElMessage.error(msg); + return; + } + }); +} + +//#endregion + +//#region 手机号忘记密码 +function handleResetPwdByPhone() { + loginFormRef.value.validate(async (val: any) => { + if (val) { + const data = { + phone: loginData3.value.email, + code: loginData7.value.SMScode, + pwd: loginData7.value.password, + }; + isLogining.value = true; + const msg = + currentLan.value == "zh-cn" + ? "密码修改成功!" + : "Password changed successfully!"; + await doUpdPassApi(data) + .then((res: any) => { + console.log(res, "res"); + isLogin.value = 1; + ElMessage.success(msg); + }) + .catch((err: any) => { + console.log(err, "err"); + // 登录失败刷新验证码 + // getCode(); + ElMessage.error(err.message); + isLogining.value = false; + if (err.code == 2112) { + // reSendEmail(data.email); + } + }); + } else { + const msg = + currentLan.value == "zh-cn" + ? "请检查信息格式!" + : "Please check the format !"; + ElMessage.error(msg); + return; + } + }); +} +//#endregion + //#region 忘记密码 表单3 function sendEmailforgetPwd() { const emailReg = @@ -1167,6 +1355,7 @@ function sendEmailforgetPwd() { const phoneReg = /^[1][3-9]\d{9}$/; if (phoneReg.test(loginData3.value.email)) { isLogin.value = 7; + getSMSToLogin(3); return; } else if (emailReg.test(loginData3.value.email)) { const msg = @@ -1303,14 +1492,18 @@ 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"; const msg = currentLan.value == "zh-cn" - ? "确认短信验证码已发送至您的手机,请注意查收" - : "An SMS has been send to you, Please pay attention to confirm"; - await register(data) + ? "注册成功!请登录" + : "Registered successfully! Please log in"; + await registerByPhoneApi(data) .then((res) => { SMSTimeOut.value = 60; const timer = setInterval(() => { @@ -1322,7 +1515,7 @@ async function doRegisterByPhone(data: object) { }, 1000); console.log(res, "res"); isRegistering.value = false; - isLogin.value = 6; + isLogin.value = 1; ElMessage.success(msg); // 注册成功将账号密码保存到本地 saveInfo(data); @@ -1335,6 +1528,48 @@ async function doRegisterByPhone(data: object) { ElMessage.error(err.message); }); } + +// 发送手机验证码 +const SMSTimeOut = ref(0); //倒计时 +async function getSMSToLogin(type: any) { + let phoneReg = /^[1][3-9]\d{9}$/; + const myPhone = ref(""); + if (type == 8) { + myPhone.value = loginData8.value.phone; + } + if (type == 3) { + myPhone.value = loginData3.value.email; + } + let phoneValide = phoneReg.test(myPhone.value); + if (!phoneValide) { + ElMessage.error( + currentLan.value == "zh-cn" + ? "请输入正确的手机号!" + : "Please enter the correct phone number!" + ); + return; + } + try { + await getSMSToLoginApi(Number(myPhone.value)).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); + } +} + /** * @description:登录 * @param {Object} data diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index f4b0d50..d98c373 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -2,8 +2,9 @@
-
+
@@ -326,6 +331,11 @@ function handleDownload(itemVideoPlayUrl) { function goCreate() { router.push("/createVideo"); } + +function resetSearch(params) { + title.value = ""; + searchVideoList(); +} // 搜索 function searchVideoList() { getPhotoVideoList(pageNum.value, pageSize.value, title.value, true); @@ -511,6 +521,28 @@ onMounted(() => { .top { position: relative; margin-bottom: 35px; + .search { + display: flex; + justify-content: flex-start; + .resetSearch { + margin-left: 10px; + padding: 0 10px; + height: 30px; + width: 100px; + text-align: center; + line-height: 30px; + background-color: #000; + border: 1px solid #000; + border-radius: 15px; + cursor: pointer; + transition: all 0.3s; + color: #fff; + &:hover { + background-color: #fff; + color: #000; + } + } + } .hasNewVideoTips { position: absolute; top: 0;