|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <!-- 顶部tab栏 -->
- <van-tabs
- @click="chooseType1"
- class="typeOutSide"
- animated
- color="#7264F5"
- line-width="46"
- line-height="6"
- title-inactive-color="#666"
- title-active-color="#333"
- >
- <van-tab v-for="item in tabList" :key="item" :title="item"> </van-tab>
- </van-tabs>
-
- <!-- 模板列表 -->
- <div class="choose" v-if="showModeList">
- <waterfall class="modeList" :col="2" :data="modeList">
- <div
- class="model"
- :class="currentId == item.id ? 'active' : ''"
- v-if="modeList.length >= 1"
- v-for="(item, index) in modeList"
- :key="index"
- @click="selectModel(item.id)"
- >
- <div class="model-padding">
- <img :src="item.coverImg" alt="" />
- <div class="modelName">{{ item.title }}</div>
- <div class="setPaper">录入文案</div>
- </div>
- </div>
- <div class="alt" v-if="modeList.length == 0">暂无可用模板</div>
- </waterfall>
- </div>
- <div class="blank" v-if="modeList.length <= 2"></div>
- <!-- 分页 -->
- <van-pagination
- v-model="currentPage"
- :total-items="total"
- :items-per-page="10"
- @change="pageChange"
- />
- </div>
- </template>
-
- <script>
- import Vue from 'vue'
- import { mapState, mapActions } from 'vuex'
- import HeadTop from './../../components/common/head.vue'
- import { Toast } from 'vant'
- import { scrollToID } from '../../utils'
- import {
- getModeList,
- getModeList1,
- getModeDetailById,
- saveOrUpdateUserVideo,
- personPatchApi
- } from '../../api/chooseModel'
-
- Vue.use(Toast)
- export default {
- components: {
- HeadTop
- },
- data() {
- return {
- inPage: false,
- type: 0,
- currentId: '',
- modeList: [], // 模板列表
- tabList: ['全部', '男性', '女性'],
- showModeList: true,
- currentPage: 1, //当前页码
- pageSize: 10,
- total: ''
- }
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters
- })
- },
-
- methods: {
- ...mapActions(['setCharacters']),
- //点击tab栏选择模板列表
- chooseType1(name, title) {
- this.currentPage = 1
-
- this.type = this.tabList.findIndex((item) => item == title)
- this.loadModeList(this.type, this.currentPage, this.pageSize)
- },
- globalWatcher(e) {
- console.log(e, 'e')
- },
-
- go(url) {
- this.$router.push(url)
- },
-
- chooseModel(num) {
- this.phase = num
- },
-
- selectModel(id) {
- this.getModeDetail(id)
- // if (this.currentId != id) {
- // this.currentId = id
- // } else {
- // this.getModeDetail(id)
- // }
- },
-
- // 获取模板列表
- async loadModeList(sex, pageNum, pageSize) {
- try {
- sex = sex == 0 ? '' : sex
- // const res = await getModeList(sex)
- this.showModeList = false
- const res = await getModeList1(sex, pageNum, pageSize)
- this.showModeList = true
- this.total = res.data.total
- console.log(res, '获取模板列表')
- this.modeList = res.data.list
- } catch (error) {
- console.log(error, 'error')
- Toast.fail(error.message)
- }
- },
- // 根据id获取模板详情
- async getModeDetail(id) {
- try {
- // const res = await getModeDetailById(id)
- // console.log(res, '根据id获取模板详情')
- const res = await personPatchApi(id)
- console.log(res, '根据id获取模板详情')
- const modelDetail = res.data
- await this.goSetPaperWork(modelDetail)
- // this.$router.push({
- // path: '/previewModel',
- // query: {
- // imgUrl: res.data.coverImg, //模版图片路径
- // mouldSmId: res.data.mouldSmId, //模版标识
- // modelId: res.data.id //模版id
- // }
- // })
-
- // this.goSetPaperWork(modelDetail);
- } catch (error) {
- console.log(error, 'error')
- Toast.fail(error.message)
- }
- },
-
- async saveToSetPaper(data, modelDetail) {
- try {
- console.log(modelDetail.coverImg, 11111111111111111)
- const res = await saveOrUpdateUserVideo(data)
- console.log(res, '保存或修改用户作品')
- this.$router.push({
- // path: '/previewModel',
- path: '/editModel',
- query: {
- id: res.data.id
- }
- })
- } catch (error) {
- console.log(error, 'error')
- Toast.fail(error.message)
- }
- },
- // 更改页码
- pageChange() {
- this.loadModeList(this.type, this.currentPage, this.pageSize)
- },
- /**
- * @description:根据模板详情跳转至选择文案
- * @param {type}modelDetail
- * @event:Go page => setPaperWork
- */
- goSetPaperWork(modelDetail) {
- const data = {
- // id: "",
- type: 1,
- personMouldId: modelDetail.id, //模板id
- personMouldSmId: modelDetail.mouldSmId //模板标识
- // voiceMouldId: "",
- // voiceMouldId: "",
- }
- this.saveToSetPaper(data, modelDetail)
- }
- },
- mounted() {
- this.inPage = true
- scrollToID('top')
- },
- created() {
- this.loadModeList(this.type, this.currentPage, this.pageSize)
- }
- }
- </script>
-
- <style lang="scss" scoped>
- ::v-deep .van-tab--active {
- font-size: 17px;
- font-weight: 700;
- }
- .page {
- transform: translateX(30%);
- opacity: 0;
- transition: all 0.5s; // global-transition
- padding-bottom: 25px;
- &.active {
- opacity: 1;
- transform: translateX(0);
- }
- .chooseModel {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 350px;
- height: 32px;
- margin: auto;
- margin-top: 15px;
- margin-bottom: 15px;
- div {
- width: 33.33%;
- height: 100%;
- line-height: 32px;
- text-align: center;
- border: 1px solid #46464661;
- &.active {
- background-color: #00ccff;
- color: #fff;
- }
- }
- }
- .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;
- }
- .typeOutSide {
- position: sticky;
- top: 0px;
- z-index: 99;
-
- .type {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 25px;
- margin-bottom: 20px;
- div {
- width: 94px;
- height: 35px;
- line-height: 35px;
- color: #fff;
- border: 1px solid #bfbfbf;
- background-color: #bfbfbf;
- border-radius: 5px;
- text-align: center;
- transition: all 0.3s;
-
- &.active {
- color: #fff;
- border: 1px solid #0068b7;
- background-color: #0068b7;
- }
- }
- }
- }
- .choose {
- padding-top: 20px;
- margin-bottom: 40px;
-
- .modeList {
- padding-left: 15px;
- padding-right: 15px;
- width: 100%;
- // margin-right: -20px;
-
- ::v-deep .vue-waterfall-column {
- width: 50% !important;
- margin: 0 !important;
- }
- .model {
- position: relative;
- // text-align: left;
- // margin-bottom: 15px;
- // max-width: 154px;
- // max-height: 273px;
- // opacity: 0.9;
- padding: 5px;
- &-padding {
- }
- img {
- border-radius: 8px;
- width: 100%;
- // height: 273px;
- }
- .modelName {
- margin-top: 10px;
- font-weight: 700;
- font-size: 16px;
- }
- .setPaper {
- position: absolute;
- top: 80%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #fff;
- font-size: 14px;
- font-weight: 600;
- background-color: #00000042;
- padding: 3px 5px;
- border-radius: 5px;
- transition: all 0.3s;
- opacity: 0;
- }
- &.active {
- transform: translateY(-3px);
- box-shadow: #60606082 0px 2px 2px 1px;
- opacity: 1;
- .setPaper {
- opacity: 1;
- }
- }
- }
- .alt {
- font-size: 18px;
- margin: 80px auto;
- height: 450px;
- line-height: 450px;
- }
- }
- }
- .blank {
- width: 1px;
- height: 1px;
- margin-bottom: 240px;
- }
- }
- </style>
|