Browse Source

验证码功能

release
HolyKnightIX 2 years ago
parent
commit
04e3add982
4 changed files with 228 additions and 28 deletions
  1. +87
    -6
      src/views/login/login.vue
  2. +4
    -4
      src/views/model/chooseModel.vue
  3. +123
    -4
      src/views/model/generateVideo.vue
  4. +14
    -14
      vue.config.js

+ 87
- 6
src/views/login/login.vue View File

@@ -7,7 +7,7 @@
</div>

<!-- 短信验证码登录 -->
<div class="loginBox" v-if="isCodeLogin">
<div class="loginBox" v-if="loginType == 1">
<div class="welcome">登录邃芒</div>
<el-form ref="form" :rules="rules" :model="form">
<el-form-item class="phone" prop="phone">
@@ -33,7 +33,7 @@
</div>

<!-- 用户名密码登录 -->
<div class="loginBox" v-else>
<div class="loginBox" v-if="loginType == 2">
<div class="welcome">登录邃芒</div>
<el-form ref="form" :rules="rulesII" :model="formII">
<el-form-item class="phone" prop="phone">
@@ -72,6 +72,27 @@
</el-form-item>
</el-form>
</div>

<!-- 用户名密码登录 -->
<div class="loginBox" v-if="loginType == 3">
<div class="welcome">登录邃芒</div>
<el-form ref="form" :model="formIII">
<el-form-item class="code" prop="code">
<el-input
class="codeInput"
v-model="formIII.inviteCode"
maxlength="10"
clearable
></el-input>
<div class="inputCode">请输入您的邀请码</div>
</el-form-item>

<el-form-item>
<el-button class="skipBtn skip" @click="skip">跳过</el-button>
<el-button class="skipBtn submit" @click="goMyPage">确定</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>

