| @@ -23,6 +23,7 @@ | |||||
| "vue-cropper": "^0.5.11", | "vue-cropper": "^0.5.11", | ||||
| "vue-masonry": "^0.16.0", | "vue-masonry": "^0.16.0", | ||||
| "vue-router": "^3.2.0", | "vue-router": "^3.2.0", | ||||
| "vue-waterfall2": "^1.10.6", | |||||
| "vuex": "^3.4.0" | "vuex": "^3.4.0" | ||||
| }, | }, | ||||
| "devDependencies": { | "devDependencies": { | ||||
| @@ -17150,6 +17151,15 @@ | |||||
| "dev": true, | "dev": true, | ||||
| "license": "MIT" | "license": "MIT" | ||||
| }, | }, | ||||
| "node_modules/vue-waterfall2": { | |||||
| "version": "1.10.6", | |||||
| "resolved": "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz", | |||||
| "integrity": "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==", | |||||
| "dependencies": { | |||||
| "babel-runtime": "^6.26.0", | |||||
| "regenerator-runtime": "^0.13.1" | |||||
| } | |||||
| }, | |||||
| "node_modules/vuex": { | "node_modules/vuex": { | ||||
| "version": "3.6.2", | "version": "3.6.2", | ||||
| "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | ||||
| @@ -30665,6 +30675,15 @@ | |||||
| "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", | "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", | ||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "vue-waterfall2": { | |||||
| "version": "1.10.6", | |||||
| "resolved": "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz", | |||||
| "integrity": "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==", | |||||
| "requires": { | |||||
| "babel-runtime": "^6.26.0", | |||||
| "regenerator-runtime": "^0.13.1" | |||||
| } | |||||
| }, | |||||
| "vuex": { | "vuex": { | ||||
| "version": "3.6.2", | "version": "3.6.2", | ||||
| "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", | ||||
| @@ -22,6 +22,7 @@ | |||||
| "vue-cropper": "^0.5.11", | "vue-cropper": "^0.5.11", | ||||
| "vue-masonry": "^0.16.0", | "vue-masonry": "^0.16.0", | ||||
| "vue-router": "^3.2.0", | "vue-router": "^3.2.0", | ||||
| "vue-waterfall2": "^1.10.6", | |||||
| "vuex": "^3.4.0" | "vuex": "^3.4.0" | ||||
| }, | }, | ||||
| "devDependencies": { | "devDependencies": { | ||||
| @@ -1,6 +1,18 @@ | |||||
| import request from '@/utils/request' | import request from '@/utils/request' | ||||
| // https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload | // https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload | ||||
| // https://smapitest.malls.iformall.com/C/api/ | // https://smapitest.malls.iformall.com/C/api/ | ||||
| /** | |||||
| * @description 获取语音列表 | |||||
| * @returns personMouldId,paperwork | |||||
| */ | |||||
| export function voiceList(data) { | |||||
| return request({ | |||||
| url: `/api/voiceMould/voiceList?pageNum=1&pageSize=20`, | |||||
| method: 'POST', | |||||
| data | |||||
| }) | |||||
| } | |||||
| /** | /** | ||||
| * @description 试听MP3 | * @description 试听MP3 | ||||
| * @returns id | * @returns id | ||||
| @@ -11,6 +23,50 @@ export function videoDetial(id) { | |||||
| method: 'get', | method: 'get', | ||||
| }) | }) | ||||
| } | } | ||||
| /** | |||||
| * @description 查询系统背景 | |||||
| * @returns pageNum,pageSize,videoType | |||||
| */ | |||||
| export function systemBGIListApi(pageNum,pageSize,videoType) { | |||||
| return request({ | |||||
| url: `/api/materialMould/list?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| /** | |||||
| * @description 查询我上传的背景 | |||||
| * @returns pageNum,pageSize,videoType | |||||
| */ | |||||
| export function myBGIListApi(pageNum,pageSize,videoType) { | |||||
| return request({ | |||||
| url: `/api/materialMould/userList?type=4&pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| /** | |||||
| * @description 查询系统素材 | |||||
| * @returns pageNum,pageSize,videoType | |||||
| */ | |||||
| export function systemScListApi(pageNum,pageSize) { | |||||
| return request({ | |||||
| url: `/api/materialMould/list?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| /** | |||||
| * @description 查询我上传的素材 | |||||
| * @returns pageNum,pageSize,videoType | |||||
| */ | |||||
| export function myScListApi(pageNum,pageSize) { | |||||
| return request({ | |||||
| url: `/api/materialMould/userList?type=5&pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| /** | /** | ||||
| * @description 上传背景图 | * @description 上传背景图 | ||||
| * @returns data | * @returns data | ||||
| @@ -5,9 +5,9 @@ import request from '@/utils/request' | |||||
| * @param {number} pageParams (pageNum, pageSize) | * @param {number} pageParams (pageNum, pageSize) | ||||
| * @returns data | * @returns data | ||||
| */ | */ | ||||
| export function getVideoList(pageNum, pageSize) { | |||||
| export function getVideoList(pageNum, pageSize,videoType) { | |||||
| return request({ | return request({ | ||||
| url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}`, | |||||
| url: `/api/userVideo/list?pageNum=${pageNum}&pageSize=${pageSize}&videoType=${videoType}`, | |||||
| method: 'get' | method: 'get' | ||||
| }) | }) | ||||
| } | } | ||||
| @@ -1,9 +1,15 @@ | |||||
| <template> | <template> | ||||
| <div class="uploder"> | <div class="uploder"> | ||||
| <div class="change-photo-setter"> | |||||
| <van-uploader class="sett-item" :before-read="beforeRead"> | |||||
| <div style="height: 100%"><img :src="ImgUrl" alt="" /></div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| <div class="change-photo-setter" style="height: 240px; width: 160px"> | |||||
| <van-uploader | |||||
| ref="uploader" | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| style="height: 240px; width: 160px" | |||||
| > | |||||
| <div style="height: 240px; width: 160px"> | |||||
| <!-- <img :src="ImgUrl" alt="" /> --> | |||||
| </div> | |||||
| </van-uploader> | </van-uploader> | ||||
| </div> | </div> | ||||
| <div class="uploadava"> | <div class="uploadava"> | ||||
| @@ -47,11 +47,11 @@ export default { | |||||
| imgUrl: { | imgUrl: { | ||||
| default: false | default: false | ||||
| // type: String | // type: String | ||||
| }, | |||||
| materialList: { | |||||
| default: false, | |||||
| type: Object | |||||
| } | } | ||||
| // scList: { | |||||
| // default: false, | |||||
| // type: Array | |||||
| // } | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| @@ -63,49 +63,49 @@ export default { | |||||
| windowWidth: 0, | windowWidth: 0, | ||||
| windowHeight: 0, | windowHeight: 0, | ||||
| scale: 1, | scale: 1, | ||||
| domIndex: -1, //当前点击的图片 | |||||
| materialList: [ | |||||
| { | |||||
| text: '小div1', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 10, // 相对左上角XY坐标 | |||||
| y: 190, | |||||
| scale: 1, //缩放 | |||||
| zIndex: 1 //层级 | |||||
| }, | |||||
| { | |||||
| text: '小div2', | |||||
| url: 'img/BG@2x.b0cf224b.png', | |||||
| x: 100, | |||||
| y: 0, | |||||
| scale: 1, | |||||
| zIndex: 2 | |||||
| }, | |||||
| { | |||||
| text: '小div3', | |||||
| url: require('../assets/img/bg.png'), | |||||
| x: 0, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 3 | |||||
| }, | |||||
| { | |||||
| text: '小div4', | |||||
| url: require('../assets/img/cn.jpeg'), | |||||
| x: 100, | |||||
| y: 100, | |||||
| scale: 1, | |||||
| zIndex: 4 | |||||
| }, | |||||
| { | |||||
| text: '小div5', | |||||
| url: require('../assets/img/ft.png'), | |||||
| x: 100, | |||||
| y: 280, | |||||
| scale: 1, | |||||
| zIndex: 5 | |||||
| } | |||||
| ] | |||||
| domIndex: -1 //当前点击的图片 | |||||
| // materialList: [ | |||||
| // { | |||||
| // text: '小div1', | |||||
| // url: 'img/BG@2x.b0cf224b.png', | |||||
| // x: 10, // 相对左上角XY坐标 | |||||
| // y: 190, | |||||
| // scale: 1, //缩放 | |||||
| // zIndex: 1 //层级 | |||||
| // }, | |||||
| // { | |||||
| // text: '小div2', | |||||
| // url: 'img/BG@2x.b0cf224b.png', | |||||
| // x: 100, | |||||
| // y: 0, | |||||
| // scale: 1, | |||||
| // zIndex: 2 | |||||
| // }, | |||||
| // { | |||||
| // text: '小div3', | |||||
| // url: require('../assets/img/bg.png'), | |||||
| // x: 0, | |||||
| // y: 100, | |||||
| // scale: 1, | |||||
| // zIndex: 3 | |||||
| // }, | |||||
| // { | |||||
| // text: '小div4', | |||||
| // url: require('../assets/img/cn.jpeg'), | |||||
| // x: 100, | |||||
| // y: 100, | |||||
| // scale: 1, | |||||
| // zIndex: 4 | |||||
| // }, | |||||
| // { | |||||
| // text: '小div5', | |||||
| // url: require('../assets/img/ft.png'), | |||||
| // x: 100, | |||||
| // y: 280, | |||||
| // scale: 1, | |||||
| // zIndex: 5 | |||||
| // } | |||||
| // ] | |||||
| } | } | ||||
| }, | }, | ||||
| @@ -14,6 +14,9 @@ import "@/styles/reset.scss"; // 引入清除默认样式 | |||||
| import "@/styles/index.scss"; // 引入全局样式 | import "@/styles/index.scss"; // 引入全局样式 | ||||
| import { VueMasonryPlugin } from 'vue-masonry'; | import { VueMasonryPlugin } from 'vue-masonry'; | ||||
| import waterfall from 'vue-waterfall2' | |||||
| Vue.use(waterfall) | |||||
| Vue.use(VueMasonryPlugin); // 瀑布流插件 | Vue.use(VueMasonryPlugin); // 瀑布流插件 | ||||
| Vue.use(ElementUI); | Vue.use(ElementUI); | ||||
| Vue.use(Vant) | Vue.use(Vant) | ||||
| @@ -35,7 +35,6 @@ request.interceptors.response.use( | |||||
| let code = response.data.code | let code = response.data.code | ||||
| // 当token过期或损坏时 | // 当token过期或损坏时 | ||||
| if (code == 1052) { | if (code == 1052) { | ||||
| // if (1==1) { | |||||
| router.push("/login"); | router.push("/login"); | ||||
| Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
| return | return | ||||
| @@ -150,12 +150,7 @@ export default { | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/previewModel', | path: '/previewModel', | ||||
| query: { | query: { | ||||
| saveID: res.data.id, | |||||
| id: res.data.id, | |||||
| imgUrl: modelDetail.coverImg, //模版图片路径 | |||||
| mouldSmId: modelDetail.mouldSmId, //模版标识 | |||||
| modelId: modelDetail.id, //模版id | |||||
| modelDetail: JSON.stringify(modelDetail) | |||||
| id: res.data.id | |||||
| } | } | ||||
| }) | }) | ||||
| } catch (error) { | } catch (error) { | ||||
| @@ -279,13 +274,14 @@ export default { | |||||
| // padding: 0 23px; | // padding: 0 23px; | ||||
| padding-left: 15px; | padding-left: 15px; | ||||
| width: 100%; | width: 100%; | ||||
| margin-right: -20px; | |||||
| // margin-right: -20px; | |||||
| .model { | .model { | ||||
| position: relative; | position: relative; | ||||
| text-align: left; | text-align: left; | ||||
| margin-bottom: 15px; | margin-bottom: 15px; | ||||
| max-width: 170px; | |||||
| max-width: 154px; | |||||
| max-height: 273px; | |||||
| opacity: 0.9; | opacity: 0.9; | ||||
| padding: 5px; | padding: 5px; | ||||
| &-padding { | &-padding { | ||||
| @@ -5,9 +5,16 @@ | |||||
| <!-- 中间内容区 --> | <!-- 中间内容区 --> | ||||
| <div class="content"> | <div class="content"> | ||||
| <!-- 展示图片 --> | <!-- 展示图片 --> | ||||
| <div v-if="imgUrl" class="shouModelImg"> | |||||
| <div class="editPosition"> | |||||
| <EditPosition ref="EditPosition" :imgUrl="imgUrl"></EditPosition> | |||||
| <div class="shouModelImg"> | |||||
| <div | |||||
| class="editPosition" | |||||
| :class="videoType == 2 ? 'verticalmodel' : ''" | |||||
| > | |||||
| <EditPosition | |||||
| ref="EditPosition" | |||||
| :imgUrl="imgUrl" | |||||
| :materialList="materialList" | |||||
| ></EditPosition> | |||||
| </div> | </div> | ||||
| <!-- <img :src="imgUrl" alt="" /> --> | <!-- <img :src="imgUrl" alt="" /> --> | ||||
| <!-- 字幕 --> | <!-- 字幕 --> | ||||
| @@ -55,7 +62,7 @@ | |||||
| <div class="makeVideo" @click="submit">立即制作</div> | <div class="makeVideo" @click="submit">立即制作</div> | ||||
| <!-- 上移下移 --> | <!-- 上移下移 --> | ||||
| <div class="upAndBottomBtn"> | <div class="upAndBottomBtn"> | ||||
| <div class="moveLayer"> | |||||
| <div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''"> | |||||
| <div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | <div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | ||||
| <img | <img | ||||
| src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" | ||||
| @@ -64,11 +71,8 @@ | |||||
| 上移一层 | 上移一层 | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="moveLayer below"> | |||||
| <div | |||||
| class="btnContent active" | |||||
| @click="$refs.EditPosition.controlImg(4)" | |||||
| > | |||||
| <div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''"> | |||||
| <div class="btnContent" @click="$refs.EditPosition.controlImg(4)"> | |||||
| <img | <img | ||||
| src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" | ||||
| alt="" | alt="" | ||||
| @@ -172,7 +176,11 @@ | |||||
| :key="index" | :key="index" | ||||
| > | > | ||||
| <img src="../../assets/icon/icon-earphone.png" alt="" /> | <img src="../../assets/icon/icon-earphone.png" alt="" /> | ||||
| <div>{{ item.title }}</div> | |||||
| <div> | |||||
| {{ item.subTitle }}-{{ item.title }} | |||||
| <br /> | |||||
| {{ item.ageTypeStr }} | |||||
| </div> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| </div> | </div> | ||||
| @@ -180,6 +188,7 @@ | |||||
| </van-tabs> | </van-tabs> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 背景 --> | <!-- 背景 --> | ||||
| <div v-show="bottomTabActive == 2"> | <div v-show="bottomTabActive == 2"> | ||||
| <!-- 顶部文字 --> | <!-- 顶部文字 --> | ||||
| @@ -192,7 +201,7 @@ | |||||
| /> | /> | ||||
| 更换背景 | 更换背景 | ||||
| </div> | </div> | ||||
| <div @click="showTabSheet = !showTabSheet"> | |||||
| <div @click="sureImg"> | |||||
| <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -201,14 +210,14 @@ | |||||
| <!-- tab栏 --> | <!-- tab栏 --> | ||||
| <div class="myTab"> | <div class="myTab"> | ||||
| <div | <div | ||||
| @click="bjAction = 0" | |||||
| @click="changeShowBGIList(0)" | |||||
| class="myTab-item" | class="myTab-item" | ||||
| :class="{ active: bjAction == 0 }" | :class="{ active: bjAction == 0 }" | ||||
| > | > | ||||
| <img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 | <img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 | ||||
| </div> | </div> | ||||
| <div | <div | ||||
| @click="bjAction = 1" | |||||
| @click="changeShowBGIList(1)" | |||||
| class="myTab-item" | class="myTab-item" | ||||
| :class="{ active: bjAction == 1 }" | :class="{ active: bjAction == 1 }" | ||||
| > | > | ||||
| @@ -216,8 +225,8 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 展示 --> | <!-- 展示 --> | ||||
| <div v-if="!bjLibrary.length == 0">暂无数据</div> | |||||
| <div v-if="!bjLibrary.length != 0" class="myTab-show"> | |||||
| <!-- <div v-if="systemBGIList.length == 0">暂无数据</div> --> | |||||
| <div class="myTab-show"> | |||||
| <div class="myTab-show-title">图片<i></i></div> | <div class="myTab-show-title">图片<i></i></div> | ||||
| <div class="myTab-show-list"> | <div class="myTab-show-list"> | ||||
| <!-- 上传 --> | <!-- 上传 --> | ||||
| @@ -228,9 +237,9 @@ | |||||
| </div> | </div> | ||||
| <!-- 图片列表 --> | <!-- 图片列表 --> | ||||
| <div | <div | ||||
| @click="bjImgAction = index" | |||||
| @click="chooseImg(index, 'bj')" | |||||
| class="myTab-show-list-item" | class="myTab-show-list-item" | ||||
| v-for="(item, index) in 7" | |||||
| v-for="(item, index) in showBGIList" | |||||
| :key="index" | :key="index" | ||||
| > | > | ||||
| <div | <div | ||||
| @@ -246,12 +255,13 @@ | |||||
| × | × | ||||
| </div> | </div> | ||||
| <!-- 中间图片 --> | <!-- 中间图片 --> | ||||
| <img src="" alt="" /> | |||||
| <img :src="item.material" alt="" /> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 素材 --> | <!-- 素材 --> | ||||
| <div v-show="bottomTabActive == 3"> | <div v-show="bottomTabActive == 3"> | ||||
| <!-- 顶部文字 --> | <!-- 顶部文字 --> | ||||
| @@ -269,14 +279,14 @@ | |||||
| <!-- tab栏 --> | <!-- tab栏 --> | ||||
| <div class="myTab"> | <div class="myTab"> | ||||
| <div | <div | ||||
| @click="scAction = 0" | |||||
| @click="changeShowBGIList(3)" | |||||
| class="myTab-item" | class="myTab-item" | ||||
| :class="{ active: scAction == 0 }" | :class="{ active: scAction == 0 }" | ||||
| > | > | ||||
| <img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库 | |||||
| <img src="../../assets/icon/icon-folder@2x.png" alt="" /> 素材库 | |||||
| </div> | </div> | ||||
| <div | <div | ||||
| @click="scAction = 1" | |||||
| @click="changeShowBGIList(4)" | |||||
| class="myTab-item" | class="myTab-item" | ||||
| :class="{ active: scAction == 1 }" | :class="{ active: scAction == 1 }" | ||||
| > | > | ||||
| @@ -284,20 +294,21 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 展示 --> | <!-- 展示 --> | ||||
| <div v-if="bjLibrary.length == 0">暂无数据</div> | |||||
| <div v-if="scLibrary.length != 0" class="myTab-show"> | |||||
| <!-- <div v-if="showScList.length == 0">暂无数据</div> --> | |||||
| <div class="myTab-show"> | |||||
| <div class="myTab-show-title">图片<i></i></div> | <div class="myTab-show-title">图片<i></i></div> | ||||
| <div class="myTab-show-list"> | <div class="myTab-show-list"> | ||||
| <!-- 上传 --> | <!-- 上传 --> | ||||
| <div v-if="scAction == 1" class="myTab-show-list-upload"> | <div v-if="scAction == 1" class="myTab-show-list-upload"> | ||||
| <img src="../../assets/icon/icon-upload@2x.png" alt="" /> | <img src="../../assets/icon/icon-upload@2x.png" alt="" /> | ||||
| <input type="file" /> | |||||
| <!-- 上传背景组件 --> | |||||
| <CutImg class="CutImg"></CutImg> | |||||
| </div> | </div> | ||||
| <!-- 图片列表 --> | <!-- 图片列表 --> | ||||
| <div | <div | ||||
| @click="scImgAction = index" | @click="scImgAction = index" | ||||
| class="myTab-show-list-item" | class="myTab-show-list-item" | ||||
| v-for="(item, index) in 7" | |||||
| v-for="(item, index) in showScList" | |||||
| :key="index" | :key="index" | ||||
| > | > | ||||
| <div | <div | ||||
| @@ -313,7 +324,7 @@ | |||||
| × | × | ||||
| </div> | </div> | ||||
| <!-- 中间图片 --> | <!-- 中间图片 --> | ||||
| <img src="" alt="" /> | |||||
| <img :src="item.material" alt="" /> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -329,7 +340,7 @@ | |||||
| <script> | <script> | ||||
| // 组件 | // 组件 | ||||
| import Vue from 'vue' | import Vue from 'vue' | ||||
| import { Toast } from 'vant' | |||||
| import { Toast, Dialog } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | import { mapState, mapActions } from 'vuex' | ||||
| import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
| import CutImg from '../../components/CutImg.vue' | import CutImg from '../../components/CutImg.vue' | ||||
| @@ -343,15 +354,22 @@ import { franc } from 'franc' | |||||
| import { | import { | ||||
| doCreateVideo, | doCreateVideo, | ||||
| doFindVideoById, | doFindVideoById, | ||||
| getVoiceList, | |||||
| getVoiceList, // 获取声音列表,废弃 | |||||
| getBackGroundList, | getBackGroundList, | ||||
| doFindInviteCode, | doFindInviteCode, | ||||
| saveOrUpdateUserVideo | saveOrUpdateUserVideo | ||||
| } from '@/api/generateVideo' | } from '@/api/generateVideo' | ||||
| import { videoDetial } from '@/api/editModel' | |||||
| import { | |||||
| videoDetial, | |||||
| voiceList, | |||||
| systemBGIListApi, | |||||
| myBGIListApi, | |||||
| systemScListApi, | |||||
| myScListApi | |||||
| } from '@/api/editModel' | |||||
| import { getModelDetailById } from '../../api/getPaper.js' | import { getModelDetailById } from '../../api/getPaper.js' | ||||
| Vue.use(Toast) | |||||
| Vue.use(-Toast) | |||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| HeadTop, | HeadTop, | ||||
| @@ -360,9 +378,13 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| pageNum: 1, | |||||
| pageSize: 20, | |||||
| videoType: null, //判断横屏2还是竖屏1 | |||||
| audioUrl: null, // 声音试听 | audioUrl: null, // 声音试听 | ||||
| inPage: false, | inPage: false, | ||||
| imgUrl: false, | |||||
| imgUrl: false, // 背景图 | |||||
| materialList: {}, // 传给组件的素材,背景,数字人数据 | |||||
| sclist: [ | sclist: [ | ||||
| { | { | ||||
| text: '小div1', | text: '小div1', | ||||
| @@ -372,11 +394,11 @@ export default { | |||||
| scale: 1, //缩放 | scale: 1, //缩放 | ||||
| zIndex: 3 //层级 | zIndex: 3 //层级 | ||||
| } | } | ||||
| ], //素材列表 | |||||
| modelId: null, | |||||
| ], //该作品的素材列表 | |||||
| personMouldId: null, //选择数字人id | |||||
| mouldSmId: null, | mouldSmId: null, | ||||
| saveID: null, // 作品id | saveID: null, // 作品id | ||||
| inputTitle: '', | |||||
| inputTitle: '', // 作品标题 | |||||
| textareaContent: '', // 输入框内容 | textareaContent: '', // 输入框内容 | ||||
| bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
| showSubtitle: false, // 是否展示字幕 | showSubtitle: false, // 是否展示字幕 | ||||
| @@ -391,10 +413,12 @@ export default { | |||||
| bjImgAction: -1, // 选中背景图高亮 | bjImgAction: -1, // 选中背景图高亮 | ||||
| scAction: 0, // 素材:素材库和上传高亮 | scAction: 0, // 素材:素材库和上传高亮 | ||||
| scImgAction: -1, // 选中素材图高亮 | scImgAction: -1, // 选中素材图高亮 | ||||
| bjLibrary: [], // 背景库列表 | |||||
| myBjLibrary: [], // 我上传的背景库列表 | |||||
| scLibrary: [], // 素材库列表 | |||||
| myScLibrary: [] // 我上传的素材库列表 | |||||
| showBGIList: [], // 渲染时代替下面2个列表 | |||||
| systemBGIList: [], // 背景库列表 | |||||
| myBGIList: [], // 我上传的背景库列表 | |||||
| showScList: [], // 渲染时代替下面2个列表 | |||||
| systemScList: [], // 素材库列表 | |||||
| myScList: [] // 我上传的素材库列表 | |||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -425,10 +449,11 @@ export default { | |||||
| const language = franc(this.textareaContent) | const language = franc(this.textareaContent) | ||||
| console.log(language, '语种') | console.log(language, '语种') | ||||
| const data = { | const data = { | ||||
| personMouldId: this.personMouldId, | |||||
| paperwork: this.textareaContent | paperwork: this.textareaContent | ||||
| } | } | ||||
| try { | try { | ||||
| const res = await getVoiceList(data) | |||||
| const res = await voiceList(data) | |||||
| console.log(res, '获取声音列表') | console.log(res, '获取声音列表') | ||||
| this.soundItemList = res.data.list | this.soundItemList = res.data.list | ||||
| } catch (error) { | } catch (error) { | ||||
| @@ -452,6 +477,7 @@ export default { | |||||
| this.soundChoose = {} | this.soundChoose = {} | ||||
| } | } | ||||
| }, | }, | ||||
| // 提交合成视频 | |||||
| submit() { | submit() { | ||||
| // 组装参数 | // 组装参数 | ||||
| console.log(this.soundChoose.id) | console.log(this.soundChoose.id) | ||||
| @@ -460,7 +486,7 @@ export default { | |||||
| backgroundMouldSmId: '', //背景标识 | backgroundMouldSmId: '', //背景标识 | ||||
| id: this.saveID, //作品id | id: this.saveID, //作品id | ||||
| paperwork: this.textareaContent, //文本框内容 | paperwork: this.textareaContent, //文本框内容 | ||||
| personMouldId: this.modelId, //模版id | |||||
| personMouldId: this.personMouldId, //模版id | |||||
| personMouldSmId: this.mouldSmId, //模版标识 | personMouldSmId: this.mouldSmId, //模版标识 | ||||
| title: this.inputTitle, //文案标题 | title: this.inputTitle, //文案标题 | ||||
| type: 1, //写死type | type: 1, //写死type | ||||
| @@ -562,13 +588,32 @@ export default { | |||||
| async getDetailById(id) { | async getDetailById(id) { | ||||
| try { | try { | ||||
| const res = await getModelDetailById(id) | const res = await getModelDetailById(id) | ||||
| this.imgUrl = res.data.personMould.coverImg | |||||
| this.modelId = res.data.personMouldId | |||||
| console.log(JSON.parse(res.data.personMouldSm)) | |||||
| // console.log(JSON.parse(res.data.backgroundSm)) | |||||
| // console.log(JSON.parse(res.data.materialAllJson)) | |||||
| this.videoType = res.data.videoType | |||||
| // this.imgUrl = res.data.personMould.coverImg | |||||
| this.personMouldId = res.data.personMouldId | |||||
| this.mouldSmId = res.data.personMouldSmId | this.mouldSmId = res.data.personMouldSmId | ||||
| this.inputTitle = res.data.title | this.inputTitle = res.data.title | ||||
| this.textareaContent = res.data.paperwork || '' | this.textareaContent = res.data.paperwork || '' | ||||
| this.soundChoose.id = res.data.voiceMouldId | this.soundChoose.id = res.data.voiceMouldId | ||||
| this.soundChoose.mouldSmId = res.data.voiceMouldSmId | this.soundChoose.mouldSmId = res.data.voiceMouldSmId | ||||
| // { | |||||
| // "videoType": 1:竖版2:横版 | |||||
| // "personMouldId":选择数字人id | |||||
| // "personMouldSm":数字人json(title-数字人标题,mouldSmId-数字人模板编码,material-数字人图片,backgroundId-默认背景id,backgroundMaterial-默认背景图片), | |||||
| // "voiceMouldId":声音模板id | |||||
| // "voiceMouldSm":声音模板json(title-声音标题,mouldSmId-声音模板编码,personId-声音风格id,speakId-声音性格ID), | |||||
| // "backgroundId":背景ID | |||||
| // "backgroundSm":背景json(material-背景图片) | |||||
| // "materialIds":素材ids | |||||
| // "materialAllJson":素材+数字人层级关系json() | |||||
| // "paperwork":文案 | |||||
| // "title":标题 | |||||
| // } | |||||
| await this.loadVoice() // 获取音频列表 | await this.loadVoice() // 获取音频列表 | ||||
| this.soundItemListAction = this.soundItemList.findIndex((item) => { | this.soundItemListAction = this.soundItemList.findIndex((item) => { | ||||
| return item.id == this.soundChoose.id | return item.id == this.soundChoose.id | ||||
| @@ -581,24 +626,139 @@ export default { | |||||
| Toast.fail(error.message) | Toast.fail(error.message) | ||||
| } | } | ||||
| }, | }, | ||||
| // 点击选中背景图或者素材 | |||||
| chooseImg(index, type) { | |||||
| if (type == 'bj') { | |||||
| if (this.bjImgAction == -1 || this.bjImgAction != index) { | |||||
| this.bjImgAction = index | |||||
| } else if (this.bjImgAction == index) { | |||||
| this.bjImgAction = -1 | |||||
| } | |||||
| } | |||||
| if (type == 'sc') { | |||||
| if (this.scmgAction == -1) { | |||||
| this.bjImgAction = index | |||||
| } else if (this.scImgAction == index) { | |||||
| this.scImgAction = -1 | |||||
| } | |||||
| } | |||||
| }, | |||||
| // 点击对钩确定背景或者素材图 | |||||
| sureImg() { | |||||
| Dialog.confirm({ | |||||
| // title: '退出登录', | |||||
| message: '您确定要用这张背景图吗?' | |||||
| }) | |||||
| .then(() => { | |||||
| console.log('true') | |||||
| this.showTabSheet = false | |||||
| }) | |||||
| .catch(() => { | |||||
| console.log('false') | |||||
| this.showTabSheet = false | |||||
| return | |||||
| }) | |||||
| }, | |||||
| // 切换背景图的展示列表 | |||||
| changeShowBGIList(type) { | |||||
| if (type == 0) { | |||||
| this.bjAction = 0 | |||||
| this.showBGIList = this.systemBGIList | |||||
| } | |||||
| if (type == 1) { | |||||
| this.bjAction = 1 | |||||
| this.showBGIList = this.myBGIList | |||||
| } | |||||
| if (type == 3) { | |||||
| this.scAction = 0 | |||||
| this.showScList = this.systemScList | |||||
| } | |||||
| if (type == 4) { | |||||
| this.scAction = 1 | |||||
| this.showScList = this.myScList | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:获取系统背景图 | |||||
| */ | |||||
| async getSystemBGIList() { | |||||
| const res = await systemBGIListApi( | |||||
| this.pageNum, | |||||
| this.pageSize, | |||||
| this.videoType | |||||
| ) | |||||
| this.systemBGIList = res.data.list | |||||
| this.showBGIList = this.systemBGIList | |||||
| }, | |||||
| /** | |||||
| * @description:获取我上传的背景图 | |||||
| */ | |||||
| async getMyBGIListApi() { | |||||
| const res = await myBGIListApi( | |||||
| this.pageNum, | |||||
| this.pageSize, | |||||
| this.videoType | |||||
| ) | |||||
| this.myBGIList = res.data.list | |||||
| }, | |||||
| /** | |||||
| * @description:获取系统素材 | |||||
| */ | |||||
| async getSystemScList() { | |||||
| const res = await systemScListApi(this.pageNum, this.pageSize) | |||||
| this.systemScList = res.data.list | |||||
| this.showScList = this.systemScList | |||||
| }, | |||||
| /** | |||||
| * @description:获取我上传的素材 | |||||
| */ | |||||
| async getMyScListApi() { | |||||
| const res = await myScListApi(this.pageNum, this.pageSize) | |||||
| this.myScList = res.data.list | |||||
| }, | |||||
| go(url) { | go(url) { | ||||
| this.$router.push(url) | this.$router.push(url) | ||||
| } | } | ||||
| }, | }, | ||||
| async created() { | async created() { | ||||
| // 判断是不是草稿或者生成失败的情况 | |||||
| this.imgUrl = this.$route.query.imgUrl | |||||
| this.modelId = this.$route.query.modelId | |||||
| this.mouldSmId = this.$route.query.mouldSmId | |||||
| this.saveID = this.$route.query.saveID | |||||
| if (this.$route.query.modify) { | |||||
| console.log(this.$route.query.id) | |||||
| await this.getDetailById(this.$route.query.id) | |||||
| } | |||||
| await this.getDetailById(this.$route.query.id) | |||||
| this.getSystemBGIList() | |||||
| this.getMyBGIListApi() | |||||
| this.getSystemScList() | |||||
| this.getMyScListApi() | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true | this.inPage = true | ||||
| scrollToID('top') | scrollToID('top') | ||||
| // window.addEventListener( | |||||
| // 'popstate', | |||||
| // Dialog.confirm({ | |||||
| // // title: '退出登录', | |||||
| // message: '您还未编辑完成,需要保存为草稿吗?' | |||||
| // }) | |||||
| // .then(async () => { | |||||
| // const res = await that.submit() | |||||
| // next() | |||||
| // }) | |||||
| // .catch(() => { | |||||
| // next() | |||||
| // }) | |||||
| // ) | |||||
| }, | |||||
| beforeRouteLeave(to, from, next) { | |||||
| let that = this | |||||
| Dialog.confirm({ | |||||
| // title: '退出登录', | |||||
| message: '您还未编辑完成,需要保存为草稿吗?' | |||||
| }) | |||||
| .then(async () => { | |||||
| const res = await that.submit() | |||||
| next() | |||||
| }) | |||||
| .catch(() => { | |||||
| next() | |||||
| }) | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| @@ -606,13 +766,23 @@ export default { | |||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .editPosition { | .editPosition { | ||||
| position: relative; | position: relative; | ||||
| width: 200px; | |||||
| height: 350px; | |||||
| width: 216px; | |||||
| height: 384px; | |||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| background-color: pink; | background-color: pink; | ||||
| } | } | ||||
| .verticalmodel { | |||||
| width: 384px !important; | |||||
| height: 216px !important; | |||||
| margin-bottom: 50px; | |||||
| } | |||||
| .CutImg { | .CutImg { | ||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | } | ||||
| .page { | .page { | ||||
| // transform会导致其子元素固定定位失效 | // transform会导致其子元素固定定位失效 | ||||
| @@ -743,9 +913,9 @@ export default { | |||||
| align-items: center; | align-items: center; | ||||
| justify-content: center; | justify-content: center; | ||||
| top: 20%; | top: 20%; | ||||
| left: 290px; | |||||
| padding-left: 10px; | |||||
| width: 80px; | |||||
| right: 5px; | |||||
| // padding-left: 10px; | |||||
| width: 70px; | |||||
| height: 22px; | height: 22px; | ||||
| font-size: 10px; | font-size: 10px; | ||||
| line-height: 28px; | line-height: 28px; | ||||
| @@ -754,7 +924,10 @@ export default { | |||||
| background-color: rgba(255, 255, 255, 1); | background-color: rgba(255, 255, 255, 1); | ||||
| border-radius: 11px; | border-radius: 11px; | ||||
| } | } | ||||
| .moveLayer1 { | |||||
| top: 38% !important; | |||||
| left: 20% !important; | |||||
| } | |||||
| img { | img { | ||||
| vertical-align: middle; | vertical-align: middle; | ||||
| width: 10px; | width: 10px; | ||||
| @@ -765,6 +938,10 @@ export default { | |||||
| .below { | .below { | ||||
| top: 25%; | top: 25%; | ||||
| } | } | ||||
| .below1 { | |||||
| top: 38% !important; | |||||
| left: 60% !important; | |||||
| } | |||||
| .active { | .active { | ||||
| // opacity: 0.5; | // opacity: 0.5; | ||||
| @@ -964,7 +1141,7 @@ export default { | |||||
| z-index: 9; | z-index: 9; | ||||
| img { | img { | ||||
| background: red; | |||||
| // background: red; | |||||
| width: 80px; | width: 80px; | ||||
| height: 120px; | height: 120px; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| @@ -18,7 +18,8 @@ import { mapState, mapActions } from 'vuex' | |||||
| // 工具 | // 工具 | ||||
| import { scrollToID } from '../../utils' | import { scrollToID } from '../../utils' | ||||
| import HeadTop from './../../components/common/head.vue' | import HeadTop from './../../components/common/head.vue' | ||||
| // 请求 | |||||
| import { getModelDetailById } from '../../api/getPaper.js' | |||||
| Vue.use(Toast) | Vue.use(Toast) | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| @@ -26,11 +27,13 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| videoType: null, // 判断模版横屏竖屏 | |||||
| inPage: false, | inPage: false, | ||||
| imgUrl: null, //模版图片地址 | imgUrl: null, //模版图片地址 | ||||
| modelId: null, //模版id | modelId: null, //模版id | ||||
| mouldSmId: null, //模版标识 | mouldSmId: null, //模版标识 | ||||
| saveID: null //作品id | |||||
| saveID: null, //作品id | |||||
| id: null | |||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| @@ -46,10 +49,12 @@ export default { | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/editModel', | path: '/editModel', | ||||
| query: { | query: { | ||||
| imgUrl: this.imgUrl, | |||||
| modelId: this.modelId, | |||||
| mouldSmId: this.mouldSmId, | |||||
| saveID: this.saveID | |||||
| // videoType: this.videoType, | |||||
| // imgUrl: this.imgUrl, | |||||
| // modelId: this.modelId, | |||||
| // mouldSmId: this.mouldSmId, | |||||
| // saveID: this.saveID | |||||
| id: this.id | |||||
| } | } | ||||
| }) | }) | ||||
| }, | }, | ||||
| @@ -58,11 +63,15 @@ export default { | |||||
| this.$router.push(url) | this.$router.push(url) | ||||
| } | } | ||||
| }, | }, | ||||
| created() { | |||||
| this.imgUrl = this.$route.query.imgUrl | |||||
| this.modelId = this.$route.query.modelId | |||||
| this.mouldSmId = this.$route.query.mouldSmId | |||||
| this.saveID = this.$route.query.saveID | |||||
| 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 | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true | this.inPage = true | ||||
| @@ -20,17 +20,63 @@ | |||||
| class="floatRight" | class="floatRight" | ||||
| ><img src="../../assets/icon/icon-list1.png" alt="" | ><img src="../../assets/icon/icon-list1.png" alt="" | ||||
| /></span> | /></span> | ||||
| <span class="floatRight">只看竖屏</span> | |||||
| <span class="floatRight">只看横屏</span> | |||||
| <span class="floatRight" @click="getNewList(1)">只看竖屏</span> | |||||
| <span class="floatRight" @click="getNewList(2)">只看横屏</span> | |||||
| </div> | </div> | ||||
| <!-- 具体内容 --> | <!-- 具体内容 --> | ||||
| <!-- 列表样式--大图 --> | <!-- 列表样式--大图 --> | ||||
| <div v-if="videoList.length == 0">暂无数据</div> | |||||
| <!-- 新 修改v-if--> | |||||
| <waterfall | |||||
| v-if="videoList.length != 0" | |||||
| v-show="listActive == 1" | |||||
| class="waterFall" | |||||
| :col="2" | |||||
| :data="videoList" | |||||
| > | |||||
| <div | |||||
| v-for="(item, index) in videoList" | |||||
| class="waterFall-item" | |||||
| :key="item.id ? item.id : index" | |||||
| @click="goDetail(item)" | |||||
| > | |||||
| <div class="waterFall-item-paddding"> | |||||
| <img :src="index == 1 ? defaultImg : defaultImg1" alt="" /> | |||||
| <!-- 渐变遮罩层 --> | |||||
| <div class="waterFall-item-mask"> | |||||
| <div>{{ item.title || '暂无' }}</div> | |||||
| <div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
| <div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
| <div> | |||||
| 创建时间:{{ | |||||
| changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
| }} | |||||
| </div> | |||||
| </div> | |||||
| <!-- 视频状态 草稿还是未完成还是失败 --> | |||||
| <div class="waterFall-item-state"> | |||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
| </div> | |||||
| <!-- 删除 --> | |||||
| <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||||
| <img src="../../assets/icon/icon-trash.png" alt="" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </waterfall> | |||||
| <!-- 旧 修改v-if --> | |||||
| <div | <div | ||||
| v-if="videoList.length == 0" | |||||
| v-show="listActive == 1" | v-show="listActive == 1" | ||||
| v-masonry | v-masonry | ||||
| class="waterFall" | class="waterFall" | ||||
| item-selector=".waterFall-item" | item-selector=".waterFall-item" | ||||
| column-width="170" | column-width="170" | ||||
| :transition-duration="'0.3s'" | |||||
| > | > | ||||
| <div | <div | ||||
| v-masonry-tile | v-masonry-tile | ||||
| @@ -181,6 +227,7 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| videoType: 1, //1竖屏2横屏 | |||||
| showPopup: false, // 编辑和删除显示隐藏 | showPopup: false, // 编辑和删除显示隐藏 | ||||
| clickItem: -1, // 弹出层显示隐藏 | clickItem: -1, // 弹出层显示隐藏 | ||||
| showTrue: true, // 弹出层显示隐藏 | showTrue: true, // 弹出层显示隐藏 | ||||
| @@ -205,6 +252,12 @@ export default { | |||||
| methods: { | methods: { | ||||
| ...mapActions(['setCharacters']), | ...mapActions(['setCharacters']), | ||||
| // 横屏竖屏列表 | |||||
| getNewList(videoType) { | |||||
| this.videoType = videoType | |||||
| this.loadVideoList(1, this.pageSize, videoType) | |||||
| }, | |||||
| closeDialog() { | closeDialog() { | ||||
| Dialog.close | Dialog.close | ||||
| }, | }, | ||||
| @@ -222,7 +275,7 @@ export default { | |||||
| }, | }, | ||||
| pageChange() { | pageChange() { | ||||
| this.loadVideoList(this.currentPage, this.pageSize) | |||||
| this.loadVideoList(this.currentPage, this.pageSize, this.videoType) | |||||
| }, | }, | ||||
| // 点击空白区域退出提示 | // 点击空白区域退出提示 | ||||
| @@ -259,12 +312,13 @@ export default { | |||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/editModel', | path: '/editModel', | ||||
| query: { | query: { | ||||
| saveID: item.id, | |||||
| id: item.id, | |||||
| imgUrl: item.id, | |||||
| modelId: item.id, | |||||
| mouldSmId: item.id, | |||||
| modify: true | |||||
| // videoType: item.videoType, | |||||
| // saveID: item.id, | |||||
| id: item.id | |||||
| // imgUrl: item.id, | |||||
| // modelId: item.id, | |||||
| // mouldSmId: item.id, | |||||
| // modify: true | |||||
| } | } | ||||
| }) | }) | ||||
| } | } | ||||
| @@ -277,7 +331,8 @@ export default { | |||||
| else if (status == 2) { | else if (status == 2) { | ||||
| const url = item.videoPathUri + item.videoPath | const url = item.videoPathUri + item.videoPath | ||||
| this.$router.push({ | this.$router.push({ | ||||
| path: '/downloadVideo', | |||||
| // path: '/downloadVideo', | |||||
| path: '/videoDownload', | |||||
| query: { | query: { | ||||
| videoId: item.videoId, | videoId: item.videoId, | ||||
| videoUrl: url | videoUrl: url | ||||
| @@ -306,7 +361,11 @@ export default { | |||||
| }) | }) | ||||
| .then(async () => { | .then(async () => { | ||||
| await this.deleteVideoById(id) | await this.deleteVideoById(id) | ||||
| this.loadVideoList(this.currentPage, this.pageSize) | |||||
| await this.loadVideoList( | |||||
| this.currentPage, | |||||
| this.pageSize, | |||||
| this.videoType | |||||
| ) | |||||
| }) | }) | ||||
| .catch(() => { | .catch(() => { | ||||
| return | return | ||||
| @@ -316,9 +375,9 @@ export default { | |||||
| /** | /** | ||||
| * @description:获取作品列表 | * @description:获取作品列表 | ||||
| */ | */ | ||||
| async loadVideoList(pageNum, pageSize) { | |||||
| async loadVideoList(pageNum, pageSize, videoType) { | |||||
| try { | try { | ||||
| const res = await getVideoList(pageNum, pageSize) | |||||
| const res = await getVideoList(pageNum, pageSize, videoType) | |||||
| console.log(res, '获取作品列表') | console.log(res, '获取作品列表') | ||||
| this.videoList = res.data.list | this.videoList = res.data.list | ||||
| this.total = res.data.total | this.total = res.data.total | ||||
| @@ -388,7 +447,7 @@ export default { | |||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.loadVideoList(1, this.pageSize) | |||||
| this.loadVideoList(1, this.pageSize, this.videoType) | |||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| @@ -403,6 +462,7 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| .page { | .page { | ||||
| width: 100%; | |||||
| transform: translateX(30%); | transform: translateX(30%); | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: all 0.5s; // global-transition | transition: all 0.5s; // global-transition | ||||
| @@ -445,6 +505,7 @@ export default { | |||||
| border-radius: 16px; | border-radius: 16px; | ||||
| } | } | ||||
| .item { | .item { | ||||
| width: 100%; | |||||
| padding: 15px 10px; | padding: 15px 10px; | ||||
| .title { | .title { | ||||
| font-size: 16px; | font-size: 16px; | ||||
| @@ -490,8 +551,15 @@ export default { | |||||
| .videoInfo { | .videoInfo { | ||||
| flex: 1; | flex: 1; | ||||
| margin-left: 12px; | margin-left: 12px; | ||||
| white-space: nowrap; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| .videoName { | .videoName { | ||||
| width: 100%; | |||||
| font-size: 16px; | font-size: 16px; | ||||
| white-space: nowrap; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| font-weight: 600; | font-weight: 600; | ||||
| } | } | ||||
| .createTime { | .createTime { | ||||
| @@ -678,14 +746,14 @@ export default { | |||||
| // 瀑布流 | // 瀑布流 | ||||
| .waterFall { | .waterFall { | ||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| justify-content: space-between; | |||||
| width: 100%; | |||||
| // display: flex; | |||||
| // flex-wrap: wrap; | |||||
| // justify-content: space-between; | |||||
| // width: 100%; | |||||
| width: 350px; | |||||
| &-item { | &-item { | ||||
| // max-width: 355px; //非瀑布流 | |||||
| max-width: 170px; | |||||
| max-height: 300px; | |||||
| // max-width: 150px; | |||||
| // max-height: 270px; | |||||
| padding: 5px; | padding: 5px; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| @@ -693,7 +761,9 @@ export default { | |||||
| position: relative; | position: relative; | ||||
| border-radius: 12px; | border-radius: 12px; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| width: 160px; | |||||
| // width: 160px; | |||||
| max-width: 162px; | |||||
| max-height: 288px; | |||||
| // padding: 5px; | // padding: 5px; | ||||
| } | } | ||||
| img { | img { | ||||
| @@ -7485,7 +7485,7 @@ | |||||
| "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz" | "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz" | ||||
| "version" "0.11.1" | "version" "0.11.1" | ||||
| "regenerator-runtime@^0.13.11": | |||||
| "regenerator-runtime@^0.13.1", "regenerator-runtime@^0.13.11": | |||||
| "integrity" "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" | "integrity" "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" | ||||
| "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz" | "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz" | ||||
| "version" "0.13.11" | "version" "0.13.11" | ||||
| @@ -9196,6 +9196,14 @@ | |||||
| "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz" | "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz" | ||||
| "version" "1.9.1" | "version" "1.9.1" | ||||
| "vue-waterfall2@^1.10.6": | |||||
| "integrity" "sha512-roL8gYdFkWcpqeUqci8+RPj4rCDMrdmiSaZ2V7MZSy1vkYmfLpBPxHn1OshWPefBYGyilasnBqdQPUeL3ddrbw==" | |||||
| "resolved" "https://registry.npmmirror.com/vue-waterfall2/-/vue-waterfall2-1.10.6.tgz" | |||||
| "version" "1.10.6" | |||||
| dependencies: | |||||
| "babel-runtime" "^6.26.0" | |||||
| "regenerator-runtime" "^0.13.1" | |||||
| "vue@^2.0.0", "vue@^2.0.0 || >=3.0.0", "vue@^2.5.17", "vue@^2.6.11", "vue@^3.0.0-0 || ^2.6.0", "vue@>= 2.6.0": | "vue@^2.0.0", "vue@^2.0.0 || >=3.0.0", "vue@^2.5.17", "vue@^2.6.11", "vue@^3.0.0-0 || ^2.6.0", "vue@>= 2.6.0": | ||||
| "integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==" | "integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==" | ||||
| "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz" | "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz" | ||||