@@ -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> |