| @@ -4,12 +4,14 @@ | |||||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | <img src="../../assets/img/logoh.png" alt class="logo" /> | ||||
| <!-- <div class="logoTitle">metavatar</div> --> | <!-- <div class="logoTitle">metavatar</div> --> | ||||
| </div> | </div> | ||||
| <div class="loginBox"> | |||||
| <!-- 短信验证码登录 --> | |||||
| <div class="loginBox" v-if="isCodeLogin"> | |||||
| <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"> | ||||
| <el-input class="phoneInput" v-model="form.phone"></el-input> | <el-input class="phoneInput" v-model="form.phone"></el-input> | ||||
| <div class="inputPhone">请输入手机号</div> | |||||
| <div class="inputPhone">请输入您的手机号</div> | |||||
| <el-button class="getCode" type="text" @click="getCode">{{ | <el-button class="getCode" type="text" @click="getCode">{{ | ||||
| codeInfo | codeInfo | ||||
| }}</el-button> | }}</el-button> | ||||
| @@ -24,7 +26,46 @@ | |||||
| <div class="inputCode">请输入短信验证码</div> | <div class="inputCode">请输入短信验证码</div> | ||||
| </el-form-item> | </el-form-item> | ||||
| <el-form-item> | <el-form-item> | ||||
| <button class="submitBtn" @click.native="login">登录/注册</button> | |||||
| <button class="submitBtn" @click="login">登录/注册</button> | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 用户名密码登录 --> | |||||
| <div class="loginBox" v-else> | |||||
| <div class="welcome">登录邃芒</div> | |||||
| <el-form ref="form" :rules="rulesII" :model="formII"> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input class="phoneInput" v-model="formII.phone"></el-input> | |||||
| <div class="inputPhone">请输入您的手机号</div> | |||||
| <!-- <el-button class="getCode" type="text" @click="getCode">{{ | |||||
| codeInfo | |||||
| }}</el-button> --> | |||||
| </el-form-item> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="form.pwd" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入密码</div> | |||||
| </el-form-item> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="form.code" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入验证码</div> | |||||
| </el-form-item> | |||||
| <span class="forgetPwd">忘记密码?</span> | |||||
| <el-form-item> | |||||
| <button class="submitBtn inside" @click="login">登录/注册</button> | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| @@ -41,6 +82,8 @@ export default { | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| codeInfo: "获取验证码", | codeInfo: "获取验证码", | ||||
| isCodeLogin: true, | |||||
| // 短信验证码登录 | |||||
| form: { | form: { | ||||
| phone: "", | phone: "", | ||||
| code: "", | 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 { | .getCode { | ||||
| position: absolute; | position: absolute; | ||||
| top: 1px; | |||||
| right: 10px; | right: 10px; | ||||
| color: #0068b7; | color: #0068b7; | ||||
| } | } | ||||
| @@ -230,10 +300,21 @@ export default { | |||||
| padding: 9px; | padding: 9px; | ||||
| background-color: #0068b7; | background-color: #0068b7; | ||||
| border-radius: 5px; | border-radius: 5px; | ||||
| &.inside { | |||||
| top: 10px; | |||||
| } | |||||
| } | |||||
| .forgetPwd { | |||||
| position: relative; | |||||
| top: -10px; | |||||
| float: left; | |||||
| font-size: 12px; | |||||
| color: #0068b7; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| /deep/ .el-input__inner { | /deep/ .el-input__inner { | ||||
| height: 42px; | |||||
| border: 1px solid #0068b7; | border: 1px solid #0068b7; | ||||
| } | } | ||||
| </style> | </style> | ||||
| @@ -1,13 +1,14 @@ | |||||
| <template> | <template> | ||||
| <div> | <div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="chooseModel"> | |||||
| <!-- <div class="chooseModel"> | |||||
| <div :class="phase == 1 ? 'active' : ''">选择模板</div> | <div :class="phase == 1 ? 'active' : ''">选择模板</div> | ||||
| <div :class="phase == 2 ? 'active' : ''">录入文案</div> | <div :class="phase == 2 ? 'active' : ''">录入文案</div> | ||||
| <div :class="phase == 3 ? 'active' : ''">合成视频</div> | <div :class="phase == 3 ? 'active' : ''">合成视频</div> | ||||
| </div> | |||||
| </div> --> | |||||
| <div v-show="phase == 1" class="choose"> | |||||
| <div class="title">选择模板</div> | |||||
| <div class="typeOutSide"> | |||||
| <div class="type"> | <div class="type"> | ||||
| <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | ||||
| 全部模板 | 全部模板 | ||||
| @@ -18,23 +19,27 @@ | |||||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | ||||
| 男性模板 | 男性模板 | ||||
| </div> | </div> | ||||
| <div style="background-color: #46464661">自建模板</div> | |||||
| </div> | </div> | ||||
| </div> | |||||
| <div class="choose"> | |||||
| <div class="modeList"> | <div class="modeList"> | ||||
| <div | <div | ||||
| class="model" | class="model" | ||||
| :class="currentId == item.id ? 'active' : ''" | |||||
| v-if="modeList.length >= 1" | v-if="modeList.length >= 1" | ||||
| v-for="(item, index) in modeList" | v-for="(item, index) in modeList" | ||||
| :key="index" | :key="index" | ||||
| @click="goDetail(item.id)" | |||||
| @click="selectModel(item.id)" | |||||
| > | > | ||||
| <img :src="item.coverImg" alt="" /> | <img :src="item.coverImg" alt="" /> | ||||
| <div class="modelName">{{ item.title }}</div> | <div class="modelName">{{ item.title }}</div> | ||||
| <div class="setPaper">录入文案</div> | |||||
| </div> | </div> | ||||
| <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="blank" v-if="modeList.length <= 2"></div> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -52,9 +57,95 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| phase: 1, | |||||
| type: 0, | 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: { | computed: { | ||||
| @@ -73,10 +164,13 @@ export default { | |||||
| chooseModel(num) { | chooseModel(num) { | ||||
| this.phase = num; | this.phase = num; | ||||
| }, | }, | ||||
| chooseType(num) { | chooseType(num) { | ||||
| this.type = num; | this.type = num; | ||||
| this.getModeList(num); | this.getModeList(num); | ||||
| }, | }, | ||||
| // 获取模板列表 | |||||
| getModeList(sex) { | getModeList(sex) { | ||||
| const AccessToken = localStorage.getItem("AccessToken"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
| if (sex == 0) { | if (sex == 0) { | ||||
| @@ -102,13 +196,84 @@ export default { | |||||
| Toast.fail(err.message); | 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() { | 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 { | .type { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| align-items: center; | align-items: center; | ||||
| padding: 0 30px; | |||||
| padding: 0 25px; | |||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| div { | 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; | border-radius: 5px; | ||||
| text-align: center; | text-align: center; | ||||
| transition: all 0.3s; | |||||
| &.active { | &.active { | ||||
| color: #fff; | 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 { | .modeList { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| align-items: center; | align-items: center; | ||||
| flex-wrap: wrap; | flex-wrap: wrap; | ||||
| margin: auto; | margin: auto; | ||||
| padding: 0 25px; | |||||
| padding: 0 10px; | |||||
| .model { | .model { | ||||
| text-align: center; | |||||
| position: relative; | |||||
| text-align: left; | |||||
| margin-bottom: 25px; | margin-bottom: 25px; | ||||
| border: 1px solid #00000028; | |||||
| padding: 8px; | |||||
| border-radius: 8px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0.9; | |||||
| img { | img { | ||||
| width: 150px; | width: 150px; | ||||
| height: 220px; | height: 220px; | ||||
| } | } | ||||
| .modelName { | .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 { | .alt { | ||||
| font-size: 18px; | font-size: 18px; | ||||
| margin: 80px auto; | margin: 80px auto; | ||||
| height: 450px; | |||||
| line-height: 450px; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .blank { | |||||
| width: 1px; | |||||
| height: 1px; | |||||
| margin-bottom: 240px; | |||||
| } | |||||
| </style> | </style> | ||||
| @@ -72,12 +72,16 @@ export default { | |||||
| position: relative; | position: relative; | ||||
| padding: 30px; | padding: 30px; | ||||
| text-align: center; | text-align: center; | ||||
| .title { | .title { | ||||
| font-size: 18px; | font-size: 18px; | ||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| } | } | ||||
| video { | video { | ||||
| width: 80%; | |||||
| width: 240px; | |||||
| height: 427px; | |||||
| border: 0.5px solid #000; | |||||
| border-radius: 8px; | |||||
| } | } | ||||
| img { | img { | ||||
| position: absolute; | position: absolute; | ||||
| @@ -86,32 +90,39 @@ export default { | |||||
| transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
| } | } | ||||
| .desc { | .desc { | ||||
| font-size: 16px; | |||||
| position: relative; | |||||
| right: 45px; | |||||
| bottom: 8px; | |||||
| font-size: 12px; | |||||
| margin-top: 20px; | margin-top: 20px; | ||||
| span { | span { | ||||
| color: #00ccff; | |||||
| text-decoration: underline; | |||||
| color: #0006ff; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .bottomBtn { | .bottomBtn { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| padding: 0 75px; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 20px; | margin-top: 20px; | ||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| div { | div { | ||||
| width: 100px; | |||||
| height: 30px; | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #484848; | color: #484848; | ||||
| line-height: 30px; | |||||
| line-height: 42px; | |||||
| text-align: center; | text-align: center; | ||||
| border: 1px solid #484848; | border: 1px solid #484848; | ||||
| border-radius: 7px; | border-radius: 7px; | ||||
| &.back { | |||||
| color: #fff; | |||||
| border: 1px solid #d2d2d2; | |||||
| background-color: #d2d2d2; | |||||
| } | |||||
| &.next { | &.next { | ||||
| color: #fff; | color: #fff; | ||||
| border: 1px solid #00ccff; | |||||
| background-color: #00ccff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -1,30 +1,22 @@ | |||||
| <template> | <template> | ||||
| <div> | <div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="chooseModel"> | |||||
| <div class="active">选择模板</div> | |||||
| <div class="active">录入文案</div> | |||||
| <div>合成视频</div> | |||||
| </div> | |||||
| <div class="img"> | |||||
| <img :src="modelDetail.coverImg" /> | |||||
| <div class="title">{{ modelDetail.title }}</div> | |||||
| </div> | |||||
| <div class="inpuType"> | |||||
| <div class="text">文字输入</div> | |||||
| <div class="voice">语音输入</div> | |||||
| </div> | |||||
| <div class="textarea"> | |||||
| <input v-model="title" type="text" placeholder="请输入标题" /> | |||||
| <textarea | |||||
| v-model="paperwork" | |||||
| cols="55" | |||||
| rows="15" | |||||
| placeholder="写点什么" | |||||
| ></textarea> | |||||
| <div class="limit">15000字 约100分钟</div> | |||||
| <div class="try">试听</div> | |||||
| <div class="title">录入文案</div> | |||||
| <div class="content"> | |||||
| <div class="img"> | |||||
| <img :src="modelDetail.coverImg" /> | |||||
| </div> | |||||
| <div class="textarea"> | |||||
| <textarea | |||||
| v-model="paperwork" | |||||
| cols="55" | |||||
| rows="15" | |||||
| placeholder="写点什么" | |||||
| ></textarea> | |||||
| <div class="limit">已录入150字 约1分钟</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="goNext">下一步</div> | <div class="next" @click="goNext">下一步</div> | ||||
| @@ -112,7 +104,7 @@ export default { | |||||
| // id: "", | // id: "", | ||||
| type: 1, | type: 1, | ||||
| personMouldId: this.modelDetail.id, //模板id | personMouldId: this.modelDetail.id, //模板id | ||||
| personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||||
| personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||||
| paperwork: this.paperwork, | paperwork: this.paperwork, | ||||
| title: this.modelDetail.title, | title: this.modelDetail.title, | ||||
| // voiceMouldId: "", | // voiceMouldId: "", | ||||
| @@ -144,6 +136,7 @@ export default { | |||||
| }); | }); | ||||
| }) | }) | ||||
| .catch((err) => { | .catch((err) => { | ||||
| console.log(err, "err"); | |||||
| Toast.fail(err.message); | Toast.fail(err.message); | ||||
| }); | }); | ||||
| }, | }, | ||||
| @@ -154,117 +147,88 @@ export default { | |||||
| this.getDetailById(this.id); | this.getDetailById(this.id); | ||||
| } else { | } else { | ||||
| this.modelDetail = this.$route.query.modelDetail; | this.modelDetail = this.$route.query.modelDetail; | ||||
| console.log(this.modelDetail); | |||||
| } | } | ||||
| }, | }, | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .chooseModel { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 350px; | |||||
| height: 32px; | |||||
| margin: auto; | |||||
| margin-top: 15px; | |||||
| margin-bottom: 15px; | |||||
| div { | |||||
| width: 33.33%; | |||||
| height: 90%; | |||||
| line-height: 32px; | |||||
| text-align: center; | |||||
| border: 1px solid #46464661; | |||||
| &.active { | |||||
| background-color: #00ccff; | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| } | |||||
| .img { | |||||
| margin: 25px auto; | |||||
| .title { | |||||
| text-align: center; | text-align: center; | ||||
| img { | |||||
| width: 300px; | |||||
| height: 180px; | |||||
| background-color: grey; | |||||
| } | |||||
| .title { | |||||
| font-size: 15px; | |||||
| margin-top: 15px; | |||||
| } | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | } | ||||
| .inpuType { | |||||
| .content { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| padding: 0 90px; | |||||
| margin-bottom: 25px; | |||||
| div { | |||||
| width: 80px; | |||||
| height: 28px; | |||||
| line-height: 28px; | |||||
| padding: 0 15px; | |||||
| .img { | |||||
| img { | |||||
| width: 76px; | |||||
| height: 135.5px; | |||||
| border: 1px solid #999999; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .title { | |||||
| font-size: 15px; | |||||
| margin-top: 15px; | |||||
| } | |||||
| } | |||||
| .textarea { | |||||
| position: relative; | |||||
| text-align: center; | text-align: center; | ||||
| border: 1px solid #000; | |||||
| border-radius: 5px; | |||||
| &.text { | |||||
| color: #fff; | |||||
| border: 1px solid #00ccff; | |||||
| background-color: #00ccff; | |||||
| border: none; | |||||
| margin-bottom: 60px; | |||||
| textarea { | |||||
| width: 250px; | |||||
| height: 367.5px; | |||||
| border: 1px solid #00000080; | |||||
| border-radius: 8px; | |||||
| } | } | ||||
| &.voice { | |||||
| .limit { | |||||
| position: absolute; | |||||
| left: 0px; | |||||
| bottom: -15px; | |||||
| } | |||||
| .try { | |||||
| position: absolute; | |||||
| left: 20px; | |||||
| bottom: -35px; | |||||
| width: 80px; | |||||
| height: 25px; | |||||
| line-height: 25px; | |||||
| text-align: center; | |||||
| color: #0000004b; | color: #0000004b; | ||||
| border: 1px solid #0000004b; | border: 1px solid #0000004b; | ||||
| border-radius: 5px; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .textarea { | |||||
| position: relative; | |||||
| text-align: center; | |||||
| margin-bottom: 60px; | |||||
| input { | |||||
| height: 20px; | |||||
| border: 1px solid #000; | |||||
| margin-bottom: 15px; | |||||
| } | |||||
| textarea { | |||||
| border: 1px solid #00000080; | |||||
| } | |||||
| .limit { | |||||
| position: absolute; | |||||
| left: 25px; | |||||
| bottom: 10px; | |||||
| } | |||||
| .try { | |||||
| position: absolute; | |||||
| left: 20px; | |||||
| bottom: -35px; | |||||
| width: 80px; | |||||
| height: 25px; | |||||
| line-height: 25px; | |||||
| text-align: center; | |||||
| color: #0000004b; | |||||
| border: 1px solid #0000004b; | |||||
| border-radius: 5px; | |||||
| } | |||||
| } | |||||
| .bottomBtn { | .bottomBtn { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| padding: 0 75px; | |||||
| margin-bottom: 20px; | |||||
| padding: 0 32.5px; | |||||
| margin-top: 50px; | |||||
| margin-bottom: 30px; | |||||
| div { | div { | ||||
| width: 100px; | |||||
| height: 30px; | |||||
| color: #484848; | |||||
| line-height: 30px; | |||||
| width: 142px; | |||||
| height: 42px; | |||||
| color: #fff; | |||||
| line-height: 42px; | |||||
| text-align: center; | text-align: center; | ||||
| border: 1px solid #484848; | |||||
| border: 1px solid #d2d2d2; | |||||
| border-radius: 7px; | border-radius: 7px; | ||||
| background-color: #d2d2d2; | |||||
| &.next { | &.next { | ||||
| color: #fff; | color: #fff; | ||||
| border: 1px solid #00ccff; | |||||
| background-color: #00ccff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -104,7 +104,7 @@ export default { | |||||
| // id: "", | // id: "", | ||||
| type: 1, | type: 1, | ||||
| personMouldId: this.modelDetail.id, //模板id | personMouldId: this.modelDetail.id, //模板id | ||||
| personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||||
| personMouldPath: this.modelDetail.mouldSmId, //模板标识 | |||||
| // voiceMouldId: "", | // voiceMouldId: "", | ||||
| // voiceMouldId: "", | // voiceMouldId: "", | ||||
| }; | }; | ||||
| @@ -1,7 +1,7 @@ | |||||
| <template> | <template> | ||||
| <div class="page"> | <div class="page"> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <img class="showIMG" src="../../assets/img/BG@2x.png" alt="" /> | |||||
| <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||||
| <div class="item"> | <div class="item"> | ||||
| <div class="title">我的视频作品</div> | <div class="title">我的视频作品</div> | ||||
| <div class="itemList"> | <div class="itemList"> | ||||
| @@ -18,21 +18,23 @@ | |||||
| 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath | 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath | ||||
| " | " | ||||
| /> | /> | ||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
| <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||||
| </div> | </div> | ||||
| <div class="videoInfo"> | <div class="videoInfo"> | ||||
| <div class="videoName"> | <div class="videoName"> | ||||
| {{ item.title || "暂无" }} | {{ item.title || "暂无" }} | ||||
| </div> | </div> | ||||
| <div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
| <div class="createTime">视频容量{{ "46.5Mb" }}</div> | |||||
| <div class="createTime"> | <div class="createTime"> | ||||
| 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div v-if="item.videoStatus == 0" class="tag text">草稿</div> | |||||
| <div v-if="item.videoStatus == 1" class="tag generating">生成中</div> | |||||
| <div v-if="item.videoStatus == 2" class="tag finish">已完成</div> | |||||
| <div v-if="item.videoStatus == 3" class="tag fail">失败</div> | |||||
| </div> | </div> | ||||
| <div v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||||
| <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <van-pagination | <van-pagination | ||||
| @@ -113,7 +115,7 @@ export default { | |||||
| const AccessToken = localStorage.getItem("AccessToken"); | const AccessToken = localStorage.getItem("AccessToken"); | ||||
| this.$axios({ | this.$axios({ | ||||
| method: "get", | method: "get", | ||||
| url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||||
| url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=4`, | |||||
| headers: { | headers: { | ||||
| "Content-Type": "application/json;charset=UTF-8", | "Content-Type": "application/json;charset=UTF-8", | ||||
| token: AccessToken, | token: AccessToken, | ||||
| @@ -177,9 +179,12 @@ export default { | |||||
| width: 100%; | width: 100%; | ||||
| } | } | ||||
| .item { | .item { | ||||
| padding: 15px; | |||||
| padding-top: 15px; | |||||
| padding-bottom: 15px; | |||||
| .title { | .title { | ||||
| font-size: 20px; | |||||
| font-size: 15px; | |||||
| font-weight: 600; | |||||
| margin-left: 15px; | |||||
| margin-bottom: 20px; | margin-bottom: 20px; | ||||
| } | } | ||||
| .itemList { | .itemList { | ||||
| @@ -188,15 +193,25 @@ export default { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| margin-bottom: 25px; | margin-bottom: 25px; | ||||
| border: 1px solid #0000003a; | |||||
| border-radius: 5px; | |||||
| padding: 25px; | |||||
| border-bottom: 1px solid #00000010; | |||||
| padding: 0 20px 25px 25px; | |||||
| .videoPrv { | .videoPrv { | ||||
| width: 100px; | |||||
| width: 150px; | |||||
| height: 100px; | height: 100px; | ||||
| // background-color: #979797; | |||||
| video { | video { | ||||
| width: 100%; | |||||
| height: 100%; | |||||
| position: absolute; | |||||
| width: 150px; | |||||
| height: 100px; | |||||
| } | |||||
| .cover { | |||||
| position: absolute; | |||||
| width: 150px; | |||||
| height: 100px; | |||||
| line-height: 100px; | |||||
| background-color: #00000034; | |||||
| text-align: center; | |||||
| color: #fff; | |||||
| } | } | ||||
| } | } | ||||
| .videoInfo { | .videoInfo { | ||||
| @@ -205,7 +220,8 @@ export default { | |||||
| justify-content: space-between; | justify-content: space-between; | ||||
| margin-left: 10px; | margin-left: 10px; | ||||
| .videoName { | .videoName { | ||||
| font-size: 15px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| } | } | ||||
| .createTime { | .createTime { | ||||
| font-size: 11px; | font-size: 11px; | ||||
| @@ -235,24 +251,28 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .noWork { | .noWork { | ||||
| font-size: 20px; | |||||
| width: 100%; | |||||
| height: 450px; | |||||
| line-height: 450px; | |||||
| font-size: 14px; | |||||
| font-weight: 600; | |||||
| text-align: center; | text-align: center; | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .goAdd { | .goAdd { | ||||
| position: fixed; | position: fixed; | ||||
| bottom: 30px; | |||||
| bottom: 15px; | |||||
| left: 50%; | left: 50%; | ||||
| width: 300px; | width: 300px; | ||||
| height: 30px; | |||||
| line-height: 30px; | |||||
| height: 42px; | |||||
| line-height: 42px; | |||||
| font-size: 15px; | font-size: 15px; | ||||
| color: #fff; | color: #fff; | ||||
| text-align: center; | text-align: center; | ||||
| transform: translateX(-50%); | transform: translateX(-50%); | ||||
| background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||||
| border-radius: 8px; | |||||
| background-color: #0068b7; | |||||
| border-radius: 5px; | |||||
| box-shadow: #60606082 1px 1px 1px 1px; | box-shadow: #60606082 1px 1px 1px 1px; | ||||
| } | } | ||||
| } | } | ||||