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