|
- <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="title">选择模板</div> -->
- <!-- 老版吸顶tab栏 -->
- <!-- <div class="typeOutSide">
- <div class="type">
- <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)">
- 全部模板
- </div>
- <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)">
- 女性模板
- </div>
- <div :class="type == 1 ? 'active' : ''" @click="chooseType(1)">
- 男性模板
- </div>
- </div>
- </div> -->
- <!-- 模板列表 -->
- <div class="choose">
- <div class="modeList" v-masonry item-selector=".model" column-width="170">
- <div
- v-masonry-tile
- class="model"
- :class="currentId == item.id ? 'active' : ''"
- v-if="modeList.length >= 1"
- v-for="(item, index) in modeList"
- :key="index"
- @click="selectModel(item.id)"
- >
- <img :src="item.coverImg" alt="" />
- <div class="modelName">{{ item.title }}</div>
- <div class="setPaper">录入文案</div>
- </div>
- <div class="alt" v-if="modeList.length == 0">暂无可用模板</div>
- </div>
- </div>
- <div class="blank" v-if="modeList.length <= 2"></div>
- </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,
- getModeDetailById,
- saveOrUpdateUserVideo
- } from '../../api/chooseModel'
-
- Vue.use(Toast)
- export default {
- components: {
- HeadTop
- },
- data() {
- return {
- inPage: false,
- type: 0,
- currentId: '',
- modeList: [], // 模板列表
- tabList: ['全部', '男性', '女性']
- }
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters
- })
- },
-
- methods: {
- ...mapActions(['setCharacters']),
- //点击tab栏选择模板列表
- chooseType1(name, title) {
- this.type = this.tabList.findIndex((item) => item == title)
- this.loadModeList(this.type)
- },
- globalWatcher(e) {
- console.log(e, 'e')
- },
-
- go(url) {
- this.$router.push(url)
- },
-
- chooseModel(num) {
- this.phase = num
- },
-
- // chooseType(num) {
- // this.type = num;
- // this.loadModeList(num);
- // },
-
- selectModel(id) {
- if (this.currentId != id) {
- this.currentId = id
- } else {
- this.getModeDetail(id)
- }
- },
-
- // 获取模板列表
- async loadModeList(sex) {
- try {
- sex = sex == 0 ? '' : sex
- const res = await getModeList(sex)
- 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 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',
- query: {
- saveID: res.data.id,
- id: res.data.id,
- imgUrl: modelDetail.coverImg, //模版图片路径
- mouldSmId: modelDetail.mouldSmId, //模版标识
- modelId: modelDetail.id, //模版id
- modelDetail: JSON.stringify(modelDetail)
- }
- })
- } catch (error) {
- console.log(error, 'error')
- Toast.fail(error.message)
- }
- },
-
- /**
- * @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(2)
- }
- }
- </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 {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- // margin: auto;
- // padding: 0 23px;
- padding-left: 15px;
- width: 100%;
- margin-right: -20px;
-
- .model {
- position: relative;
- text-align: left;
- margin-bottom: 15px;
- // border: 1px solid #00000028;
- // padding: 8px;
- // width: 154px;
- max-width: 170px;
- // height: 305px;
- max-height: 310px;
- // transition: all 0.3s;
- opacity: 0.9;
- 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>
|