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