@@ -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() | |||