| @@ -11,7 +11,7 @@ | |||||
| <div class="title">选择模板</div> | <div class="title">选择模板</div> | ||||
| <div class="typeOutSide"> | <div class="typeOutSide"> | ||||
| <div class="type"> | <div class="type"> | ||||
| <div :class="type == '' ? 'active' : ''" @click="chooseType()"> | |||||
| <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||||
| 全部模板 | 全部模板 | ||||
| </div> | </div> | ||||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | ||||
| @@ -64,7 +64,7 @@ export default { | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | inPage: false, | ||||
| type: 2, | |||||
| type: 0, | |||||
| currentId: "", | currentId: "", | ||||
| modeList: [], // 模板列表 | modeList: [], // 模板列表 | ||||
| }; | }; | ||||
| @@ -106,6 +106,7 @@ export default { | |||||
| // 获取模板列表 | // 获取模板列表 | ||||
| async loadModeList(sex) { | async loadModeList(sex) { | ||||
| try { | try { | ||||
| sex = sex == 0 ? "" : sex; | |||||
| const res = await getModeList(sex); | const res = await getModeList(sex); | ||||
| console.log(res, "获取模板列表"); | console.log(res, "获取模板列表"); | ||||
| this.modeList = res.data.list; | this.modeList = res.data.list; | ||||
| @@ -53,7 +53,7 @@ | |||||
| <div class="bottomBtn"> | <div class="bottomBtn"> | ||||
| <div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
| <div class="next" @click="checkInviteCode">合成视频</div> | |||||
| <div class="next" @click="submit">合成视频</div> | |||||
| </div> | </div> | ||||
| <div :class="isShowCover ? 'coverUp active' : 'coverUp'" @click="goMy"> | <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> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <div class="title">录入文案</div> | <div class="title">录入文案</div> | ||||
| <div class="titleBox" @click="showTitleInputBox"> | |||||
| <span>标题:</span> | |||||
| <span class="titleInput">{{ title }}</span> | |||||
| </div> | |||||
| <div class="content"> | <div class="content"> | ||||
| <div class="img"> | <div class="img"> | ||||
| <img :src="modelDetail.coverImg" /> | |||||
| <img | |||||
| :class="isActive ? 'active' : ''" | |||||
| :src="modelDetail.coverImg" | |||||
| @click="expandImg" | |||||
| /> | |||||
| </div> | </div> | ||||
| <div class="textarea"> | <div class="textarea"> | ||||
| <textarea | <textarea | ||||
| @@ -22,6 +32,18 @@ | |||||
| <div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
| <div class="next" @click="goNext">下一步</div> | <div class="next" @click="goNext">下一步</div> | ||||
| </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> | </div> | ||||
| </template> | </template> | ||||
| @@ -45,8 +67,11 @@ export default { | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | inPage: false, | ||||
| isActive: false, | |||||
| isShowMessageCover: false, | |||||
| paperwork: "", | paperwork: "", | ||||
| title: "", | title: "", | ||||
| titlePre: "", | |||||
| modelDetail: {}, | modelDetail: {}, | ||||
| id: "", | id: "", | ||||
| saveID: "", | saveID: "", | ||||
| @@ -69,6 +94,22 @@ export default { | |||||
| this.$router.back(); | this.$router.back(); | ||||
| }, | }, | ||||
| showTitleInputBox() { | |||||
| this.isShowMessageCover = true; | |||||
| }, | |||||
| // 取消修改,将标题草稿同步至标题 | |||||
| messageCoverCancel() { | |||||
| this.titlePre = this.title; | |||||
| }, | |||||
| // 确认标题,将标题同步至标题草稿 | |||||
| messageCoverConfirm() { | |||||
| this.title = this.titlePre; | |||||
| }, | |||||
| expandImg() {}, | |||||
| goNext() { | goNext() { | ||||
| let data = { | let data = { | ||||
| id: this.saveID, | id: this.saveID, | ||||
| @@ -76,11 +117,23 @@ export default { | |||||
| personMouldId: this.modelDetail.id, //模板id | personMouldId: this.modelDetail.id, //模板id | ||||
| personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | ||||
| paperwork: this.paperwork, | paperwork: this.paperwork, | ||||
| title: this.modelDetail.title, | |||||
| title: this.title, | |||||
| }; | }; | ||||
| if (this.id) { | if (this.id) { | ||||
| data.id = this.id; | data.id = this.id; | ||||
| } | } | ||||
| if (!this.title) { | |||||
| Toast.fail("请输入标题!"); | |||||
| return; | |||||
| } | |||||
| if (!this.paperwork) { | |||||
| Toast.fail("请输入文案!"); | |||||
| return; | |||||
| } | |||||
| this.saveOrUpdate(data); | this.saveOrUpdate(data); | ||||
| }, | }, | ||||
| @@ -90,7 +143,11 @@ export default { | |||||
| async getDetailById(id) { | async getDetailById(id) { | ||||
| try { | try { | ||||
| const res = await getModelDetailById(id); | const res = await getModelDetailById(id); | ||||
| console.log(res, "根据id获取用户作品详情"); | |||||
| this.modelDetail = res.data.personMould; | this.modelDetail = res.data.personMould; | ||||
| this.paperwork = res.data.paperwork || ""; // 文案回填 | |||||
| this.title = res.data.title || ""; // 标题回填 | |||||
| this.titlePre = res.data.title || ""; // 将标题同步至标题草稿 | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, "error"); | console.log(error, "error"); | ||||
| Toast.fail(error.message); | Toast.fail(error.message); | ||||
| @@ -156,6 +213,17 @@ export default { | |||||
| margin: 10px auto; | margin: 10px auto; | ||||
| margin-bottom: 25px; | margin-bottom: 25px; | ||||
| } | } | ||||
| .titleBox { | |||||
| font-size: 14px; | |||||
| font-weight: 600; | |||||
| margin: 15px 0; | |||||
| text-align: center; | |||||
| .titleInput { | |||||
| width: fit-content; | |||||
| } | |||||
| } | |||||
| .content { | .content { | ||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| @@ -187,18 +255,6 @@ export default { | |||||
| left: 0px; | left: 0px; | ||||
| bottom: -15px; | 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; | 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> | </style> | ||||
| @@ -40,7 +40,21 @@ | |||||
| :items-per-page="4" | :items-per-page="4" | ||||
| @change="pageChange" | @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> | </div> | ||||
| </template> | </template> | ||||
| @@ -72,6 +86,7 @@ export default { | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| inPage: false, | inPage: false, | ||||
| isShowMessageCover: false, | |||||
| videoList: [], | videoList: [], | ||||
| currentPage: 1, | currentPage: 1, | ||||
| pageSize: 4, | pageSize: 4, | ||||
| @@ -100,6 +115,13 @@ export default { | |||||
| this.loadVideoList(this.currentPage, this.pageSize); | this.loadVideoList(this.currentPage, this.pageSize); | ||||
| }, | }, | ||||
| // 点击空白区域退出提示 | |||||
| exitCover(e) { | |||||
| if (e.srcElement.id != "message") { | |||||
| this.isShowMessageCover = false; | |||||
| } | |||||
| }, | |||||
| goDetail(item) { | goDetail(item) { | ||||
| const status = item.videoStatus; | const status = item.videoStatus; | ||||
| if (status == 0) { | if (status == 0) { | ||||
| @@ -188,10 +210,12 @@ export default { | |||||
| console.log(res, "查询用户邀请码数据"); | console.log(res, "查询用户邀请码数据"); | ||||
| const status = res.data.status; | const status = res.data.status; | ||||
| if (status == 1) { | |||||
| // 当没有邀请码时 | |||||
| if (status == 0) { | |||||
| scrollToID("top"); | |||||
| this.isShowMessageCover = true; | |||||
| } else if (status == 1) { | |||||
| this.goCreateNew(); | this.goCreateNew(); | ||||
| // 当没有邀请码时 | |||||
| } else if (status == 0) { | |||||
| } | } | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, "error"); | console.log(error, "error"); | ||||
| @@ -353,5 +377,66 @@ export default { | |||||
| margin-top: 25px; | margin-top: 25px; | ||||
| margin-left: 190px; | 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> | </style> | ||||