@@ -7,7 +7,7 @@ | |||||
</div> | </div> | ||||
<!-- 短信验证码登录 --> | <!-- 短信验证码登录 --> | ||||
<div class="loginBox" v-if="isCodeLogin"> | |||||
<div class="loginBox" v-if="loginType == 1"> | |||||
<div class="welcome">登录邃芒</div> | <div class="welcome">登录邃芒</div> | ||||
<el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
<el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
@@ -33,7 +33,7 @@ | |||||
</div> | </div> | ||||
<!-- 用户名密码登录 --> | <!-- 用户名密码登录 --> | ||||
<div class="loginBox" v-else> | |||||
<div class="loginBox" v-if="loginType == 2"> | |||||
<div class="welcome">登录邃芒</div> | <div class="welcome">登录邃芒</div> | ||||
<el-form ref="form" :rules="rulesII" :model="formII"> | <el-form ref="form" :rules="rulesII" :model="formII"> | ||||
<el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
@@ -72,6 +72,27 @@ | |||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
</div> | </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> | </div> | ||||
</template> | </template> | ||||
@@ -87,7 +108,7 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
codeInfo: "获取验证码", | codeInfo: "获取验证码", | ||||
isCodeLogin: true, | |||||
loginType: 1, | |||||
// 短信验证码登录 | // 短信验证码登录 | ||||
form: { | form: { | ||||
phone: "", | phone: "", | ||||
@@ -97,7 +118,7 @@ export default { | |||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: "change", | |||||
trigger: "blur", | |||||
message: "请先输手机号", | message: "请先输手机号", | ||||
}, | }, | ||||
{ | { | ||||
@@ -123,7 +144,7 @@ export default { | |||||
phone: [ | phone: [ | ||||
{ | { | ||||
required: true, | required: true, | ||||
trigger: "change", | |||||
trigger: "blur", | |||||
message: "请先输手机号", | message: "请先输手机号", | ||||
}, | }, | ||||
{ | { | ||||
@@ -139,6 +160,10 @@ export default { | |||||
}, | }, | ||||
], | ], | ||||
}, | }, | ||||
// 邀请码 | |||||
formIII: { | |||||
inviteCode: "", | |||||
}, | |||||
}; | }; | ||||
}, | }, | ||||
@@ -219,13 +244,14 @@ export default { | |||||
const token = res.data.data.token; | const token = res.data.data.token; | ||||
localStorage.setItem("AccessToken", token); | localStorage.setItem("AccessToken", token); | ||||
this.doFindInviteCode(); | this.doFindInviteCode(); | ||||
this.$router.push("/myPage"); | |||||
} | } | ||||
}) | }) | ||||
.catch((err) => { | .catch((err) => { | ||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
}); | }); | ||||
}, | }, | ||||
// 查询用户邀请码状态 | |||||
doFindInviteCode() { | doFindInviteCode() { | ||||
const AccessToken = localStorage.getItem("AccessToken"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
this.$axios({ | this.$axios({ | ||||
@@ -238,6 +264,42 @@ export default { | |||||
}) | }) | ||||
.then((res) => { | .then((res) => { | ||||
console.log(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) => { | .catch((err) => { | ||||
Toast.fail(err.message); | Toast.fail(err.message); | ||||
@@ -335,6 +397,25 @@ export default { | |||||
top: 10px; | 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 { | .forgetPwd { | ||||
position: relative; | position: relative; | ||||
top: -10px; | top: -10px; | ||||
@@ -14,10 +14,10 @@ | |||||
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | ||||
全部模板 | 全部模板 | ||||
</div> | </div> | ||||
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||||
女性模板 | 女性模板 | ||||
</div> | </div> | ||||
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||||
<div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||||
男性模板 | 男性模板 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -374,7 +374,7 @@ export default { | |||||
border: 1px solid #00000028; | border: 1px solid #00000028; | ||||
padding: 8px; | padding: 8px; | ||||
border-radius: 8px; | border-radius: 8px; | ||||
transition: all 0.5s; | |||||
transition: all 0.3s; | |||||
opacity: 0.9; | opacity: 0.9; | ||||
img { | img { | ||||
width: 150px; | width: 150px; | ||||
@@ -399,7 +399,7 @@ export default { | |||||
opacity: 0; | opacity: 0; | ||||
} | } | ||||
&.active { | &.active { | ||||
transform: translateY(-5px); | |||||
transform: translateY(-3px); | |||||
box-shadow: #60606082 0px 2px 2px 1px; | box-shadow: #60606082 0px 2px 2px 1px; | ||||
opacity: 1; | opacity: 1; | ||||
.setPaper { | .setPaper { | ||||
@@ -45,16 +45,35 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
<div class="next" @click="submit">合成视频</div> | |||||
<div class="next" @click="doFindInviteCode">合成视频</div> | |||||
</div> | </div> | ||||
<div :class="isShowCover ? 'coverUp active' : 'coverUp'"> | <div :class="isShowCover ? 'coverUp active' : 'coverUp'"> | ||||
<div class="inside" @click="goMy"> | <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> | </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> | </div> | ||||
</template> | </template> | ||||
@@ -74,6 +93,7 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
isShowCover: false, | isShowCover: false, | ||||
isShowMessageCover: false, | |||||
show: false, | show: false, | ||||
soundIndex: "", | soundIndex: "", | ||||
backGroundIndex: "", | backGroundIndex: "", | ||||
@@ -290,7 +310,40 @@ export default { | |||||
Toast.fail(err.message); | 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() { | created() { | ||||
this.coverImg = this.$route.query.coverImg; | this.coverImg = this.$route.query.coverImg; | ||||
this.id = this.$route.query.id; | this.id = this.$route.query.id; | ||||
@@ -483,6 +536,7 @@ export default { | |||||
position: absolute; | position: absolute; | ||||
top: 50%; | top: 50%; | ||||
left: 50%; | left: 50%; | ||||
width: 80%; | |||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
img { | img { | ||||
@@ -490,9 +544,14 @@ export default { | |||||
height: 80px; | height: 80px; | ||||
animation: rotation 2s linear infinite; | animation: rotation 2s linear infinite; | ||||
} | } | ||||
.text { | |||||
.generating { | |||||
font-size: 18px; | font-size: 18px; | ||||
color: #fff; | color: #fff; | ||||
margin-bottom: 53px; | |||||
} | |||||
.alert { | |||||
font-size: 11.5px; | |||||
color: #fff; | |||||
} | } | ||||
} | } | ||||
&.active { | &.active { | ||||
@@ -503,4 +562,64 @@ export default { | |||||
opacity: 1; | 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> | </style> |
@@ -47,19 +47,19 @@ module.exports = { | |||||
lintOnSave: false, | lintOnSave: false, | ||||
publicPath: './', // 打包后引用的资源路径 | 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 | |||||
// }, | |||||
// }, | |||||
// }), | |||||
// ], | |||||
// } | |||||
} | } |