邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

232 lines
4.9 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <div class="title">录入文案</div>
  6. <div class="content">
  7. <div class="img">
  8. <img :src="modelDetail.coverImg" />
  9. </div>
  10. <div class="textarea">
  11. <textarea
  12. v-model="paperwork"
  13. cols="55"
  14. rows="15"
  15. placeholder="写点什么"
  16. ></textarea>
  17. <div class="limit">已录入150字 约1分钟</div>
  18. </div>
  19. </div>
  20. <div class="bottomBtn">
  21. <div class="back" @click="back">上一步</div>
  22. <div class="next" @click="goNext">下一步</div>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import Vue from "vue";
  28. import { Toast } from "vant";
  29. import { mapState, mapActions } from "vuex";
  30. import HeadTop from "./../../components/common/head.vue";
  31. import { scrollToID } from "../../utils";
  32. import {
  33. getModelDetailById,
  34. saveOrUpdateUserVideo,
  35. } from "../../api/getPaper.js";
  36. Vue.use(Toast);
  37. export default {
  38. components: {
  39. HeadTop,
  40. },
  41. data() {
  42. return {
  43. inPage: false,
  44. paperwork: "",
  45. title: "",
  46. modelDetail: {},
  47. id: "",
  48. saveID: "",
  49. };
  50. },
  51. computed: {
  52. ...mapState({
  53. characters: (state) => state.publicObj.characters,
  54. }),
  55. },
  56. methods: {
  57. ...mapActions(["setCharacters"]),
  58. go(url) {
  59. this.$router.push(url);
  60. },
  61. back() {
  62. this.$router.back();
  63. },
  64. goNext() {
  65. let data = {
  66. id: this.saveID,
  67. type: 1,
  68. personMouldId: this.modelDetail.id, //模板id
  69. personMouldSmId: this.modelDetail.mouldSmId, //模板标识
  70. paperwork: this.paperwork,
  71. title: this.modelDetail.title,
  72. };
  73. if (this.id) {
  74. data.id = this.id;
  75. }
  76. this.saveOrUpdate(data);
  77. },
  78. /**
  79. * @description:根据id获取用户作品详情
  80. */
  81. async getDetailById(id) {
  82. try {
  83. const res = await getModelDetailById(id);
  84. this.modelDetail = res.data.personMould;
  85. } catch (error) {
  86. console.log(error, "error");
  87. Toast.fail(error.message);
  88. }
  89. },
  90. /**
  91. * @description:保存或修改用户作品
  92. */
  93. async saveOrUpdate(data) {
  94. try {
  95. const res = await saveOrUpdateUserVideo(data);
  96. console.log(res, "保存或修改用户作品");
  97. this.$router.push({
  98. path: "/generateVideo",
  99. query: {
  100. id: res.data.id,
  101. coverImg: this.modelDetail.coverImg,
  102. paperwork: this.paperwork,
  103. saveData: data,
  104. },
  105. });
  106. } catch (error) {
  107. console.log(error, "error");
  108. Toast.fail(error.message);
  109. }
  110. },
  111. },
  112. created() {
  113. this.id = this.$route.query.id;
  114. if (this.id) {
  115. this.getDetailById(this.id);
  116. } else {
  117. this.modelDetail = this.$route.query.modelDetail;
  118. console.log(this.modelDetail, "modelDetail");
  119. }
  120. this.saveID = this.$route.query.saveID;
  121. },
  122. mounted() {
  123. this.inPage = true;
  124. scrollToID("top");
  125. },
  126. };
  127. </script>
  128. <style lang="scss" scoped>
  129. .page {
  130. transform: translateX(100%);
  131. opacity: 0;
  132. transition: all 0.3s;
  133. padding-bottom: 25px;
  134. &.active {
  135. opacity: 1;
  136. transform: translateX(0);
  137. }
  138. .title {
  139. text-align: center;
  140. width: 70px;
  141. font-size: 16px;
  142. font-weight: 600;
  143. border-bottom: 3px solid #0068b7;
  144. padding-bottom: 7px;
  145. margin: 10px auto;
  146. margin-bottom: 25px;
  147. }
  148. .content {
  149. display: flex;
  150. justify-content: space-between;
  151. padding: 0 15px;
  152. .img {
  153. img {
  154. width: 76px;
  155. height: 135.5px;
  156. border: 1px solid #999999;
  157. border-radius: 8px;
  158. }
  159. .title {
  160. font-size: 15px;
  161. margin-top: 15px;
  162. }
  163. }
  164. .textarea {
  165. position: relative;
  166. text-align: center;
  167. margin-bottom: 60px;
  168. textarea {
  169. width: 250px;
  170. height: 367.5px;
  171. border: 1px solid #00000080;
  172. border-radius: 8px;
  173. }
  174. .limit {
  175. position: absolute;
  176. left: 0px;
  177. bottom: -15px;
  178. }
  179. .try {
  180. position: absolute;
  181. left: 20px;
  182. bottom: -35px;
  183. width: 80px;
  184. height: 25px;
  185. line-height: 25px;
  186. text-align: center;
  187. color: #0000004b;
  188. border: 1px solid #0000004b;
  189. border-radius: 5px;
  190. }
  191. }
  192. }
  193. .bottomBtn {
  194. display: flex;
  195. justify-content: space-between;
  196. padding: 0 32.5px;
  197. margin-top: 50px;
  198. margin-bottom: 30px;
  199. div {
  200. width: 142px;
  201. height: 42px;
  202. color: #fff;
  203. line-height: 42px;
  204. text-align: center;
  205. border: 1px solid #d2d2d2;
  206. border-radius: 7px;
  207. background-color: #d2d2d2;
  208. &.next {
  209. color: #fff;
  210. border: 1px solid #0068b7;
  211. background-color: #0068b7;
  212. }
  213. }
  214. }
  215. .van-popup {
  216. background-color: #ffffff00 !important;
  217. }
  218. }
  219. </style>