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