diff --git a/src/assets/img/BG-Page.png b/src/assets/img/BG-Page.png new file mode 100644 index 0000000..175f544 Binary files /dev/null and b/src/assets/img/BG-Page.png differ diff --git a/src/views/login/login.vue b/src/views/login/login.vue index dd06e34..17d09be 100644 --- a/src/views/login/login.vue +++ b/src/views/login/login.vue @@ -4,12 +4,14 @@ -
+ + +
登录邃芒
-
请输入手机号
+
请输入您的手机号
{{ codeInfo }} @@ -24,7 +26,46 @@
请输入短信验证码
- + + +
+
+ + +
+
登录邃芒
+ + + +
请输入您的手机号
+ +
+ + +
请输入密码
+
+ + + +
请输入验证码
+
+ + 忘记密码? + + +
@@ -41,6 +82,8 @@ export default { data() { return { codeInfo: "获取验证码", + isCodeLogin: true, + // 短信验证码登录 form: { phone: "", code: "", @@ -65,6 +108,32 @@ export default { }, ], }, + // 账号密码登录 + formII: { + phone: "", + pwd: "", + code: "", + }, + rulesII: { + phone: [ + { + required: true, + trigger: "change", + message: "请先输手机号", + }, + { + validator(rule, value, callback, source, options) { + var errors = []; + // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, + let phone = /^1[35789]\d{9}$/; + if (value && !phone.test(value)) { + callback("抱歉,请输入正确的手机号"); + } + callback(errors); + }, + }, + ], + }, }; }, @@ -201,6 +270,7 @@ export default { } .getCode { position: absolute; + top: 1px; right: 10px; color: #0068b7; } @@ -230,10 +300,21 @@ export default { padding: 9px; background-color: #0068b7; border-radius: 5px; + &.inside { + top: 10px; + } + } + .forgetPwd { + position: relative; + top: -10px; + float: left; + font-size: 12px; + color: #0068b7; } } } /deep/ .el-input__inner { + height: 42px; border: 1px solid #0068b7; } diff --git a/src/views/model/chooseModel.vue b/src/views/model/chooseModel.vue index c4d0c04..602aeaa 100644 --- a/src/views/model/chooseModel.vue +++ b/src/views/model/chooseModel.vue @@ -1,13 +1,14 @@ @@ -52,9 +57,95 @@ export default { }, data() { return { - phase: 1, type: 0, - modeList: [], + currentId: "", + // modeList: [ + // { + // id: 1, + // salePriceStr: "0", + // priceStr: "0", + // type: 1, + // coverImg: + // "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", + // coverPicture: + // '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', + // title: "测试1", + // sex: 2, + // age: 10, + // colour: 1, + // salePrice: 0, + // price: 0, + // sendType: 1, + // mouldSmId: "16739389169485046_nVi875Ej", + // status: 1, + // createDate: 1673976448000, + // updateDate: 1673976448000, + // }, + // { + // id: 2, + // salePriceStr: "0", + // priceStr: "0", + // type: 1, + // coverImg: + // "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", + // coverPicture: + // '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', + // title: "测试1", + // sex: 2, + // age: 10, + // colour: 1, + // salePrice: 0, + // price: 0, + // sendType: 1, + // mouldSmId: "16739389169485046_nVi875Ej", + // status: 1, + // createDate: 1673976448000, + // updateDate: 1673976448000, + // }, + // { + // id: 3, + // salePriceStr: "0", + // priceStr: "0", + // type: 1, + // coverImg: + // "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", + // coverPicture: + // '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', + // title: "测试1", + // sex: 2, + // age: 10, + // colour: 1, + // salePrice: 0, + // price: 0, + // sendType: 1, + // mouldSmId: "16739389169485046_nVi875Ej", + // status: 1, + // createDate: 1673976448000, + // updateDate: 1673976448000, + // }, + // { + // id: 4, + // salePriceStr: "0", + // priceStr: "0", + // type: 1, + // coverImg: + // "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg", + // coverPicture: + // '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]', + // title: "测试1", + // sex: 2, + // age: 10, + // colour: 1, + // salePrice: 0, + // price: 0, + // sendType: 1, + // mouldSmId: "16739389169485046_nVi875Ej", + // status: 1, + // createDate: 1673976448000, + // updateDate: 1673976448000, + // }, + // ], + modeList: [], // 模板列表 }; }, computed: { @@ -73,10 +164,13 @@ export default { chooseModel(num) { this.phase = num; }, + chooseType(num) { this.type = num; this.getModeList(num); }, + + // 获取模板列表 getModeList(sex) { const AccessToken = localStorage.getItem("AccessToken"); if (sex == 0) { @@ -102,13 +196,84 @@ export default { Toast.fail(err.message); }); }, - goDetail(id) { - this.$router.push({ - path: "/modelDetail", - query: { - id: id, + + /** + * @description:根据id获取模板详情 + * @param {type} id + * @return:data + */ + getModeDetail(id) { + const AccessToken = localStorage.getItem("AccessToken"); + this.$axios({ + method: "get", + url: `${baseUrl}/api/mouldPatch/findById?id=${id}`, + headers: { + "Content-Type": "application/json;charset=UTF-8", + token: AccessToken, + }, + }) + .then((res) => { + if (res.data.code == 1052) { + this.$router.push("/login"); + Toast.fail("登录过期,请重新登录!"); + return; + } + const modelDetail = res.data.data; + this.goSetPaperWork(modelDetail); + }) + .catch((err) => { + Toast.fail(err.message); + }); + }, + + /** + * @description:根据模板详情跳转至选择文案 + * @param {type}modelDetail + * @event:Go page => setPaperWork + */ + goSetPaperWork(modelDetail) { + const AccessToken = localStorage.getItem("AccessToken"); + const data = { + // id: "", + type: 1, + personMouldId: modelDetail.id, //模板id + personMouldSmId: modelDetail.mouldSmId, //模板标识 + // voiceMouldId: "", + // voiceMouldId: "", + }; + this.$axios({ + method: "post", + url: `${baseUrl}/api/userVideo/saveOrUpdate`, + headers: { + "Content-Type": "application/json;charset=UTF-8", + token: AccessToken, }, - }); + data, + }) + .then((res) => { + if (res.data.code == 1052) { + this.$router.push("/login"); + Toast.fail("登录过期,请重新登录!"); + return; + } + this.$router.push({ + path: "/getPaper", + query: { + modelDetail: modelDetail, + }, + }); + }) + .catch((err) => { + Toast.fail(err.message); + }); + }, + + selectModel(id) { + if (this.currentId != id) { + this.currentId = id; + } else { + this.getModeDetail(id); + } }, }, created() { @@ -139,51 +304,111 @@ export default { } } } -.choose { - margin-bottom: 40px; +.title { + text-align: center; + width: 70px; + font-size: 16px; + font-weight: 600; + border-bottom: 3px solid #0068b7; + padding-bottom: 7px; + margin: 10px auto; + margin-bottom: 25px; +} +.typeOutSide { + position: fixed; + left: 0; + right: 0; + bottom: 10px; + z-index: 99; + .type { display: flex; justify-content: space-between; align-items: center; - padding: 0 30px; + padding: 0 25px; margin-bottom: 20px; div { - width: 65px; - height: 25px; - line-height: 25px; - border: 1px solid #797979; + width: 94px; + height: 35px; + line-height: 35px; + color: #fff; + border: 1px solid #bfbfbf; + background-color: #bfbfbf; border-radius: 5px; text-align: center; + transition: all 0.3s; + &.active { color: #fff; - border: 1px solid #9d00ff5d; - background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); + border: 1px solid #0068b7; + background-color: #0068b7; } } } +} + +.choose { + margin-bottom: 40px; + .modeList { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: auto; - padding: 0 25px; + padding: 0 10px; + .model { - text-align: center; + position: relative; + text-align: left; margin-bottom: 25px; + border: 1px solid #00000028; + padding: 8px; + border-radius: 8px; + transition: all 0.3s; + opacity: 0.9; img { width: 150px; height: 220px; } .modelName { - font-size: 15px; - margin-top: 10px; + margin-top: 4px; + font-size: 13px; + } + .setPaper { + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + font-size: 14px; + font-weight: 600; + background-color: #00000042; + padding: 3px 5px; + border-radius: 5px; + transition: all 0.3s; + opacity: 0; + } + &.active { + transform: translateY(-5px); + box-shadow: #60606082 0px 2px 2px 1px; + opacity: 1; + .setPaper { + opacity: 1; + } } } .alt { font-size: 18px; margin: 80px auto; + height: 450px; + line-height: 450px; } } } +.blank { + width: 1px; + height: 1px; + margin-bottom: 240px; +} diff --git a/src/views/model/downloadVideo.vue b/src/views/model/downloadVideo.vue index 7e93378..9bb416d 100644 --- a/src/views/model/downloadVideo.vue +++ b/src/views/model/downloadVideo.vue @@ -72,12 +72,16 @@ export default { position: relative; padding: 30px; text-align: center; + .title { font-size: 18px; margin-bottom: 20px; } video { - width: 80%; + width: 240px; + height: 427px; + border: 0.5px solid #000; + border-radius: 8px; } img { position: absolute; @@ -86,32 +90,39 @@ export default { transform: translate(-50%, -50%); } .desc { - font-size: 16px; + position: relative; + right: 45px; + bottom: 8px; + font-size: 12px; margin-top: 20px; span { - color: #00ccff; - text-decoration: underline; + color: #0006ff; } } } .bottomBtn { display: flex; justify-content: space-between; - padding: 0 75px; + padding: 0 32.5px; margin-top: 20px; margin-bottom: 20px; div { - width: 100px; - height: 30px; + width: 142px; + height: 42px; color: #484848; - line-height: 30px; + line-height: 42px; text-align: center; border: 1px solid #484848; border-radius: 7px; + &.back { + color: #fff; + border: 1px solid #d2d2d2; + background-color: #d2d2d2; + } &.next { color: #fff; - border: 1px solid #00ccff; - background-color: #00ccff; + border: 1px solid #0068b7; + background-color: #0068b7; } } } diff --git a/src/views/model/getPaper.vue b/src/views/model/getPaper.vue index d7fea58..52f14fc 100644 --- a/src/views/model/getPaper.vue +++ b/src/views/model/getPaper.vue @@ -1,30 +1,22 @@