|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <div class="title">录入文案</div>
- <div class="content">
- <div class="img">
- <img :src="modelDetail.coverImg" />
- </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,
- 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();
- },
-
- goNext() {
- let data = {
- id: this.saveID,
- type: 1,
- personMouldId: this.modelDetail.id, //模板id
- personMouldSmId: this.modelDetail.mouldSmId, //模板标识
- paperwork: this.paperwork,
- title: this.modelDetail.title,
- };
- if (this.id) {
- data.id = this.id;
- }
- this.saveOrUpdate(data);
- },
-
- /**
- * @description:根据id获取用户作品详情
- */
- async getDetailById(id) {
- try {
- const res = await getModelDetailById(id);
- this.modelDetail = res.data.personMould;
- } 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;
- }
- .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;
- }
- .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;
- }
- }
- }
-
- .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>
|