浏览代码

根据模版id进入编辑页

master
congzc 2 年前
父节点
当前提交
8c4b67c9b2
共有 11 个文件被更改,包括 229 次插入76 次删除
  1. +30
    -25
      src/components/common/head.vue
  2. +3
    -0
      src/components/home/home.vue
  3. +8
    -2
      src/store/index.js
  4. +18
    -0
      src/store/modules/user.js
  5. +1
    -0
      src/styles/index.scss
  6. +5
    -0
      src/views/login/login.vue
  7. +10
    -9
      src/views/model/chooseModel.vue
  8. +94
    -10
      src/views/model/editModel.vue
  9. +24
    -28
      src/views/model/previewModel.vue
  10. +18
    -2
      src/views/myPage/myPage.vue
  11. +18
    -0
      vue.config.js

+ 30
- 25
src/components/common/head.vue 查看文件

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


+ 3
- 0
src/components/home/home.vue 查看文件

@@ -539,6 +539,9 @@ export default {
...mapActions(['setCharacters']),

goLogin() {
this.$router.push('/myPage');
return;

const AccessToken = localStorage.getItem('AccessToken');
if (AccessToken) {
this.$axios({


+ 8
- 2
src/store/index.js 查看文件

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

+ 18
- 0
src/store/modules/user.js 查看文件

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

+ 1
- 0
src/styles/index.scss 查看文件

@@ -88,6 +88,7 @@ p {
// font-size: 8px;
.floatRight {
margin-left: 5px!important;
}
.moveLayer {
img {


+ 5
- 0
src/views/login/login.vue 查看文件

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


+ 10
- 9
src/views/model/chooseModel.vue 查看文件

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


+ 94
- 10
src/views/model/editModel.vue 查看文件

@@ -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;


+ 24
- 28
src/views/model/previewModel.vue 查看文件

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


+ 18
- 2
src/views/myPage/myPage.vue 查看文件

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


+ 18
- 0
vue.config.js 查看文件

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





正在加载...
取消
保存