| @@ -11,7 +11,7 @@ | |||
| <div class="title">选择模板</div> | |||
| <div class="typeOutSide"> | |||
| <div class="type"> | |||
| <div :class="type == '' ? 'active' : ''" @click="chooseType()"> | |||
| <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||
| 全部模板 | |||
| </div> | |||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||
| @@ -64,7 +64,7 @@ export default { | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| type: 2, | |||
| type: 0, | |||
| currentId: "", | |||
| modeList: [], // 模板列表 | |||
| }; | |||
| @@ -106,6 +106,7 @@ export default { | |||
| // 获取模板列表 | |||
| async loadModeList(sex) { | |||
| try { | |||
| sex = sex == 0 ? "" : sex; | |||
| const res = await getModeList(sex); | |||
| console.log(res, "获取模板列表"); | |||
| this.modeList = res.data.list; | |||
| @@ -53,7 +53,7 @@ | |||
| <div class="bottomBtn"> | |||
| <div class="back" @click="back">上一步</div> | |||
| <div class="next" @click="checkInviteCode">合成视频</div> | |||
| <div class="next" @click="submit">合成视频</div> | |||
| </div> | |||
| <div :class="isShowCover ? 'coverUp active' : 'coverUp'" @click="goMy"> | |||
| @@ -294,43 +294,23 @@ export default { | |||
| } | |||
| }, | |||
| /** | |||
| * @description:查询用户邀请码状态 | |||
| */ | |||
| async checkInviteCode() { | |||
| try { | |||
| const res = await doFindInviteCode(); | |||
| console.log(res, "查询用户邀请码数据"); | |||
| const status = res.data.status; | |||
| if (status == 1) { | |||
| // 组装参数 | |||
| const data = { | |||
| id: this.id, | |||
| ...this.saveData, | |||
| ...this.soundParams, | |||
| ...this.backGroundParams, | |||
| }; | |||
| console.log(data, "最终提交的参数"); | |||
| if ( | |||
| !this.soundParams.voiceMouldId || | |||
| !this.soundParams.voiceMouldSmId | |||
| ) { | |||
| Toast.fail("请选择声音!"); | |||
| return; | |||
| } | |||
| // 开始生成视频 | |||
| submit() { | |||
| // 组装参数 | |||
| const data = { | |||
| id: this.id, | |||
| ...this.saveData, | |||
| ...this.soundParams, | |||
| ...this.backGroundParams, | |||
| }; | |||
| console.log(data, "最终提交的参数"); | |||
| this.saveOrUpdate(data); | |||
| // 当没有邀请码时 | |||
| } else if (status == 0) { | |||
| this.isShowMessageCover = true; | |||
| return; | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| Toast.fail(error.message); | |||
| if (!this.soundParams.voiceMouldId || !this.soundParams.voiceMouldSmId) { | |||
| Toast.fail("请选择声音!"); | |||
| return; | |||
| } | |||
| this.saveOrUpdate(data); | |||
| }, | |||
| /** | |||
| @@ -0,0 +1,258 @@ | |||
| <template> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div class="title">录入文案</div> | |||
| <div class="titleBox" @click="showTitleInputBox"> | |||
| <span>标题:</span> | |||
| <span class="titleInput">{{ title }}</span> | |||
| </div> | |||
| <div class="content"> | |||
| <div class="img"> | |||
| <img | |||
| :class="isActive ? 'active' : ''" | |||
| :src="modelDetail.coverImg" | |||
| @click="expandImg" | |||
| /> | |||
| </div> | |||
| <div class="textarea"> | |||
| <textarea | |||
| v-model="paperwork" | |||
| cols="55" | |||
| rows="15" | |||
| placeholder="写点什么" | |||
| ></textarea> | |||
| <div class="limit">已录入150字 约1分钟</div> | |||
| </div> | |||
| </div> | |||
| <div class="bottomBtn"> | |||
| <div class="back" @click="back">上一步</div> | |||
| <div class="next" @click="goNext">下一步</div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import Vue from "vue"; | |||
| import { Toast } from "vant"; | |||
| import { mapState, mapActions } from "vuex"; | |||
| import HeadTop from "./../../components/common/head.vue"; | |||
| import { scrollToID } from "../../utils"; | |||
| import { | |||
| getModelDetailById, | |||
| saveOrUpdateUserVideo, | |||
| } from "../../api/getPaper.js"; | |||
| Vue.use(Toast); | |||
| export default { | |||
| components: { | |||
| HeadTop, | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| isActive: false, | |||
| paperwork: "", | |||
| title: "", | |||
| modelDetail: {}, | |||
| id: "", | |||
| saveID: "", | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: (state) => state.publicObj.characters, | |||
| }), | |||
| }, | |||
| methods: { | |||
| ...mapActions(["setCharacters"]), | |||
| go(url) { | |||
| this.$router.push(url); | |||
| }, | |||
| back() { | |||
| this.$router.back(); | |||
| }, | |||
| showTitleInputBox() {}, | |||
| expandImg() {}, | |||
| goNext() { | |||
| let data = { | |||
| id: this.saveID, | |||
| type: 1, | |||
| personMouldId: this.modelDetail.id, //模板id | |||
| personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
| paperwork: this.paperwork, | |||
| title: this.title, | |||
| }; | |||
| if (this.id) { | |||
| data.id = this.id; | |||
| } | |||
| if (!this.title) { | |||
| Toast.fail("请输入标题!"); | |||
| return; | |||
| } | |||
| if (!this.paperwork) { | |||
| Toast.fail("请输入文案!"); | |||
| return; | |||
| } | |||
| this.saveOrUpdate(data); | |||
| }, | |||
| /** | |||
| * @description:根据id获取用户作品详情 | |||
| */ | |||
| async getDetailById(id) { | |||
| try { | |||
| const res = await getModelDetailById(id); | |||
| console.log(res, "根据id获取用户作品详情"); | |||
| this.modelDetail = res.data.personMould; | |||
| this.paperwork = res.data.paperwork || ""; | |||
| this.title = res.data.title || ""; | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| Toast.fail(error.message); | |||
| } | |||
| }, | |||
| /** | |||
| * @description:保存或修改用户作品 | |||
| */ | |||
| async saveOrUpdate(data) { | |||
| try { | |||
| const res = await saveOrUpdateUserVideo(data); | |||
| console.log(res, "保存或修改用户作品"); | |||
| this.$router.push({ | |||
| path: "/generateVideo", | |||
| query: { | |||
| id: res.data.id, | |||
| coverImg: this.modelDetail.coverImg, | |||
| paperwork: this.paperwork, | |||
| saveData: data, | |||
| }, | |||
| }); | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| Toast.fail(error.message); | |||
| } | |||
| }, | |||
| }, | |||
| created() { | |||
| this.id = this.$route.query.id; | |||
| if (this.id) { | |||
| this.getDetailById(this.id); | |||
| } else { | |||
| this.modelDetail = this.$route.query.modelDetail; | |||
| console.log(this.modelDetail, "modelDetail"); | |||
| } | |||
| this.saveID = this.$route.query.saveID; | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| transform: translateX(100%); | |||
| opacity: 0; | |||
| transition: all 0.3s; | |||
| padding-bottom: 25px; | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| .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; | |||
| } | |||
| .titleBox { | |||
| font-size: 14px; | |||
| font-weight: 600; | |||
| margin: 15px 0; | |||
| text-align: center; | |||
| .titleInput { | |||
| width: fit-content; | |||
| } | |||
| } | |||
| .content { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| 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; | |||
| margin-bottom: 60px; | |||
| textarea { | |||
| width: 250px; | |||
| height: 367.5px; | |||
| border: 1px solid #00000080; | |||
| border-radius: 8px; | |||
| } | |||
| .limit { | |||
| position: absolute; | |||
| left: 0px; | |||
| bottom: -15px; | |||
| } | |||
| } | |||
| } | |||
| .bottomBtn { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 32.5px; | |||
| margin-top: 50px; | |||
| margin-bottom: 30px; | |||
| div { | |||
| width: 142px; | |||
| height: 42px; | |||
| color: #fff; | |||
| line-height: 42px; | |||
| text-align: center; | |||
| border: 1px solid #d2d2d2; | |||
| border-radius: 7px; | |||
| background-color: #d2d2d2; | |||
| &.next { | |||
| color: #fff; | |||
| border: 1px solid #0068b7; | |||
| background-color: #0068b7; | |||
| } | |||
| } | |||
| } | |||
| .van-popup { | |||
| background-color: #ffffff00 !important; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -3,9 +3,19 @@ | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div class="title">录入文案</div> | |||
| <div class="titleBox" @click="showTitleInputBox"> | |||
| <span>标题:</span> | |||
| <span class="titleInput">{{ title }}</span> | |||
| </div> | |||
| <div class="content"> | |||
| <div class="img"> | |||
| <img :src="modelDetail.coverImg" /> | |||
| <img | |||
| :class="isActive ? 'active' : ''" | |||
| :src="modelDetail.coverImg" | |||
| @click="expandImg" | |||
| /> | |||
| </div> | |||
| <div class="textarea"> | |||
| <textarea | |||
| @@ -22,6 +32,18 @@ | |||
| <div class="back" @click="back">上一步</div> | |||
| <div class="next" @click="goNext">下一步</div> | |||
| </div> | |||
| <van-dialog | |||
| v-model="isShowMessageCover" | |||
| title="请输入标题" | |||
| show-cancel-button | |||
| @cancel="messageCoverCancel" | |||
| @confirm="messageCoverConfirm" | |||
| > | |||
| <div class="titleInput"> | |||
| <input type="text" v-model="titlePre" /> | |||
| </div> | |||
| </van-dialog> | |||
| </div> | |||
| </template> | |||
| @@ -45,8 +67,11 @@ export default { | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| isActive: false, | |||
| isShowMessageCover: false, | |||
| paperwork: "", | |||
| title: "", | |||
| titlePre: "", | |||
| modelDetail: {}, | |||
| id: "", | |||
| saveID: "", | |||
| @@ -69,6 +94,22 @@ export default { | |||
| this.$router.back(); | |||
| }, | |||
| showTitleInputBox() { | |||
| this.isShowMessageCover = true; | |||
| }, | |||
| // 取消修改,将标题草稿同步至标题 | |||
| messageCoverCancel() { | |||
| this.titlePre = this.title; | |||
| }, | |||
| // 确认标题,将标题同步至标题草稿 | |||
| messageCoverConfirm() { | |||
| this.title = this.titlePre; | |||
| }, | |||
| expandImg() {}, | |||
| goNext() { | |||
| let data = { | |||
| id: this.saveID, | |||
| @@ -76,11 +117,23 @@ export default { | |||
| personMouldId: this.modelDetail.id, //模板id | |||
| personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
| paperwork: this.paperwork, | |||
| title: this.modelDetail.title, | |||
| title: this.title, | |||
| }; | |||
| if (this.id) { | |||
| data.id = this.id; | |||
| } | |||
| if (!this.title) { | |||
| Toast.fail("请输入标题!"); | |||
| return; | |||
| } | |||
| if (!this.paperwork) { | |||
| Toast.fail("请输入文案!"); | |||
| return; | |||
| } | |||
| this.saveOrUpdate(data); | |||
| }, | |||
| @@ -90,7 +143,11 @@ export default { | |||
| async getDetailById(id) { | |||
| try { | |||
| const res = await getModelDetailById(id); | |||
| console.log(res, "根据id获取用户作品详情"); | |||
| this.modelDetail = res.data.personMould; | |||
| this.paperwork = res.data.paperwork || ""; // 文案回填 | |||
| this.title = res.data.title || ""; // 标题回填 | |||
| this.titlePre = res.data.title || ""; // 将标题同步至标题草稿 | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| Toast.fail(error.message); | |||
| @@ -156,6 +213,17 @@ export default { | |||
| margin: 10px auto; | |||
| margin-bottom: 25px; | |||
| } | |||
| .titleBox { | |||
| font-size: 14px; | |||
| font-weight: 600; | |||
| margin: 15px 0; | |||
| text-align: center; | |||
| .titleInput { | |||
| width: fit-content; | |||
| } | |||
| } | |||
| .content { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| @@ -187,18 +255,6 @@ export default { | |||
| left: 0px; | |||
| bottom: -15px; | |||
| } | |||
| .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; | |||
| } | |||
| } | |||
| } | |||
| @@ -228,4 +284,15 @@ export default { | |||
| background-color: #ffffff00 !important; | |||
| } | |||
| } | |||
| .titleInput { | |||
| text-align: center; | |||
| margin: 20px 0; | |||
| input { | |||
| height: 30px; | |||
| border-radius: 5px; | |||
| border: 1px solid #00000054; | |||
| padding: 8px 15px; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -40,7 +40,21 @@ | |||
| :items-per-page="4" | |||
| @change="pageChange" | |||
| /> | |||
| <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | |||
| <div class="goAdd" @click="checkInviteCode">+ 创作新作品</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="clickToClose">点击空白处关闭</div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| @@ -72,6 +86,7 @@ export default { | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| isShowMessageCover: false, | |||
| videoList: [], | |||
| currentPage: 1, | |||
| pageSize: 4, | |||
| @@ -100,6 +115,13 @@ export default { | |||
| this.loadVideoList(this.currentPage, this.pageSize); | |||
| }, | |||
| // 点击空白区域退出提示 | |||
| exitCover(e) { | |||
| if (e.srcElement.id != "message") { | |||
| this.isShowMessageCover = false; | |||
| } | |||
| }, | |||
| goDetail(item) { | |||
| const status = item.videoStatus; | |||
| if (status == 0) { | |||
| @@ -188,10 +210,12 @@ export default { | |||
| console.log(res, "查询用户邀请码数据"); | |||
| const status = res.data.status; | |||
| if (status == 1) { | |||
| // 当没有邀请码时 | |||
| if (status == 0) { | |||
| scrollToID("top"); | |||
| this.isShowMessageCover = true; | |||
| } else if (status == 1) { | |||
| this.goCreateNew(); | |||
| // 当没有邀请码时 | |||
| } else if (status == 0) { | |||
| } | |||
| } catch (error) { | |||
| console.log(error, "error"); | |||
| @@ -353,5 +377,66 @@ export default { | |||
| margin-top: 25px; | |||
| margin-left: 190px; | |||
| } | |||
| .messageCover { | |||
| position: fixed; | |||
| top: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| background-color: #00000091; | |||
| transition: all 0.3s; | |||
| opacity: 0; | |||
| z-index: -1; | |||
| .message { | |||
| position: sticky; | |||
| top: 48%; | |||
| transform: translate(-50%, -50%); | |||
| width: 272px; | |||
| height: 290px; | |||
| border-radius: 5px; | |||
| background-color: #fff; | |||
| text-align: center; | |||
| transition: all 0.3s; | |||
| margin-left: 50%; | |||
| .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%; | |||
| bottom: -20%; | |||
| transform: translateX(-50%); | |||
| } | |||
| } | |||
| &.active { | |||
| z-index: 100; | |||
| opacity: 1; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||