瀏覽代碼

手机登录那一套

dev
congzc 1 年之前
父節點
當前提交
d57764af30
共有 7 個檔案被更改,包括 430 行新增79 行删除
  1. +65
    -1
      src/apis/login.js
  2. +6
    -3
      src/lang/package/en.ts
  3. +6
    -3
      src/lang/package/zh-cn.ts
  4. +1
    -0
      src/styles/my.scss
  5. +49
    -36
      src/views/createVideo/index.vue
  6. +270
    -35
      src/views/login/index.vue
  7. +33
    -1
      src/views/myCreating/index.vue

+ 65
- 1
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:获取图形验证码


+ 6
- 3
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",
},

// 个人账户


+ 6
- 3
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:"重置",
},

// 个人账户


+ 1
- 0
src/styles/my.scss 查看文件

@@ -32,6 +32,7 @@ div {
text-align: center;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}

p {


+ 49
- 36
src/views/createVideo/index.vue 查看文件

@@ -36,10 +36,10 @@
width="30"
/></div>
<!-- X轴 -->
<div class="item" style="">{{$t('createVideo.XAxis')}}:&nbsp;<el-input
<!-- <div class="item" style="">{{$t('createVideo.XAxis')}}:&nbsp;<el-input
v-model="SubtitlesLeft"
width="30"
/></div>
/></div> -->
<!-- 单双行 -->
<div v-show="false" class="item" >{{$t('createVideo.rows')}}:&nbsp; <el-switch
v-model="SubtitlesRow"
@@ -79,7 +79,7 @@
</div>
</div>
<!-- 背景色 -->
<div class="item"> <el-tooltip
<!-- <div class="item"> <el-tooltip
class="box-item"
effect="dark"
:content="$t('createVideo.backgroundColor')"
@@ -93,21 +93,21 @@
<div v-for="item in colorList" :style="{backgroundColor: item}" class="selectColor-item" @click="SubtitlesBgc=item"></div>
</div>
</div>
</div>
</div> -->
</div>
</el-row>
<!-- 中间展示大图 -->
<div ref="canvasImgBox" class="bigImg inmiddle">
<img id="canvasImg" :src="imgUrl" alt="" class="" />
<div id="SubtitlesBox" ref="SubtitlesBox" @mousedown="handleDrag" :style="SubtitlesStyle" v-if="SubtitlesSwitch" class="SubtitlesBox">
<img ref="ImgBox" 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>
<div class="stretchBox box4" @mousedown="startResize2"
<div v-show="false" class="stretchBox box4" @mousedown="startResize2"
></div>
<div class="stretchBox box5" @mousedown="startResize"
<div v-show="false" class="stretchBox box5" @mousedown="startResize"
></div>
<div class="stretchBox box6"></div>
<div class="stretchBox box7"></div>
@@ -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 = () => {


+ 270
- 35
src/views/login/index.vue 查看文件

@@ -9,7 +9,7 @@
loop
></video>
</div>
<!-- 正常登录 -->
<!-- 正常登录 1-->
<el-form
v-if="isLogin == 1"
ref="loginFormRef"
@@ -126,7 +126,7 @@
</div>
</div>
</el-form>
<!-- 注册账户 -->
<!-- 注册账户 2-->
<el-form
v-if="isLogin == 2"
ref="loginFormRef"
@@ -240,7 +240,7 @@
</div>
</div>
</el-form>
<!-- 忘记密码 -->
<!-- 忘记密码 3-->
<el-form
v-if="isLogin == 3"
ref="loginFormRef"
@@ -308,7 +308,7 @@
</div>
</div>
</el-form>
<!-- 重置密码 -->
<!-- 重置密码 4-->
<el-form
v-if="isLogin == 4"
ref="loginFormRef"
@@ -429,7 +429,7 @@
</div>
</div>
</el-form>
<!-- 忘记密码邮件返回 -->
<!-- 忘记密码邮件返回 5-->
<el-form
v-if="isLogin == 5"
ref="loginFormRef"
@@ -559,7 +559,7 @@
name="email"
/>
<span class="captcha">
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn">
<div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
{{ $t("login.sendSMS") }}
</div>
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
@@ -598,7 +598,7 @@
</div>
</div>
</el-form>
<!-- 忘记密码手机号 -->
<!-- 忘记密码手机号 7-->
<el-form
v-if="isLogin == 7"
ref="loginFormRef"
@@ -633,7 +633,11 @@
name="password"
/>
<span class="captcha">
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn">
<div
v-if="SMSTimeOut == 0"
@click="getSMSToLogin(7)"
class="sendSMSBtn"
>
{{ $t("login.sendSMS") }}
</div>
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
@@ -660,13 +664,13 @@
</span>
</el-form-item>

<el-form-item prop="confirmPassword4">
<el-form-item prop="confirmPassword7">
<span class="text-white">
<svg-icon icon-class="password" />
</span>
<el-input
class="flex-1"
v-model="loginData7.confirmPassword4"
v-model="loginData7.confirmPassword7"
:placeholder="$t('login.confirmNewPwd')"
:type="passwordVisible === false ? 'password' : 'input'"
size="large"
@@ -685,7 +689,7 @@
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="resetPwdForm"
@click.prevent="handleResetPwdByPhone"
>
<el-icon
v-if="isRegistering"
@@ -710,16 +714,16 @@
<div style="margin-bottom: 5px" @click="loginFlag(1)">
<span class="join">{{ $t("login.signIn") }}</span>
</div>
<div>
<!-- <div>
<span
class="join"
@click="router.push({ path: 'createVideo', params: {} })"
>{{ $t("login.gohome") }}</span
>
</div>
</div> -->
</div>
</el-form>
<!-- 手机号登录 -->
<!-- 手机号登录 8-->
<el-form
v-if="isLogin == 8"
ref="loginFormRef"
@@ -729,7 +733,7 @@
>
<div class="flex text-white items-center">
<span class="flex-1 text-center">{{
$t("login.title") + " " + $t("login.register")
$t("login.title") + " " + $t("login.login")
}}</span>
<el-tooltip
class="box-item"
@@ -766,7 +770,11 @@
name="email"
/>
<span class="captcha">
<div v-if="SMSTimeOut == 0" @click="" class="sendSMSBtn">
<div
v-if="SMSTimeOut == 0"
@click="getSMSToLogin(8)"
class="sendSMSBtn"
>
{{ $t("login.sendSMS") }}
</div>
<div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
@@ -778,7 +786,7 @@
:loading="loading"
type="primary"
class="loginBtn"
@click.prevent="handleRegister"
@click.prevent="handleLoginByPhone"
>
<el-icon
v-if="isRegistering"
@@ -796,7 +804,7 @@
></path>
</svg>
</el-icon>
{{ $t("login.registerBtn") }}
{{ $t("login.loginBtn") }}
</el-button>

<div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
@@ -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


+ 33
- 1
src/views/myCreating/index.vue 查看文件

@@ -2,8 +2,9 @@
<div class="page">
<!-- 搜索框 -->
<div class="top">
<div class="flex justify-between" style="width: 300px">
<div class="search">
<el-input
style="width: 300px"
v-model="title"
:placeholder="$t('myCreating.search')"
@keyup.enter="searchVideoList"
@@ -11,6 +12,10 @@
<el-icon class="icon-edit" @click="searchVideoList"
><i-ep-search
/></el-icon>
<!-- 重置按钮 -->
<div v-show="title" class="resetSearch" @click="resetSearch">
{{ $t("myCreating.reset") }}
</div>
</div>
<!-- 更新视频提示 -->
<div class="hasNewVideoTips" :class="hasNewCreate ? '' : 'hasNew'">
@@ -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;


Loading…
取消
儲存