| @@ -3,8 +3,9 @@ | |||
| <div class="logoBox"> | |||
| <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | |||
| <div class="userInfo"> | |||
| <div class="nickName" @click="go('/myPage')">我的作品</div> | |||
| <div class="userModel"> | |||
| <div class="nickName" v-if="!hasToken" @click="go('/login')">登录/注册</div> | |||
| <div class="nickName" v-if="hasToken" @click="go('/myPage')">我的作品</div> | |||
| <div class="userModel" v-if="hasToken"> | |||
| <!-- <img | |||
| class="userImg" | |||
| src="../../assets/img/user_black.png" | |||
| @@ -15,11 +16,7 @@ | |||
| src="../../assets/img/loginOut.png" | |||
| @click="loginOut()" | |||
| /> --> | |||
| <img | |||
| class="userImg" | |||
| src="../../assets/icon/icon-loginout.png" | |||
| @click="loginOut()" | |||
| /> | |||
| <img class="userImg" src="../../assets/icon/icon-loginout.png" @click="loginOut()" /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| @@ -27,19 +24,21 @@ | |||
| </template> | |||
| <script> | |||
| import Vue from 'vue' | |||
| import { mapState, mapActions } from 'vuex' | |||
| import { Toast, Dialog } from 'vant' | |||
| import { doLoginOut } from '../../api/login' | |||
| import Vue from 'vue'; | |||
| import { mapState, mapActions } from 'vuex'; | |||
| import { Toast, Dialog } from 'vant'; | |||
| import { doLoginOut } from '../../api/login'; | |||
| Vue.use(Toast) | |||
| Vue.use(Toast); | |||
| export default { | |||
| data() { | |||
| return {} | |||
| return { | |||
| hasToken: null | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: (state) => state.publicObj.characters | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| @@ -47,7 +46,7 @@ export default { | |||
| ...mapActions(['setCharacters']), | |||
| go(url) { | |||
| this.$router.push(url) | |||
| this.$router.push(url); | |||
| }, | |||
| loginOut() { | |||
| Dialog.confirm({ | |||
| @@ -55,25 +54,31 @@ export default { | |||
| message: '您确定要退出登录吗?' | |||
| }) | |||
| .then(() => { | |||
| this.goLoginOut() | |||
| this.goLoginOut(); | |||
| }) | |||
| .catch(() => { | |||
| return | |||
| }) | |||
| return; | |||
| }); | |||
| }, | |||
| async goLoginOut() { | |||
| try { | |||
| const res = await doLoginOut() | |||
| this.$router.push('/login') | |||
| localStorage.removeItem('AccessToken') | |||
| const res = await doLoginOut(); | |||
| // this.$router.push('/login'); | |||
| this.$router.push('/myPage'); | |||
| if (this.$route.name == 'myPage') { | |||
| window.location.reload(); | |||
| } | |||
| localStorage.removeItem('AccessToken'); | |||
| } catch (error) { | |||
| console.log(error, 'error') | |||
| Toast.fail(error.message) | |||
| console.log(error, 'error'); | |||
| Toast.fail(error.message); | |||
| } | |||
| } | |||
| }, | |||
| created() {} | |||
| } | |||
| created() { | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| } | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| @@ -539,6 +539,9 @@ export default { | |||
| ...mapActions(['setCharacters']), | |||
| goLogin() { | |||
| this.$router.push('/myPage'); | |||
| return; | |||
| const AccessToken = localStorage.getItem('AccessToken'); | |||
| if (AccessToken) { | |||
| this.$axios({ | |||
| @@ -1,9 +1,14 @@ | |||
| import Vue from 'vue' | |||
| import Vuex from 'vuex' | |||
| import publicObj from './modules/public.js' | |||
| import user from './modules/user.js' | |||
| Vue.use(Vuex) | |||
| const getters = { | |||
| user: state => state.user, | |||
| } | |||
| export default new Vuex.Store({ | |||
| state: { | |||
| }, | |||
| @@ -12,6 +17,7 @@ export default new Vuex.Store({ | |||
| actions: { | |||
| }, | |||
| modules: { | |||
| publicObj | |||
| } | |||
| publicObj, | |||
| user | |||
| },getters | |||
| }) | |||
| @@ -0,0 +1,18 @@ | |||
| let user = { | |||
| state: { | |||
| token: null | |||
| }, | |||
| mutations: { | |||
| // 设置token | |||
| setToken(state, newToken) { | |||
| state.token = newToken | |||
| }, | |||
| // 删除token | |||
| removeToken(state) { | |||
| state.token = null // 删除vuex的token | |||
| }, | |||
| }, | |||
| actions: { | |||
| } | |||
| } | |||
| export default user | |||
| @@ -88,6 +88,7 @@ p { | |||
| // font-size: 8px; | |||
| .floatRight { | |||
| margin-left: 5px!important; | |||
| } | |||
| .moveLayer { | |||
| img { | |||
| @@ -494,6 +494,7 @@ export default { | |||
| console.log(res.data.token, '登录数据'); | |||
| const token = res.data.token; | |||
| // 将token置入本地存储 | |||
| this.$store.commit('setToken', token); | |||
| localStorage.setItem('AccessToken', token); | |||
| // 查询有无邀请码 | |||
| await this.checkInviteCode(); | |||
| @@ -574,6 +575,10 @@ export default { | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| ::v-deep .el-icon-circle-close:before { | |||
| content: '' !important; | |||
| } | |||
| @keyframes rotate { | |||
| from { | |||
| transform: rotate(0deg); | |||
| @@ -118,14 +118,14 @@ export default { | |||
| 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.$router.push({ | |||
| path: '/previewModel', | |||
| query: { | |||
| imgUrl: res.data.coverImg, //模版图片路径 | |||
| mouldSmId: res.data.mouldSmId, //模版标识 | |||
| modelId: res.data.id //模版id | |||
| } | |||
| }); | |||
| // this.goSetPaperWork(modelDetail); | |||
| } catch (error) { | |||
| @@ -169,7 +169,8 @@ export default { | |||
| // voiceMouldId: "", | |||
| // voiceMouldId: "", | |||
| }; | |||
| this.saveToSetPaper(data, modelDetail); | |||
| // 保存草稿 | |||
| // this.saveToSetPaper(data, modelDetail); | |||
| } | |||
| }, | |||
| mounted() { | |||
| @@ -337,6 +337,7 @@ import { | |||
| saveOrUpdateUserVideo | |||
| } from '@/api/generateVideo'; | |||
| import { videoDetial, voiceList, voiceList2Api, systemBGIListApi, myBGIListApi, systemScListApi, myScListApi, delImgApi } from '@/api/editModel'; | |||
| import { personPatchApi } from '../../api/chooseModel'; | |||
| import { getModelDetailById } from '../../api/getPaper.js'; | |||
| Vue.use(-Toast); | |||
| @@ -609,10 +610,17 @@ export default { | |||
| console.log(data); | |||
| try { | |||
| const res = await saveOrUpdateUserVideo(data); | |||
| this.$route.query.modelId = null; | |||
| this.$route.query.id = res.data.id; | |||
| console.log(res, '保存或修改用户作品'); | |||
| // this.createVideo({ id: this.saveID }) | |||
| if (type == 1) { | |||
| this.createVideo({ id: this.$route.query.id }); | |||
| // if (this.$route.query.modelId) { | |||
| // this.createVideo({ id: this.$route.query.modelId }); | |||
| // } else { | |||
| // this.createVideo({ id: this.$route.query.id }); | |||
| // } | |||
| this.createVideo({ id: res.data.id }); | |||
| } | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| @@ -647,7 +655,7 @@ export default { | |||
| that.percentageData == 98; | |||
| } | |||
| // 重复调取此接口直到videoStatus == 2 || 3 | |||
| this.getVideo(that.$route.query.id); | |||
| this.getVideo(data.id); | |||
| // if (this.timerOver) { | |||
| // clearInterval(timer) | |||
| // this.isShowCover = false | |||
| @@ -704,6 +712,35 @@ export default { | |||
| Toast.fail(error.message); | |||
| } | |||
| }, | |||
| // 根据模版id获取信息 | |||
| async getPersonPatch(modelId) { | |||
| try { | |||
| this.contentLoading = true; | |||
| const res = await personPatchApi(modelId); | |||
| this.materialList.BGI = {}; | |||
| this.materialList.BGI.material = res.data.backgroundMaterial; | |||
| this.materialList.BGI.id = res.data.backgroundId + ''; | |||
| this.materialList.scList = []; | |||
| this.materialList.virtual = {}; | |||
| this.materialList.virtual.material = res.data.material; | |||
| this.materialList.virtual.id = res.data.id; | |||
| if (!this.materialList.virtual.w) { | |||
| this.materialList.virtual = { | |||
| ...this.materialList.virtual, | |||
| x: 100, | |||
| y: 0, | |||
| z: 0, | |||
| w: 1, | |||
| h: 1 | |||
| }; | |||
| } | |||
| this.videoType = res.data.videoType; | |||
| this.contentLoading = false; | |||
| } catch (error) { | |||
| console.log(error); | |||
| } | |||
| }, | |||
| // 根据作品ID获取信息 | |||
| async getDetailById(id) { | |||
| try { | |||
| @@ -771,6 +808,7 @@ export default { | |||
| // } | |||
| } catch (error) { | |||
| console.log(error, 'error'); | |||
| Toast.fail(error.message); | |||
| } | |||
| }, | |||
| @@ -977,8 +1015,11 @@ export default { | |||
| async mounted() { | |||
| this.inPage = true; | |||
| scrollToID('top'); | |||
| await this.getDetailById(this.$route.query.id); | |||
| if (this.$route.query.modelId) { | |||
| await this.getPersonPatch(this.$route.query.modelId); | |||
| } else { | |||
| await this.getDetailById(this.$route.query.id); | |||
| } | |||
| this.getSystemBGIList(); | |||
| this.getMyBGIListApi(); | |||
| this.getSystemScList(); | |||
| @@ -1000,8 +1041,8 @@ export default { | |||
| this.timeOuter = null; // 清除定时器 | |||
| clearInterval(this.timer); | |||
| this.timer = null; // 清除定时器 | |||
| await this.submit(2); // 保存草稿 | |||
| console.log('保存了'); | |||
| // await this.submit(2); // 保存草稿 | |||
| // console.log('保存了'); | |||
| } | |||
| }; | |||
| </script> | |||
| @@ -1324,12 +1365,15 @@ export default { | |||
| } | |||
| .list { | |||
| font-size: 10px; | |||
| width: 100%; | |||
| height: 170px; | |||
| overflow-y: scroll; | |||
| // scrollbar-width: none; | |||
| // -ms-overflow-style: none; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| justify-content: start; | |||
| align-items: flex-start; | |||
| flex-wrap: wrap; | |||
| margin-top: 10px; | |||
| @@ -1338,7 +1382,9 @@ export default { | |||
| justify-content: space-between; | |||
| padding: 12px; | |||
| margin-bottom: 10px; | |||
| width: 170px; | |||
| margin-left: 10px; | |||
| // width: 170px; | |||
| width: 45%; | |||
| height: 50px; | |||
| overflow: hidden; | |||
| background: rgba(186, 186, 189, 0.5); | |||
| @@ -1366,6 +1412,7 @@ export default { | |||
| } | |||
| .SoundList2 { | |||
| width: 100%; | |||
| overflow: hidden; | |||
| height: 240px; | |||
| // padding: 10px 10px 10px; | |||
| @@ -1392,8 +1439,45 @@ export default { | |||
| } | |||
| } | |||
| .list { | |||
| height: 240px; | |||
| margin-top: 0px; | |||
| font-size: 10px; | |||
| width: 100%; | |||
| height: 210px; | |||
| overflow-y: scroll; | |||
| // scrollbar-width: none; | |||
| // -ms-overflow-style: none; | |||
| display: flex; | |||
| justify-content: start; | |||
| align-items: flex-start; | |||
| flex-wrap: wrap; | |||
| margin-top: 10px; | |||
| .listItem { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 12px; | |||
| margin-bottom: 10px; | |||
| margin-left: 10px; | |||
| // width: 170px; | |||
| width: 45%; | |||
| height: 50px; | |||
| overflow: hidden; | |||
| background: rgba(186, 186, 189, 0.5); | |||
| border-radius: 24px; | |||
| color: #fff; | |||
| img { | |||
| width: 32px; | |||
| } | |||
| > div { | |||
| flex: 1; | |||
| margin-left: 12px; | |||
| } | |||
| } | |||
| .active { | |||
| background: #7264f5; | |||
| } | |||
| } | |||
| .list::-webkit-scrollbar { | |||
| width: 0; | |||
| @@ -12,21 +12,22 @@ | |||
| <script> | |||
| // 组件 | |||
| import Vue from 'vue' | |||
| import { Toast } from 'vant' | |||
| import { mapState, mapActions } from 'vuex' | |||
| import Vue from 'vue'; | |||
| import { Toast } from 'vant'; | |||
| import { mapState, mapActions } from 'vuex'; | |||
| // 工具 | |||
| import { scrollToID } from '../../utils' | |||
| import HeadTop from './../../components/common/head.vue' | |||
| import { scrollToID } from '../../utils'; | |||
| import HeadTop from './../../components/common/head.vue'; | |||
| // 请求 | |||
| import { getModelDetailById } from '../../api/getPaper.js' | |||
| Vue.use(Toast) | |||
| import { getModelDetailById } from '../../api/getPaper.js'; | |||
| Vue.use(Toast); | |||
| export default { | |||
| components: { | |||
| HeadTop | |||
| }, | |||
| data() { | |||
| return { | |||
| hasToken: null, | |||
| videoType: null, // 判断模版横屏竖屏 | |||
| inPage: false, | |||
| imgUrl: null, //模版图片地址 | |||
| @@ -34,11 +35,11 @@ export default { | |||
| mouldSmId: null, //模版标识 | |||
| saveID: null, //作品id | |||
| id: null | |||
| } | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState({ | |||
| characters: (state) => state.publicObj.characters | |||
| characters: state => state.publicObj.characters | |||
| }) | |||
| }, | |||
| @@ -46,38 +47,33 @@ export default { | |||
| ...mapActions(['setCharacters']), | |||
| // 点击立即制作 | |||
| handleMakeMpdel() { | |||
| if (!this.hasToken) { | |||
| this.$router.push('/login'); | |||
| } | |||
| this.$router.push({ | |||
| path: '/editModel', | |||
| query: { | |||
| // videoType: this.videoType, | |||
| // imgUrl: this.imgUrl, | |||
| // modelId: this.modelId, | |||
| // mouldSmId: this.mouldSmId, | |||
| // saveID: this.saveID | |||
| id: this.id | |||
| modelId: this.modelId | |||
| } | |||
| }) | |||
| }); | |||
| }, | |||
| go(url) { | |||
| this.$router.push(url) | |||
| this.$router.push(url); | |||
| } | |||
| }, | |||
| async created() { | |||
| // this.videoType = this.$route.query.videoType | |||
| // this.imgUrl = this.$route.query.imgUrl | |||
| // this.modelId = this.$route.query.modelId | |||
| // this.mouldSmId = this.$route.query.mouldSmId | |||
| // this.saveID = this.$route.query.saveID | |||
| this.id = this.$route.query.id | |||
| const res = await getModelDetailById(this.id) | |||
| this.imgUrl = res.data.personMould.imgUrl | |||
| this.modelId = this.$route.query.modelId; | |||
| this.imgUrl = this.$route.query.imgUrl; | |||
| // const res = await getModelDetailById(this.id); | |||
| // this.imgUrl = res.data.personMould.imgUrl; | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| }, | |||
| mounted() { | |||
| this.inPage = true | |||
| scrollToID('top') | |||
| this.inPage = true; | |||
| scrollToID('top'); | |||
| } | |||
| } | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| @@ -26,7 +26,7 @@ | |||
| <!-- 具体内容 --> | |||
| <div v-show="!showLoading"> | |||
| <!-- 列表样式--大图 --> | |||
| <div v-if="videoList.length == 0" style="height: 550px">暂无数据</div> | |||
| <div v-if="videoList.length == 0" :style="{ height: '250px', textAlign: 'center', lineHeight: '250px' }">暂无数据</div> | |||
| <!-- 新 修改v-if--> | |||
| <div v-if="waterfallBug"> | |||
| <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||
| @@ -140,6 +140,7 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| hasToken: null, // 判断有没有token来判断有没有登录 | |||
| showLoading: true, // 加载处理 | |||
| waterfallBug: true, // 解决瀑布流不显示bug | |||
| videoType: -1, //-1全部1竖屏2横屏 | |||
| @@ -288,6 +289,11 @@ export default { | |||
| * @description:获取作品列表 | |||
| */ | |||
| async loadVideoList(pageNum, pageSize, videoType) { | |||
| if (!this.hasToken) { | |||
| // this.$router.push('/login'); | |||
| Toast.fail('请您先登录!'); | |||
| return; | |||
| } | |||
| try { | |||
| this.showLoading = true; | |||
| this.waterfallBug = false; | |||
| @@ -336,6 +342,10 @@ export default { | |||
| * @description:查询用户邀请码状态 | |||
| */ | |||
| async checkInviteCode() { | |||
| if (!this.hasToken) { | |||
| this.$router.push('/chooseModel'); | |||
| return; | |||
| } | |||
| try { | |||
| const res = await doFindInviteCode(); | |||
| console.log(res, '查询用户邀请码数据'); | |||
| @@ -365,7 +375,13 @@ export default { | |||
| }, | |||
| async created() { | |||
| await this.loadVideoList(1, this.pageSize, this.videoType); | |||
| if (!this.hasToken) { | |||
| this.hasToken = localStorage.getItem('AccessToken'); | |||
| this.showLoading = false; | |||
| } | |||
| if (this.hasToken) { | |||
| await this.loadVideoList(1, this.pageSize, this.videoType); | |||
| } | |||
| } | |||
| }; | |||
| </script> | |||
| @@ -1,5 +1,8 @@ | |||
| // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
| const path = require('path'); | |||
| const resolve = dir => { | |||
| return path.join(__dirname, dir) | |||
| } | |||
| let timeStamp = new Date().getTime(); | |||
| let externals = {} | |||
| @@ -100,7 +103,22 @@ module.exports = { | |||
| return args | |||
| }) | |||
| config.module | |||
| .rule('svg') | |||
| .exclude.add(resolve('src/icons')) | |||
| .end() | |||
| config.module | |||
| .rule('icons') | |||
| .test(/\.svg$/) | |||
| .include.add(resolve('src/icons')) | |||
| .end() | |||
| .use('svg-sprite-loader') | |||
| .loader('svg-sprite-loader') | |||
| .options({ | |||
| symbolId: 'icon-[name]' | |||
| }) | |||
| .end() | |||