邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

354 行
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. <!-- 模板列表 -->
  19. <div class="choose" v-if="showModeList">
  20. <waterfall class="modeList" :col="2" :data="modeList">
  21. <div
  22. class="model"
  23. :class="currentId == item.id ? 'active' : ''"
  24. v-if="modeList.length >= 1"
  25. v-for="(item, index) in modeList"
  26. :key="index"
  27. @click="selectModel(item.id)"
  28. >
  29. <div class="model-padding">
  30. <img :src="item.coverImg" alt="" />
  31. <div class="modelName">{{ item.title }}</div>
  32. <div class="setPaper">录入文案</div>
  33. </div>
  34. </div>
  35. <div class="alt" v-if="modeList.length == 0">暂无可用模板</div>
  36. </waterfall>
  37. </div>
  38. <div class="blank" v-if="modeList.length <= 2"></div>
  39. <!-- 分页 -->
  40. <van-pagination
  41. v-model="currentPage"
  42. :total-items="total"
  43. :items-per-page="10"
  44. @change="pageChange"
  45. />
  46. </div>
  47. </template>
  48. <script>
  49. import Vue from 'vue'
  50. import { mapState, mapActions } from 'vuex'
  51. import HeadTop from './../../components/common/head.vue'
  52. import { Toast } from 'vant'
  53. import { scrollToID } from '../../utils'
  54. import {
  55. getModeList,
  56. getModeList1,
  57. getModeDetailById,
  58. saveOrUpdateUserVideo,
  59. personPatchApi
  60. } from '../../api/chooseModel'
  61. Vue.use(Toast)
  62. export default {
  63. components: {
  64. HeadTop
  65. },
  66. data() {
  67. return {
  68. inPage: false,
  69. type: 0,
  70. currentId: '',
  71. modeList: [], // 模板列表
  72. tabList: ['全部', '男性', '女性'],
  73. showModeList: true,
  74. currentPage: 1, //当前页码
  75. pageSize: 10,
  76. total: ''
  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.currentPage = 1
  89. this.type = this.tabList.findIndex((item) => item == title)
  90. this.loadModeList(this.type, this.currentPage, this.pageSize)
  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. selectModel(id) {
  102. this.getModeDetail(id)
  103. // if (this.currentId != id) {
  104. // this.currentId = id
  105. // } else {
  106. // this.getModeDetail(id)
  107. // }
  108. },
  109. // 获取模板列表
  110. async loadModeList(sex, pageNum, pageSize) {
  111. try {
  112. sex = sex == 0 ? '' : sex
  113. // const res = await getModeList(sex)
  114. this.showModeList = false
  115. const res = await getModeList1(sex, pageNum, pageSize)
  116. this.showModeList = true
  117. this.total = res.data.total
  118. console.log(res, '获取模板列表')
  119. this.modeList = res.data.list
  120. } catch (error) {
  121. console.log(error, 'error')
  122. Toast.fail(error.message)
  123. }
  124. },
  125. // 根据id获取模板详情
  126. async getModeDetail(id) {
  127. try {
  128. // const res = await getModeDetailById(id)
  129. // console.log(res, '根据id获取模板详情')
  130. const res = await personPatchApi(id)
  131. console.log(res, '根据id获取模板详情')
  132. const modelDetail = res.data
  133. await this.goSetPaperWork(modelDetail)
  134. // this.$router.push({
  135. // path: '/previewModel',
  136. // query: {
  137. // imgUrl: res.data.coverImg, //模版图片路径
  138. // mouldSmId: res.data.mouldSmId, //模版标识
  139. // modelId: res.data.id //模版id
  140. // }
  141. // })
  142. // this.goSetPaperWork(modelDetail);
  143. } catch (error) {
  144. console.log(error, 'error')
  145. Toast.fail(error.message)
  146. }
  147. },
  148. async saveToSetPaper(data, modelDetail) {
  149. try {
  150. console.log(modelDetail.coverImg, 11111111111111111)
  151. const res = await saveOrUpdateUserVideo(data)
  152. console.log(res, '保存或修改用户作品')
  153. this.$router.push({
  154. // path: '/previewModel',
  155. path: '/editModel',
  156. query: {
  157. id: res.data.id
  158. }
  159. })
  160. } catch (error) {
  161. console.log(error, 'error')
  162. Toast.fail(error.message)
  163. }
  164. },
  165. // 更改页码
  166. pageChange() {
  167. this.loadModeList(this.type, this.currentPage, this.pageSize)
  168. },
  169. /**
  170. * @description:根据模板详情跳转至选择文案
  171. * @param {type}modelDetail
  172. * @event:Go page => setPaperWork
  173. */
  174. goSetPaperWork(modelDetail) {
  175. const data = {
  176. // id: "",
  177. type: 1,
  178. personMouldId: modelDetail.id, //模板id
  179. personMouldSmId: modelDetail.mouldSmId //模板标识
  180. // voiceMouldId: "",
  181. // voiceMouldId: "",
  182. }
  183. this.saveToSetPaper(data, modelDetail)
  184. }
  185. },
  186. mounted() {
  187. this.inPage = true
  188. scrollToID('top')
  189. },
  190. created() {
  191. this.loadModeList(this.type, this.currentPage, this.pageSize)
  192. }
  193. }
  194. </script>
  195. <style lang="scss" scoped>
  196. ::v-deep .van-tab--active {
  197. font-size: 17px;
  198. font-weight: 700;
  199. }
  200. .page {
  201. transform: translateX(30%);
  202. opacity: 0;
  203. transition: all 0.5s; // global-transition
  204. padding-bottom: 25px;
  205. &.active {
  206. opacity: 1;
  207. transform: translateX(0);
  208. }
  209. .chooseModel {
  210. display: flex;
  211. justify-content: space-between;
  212. align-items: center;
  213. width: 350px;
  214. height: 32px;
  215. margin: auto;
  216. margin-top: 15px;
  217. margin-bottom: 15px;
  218. div {
  219. width: 33.33%;
  220. height: 100%;
  221. line-height: 32px;
  222. text-align: center;
  223. border: 1px solid #46464661;
  224. &.active {
  225. background-color: #00ccff;
  226. color: #fff;
  227. }
  228. }
  229. }
  230. .title {
  231. text-align: center;
  232. width: 70px;
  233. font-size: 16px;
  234. font-weight: 600;
  235. border-bottom: 3px solid #0068b7;
  236. padding-bottom: 7px;
  237. margin: 10px auto;
  238. margin-bottom: 25px;
  239. }
  240. .typeOutSide {
  241. position: sticky;
  242. top: 0px;
  243. z-index: 99;
  244. .type {
  245. display: flex;
  246. justify-content: space-between;
  247. align-items: center;
  248. padding: 0 25px;
  249. margin-bottom: 20px;
  250. div {
  251. width: 94px;
  252. height: 35px;
  253. line-height: 35px;
  254. color: #fff;
  255. border: 1px solid #bfbfbf;
  256. background-color: #bfbfbf;
  257. border-radius: 5px;
  258. text-align: center;
  259. transition: all 0.3s;
  260. &.active {
  261. color: #fff;
  262. border: 1px solid #0068b7;
  263. background-color: #0068b7;
  264. }
  265. }
  266. }
  267. }
  268. .choose {
  269. padding-top: 20px;
  270. margin-bottom: 40px;
  271. .modeList {
  272. padding-left: 15px;
  273. padding-right: 15px;
  274. width: 100%;
  275. // margin-right: -20px;
  276. ::v-deep .vue-waterfall-column {
  277. width: 50% !important;
  278. margin: 0 !important;
  279. }
  280. .model {
  281. position: relative;
  282. // text-align: left;
  283. // margin-bottom: 15px;
  284. // max-width: 154px;
  285. // max-height: 273px;
  286. // opacity: 0.9;
  287. padding: 5px;
  288. &-padding {
  289. }
  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>