@@ -87,7 +108,7 @@ export default {
data() {
return {
codeInfo: "获取验证码",
isCodeLogin: true,
loginType: 1,
// 短信验证码登录
form: {
phone: "",
@@ -97,7 +118,7 @@ export default {
phone: [
{
required: true,
trigger: "change",
trigger: "blur",
message: "请先输手机号",
},
{
@@ -123,7 +144,7 @@ export default {
phone: [
{
required: true,
trigger: "change",
trigger: "blur",
message: "请先输手机号",
},
{
@@ -139,6 +160,10 @@ export default {
},
],
},
// 邀请码
formIII: {
inviteCode: "",
},
};
},

@@ -219,13 +244,14 @@ export default {
const token = res.data.data.token;
localStorage.setItem("AccessToken", token);
this.doFindInviteCode();
this.$router.push("/myPage");
}
})
.catch((err) => {
Toast.fail(err.message);
});
},

// 查询用户邀请码状态
doFindInviteCode() {
const AccessToken = localStorage.getItem("AccessToken");
this.$axios({
@@ -238,6 +264,42 @@ export default {
})
.then((res) => {
console.log(res);
const status = res.data.data.status;
// 当没有邀请码时
if (status == 0) {
this.loginType = 3;
// 有邀请码直接前往我的页面
} else if (status == 1) {
this.$router.push("/myPage");
}
})
.catch((err) => {
Toast.fail(err.message);
});
},
// 跳过填写邀请码
skip() {
this.$router.push("/myPage");
},

// 携带邀请码跳转至我的页面
goMyPage() {
const AccessToken = localStorage.getItem("AccessToken");
const data = {
inviteCode: this.formIII.inviteCode,
};
this.$axios({
method: "post",
url: `${baseUrl}/api/inviteCode/update`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
data,
})
.then((res) => {
console.log(res);
this.$router.push("/myPage");
})
.catch((err) => {
Toast.fail(err.message);
@@ -335,6 +397,25 @@ export default {
top: 10px;
}
}
.skipBtn {
position: relative;
top: 10px;
left: 70px;
right: 10px;
width: 78px;
height: 30px;
color: #fff;
font-size: 15px;
line-height: 15px;
border: none;
padding: 9px;
background-color: #0068b7;
border-radius: 3px;
margin-top: 160px;
&.skip {
background-color: #a0a0a0;
}
}
.forgetPwd {
position: relative;
top: -10px;


+ 4
- 4
src/views/model/chooseModel.vue View File

@@ -14,10 +14,10 @@
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)">
全部模板
</div>
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)">
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)">
女性模板
</div>
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)">
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)">
男性模板
</div>
</div>
@@ -374,7 +374,7 @@ export default {
border: 1px solid #00000028;
padding: 8px;
border-radius: 8px;
transition: all 0.5s;
transition: all 0.3s;
opacity: 0.9;
img {
width: 150px;
@@ -399,7 +399,7 @@ export default {
opacity: 0;
}
&.active {
transform: translateY(-5px);
transform: translateY(-3px);
box-shadow: #60606082 0px 2px 2px 1px;
opacity: 1;
.setPaper {


+ 123
- 4
src/views/model/generateVideo.vue View File

@@ -45,16 +45,35 @@
</div>
</div>
</div>

<div class="bottomBtn">
<div class="back" @click="back">上一步</div>
<div class="next" @click="submit">合成视频</div>
<div class="next" @click="doFindInviteCode">合成视频</div>
</div>

<div :class="isShowCover ? 'coverUp active' : 'coverUp'">
<div class="inside" @click="goMy">
<img src="../../assets/img/loading.png" alt="" />
<div class="text">视频合成中,请稍等</div>
<!-- <img src="../../assets/img/loading.png" alt="" /> -->
<div class="generating">视频生成中……</div>
<div class="alert">
请耐心等待或稍后再来,视频会保存到您的视频作品中
</div>
</div>
</div>

<div
class="messageCover"
:class="isShowMessageCover ? 'active' : ''"
@click="exitCover"
>
<div class="message" id="message">
<div class="connect" id="message">请添加微信与我们联系</div>
<div class="qrCode" id="message"></div>
<div class="phoneNum" id="message">或致电137******91</div>
<!-- <div class="close">x</div> -->
</div>
<div class="clickToClose">点击空白处关闭</div>
</div>
</div>
</template>

@@ -74,6 +93,7 @@ export default {
data() {
return {
isShowCover: false,
isShowMessageCover: false,
show: false,
soundIndex: "",
backGroundIndex: "",
@@ -290,7 +310,40 @@ export default {
Toast.fail(err.message);
});
},

// 查询用户邀请码状态
doFindInviteCode() {
const AccessToken = localStorage.getItem("AccessToken");
this.$axios({
method: "get",
url: `${baseUrl}/api/inviteCode/find`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
})
.then((res) => {
console.log(res);
const status = res.data.data.status;
// 当没有邀请码时
if (status == 1) {
this.submit();
} else if (status == 0) {
this.isShowMessageCover = true;
return;
}
})
.catch((err) => {
Toast.fail(err.message);
});
},
exitCover(e) {
if (e.srcElement.id != "message") {
this.isShowMessageCover = false;
}
},
},

created() {
this.coverImg = this.$route.query.coverImg;
this.id = this.$route.query.id;
@@ -483,6 +536,7 @@ export default {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);

img {
@@ -490,9 +544,14 @@ export default {
height: 80px;
animation: rotation 2s linear infinite;
}
.text {
.generating {
font-size: 18px;
color: #fff;
margin-bottom: 53px;
}
.alert {
font-size: 11.5px;
color: #fff;
}
}
&.active {
@@ -503,4 +562,64 @@ export default {
opacity: 1;
}
}
.messageCover {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #00000091;
transition: all 0.3s;
opacity: 0;
z-index: -1;
.message {
position: fixed;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
width: 272px;
height: 290px;
border-radius: 5px;
background-color: #fff;
text-align: center;
transition: all 0.3s;

.connect {
font-size: 12px;
margin: 19px 0 10px 0;
}
.qrCode {
width: 203px;
height: 213px;
background-color: #ffffff;
border-radius: 5px;
border: solid 1px #595959;
margin: auto;
}
.phoneNum {
float: left;
font-size: 11px;
margin-top: 3px;
margin-left: 34px;
}
.close {
position: absolute;
top: 8px;
right: 15px;
font-size: 18px;
color: #000;
}
}
.clickToClose {
position: absolute;
font-size: 14px;
color: #fff;
left: 50%;
transform: translateX(-50%);
bottom: 16%;
}
&.active {
z-index: 999;
opacity: 1;
}
}
</style>

+ 14
- 14
vue.config.js View File

@@ -47,19 +47,19 @@ module.exports = {
lintOnSave: false,
publicPath: './', // 打包后引用的资源路径

configureWebpack: {
plugins: [
//打包环境去掉console.log
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, //注释console
drop_debugger: true, //注释debugger
pure_funcs: ['console.log'], //移除console.log
},
},
}),
],
}
// configureWebpack: {
// plugins: [
// //打包环境去掉console.log
// new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// drop_console: true, //注释console
// drop_debugger: true, //注释debugger
// pure_funcs: ['console.log'], //移除console.log
// },
// },
// }),
// ],
// }

}

Loading…
Cancel
Save