邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

349 líneas
8.1 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <!-- 顶部tab栏 -->
  6. <van-tabs
  7. @click="chooseType1"
  8. class="typeOutSide"
  9. animated
  10. color="#7264F5"
  11. line-width="46"
  12. line-height="6"
  13. title-inactive-color="#666"
  14. title-active-color="#333"
  15. >
  16. <van-tab v-for="item in tabList" :key="item" :title="item"> </van-tab>
  17. </van-tabs>
  18. <!-- <div class="title">选择模板</div> -->
  19. <!-- 老版吸顶tab栏 -->
  20. <!-- <div class="typeOutSide">
  21. <div class="type">
  22. <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)">
  23. 全部模板
  24. </div>
  25. <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)">
  26. 女性模板
  27. </div>
  28. <div :class="type == 1 ? 'active' : ''" @click="chooseType(1)">
  29. 男性模板
  30. </div>
  31. </div>
  32. </div> -->
  33. <!-- 模板列表 -->
  34. <div class="choose">
  35. <div class="modeList">
  36. <div
  37. class="model"
  38. :class="currentId == item.id ? 'active' : ''"
  39. v-if="modeList.length >= 1"
  40. v-for="(item, index) in modeList"
  41. :key="index"
  42. @click="selectModel(item.id)"
  43. >
  44. <img :src="item.coverImg" alt="" />
  45. <div class="modelName">{{ item.title }}</div>
  46. <div class="setPaper">录入文案</div>
  47. </div>
  48. <div class="alt" v-if="modeList.length == 0">暂无可用模板</div>
  49. </div>
  50. </div>
  51. <div class="blank" v-if="modeList.length <= 2"></div>
  52. </div>
  53. </template>
  54. <script>
  55. import Vue from 'vue'
  56. import { mapState, mapActions } from 'vuex'
  57. import HeadTop from './../../components/common/head.vue'
  58. import { Toast } from 'vant'
  59. import { scrollToID } from '../../utils'
  60. import {
  61. getModeList,
  62. getModeDetailById,
  63. saveOrUpdateUserVideo
  64. } from '../../api/chooseModel'
  65. Vue.use(Toast)
  66. export default {
  67. components: {
  68. HeadTop
  69. },
  70. data() {
  71. return {
  72. inPage: false,
  73. type: 0,
  74. currentId: '',
  75. modeList: [], // 模板列表
  76. tabList: ['全部', '男性', '女性']
  77. }
  78. },
  79. computed: {
  80. ...mapState({
  81. characters: (state) => state.publicObj.characters
  82. })
  83. },
  84. methods: {
  85. ...mapActions(['setCharacters']),
  86. //点击tab栏选择模板列表
  87. chooseType1(name, title) {
  88. this.type = this.tabList.findIndex((item) => item == title)
  89. this.loadModeList(this.type)
  90. },
  91. globalWatcher(e) {
  92. console.log(e, 'e')
  93. },
  94. go(url) {
  95. this.$router.push(url)
  96. },
  97. chooseModel(num) {
  98. this.phase = num
  99. },
  100. // chooseType(num) {
  101. // this.type = num;
  102. // this.loadModeList(num);
  103. // },
  104. selectModel(id) {
  105. if (this.currentId != id) {
  106. this.currentId = id
  107. } else {
  108. this.getModeDetail(id)
  109. }
  110. },
  111. // 获取模板列表
  112. async loadModeList(sex) {
  113. try {
  114. sex = sex == 0 ? '' : sex
  115. const res = await getModeList(sex)
  116. console.log(res, '获取模板列表')
  117. this.modeList = res.data.list
  118. } catch (error) {
  119. console.log(error, 'error')
  120. Toast.fail(error.message)
  121. }
  122. },
  123. // 根据id获取模板详情
  124. async getModeDetail(id) {
  125. try {
  126. const res = await getModeDetailById(id)
  127. console.log(res, '根据id获取模板详情')
  128. const modelDetail = res.data
  129. await this.goSetPaperWork(modelDetail)
  130. // this.$router.push({
  131. // path: '/previewModel',
  132. // query: {
  133. // imgUrl: res.data.coverImg, //模版图片路径
  134. // mouldSmId: res.data.mouldSmId, //模版标识
  135. // modelId: res.data.id //模版id
  136. // }
  137. // })
  138. // this.goSetPaperWork(modelDetail);
  139. } catch (error) {
  140. console.log(error, 'error')
  141. Toast.fail(error.message)
  142. }
  143. },
  144. async saveToSetPaper(data, modelDetail) {
  145. try {
  146. console.log(modelDetail.coverImg, 11111111111111111)
  147. const res = await saveOrUpdateUserVideo(data)
  148. console.log(res, '保存或修改用户作品')
  149. this.$router.push({
  150. path: '/previewModel',
  151. query: {
  152. saveID: res.data.id,
  153. imgUrl: modelDetail.coverImg, //模版图片路径
  154. mouldSmId: modelDetail.mouldSmId, //模版标识
  155. modelId: modelDetail.id, //模版id
  156. modelDetail: JSON.stringify(modelDetail)
  157. }
  158. })
  159. } catch (error) {
  160. console.log(error, 'error')
  161. Toast.fail(error.message)
  162. }
  163. },
  164. /**
  165. * @description:根据模板详情跳转至选择文案
  166. * @param {type}modelDetail
  167. * @event:Go page => setPaperWork
  168. */
  169. goSetPaperWork(modelDetail) {
  170. const data = {
  171. // id: "",
  172. type: 1,
  173. personMouldId: modelDetail.id, //模板id
  174. personMouldSmId: modelDetail.mouldSmId //模板标识
  175. // voiceMouldId: "",
  176. // voiceMouldId: "",
  177. }
  178. this.saveToSetPaper(data, modelDetail)
  179. }
  180. },
  181. mounted() {
  182. this.inPage = true
  183. scrollToID('top')
  184. },
  185. created() {
  186. this.loadModeList(2)
  187. }
  188. }
  189. </script>
  190. <style lang="scss" scoped>
  191. ::v-deep .van-tab--active {
  192. font-size: 17px;
  193. font-weight: 700;
  194. }
  195. .page {
  196. transform: translateX(30%);
  197. opacity: 0;
  198. transition: all 0.5s; // global-transition
  199. padding-bottom: 25px;
  200. &.active {
  201. opacity: 1;
  202. transform: translateX(0);
  203. }
  204. .chooseModel {
  205. display: flex;
  206. justify-content: space-between;
  207. align-items: center;
  208. width: 350px;
  209. height: 32px;
  210. margin: auto;
  211. margin-top: 15px;
  212. margin-bottom: 15px;
  213. div {
  214. width: 33.33%;
  215. height: 100%;
  216. line-height: 32px;
  217. text-align: center;
  218. border: 1px solid #46464661;
  219. &.active {
  220. background-color: #00ccff;
  221. color: #fff;
  222. }
  223. }
  224. }
  225. .title {
  226. text-align: center;
  227. width: 70px;
  228. font-size: 16px;
  229. font-weight: 600;
  230. border-bottom: 3px solid #0068b7;
  231. padding-bottom: 7px;
  232. margin: 10px auto;
  233. margin-bottom: 25px;
  234. }
  235. .typeOutSide {
  236. position: sticky;
  237. top: 0px;
  238. z-index: 99;
  239. .type {
  240. display: flex;
  241. justify-content: space-between;
  242. align-items: center;
  243. padding: 0 25px;
  244. margin-bottom: 20px;
  245. div {
  246. width: 94px;
  247. height: 35px;
  248. line-height: 35px;
  249. color: #fff;
  250. border: 1px solid #bfbfbf;
  251. background-color: #bfbfbf;
  252. border-radius: 5px;
  253. text-align: center;
  254. transition: all 0.3s;
  255. &.active {
  256. color: #fff;
  257. border: 1px solid #0068b7;
  258. background-color: #0068b7;
  259. }
  260. }
  261. }
  262. }
  263. .choose {
  264. padding-top: 20px;
  265. margin-bottom: 40px;
  266. .modeList {
  267. display: flex;
  268. justify-content: space-between;
  269. align-items: center;
  270. flex-wrap: wrap;
  271. margin: auto;
  272. padding: 0 23px;
  273. .model {
  274. position: relative;
  275. text-align: left;
  276. margin-bottom: 15px;
  277. // border: 1px solid #00000028;
  278. // padding: 8px;
  279. width: 154px;
  280. height: 305px;
  281. transition: all 0.3s;
  282. opacity: 0.9;
  283. img {
  284. border-radius: 8px;
  285. width: 100%;
  286. height: 273px;
  287. }
  288. .modelName {
  289. margin-top: 10px;
  290. font-weight: 700;
  291. font-size: 16px;
  292. }
  293. .setPaper {
  294. position: absolute;
  295. top: 80%;
  296. left: 50%;
  297. transform: translate(-50%, -50%);
  298. color: #fff;
  299. font-size: 14px;
  300. font-weight: 600;
  301. background-color: #00000042;
  302. padding: 3px 5px;
  303. border-radius: 5px;
  304. transition: all 0.3s;
  305. opacity: 0;
  306. }
  307. &.active {
  308. transform: translateY(-3px);
  309. box-shadow: #60606082 0px 2px 2px 1px;
  310. opacity: 1;
  311. .setPaper {
  312. opacity: 1;
  313. }
  314. }
  315. }
  316. .alt {
  317. font-size: 18px;
  318. margin: 80px auto;
  319. height: 450px;
  320. line-height: 450px;
  321. }
  322. }
  323. }
  324. .blank {
  325. width: 1px;
  326. height: 1px;
  327. margin-bottom: 240px;
  328. }
  329. }
  330. </style>