@@ -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; | |||
@@ -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 { | |||
@@ -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> |
@@ -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 | |||
// }, | |||
// }, | |||
// }), | |||
// ], | |||
// } | |||
} |