邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

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