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