Просмотр исходного кода

邀请码校验迁移与标题测试

release
HolyKnightIX 2 лет назад
Родитель
Сommit
71bfe2c64c
5 измененных файлов: 447 добавлений и 56 удалений
  1. +3
    -2
      src/views/model/chooseModel.vue
  2. +16
    -36
      src/views/model/generateVideo.vue
  3. +258
    -0
      src/views/model/getPaper copy.vue
  4. +81
    -14
      src/views/model/getPaper.vue
  5. +89
    -4
      src/views/myPage/myPage.vue

+ 3
- 2
src/views/model/chooseModel.vue Просмотреть файл

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


+ 16
- 36
src/views/model/generateVideo.vue Просмотреть файл

@@ -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);
}, },


/** /**


+ 258
- 0
src/views/model/getPaper copy.vue Просмотреть файл

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

+ 81
- 14
src/views/model/getPaper.vue Просмотреть файл

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

+ 89
- 4
src/views/myPage/myPage.vue Просмотреть файл

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

Загрузка…
Отмена
Сохранить