@@ -18,10 +18,14 @@ npm run dev | |||||
npm run build | npm run build | ||||
``` | ``` | ||||
**若要稳定运行此项目,请确保node版本为v10.24.1,且运行忽略node版本检查** | |||||
**若要稳定运行此项目,请确保node版本为v16.14.0,且运行忽略node版本检查** | |||||
### sass-loader版本7.0.3 | |||||
### node-sass版本6.0.1 | |||||
``` | ``` | ||||
yarn config set ignore-engines true | yarn config set ignore-engines true | ||||
``` | ``` | ||||
### 测试环境baseURL = 'https://smapitest.malls.iformall.com/C' | |||||
项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 | 项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 |
@@ -1,12 +1,7 @@ | |||||
<template> | <template> | ||||
<div class="uploder"> | <div class="uploder"> | ||||
<div class="change-photo-setter" style="height: 240px; width: 160px"> | <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" | |||||
> | |||||
<van-uploader ref="uploader" class="sett-item" :before-read="beforeRead" style="height: 240px; width: 160px"> | |||||
<div style="height: 240px; width: 160px"> | <div style="height: 240px; width: 160px"> | ||||
<!-- <img :src="ImgUrl" alt="" /> --> | <!-- <img :src="ImgUrl" alt="" /> --> | ||||
</div> | </div> | ||||
@@ -14,24 +9,12 @@ | |||||
</div> | </div> | ||||
<div class="uploadava"> | <div class="uploadava"> | ||||
<!-- van-popup有bug,某些1情况需要绑定app为根 --> | <!-- van-popup有bug,某些1情况需要绑定app为根 --> | ||||
<van-popup | |||||
:get-container="this.isAndroid ? '' : '#app'" | |||||
class="vanPopup" | |||||
duration="0" | |||||
v-model="showCropper" | |||||
position="top" | |||||
:style="{ height: '100%' }" | |||||
> | |||||
<van-popup :get-container="this.isAndroid ? '' : '#app'" class="vanPopup" duration="0" v-model="showCropper" position="top" :style="{ height: '100%' }"> | |||||
<div class="cropper-container" :style="{ height: '94vh' }"> | <div class="cropper-container" :style="{ height: '94vh' }"> | ||||
<van-loading | |||||
v-show="loadingShow" | |||||
size="50" | |||||
color="#fff" | |||||
vertical | |||||
text-color="#fff" | |||||
>上传中...</van-loading | |||||
> | |||||
<van-loading v-show="loadingShow" size="50" color="#fff" vertical text-color="#fff">上传中...</van-loading> | |||||
<!-- 切图组件 --> | |||||
<vueCropper | <vueCropper | ||||
style="background-image: none" | |||||
ref="cropper" | ref="cropper" | ||||
:img="option.img" | :img="option.img" | ||||
:outputSize="option.outputSize" | :outputSize="option.outputSize" | ||||
@@ -50,14 +33,8 @@ | |||||
:infoTrue="option.infoTrue" | :infoTrue="option.infoTrue" | ||||
:fixedBox="option.fixedBox" | :fixedBox="option.fixedBox" | ||||
:high="option.high" | :high="option.high" | ||||
:mode="option.mode" | |||||
/> | |||||
<van-nav-bar | |||||
left-text="取消" | |||||
right-text="确定" | |||||
@click-left="onClickLeft" | |||||
@click-right="onClickRight" | |||||
/> | |||||
:mode="option.mode" /> | |||||
<van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | |||||
</div> | </div> | ||||
</van-popup> | </van-popup> | ||||
</div> | </div> | ||||
@@ -65,12 +42,12 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import { awsImgUpload } from '@/api/editModel' | |||||
import { Toast } from 'vant' | |||||
import { VueCropper } from 'vue-cropper' | |||||
import { scrollToID, getDeviceType } from '../utils' | |||||
import { saveImgApi } from '../api/editModel' | |||||
import { watch } from 'vue' | |||||
import { awsImgUpload } from '@/api/editModel'; | |||||
import { Toast } from 'vant'; | |||||
import { VueCropper } from 'vue-cropper'; | |||||
import { scrollToID, getDeviceType } from '../utils'; | |||||
import { saveImgApi } from '../api/editModel'; | |||||
import { watch } from 'vue'; | |||||
export default { | export default { | ||||
name: 'uploadAva', | name: 'uploadAva', | ||||
components: { | components: { | ||||
@@ -106,7 +83,8 @@ export default { | |||||
img: '', | img: '', | ||||
outputSize: 0.8, | outputSize: 0.8, | ||||
info: false, // 裁剪框的大小信息 | info: false, // 裁剪框的大小信息 | ||||
outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
outputType: 'png', // 裁剪生成图片的格式 | |||||
canScale: true, // 图片是否允许滚轮缩放 | canScale: true, // 图片是否允许滚轮缩放 | ||||
autoCrop: true, // 是否默认生成截图框 | autoCrop: true, // 是否默认生成截图框 | ||||
autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | ||||
@@ -123,71 +101,71 @@ export default { | |||||
mode: '100% auto' // 图片默认渲染方式 | mode: '100% auto' // 图片默认渲染方式 | ||||
}, | }, | ||||
loadingShow: false // 是否展示loading | loadingShow: false // 是否展示loading | ||||
} | |||||
}; | |||||
}, | }, | ||||
created() { | created() { | ||||
const deviceType = getDeviceType() | |||||
this.isAndroid = false | |||||
const deviceType = getDeviceType(); | |||||
this.isAndroid = false; | |||||
if (!deviceType) { | if (!deviceType) { | ||||
// 设备类型为pc | // 设备类型为pc | ||||
this.isAndroid = false | |||||
this.isAndroid = false; | |||||
} else { | } else { | ||||
if (deviceType[0] == 'Android') { | if (deviceType[0] == 'Android') { | ||||
// 设备类型为安卓 | // 设备类型为安卓 | ||||
this.isAndroid = true | |||||
this.isAndroid = true; | |||||
} else { | } else { | ||||
// 其他设备 | // 其他设备 | ||||
this.isAndroid = false | |||||
this.isAndroid = false; | |||||
} | } | ||||
} | } | ||||
if (this.type == 4 && this.videoType == 1) { | if (this.type == 4 && this.videoType == 1) { | ||||
this.option.autoCropWidth = 1080 + 'px' // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1920 + 'px' // 默认生成截图框高度 | |||||
this.option.fixed = true | |||||
this.option.fixedNumber = [1080, 1920] | |||||
this.option.autoCropWidth = 1080 + 'px'; // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1920 + 'px'; // 默认生成截图框高度 | |||||
this.option.fixed = true; | |||||
this.option.fixedNumber = [1080, 1920]; | |||||
} | } | ||||
if (this.type == 4 && this.videoType == 2) { | if (this.type == 4 && this.videoType == 2) { | ||||
this.option.autoCropWidth = 1920 + 'px' // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1080 + 'px' // 默认生成截图框高度 | |||||
this.option.fixed = true | |||||
this.option.fixedNumber = [1920, 1080] | |||||
this.option.autoCropWidth = 1920 + 'px'; // 默认生成截图框宽度 | |||||
this.option.autoCropHeight = 1080 + 'px'; // 默认生成截图框高度 | |||||
this.option.fixed = true; | |||||
this.option.fixedNumber = [1920, 1080]; | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
beforeRead(file) { | beforeRead(file) { | ||||
// console.log(file) | // console.log(file) | ||||
if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | ||||
this.$toast('请上传 jpg/png 格式图片') | |||||
return false | |||||
this.$toast('请上传 jpg/png 格式图片'); | |||||
return false; | |||||
} | } | ||||
let data = window.URL.createObjectURL(new Blob([file])) | |||||
this.option.img = data //给裁剪图片的路径 | |||||
this.showCropper = true | |||||
return false | |||||
let data = window.URL.createObjectURL(new Blob([file])); | |||||
this.option.img = data; //给裁剪图片的路径 | |||||
this.showCropper = true; | |||||
return false; | |||||
}, | }, | ||||
// 点击裁剪的选择 | // 点击裁剪的选择 | ||||
onClickRight() { | onClickRight() { | ||||
let that = this | |||||
this.loadingShow = true | |||||
this.$refs.cropper.getCropBlob(async (data) => { | |||||
let formData = new FormData() | |||||
formData.append('file', data) | |||||
let file = formData.get('file') | |||||
let that = this; | |||||
this.loadingShow = true; | |||||
this.$refs.cropper.getCropBlob(async data => { | |||||
let formData = new FormData(); | |||||
formData.append('file', data); | |||||
let file = formData.get('file'); | |||||
// 转为 base64 | // 转为 base64 | ||||
let reader = new FileReader() | |||||
const base64Data = await new Promise((resolve, reject) => { | |||||
reader.onload = () => { | |||||
resolve(reader.result) | |||||
} | |||||
reader.readAsDataURL(file) | |||||
}) | |||||
let imgBinary = await that.base64ToBinary(base64Data.substring(23)) | |||||
// base64结果 | |||||
that.ImgUrl = base64Data | |||||
that.loading = false | |||||
// let reader = new FileReader(); | |||||
// const base64Data = await new Promise((resolve, reject) => { | |||||
// reader.onload = () => { | |||||
// resolve(reader.result); | |||||
// }; | |||||
// reader.readAsDataURL(file); | |||||
// }); | |||||
// let imgBinary = await that.base64ToBinary(base64Data.substring(23)); | |||||
// // base64结果 | |||||
// that.ImgUrl = base64Data; | |||||
that.loading = false; | |||||
// console.log(that.ImgUrl, 'dasdasd') | // console.log(that.ImgUrl, 'dasdasd') | ||||
// 发请求 | // 发请求 | ||||
const AccessToken = localStorage.getItem('AccessToken') | |||||
const AccessToken = localStorage.getItem('AccessToken'); | |||||
that | that | ||||
.$axios({ | .$axios({ | ||||
method: 'post', | method: 'post', | ||||
@@ -199,73 +177,73 @@ export default { | |||||
}, | }, | ||||
data: formData | data: formData | ||||
}) | }) | ||||
.then(async (res) => { | |||||
.then(async res => { | |||||
// console.log(res.data.data.url) | // console.log(res.data.data.url) | ||||
const res1 = await saveImgApi({ | const res1 = await saveImgApi({ | ||||
type: that.type, | type: that.type, | ||||
videoType: that.videoType, | videoType: that.videoType, | ||||
material: res.data.data.url | material: res.data.data.url | ||||
}) | |||||
}); | |||||
// 重新获取列表 | // 重新获取列表 | ||||
await that.$parent.$parent.getMyBGIListApi() | |||||
await that.$parent.$parent.getMyScListApi() | |||||
await that.$parent.$parent.getMyBGIListApi(); | |||||
await that.$parent.$parent.getMyScListApi(); | |||||
if (this.type == 4) { | if (this.type == 4) { | ||||
that.$parent.$parent.changeShowBGIList(1) | |||||
that.$parent.$parent.changeShowBGIList(1); | |||||
} | } | ||||
if (this.type == 5) { | if (this.type == 5) { | ||||
that.$parent.$parent.changeShowBGIList(3) | |||||
that.$parent.$parent.changeShowBGIList(3); | |||||
} | } | ||||
that.loadingShow = false | |||||
that.showCropper = false | |||||
Toast.success('上传成功') | |||||
}) | |||||
}) | |||||
that.loadingShow = false; | |||||
that.showCropper = false; | |||||
Toast.success('上传成功'); | |||||
}); | |||||
}); | |||||
}, | }, | ||||
// 点击取消 | // 点击取消 | ||||
onClickLeft() { | onClickLeft() { | ||||
this.loadingShow = false | |||||
this.showCropper = false | |||||
this.$parent.showPhotoUploader = false | |||||
this.loadingShow = false; | |||||
this.showCropper = false; | |||||
this.$parent.showPhotoUploader = false; | |||||
}, | }, | ||||
// 上传图片 | // 上传图片 | ||||
async pushImg(data) { | async pushImg(data) { | ||||
try { | try { | ||||
const res = await awsImgUpload(data) | |||||
this.loadingShow = false | |||||
this.showCropper = false | |||||
Toast.success('上传成功') | |||||
const res = await awsImgUpload(data); | |||||
this.loadingShow = false; | |||||
this.showCropper = false; | |||||
Toast.success('上传成功'); | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
console.log(error, 'error'); | |||||
Toast.fail(error.message); | |||||
} | } | ||||
}, | }, | ||||
//图片转base64,异步 | //图片转base64,异步 | ||||
toBase64(file) { | toBase64(file) { | ||||
let that = this | |||||
let that = this; | |||||
return new Promise((resolve, reject) => { | return new Promise((resolve, reject) => { | ||||
const reader = new FileReader() | |||||
const reader = new FileReader(); | |||||
reader.onload = () => { | reader.onload = () => { | ||||
// base64结果 | // base64结果 | ||||
that.ImgUrl = this.result | |||||
that.loading = false | |||||
} | |||||
reader.onerror = reject | |||||
reader.readAsDataURL(file) | |||||
}) | |||||
that.ImgUrl = this.result; | |||||
that.loading = false; | |||||
}; | |||||
reader.onerror = reject; | |||||
reader.readAsDataURL(file); | |||||
}); | |||||
}, | }, | ||||
// base64 转二进制 | // base64 转二进制 | ||||
base64ToBinary(base64) { | base64ToBinary(base64) { | ||||
const binaryStr = window.atob(base64) | |||||
const len = binaryStr.length | |||||
const bytes = new Uint8Array(len) | |||||
const binaryStr = window.atob(base64); | |||||
const len = binaryStr.length; | |||||
const bytes = new Uint8Array(len); | |||||
for (let i = 0; i < len; ++i) { | for (let i = 0; i < len; ++i) { | ||||
bytes[i] = binaryStr.charCodeAt(i) | |||||
bytes[i] = binaryStr.charCodeAt(i); | |||||
} | } | ||||
return bytes | |||||
return bytes; | |||||
} | } | ||||
} | } | ||||
} | |||||
}; | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@@ -331,6 +309,7 @@ export default { | |||||
// height: 100%; | // height: 100%; | ||||
/deep/ .van-nav-bar { | /deep/ .van-nav-bar { | ||||
position: absolute; | position: absolute; | ||||
z-index: 999; | |||||
width: 100%; | width: 100%; | ||||
bottom: 0px; | bottom: 0px; | ||||
left: 0px; | left: 0px; | ||||
@@ -3,7 +3,7 @@ | |||||
<div class="logoBox"> | <div class="logoBox"> | ||||
<img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | ||||
<div class="userInfo"> | <div class="userInfo"> | ||||
<div class="nickName" @click="go('/myPage')">用户名</div> | |||||
<div class="nickName" @click="go('/myPage')">我的作品</div> | |||||
<div class="userModel"> | <div class="userModel"> | ||||
<!-- <img | <!-- <img | ||||
class="userImg" | class="userImg" | ||||
@@ -27,53 +27,53 @@ | |||||
</template> | </template> | ||||
<script> | <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 { | export default { | ||||
data() { | data() { | ||||
return {}; | |||||
return {} | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: (state) => state.publicObj.characters, | |||||
}), | |||||
characters: (state) => state.publicObj.characters | |||||
}) | |||||
}, | }, | ||||
methods: { | methods: { | ||||
...mapActions(["setCharacters"]), | |||||
...mapActions(['setCharacters']), | |||||
go(url) { | go(url) { | ||||
this.$router.push(url); | |||||
this.$router.push(url) | |||||
}, | }, | ||||
loginOut() { | loginOut() { | ||||
Dialog.confirm({ | Dialog.confirm({ | ||||
title: "退出登录", | |||||
message: "您确定要退出登录吗?", | |||||
title: '退出登录', | |||||
message: '您确定要退出登录吗?' | |||||
}) | }) | ||||
.then(() => { | .then(() => { | ||||
this.goLoginOut(); | |||||
this.goLoginOut() | |||||
}) | }) | ||||
.catch(() => { | .catch(() => { | ||||
return; | |||||
}); | |||||
return | |||||
}) | |||||
}, | }, | ||||
async goLoginOut() { | async goLoginOut() { | ||||
try { | try { | ||||
const res = await doLoginOut(); | |||||
this.$router.push("/login"); | |||||
localStorage.removeItem("AccessToken"); | |||||
const res = await doLoginOut() | |||||
this.$router.push('/login') | |||||
localStorage.removeItem('AccessToken') | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, "error"); | |||||
Toast.fail(error.message); | |||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
} | } | ||||
}, | |||||
} | |||||
}, | }, | ||||
created() {}, | |||||
}; | |||||
created() {} | |||||
} | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@@ -37,4 +37,7 @@ p { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | |||||
.noScroll { | |||||
overflow: hidden; | |||||
} | } |
@@ -3,7 +3,8 @@ import router from '@/router' | |||||
import { Toast } from 'vant' | import { Toast } from 'vant' | ||||
// 基础地址 | // 基础地址 | ||||
const baseURL = 'https://smapitest.malls.iformall.com/C' | |||||
// const baseURL = 'https://smapitest.malls.iformall.com/C' //测试环境 | |||||
const baseURL = 'https://smapitest.malls.iformall.com/C' | |||||
/** | /** | ||||
* @description:发送Axios请求 | * @description:发送Axios请求 | ||||
@@ -24,31 +24,10 @@ | |||||
/></span> --> | /></span> --> | ||||
<div class="title-change"> | <div class="title-change"> | ||||
<div class="displayFlex"> | <div class="displayFlex"> | ||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
:class="videoType == 1 ? 'wordColor' : ''" | |||||
@click="getNewList(1)" | |||||
>只看竖屏</span | |||||
> | |||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
:class="videoType == 2 ? 'wordColor' : ''" | |||||
@click="getNewList(2)" | |||||
>只看横屏</span | |||||
> | |||||
<span | |||||
v-show="listActive == 1" | |||||
class="floatRight" | |||||
@click="draftChange(2)" | |||||
>草稿箱</span | |||||
><span | |||||
@click="draftChange(1)" | |||||
v-show="listActive == 2" | |||||
class="floatRight" | |||||
>已完成</span | |||||
> | |||||
<span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span> | |||||
<span v-show="listActive == 1" class="floatRight" :class="videoType == 2 ? 'wordColor' : ''" @click="getNewList(2)">只看横屏</span> | |||||
<span v-show="listActive == 1" class="floatRight" @click="draftChange(2)">草稿箱</span> | |||||
<span @click="draftChange(1)" v-show="listActive == 2" class="floatRight">已完成</span> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -59,48 +38,22 @@ | |||||
<!-- 新 修改v-if--> | <!-- 新 修改v-if--> | ||||
<div v-if="waterfallBug"> | <div v-if="waterfallBug"> | ||||
<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)" | |||||
> | |||||
<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"> | <div class="waterFall-item-paddding"> | ||||
<img | |||||
:src=" | |||||
item.coverImg | |||||
? item.coverImg | |||||
: item.videoType == 2 | |||||
? defaultImg | |||||
: defaultImg1 | |||||
" | |||||
alt="" | |||||
/> | |||||
<img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> | |||||
<!-- 渐变遮罩层 --> | <!-- 渐变遮罩层 --> | ||||
<div class="waterFall-item-mask"> | <div class="waterFall-item-mask"> | ||||
<div>{{ item.title || '暂无' }}</div> | |||||
<div>{{ item.title || '无标题' }}</div> | |||||
<div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | <div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | ||||
<div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | <div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | ||||
<div> | |||||
创建时间:{{ | |||||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
}} | |||||
</div> | |||||
<div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
</div> | </div> | ||||
<!-- 视频状态 草稿还是未完成还是失败 --> | <!-- 视频状态 草稿还是未完成还是失败 --> | ||||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | <div class="waterFall-item-state" v-if="item.videoStatus == 2"> | ||||
<div v-if="item.videoStatus == 0" class="cover">草稿</div> | <div v-if="item.videoStatus == 0" class="cover">草稿</div> | ||||
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | ||||
<div v-if="item.videoStatus == 3" class="cover"> | |||||
视频生成失败 | |||||
</div> | |||||
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
</div> | </div> | ||||
<!-- 删除 --> | <!-- 删除 --> | ||||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | ||||
@@ -112,12 +65,7 @@ | |||||
</div> | </div> | ||||
<!-- 列表样式--小图 --> | <!-- 列表样式--小图 --> | ||||
<van-swipe-cell | |||||
v-show="listActive == 2" | |||||
loading | |||||
v-for="(item, index) in videoList" | |||||
:key="item.id ? item.id : index" | |||||
> | |||||
<van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> | |||||
<div class="itemList"> | <div class="itemList"> | ||||
<!-- 每一项 --> | <!-- 每一项 --> | ||||
<div v-if="videoList.length > 0" class="videoModel" :key="index"> | <div v-if="videoList.length > 0" class="videoModel" :key="index"> | ||||
@@ -132,19 +80,11 @@ | |||||
<!-- 中间文字 --> | <!-- 中间文字 --> | ||||
<div class="videoInfo" @click="goDetail(item)"> | <div class="videoInfo" @click="goDetail(item)"> | ||||
<div class="videoName"> | <div class="videoName"> | ||||
{{ item.title || '暂无' }} | |||||
</div> | |||||
<div class="createTime"> | |||||
视频时长:{{ formatSeconds(item.videoTime) }} | |||||
</div> | |||||
<div class="createTime"> | |||||
视频容量:{{ bytesToSize(item.videoSize) }} | |||||
</div> | |||||
<div class="createTime"> | |||||
创建时间:{{ | |||||
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') | |||||
}} | |||||
{{ item.title || '无标题' }} | |||||
</div> | </div> | ||||
<div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
<div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
<div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
</div> | </div> | ||||
<!-- 右侧更多 --> | <!-- 右侧更多 --> | ||||
<div class="showMore" @click.stop="showDialog(item.id)"> | <div class="showMore" @click.stop="showDialog(item.id)"> | ||||
@@ -158,35 +98,25 @@ | |||||
<i class="el-icon-edit" /> 编辑 | <i class="el-icon-edit" /> 编辑 | ||||
</div> --> | </div> --> | ||||
<div @click="goDelete(item.id)"> | <div @click="goDelete(item.id)"> | ||||
<i class="el-icon-delete" /> 删除 | |||||
<i class="el-icon-delete" /> | |||||
删除 | |||||
</div> | </div> | ||||
</van-popup> | </van-popup> | ||||
</div> | </div> | ||||
<!-- 无数据处理 --> | <!-- 无数据处理 --> | ||||
<div v-if="videoList.length <= 0" class="noWork"> | |||||
您还没有视频作品 | |||||
</div> | |||||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||||
</div> | </div> | ||||
</van-swipe-cell> | </van-swipe-cell> | ||||
</div> | </div> | ||||
<!-- 分页 --> | <!-- 分页 --> | ||||
<van-pagination | |||||
v-model="currentPage" | |||||
:total-items="total" | |||||
:items-per-page="4" | |||||
@change="pageChange" | |||||
/> | |||||
<van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" /> | |||||
<!-- 创建新作品 --> | <!-- 创建新作品 --> | ||||
<!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> | <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> --> | ||||
<div class="goNewAdd" @click="checkInviteCode"> | <div class="goNewAdd" @click="checkInviteCode"> | ||||
<i class="el-icon-plus"></i> | <i class="el-icon-plus"></i> | ||||
</div> | </div> | ||||
<div | |||||
class="messageCover" | |||||
:class="isShowMessageCover ? 'active' : ''" | |||||
@click="exitCover" | |||||
> | |||||
<div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover"> | |||||
<div class="message" id="message"> | <div class="message" id="message"> | ||||
<div class="connect" id="message">请添加微信与我们联系</div> | <div class="connect" id="message">请添加微信与我们联系</div> | ||||
<div class="qrCode" id="message"> | <div class="qrCode" id="message"> | ||||
@@ -201,26 +131,16 @@ | |||||
<script> | <script> | ||||
// 组件 | // 组件 | ||||
import Vue from 'vue' | |||||
import { Toast, Dialog } from 'vant' | |||||
import { mapState, mapActions } from 'vuex' | |||||
import HeadTop from '@/components/common/head.vue' | |||||
import Vue from 'vue'; | |||||
import { Toast, Dialog } from 'vant'; | |||||
import { mapState, mapActions } from 'vuex'; | |||||
import HeadTop from '@/components/common/head.vue'; | |||||
// 工具 | // 工具 | ||||
import { | |||||
bytesToSize, | |||||
timestampToTime, | |||||
scrollToID, | |||||
formatSeconds | |||||
} from '../../utils' | |||||
import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../utils'; | |||||
// 接口 | // 接口 | ||||
import { | |||||
getVideoList, | |||||
doGetVideoDetialById, | |||||
doFindInviteCode, | |||||
deleteVideoById | |||||
} from '../../api/myPage' | |||||
import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage'; | |||||
Vue.use(Toast) | |||||
Vue.use(Toast); | |||||
export default { | export default { | ||||
components: { | components: { | ||||
HeadTop | HeadTop | ||||
@@ -238,17 +158,17 @@ export default { | |||||
isShowMessageCover: false, | isShowMessageCover: false, | ||||
videoList: [], | videoList: [], | ||||
currentPage: 1, | currentPage: 1, | ||||
pageSize: 4, | |||||
pageSize: 6, | |||||
prePage: '', | prePage: '', | ||||
total: '', | total: '', | ||||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | ||||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | defaultImg1: require('@/assets/img/bg.png'), //默认图片 | ||||
listActive: 1 // 显示列表样式 | listActive: 1 // 显示列表样式 | ||||
} | |||||
}; | |||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState({ | ...mapState({ | ||||
characters: (state) => state.publicObj.characters | |||||
characters: state => state.publicObj.characters | |||||
}) | }) | ||||
}, | }, | ||||
@@ -256,65 +176,65 @@ export default { | |||||
...mapActions(['setCharacters']), | ...mapActions(['setCharacters']), | ||||
// 草稿箱切换 | // 草稿箱切换 | ||||
draftChange(type) { | draftChange(type) { | ||||
this.listActive = type | |||||
this.videoType = -1 | |||||
this.loadVideoList(1, this.pageSize, this.videoType) | |||||
this.listActive = type; | |||||
this.videoType = -1; | |||||
this.loadVideoList(1, this.pageSize, this.videoType); | |||||
}, | }, | ||||
// 横屏竖屏列表 | // 横屏竖屏列表 | ||||
getNewList(videoType) { | getNewList(videoType) { | ||||
this.videoType = videoType | |||||
this.loadVideoList(1, this.pageSize, videoType) | |||||
this.videoType = videoType; | |||||
this.loadVideoList(1, this.pageSize, videoType); | |||||
}, | }, | ||||
closeDialog() { | closeDialog() { | ||||
Dialog.close | |||||
Dialog.close; | |||||
}, | }, | ||||
// 点击显示编辑删除 | // 点击显示编辑删除 | ||||
showDialog(id) { | showDialog(id) { | ||||
this.showPopup = true | |||||
this.clickItem = id | |||||
this.showPopup = true; | |||||
this.clickItem = id; | |||||
}, | }, | ||||
go(url) { | go(url) { | ||||
this.$router.push(url) | |||||
this.$router.push(url); | |||||
}, | }, | ||||
changeTime(timestamp, form) { | changeTime(timestamp, form) { | ||||
return timestampToTime(timestamp, form) | |||||
return timestampToTime(timestamp, form); | |||||
}, | }, | ||||
pageChange() { | pageChange() { | ||||
this.loadVideoList(this.currentPage, this.pageSize, this.videoType) | |||||
this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | |||||
}, | }, | ||||
// 点击空白区域退出提示 | // 点击空白区域退出提示 | ||||
exitCover(e) { | exitCover(e) { | ||||
if (e.srcElement.id != 'message') { | if (e.srcElement.id != 'message') { | ||||
this.isShowMessageCover = false | |||||
this.isShowMessageCover = false; | |||||
} | } | ||||
}, | }, | ||||
// 秒转化时分秒 | // 秒转化时分秒 | ||||
formatSeconds(seconds) { | formatSeconds(seconds) { | ||||
if (seconds) { | if (seconds) { | ||||
return formatSeconds(seconds) | |||||
return formatSeconds(seconds); | |||||
} else { | } else { | ||||
return '无' | |||||
return '无'; | |||||
} | } | ||||
}, | }, | ||||
// 将bytes转化 | // 将bytes转化 | ||||
bytesToSize(bytes) { | bytesToSize(bytes) { | ||||
if (bytes) { | if (bytes) { | ||||
return bytesToSize(bytes) | |||||
return bytesToSize(bytes); | |||||
} else { | } else { | ||||
return '无' | |||||
return '无'; | |||||
} | } | ||||
}, | }, | ||||
// 查看详情 | // 查看详情 | ||||
goDetail(item) { | goDetail(item) { | ||||
console.log(item) | |||||
const status = item.videoStatus | |||||
console.log(item); | |||||
const status = item.videoStatus; | |||||
//草稿 | //草稿 | ||||
if (status == 0) { | if (status == 0) { | ||||
this.$router.push({ | this.$router.push({ | ||||
@@ -322,16 +242,16 @@ export default { | |||||
query: { | query: { | ||||
id: item.id | id: item.id | ||||
} | } | ||||
}) | |||||
}); | |||||
} | } | ||||
//生成中 | //生成中 | ||||
else if (status == 1) { | else if (status == 1) { | ||||
Toast.fail('视频生成中') | |||||
return | |||||
Toast.fail('视频生成中'); | |||||
return; | |||||
} | } | ||||
// 成功 | // 成功 | ||||
else if ([2, 4, 5, 6].includes(status)) { | else if ([2, 4, 5, 6].includes(status)) { | ||||
const url = item.videoPathUri + item.videoPath | |||||
const url = item.videoPathUri + item.videoPath; | |||||
this.$router.push({ | this.$router.push({ | ||||
// path: '/downloadVideo', | // path: '/downloadVideo', | ||||
path: '/videoDownload', | path: '/videoDownload', | ||||
@@ -340,7 +260,7 @@ export default { | |||||
videoUrl: url, | videoUrl: url, | ||||
id: item.id | id: item.id | ||||
} | } | ||||
}) | |||||
}); | |||||
} | } | ||||
// 失败 | // 失败 | ||||
else if (status == 3) { | else if (status == 3) { | ||||
@@ -353,7 +273,7 @@ export default { | |||||
mouldSmId: item.id, | mouldSmId: item.id, | ||||
modify: true | modify: true | ||||
} | } | ||||
}) | |||||
}); | |||||
} | } | ||||
}, | }, | ||||
// 删除作品 | // 删除作品 | ||||
@@ -363,18 +283,14 @@ export default { | |||||
message: '您确定要删除该作品吗?' | message: '您确定要删除该作品吗?' | ||||
}) | }) | ||||
.then(async () => { | .then(async () => { | ||||
this.showLoading = true | |||||
await this.deleteVideoById(id) | |||||
await this.loadVideoList( | |||||
this.currentPage, | |||||
this.pageSize, | |||||
this.videoType | |||||
) | |||||
this.showLoading = false | |||||
this.showLoading = true; | |||||
await this.deleteVideoById(id); | |||||
await this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | |||||
this.showLoading = false; | |||||
}) | }) | ||||
.catch(() => { | .catch(() => { | ||||
return | |||||
}) | |||||
return; | |||||
}); | |||||
}, | }, | ||||
/** | /** | ||||
@@ -382,22 +298,17 @@ export default { | |||||
*/ | */ | ||||
async loadVideoList(pageNum, pageSize, videoType) { | async loadVideoList(pageNum, pageSize, videoType) { | ||||
try { | try { | ||||
this.waterfallBug = false | |||||
this.waterfallBug = false; | |||||
// 根据listActive判断是不是看的草稿箱 | // 根据listActive判断是不是看的草稿箱 | ||||
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3] | |||||
const res = await getVideoList( | |||||
pageNum, | |||||
pageSize, | |||||
videoType, | |||||
videoStatuss | |||||
) | |||||
console.log(res, '获取作品列表') | |||||
let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | |||||
const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); | |||||
console.log(res, '获取作品列表'); | |||||
this.videoList = res.data.list | |||||
this.waterfallBug = true | |||||
this.total = res.data.total | |||||
this.videoList = res.data.list; | |||||
this.waterfallBug = true; | |||||
this.total = res.data.total; | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | |||||
console.log(error, 'error'); | |||||
// Toast.fail(error.message) | // Toast.fail(error.message) | ||||
} | } | ||||
}, | }, | ||||
@@ -407,12 +318,12 @@ export default { | |||||
*/ | */ | ||||
async getVideoDetialById(id) { | async getVideoDetialById(id) { | ||||
try { | try { | ||||
const res = await doGetVideoDetialById(id) | |||||
console.log(res, '通过视频id获取视频详情') | |||||
return res.data | |||||
const res = await doGetVideoDetialById(id); | |||||
console.log(res, '通过视频id获取视频详情'); | |||||
return res.data; | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
console.log(error, 'error'); | |||||
Toast.fail(error.message); | |||||
} | } | ||||
}, | }, | ||||
@@ -421,11 +332,11 @@ export default { | |||||
*/ | */ | ||||
async deleteVideoById(id) { | async deleteVideoById(id) { | ||||
try { | try { | ||||
const res = await deleteVideoById(id) | |||||
console.log(res, '根据id删除作品') | |||||
const res = await deleteVideoById(id); | |||||
console.log(res, '根据id删除作品'); | |||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
console.log(error, 'error'); | |||||
Toast.fail(error.message); | |||||
} | } | ||||
}, | }, | ||||
@@ -434,37 +345,37 @@ export default { | |||||
*/ | */ | ||||
async checkInviteCode() { | async checkInviteCode() { | ||||
try { | try { | ||||
const res = await doFindInviteCode() | |||||
console.log(res, '查询用户邀请码数据') | |||||
const status = res.data.status | |||||
const res = await doFindInviteCode(); | |||||
console.log(res, '查询用户邀请码数据'); | |||||
const status = res.data.status; | |||||
// 当没有邀请码时 | // 当没有邀请码时 | ||||
if (status == 0) { | if (status == 0) { | ||||
scrollToID('top') | |||||
this.isShowMessageCover = true | |||||
scrollToID('top'); | |||||
this.isShowMessageCover = true; | |||||
} else if (status == 1) { | } else if (status == 1) { | ||||
this.goCreateNew() | |||||
this.goCreateNew(); | |||||
} | } | ||||
} catch (error) { | } catch (error) { | ||||
console.log(error, 'error') | |||||
Toast.fail(error.message) | |||||
console.log(error, 'error'); | |||||
Toast.fail(error.message); | |||||
} | } | ||||
}, | }, | ||||
goCreateNew() { | goCreateNew() { | ||||
this.$router.push('/chooseModel') | |||||
this.$router.push('/chooseModel'); | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true | |||||
scrollToID('top') | |||||
this.inPage = true; | |||||
scrollToID('top'); | |||||
}, | }, | ||||
created() { | created() { | ||||
this.loadVideoList(1, this.pageSize, this.videoType) | |||||
this.loadVideoList(1, this.pageSize, this.videoType); | |||||
} | } | ||||
} | |||||
}; | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||