@@ -18,10 +18,14 @@ npm run dev | |||
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 | |||
``` | |||
### 测试环境baseURL = 'https://smapitest.malls.iformall.com/C' | |||
项目根目录下配置有模板vue文件“model.vue”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。 |
@@ -1,12 +1,7 @@ | |||
<template> | |||
<div class="uploder"> | |||
<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"> | |||
<!-- <img :src="ImgUrl" alt="" /> --> | |||
</div> | |||
@@ -14,24 +9,12 @@ | |||
</div> | |||
<div class="uploadava"> | |||
<!-- 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' }"> | |||
<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 | |||
style="background-image: none" | |||
ref="cropper" | |||
:img="option.img" | |||
:outputSize="option.outputSize" | |||
@@ -50,14 +33,8 @@ | |||
:infoTrue="option.infoTrue" | |||
:fixedBox="option.fixedBox" | |||
: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> | |||
</van-popup> | |||
</div> | |||
@@ -65,12 +42,12 @@ | |||
</template> | |||
<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 { | |||
name: 'uploadAva', | |||
components: { | |||
@@ -106,7 +83,8 @@ export default { | |||
img: '', | |||
outputSize: 0.8, | |||
info: false, // 裁剪框的大小信息 | |||
outputType: 'jpeg', // 裁剪生成图片的格式 | |||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||
outputType: 'png', // 裁剪生成图片的格式 | |||
canScale: true, // 图片是否允许滚轮缩放 | |||
autoCrop: true, // 是否默认生成截图框 | |||
autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||
@@ -123,71 +101,71 @@ export default { | |||
mode: '100% auto' // 图片默认渲染方式 | |||
}, | |||
loadingShow: false // 是否展示loading | |||
} | |||
}; | |||
}, | |||
created() { | |||
const deviceType = getDeviceType() | |||
this.isAndroid = false | |||
const deviceType = getDeviceType(); | |||
this.isAndroid = false; | |||
if (!deviceType) { | |||
// 设备类型为pc | |||
this.isAndroid = false | |||
this.isAndroid = false; | |||
} else { | |||
if (deviceType[0] == 'Android') { | |||
// 设备类型为安卓 | |||
this.isAndroid = true | |||
this.isAndroid = true; | |||
} else { | |||
// 其他设备 | |||
this.isAndroid = false | |||
this.isAndroid = false; | |||
} | |||
} | |||
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) { | |||
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: { | |||
beforeRead(file) { | |||
// console.log(file) | |||
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() { | |||
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 | |||
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') | |||
// 发请求 | |||
const AccessToken = localStorage.getItem('AccessToken') | |||
const AccessToken = localStorage.getItem('AccessToken'); | |||
that | |||
.$axios({ | |||
method: 'post', | |||
@@ -199,73 +177,73 @@ export default { | |||
}, | |||
data: formData | |||
}) | |||
.then(async (res) => { | |||
.then(async res => { | |||
// console.log(res.data.data.url) | |||
const res1 = await saveImgApi({ | |||
type: that.type, | |||
videoType: that.videoType, | |||
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) { | |||
that.$parent.$parent.changeShowBGIList(1) | |||
that.$parent.$parent.changeShowBGIList(1); | |||
} | |||
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() { | |||
this.loadingShow = false | |||
this.showCropper = false | |||
this.$parent.showPhotoUploader = false | |||
this.loadingShow = false; | |||
this.showCropper = false; | |||
this.$parent.showPhotoUploader = false; | |||
}, | |||
// 上传图片 | |||
async pushImg(data) { | |||
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) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
//图片转base64,异步 | |||
toBase64(file) { | |||
let that = this | |||
let that = this; | |||
return new Promise((resolve, reject) => { | |||
const reader = new FileReader() | |||
const reader = new FileReader(); | |||
reader.onload = () => { | |||
// 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 转二进制 | |||
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) { | |||
bytes[i] = binaryStr.charCodeAt(i) | |||
bytes[i] = binaryStr.charCodeAt(i); | |||
} | |||
return bytes | |||
return bytes; | |||
} | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -331,6 +309,7 @@ export default { | |||
// height: 100%; | |||
/deep/ .van-nav-bar { | |||
position: absolute; | |||
z-index: 999; | |||
width: 100%; | |||
bottom: 0px; | |||
left: 0px; | |||
@@ -3,7 +3,7 @@ | |||
<div class="logoBox"> | |||
<img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | |||
<div class="userInfo"> | |||
<div class="nickName" @click="go('/myPage')">用户名</div> | |||
<div class="nickName" @click="go('/myPage')">我的作品</div> | |||
<div class="userModel"> | |||
<!-- <img | |||
class="userImg" | |||
@@ -27,53 +27,53 @@ | |||
</template> | |||
<script> | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast, Dialog } from "vant"; | |||
import { doLoginOut } from "../../api/login"; | |||
import Vue from 'vue' | |||
import { mapState, mapActions } from 'vuex' | |||
import { Toast, Dialog } from 'vant' | |||
import { doLoginOut } from '../../api/login' | |||
Vue.use(Toast); | |||
Vue.use(Toast) | |||
export default { | |||
data() { | |||
return {}; | |||
return {} | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters, | |||
}), | |||
characters: (state) => state.publicObj.characters | |||
}) | |||
}, | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
...mapActions(['setCharacters']), | |||
go(url) { | |||
this.$router.push(url); | |||
this.$router.push(url) | |||
}, | |||
loginOut() { | |||
Dialog.confirm({ | |||
title: "退出登录", | |||
message: "您确定要退出登录吗?", | |||
title: '退出登录', | |||
message: '您确定要退出登录吗?' | |||
}) | |||
.then(() => { | |||
this.goLoginOut(); | |||
this.goLoginOut() | |||
}) | |||
.catch(() => { | |||
return; | |||
}); | |||
return | |||
}) | |||
}, | |||
async goLoginOut() { | |||
try { | |||
const res = await doLoginOut(); | |||
this.$router.push("/login"); | |||
localStorage.removeItem("AccessToken"); | |||
const res = await doLoginOut() | |||
this.$router.push('/login') | |||
localStorage.removeItem('AccessToken') | |||
} catch (error) { | |||
console.log(error, "error"); | |||
Toast.fail(error.message); | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
} | |||
}, | |||
} | |||
}, | |||
created() {}, | |||
}; | |||
created() {} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
@@ -37,4 +37,7 @@ p { | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
.noScroll { | |||
overflow: hidden; | |||
} |
@@ -3,7 +3,8 @@ import router from '@/router' | |||
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请求 | |||
@@ -24,31 +24,10 @@ | |||
/></span> --> | |||
<div class="title-change"> | |||
<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> | |||
@@ -59,48 +38,22 @@ | |||
<!-- 新 修改v-if--> | |||
<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"> | |||
<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>{{ item.title || '暂无' }}</div> | |||
<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>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||
</div> | |||
<!-- 视频状态 草稿还是未完成还是失败 --> | |||
<div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||
<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 v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||
</div> | |||
<!-- 删除 --> | |||
<div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||
@@ -112,12 +65,7 @@ | |||
</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 v-if="videoList.length > 0" class="videoModel" :key="index"> | |||
@@ -132,19 +80,11 @@ | |||
<!-- 中间文字 --> | |||
<div class="videoInfo" @click="goDetail(item)"> | |||
<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 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 class="showMore" @click.stop="showDialog(item.id)"> | |||
@@ -158,35 +98,25 @@ | |||
<i class="el-icon-edit" /> 编辑 | |||
</div> --> | |||
<div @click="goDelete(item.id)"> | |||
<i class="el-icon-delete" /> 删除 | |||
<i class="el-icon-delete" /> | |||
删除 | |||
</div> | |||
</van-popup> | |||
</div> | |||
<!-- 无数据处理 --> | |||
<div v-if="videoList.length <= 0" class="noWork"> | |||
您还没有视频作品 | |||
</div> | |||
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||
</div> | |||
</van-swipe-cell> | |||
</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="goNewAdd" @click="checkInviteCode"> | |||
<i class="el-icon-plus"></i> | |||
</div> | |||
<div | |||
class="messageCover" | |||
:class="isShowMessageCover ? 'active' : ''" | |||
@click="exitCover" | |||
> | |||
<div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover"> | |||
<div class="message" id="message"> | |||
<div class="connect" id="message">请添加微信与我们联系</div> | |||
<div class="qrCode" id="message"> | |||
@@ -201,26 +131,16 @@ | |||
<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 { | |||
components: { | |||
HeadTop | |||
@@ -238,17 +158,17 @@ export default { | |||
isShowMessageCover: false, | |||
videoList: [], | |||
currentPage: 1, | |||
pageSize: 4, | |||
pageSize: 6, | |||
prePage: '', | |||
total: '', | |||
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片 | |||
defaultImg1: require('@/assets/img/bg.png'), //默认图片 | |||
listActive: 1 // 显示列表样式 | |||
} | |||
}; | |||
}, | |||
computed: { | |||
...mapState({ | |||
characters: (state) => state.publicObj.characters | |||
characters: state => state.publicObj.characters | |||
}) | |||
}, | |||
@@ -256,65 +176,65 @@ export default { | |||
...mapActions(['setCharacters']), | |||
// 草稿箱切换 | |||
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) { | |||
this.videoType = videoType | |||
this.loadVideoList(1, this.pageSize, videoType) | |||
this.videoType = videoType; | |||
this.loadVideoList(1, this.pageSize, videoType); | |||
}, | |||
closeDialog() { | |||
Dialog.close | |||
Dialog.close; | |||
}, | |||
// 点击显示编辑删除 | |||
showDialog(id) { | |||
this.showPopup = true | |||
this.clickItem = id | |||
this.showPopup = true; | |||
this.clickItem = id; | |||
}, | |||
go(url) { | |||
this.$router.push(url) | |||
this.$router.push(url); | |||
}, | |||
changeTime(timestamp, form) { | |||
return timestampToTime(timestamp, form) | |||
return timestampToTime(timestamp, form); | |||
}, | |||
pageChange() { | |||
this.loadVideoList(this.currentPage, this.pageSize, this.videoType) | |||
this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | |||
}, | |||
// 点击空白区域退出提示 | |||
exitCover(e) { | |||
if (e.srcElement.id != 'message') { | |||
this.isShowMessageCover = false | |||
this.isShowMessageCover = false; | |||
} | |||
}, | |||
// 秒转化时分秒 | |||
formatSeconds(seconds) { | |||
if (seconds) { | |||
return formatSeconds(seconds) | |||
return formatSeconds(seconds); | |||
} else { | |||
return '无' | |||
return '无'; | |||
} | |||
}, | |||
// 将bytes转化 | |||
bytesToSize(bytes) { | |||
if (bytes) { | |||
return bytesToSize(bytes) | |||
return bytesToSize(bytes); | |||
} else { | |||
return '无' | |||
return '无'; | |||
} | |||
}, | |||
// 查看详情 | |||
goDetail(item) { | |||
console.log(item) | |||
const status = item.videoStatus | |||
console.log(item); | |||
const status = item.videoStatus; | |||
//草稿 | |||
if (status == 0) { | |||
this.$router.push({ | |||
@@ -322,16 +242,16 @@ export default { | |||
query: { | |||
id: item.id | |||
} | |||
}) | |||
}); | |||
} | |||
//生成中 | |||
else if (status == 1) { | |||
Toast.fail('视频生成中') | |||
return | |||
Toast.fail('视频生成中'); | |||
return; | |||
} | |||
// 成功 | |||
else if ([2, 4, 5, 6].includes(status)) { | |||
const url = item.videoPathUri + item.videoPath | |||
const url = item.videoPathUri + item.videoPath; | |||
this.$router.push({ | |||
// path: '/downloadVideo', | |||
path: '/videoDownload', | |||
@@ -340,7 +260,7 @@ export default { | |||
videoUrl: url, | |||
id: item.id | |||
} | |||
}) | |||
}); | |||
} | |||
// 失败 | |||
else if (status == 3) { | |||
@@ -353,7 +273,7 @@ export default { | |||
mouldSmId: item.id, | |||
modify: true | |||
} | |||
}) | |||
}); | |||
} | |||
}, | |||
// 删除作品 | |||
@@ -363,18 +283,14 @@ export default { | |||
message: '您确定要删除该作品吗?' | |||
}) | |||
.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(() => { | |||
return | |||
}) | |||
return; | |||
}); | |||
}, | |||
/** | |||
@@ -382,22 +298,17 @@ export default { | |||
*/ | |||
async loadVideoList(pageNum, pageSize, videoType) { | |||
try { | |||
this.waterfallBug = false | |||
this.waterfallBug = false; | |||
// 根据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) { | |||
console.log(error, 'error') | |||
console.log(error, 'error'); | |||
// Toast.fail(error.message) | |||
} | |||
}, | |||
@@ -407,12 +318,12 @@ export default { | |||
*/ | |||
async getVideoDetialById(id) { | |||
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) { | |||
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) { | |||
try { | |||
const res = await deleteVideoById(id) | |||
console.log(res, '根据id删除作品') | |||
const res = await deleteVideoById(id); | |||
console.log(res, '根据id删除作品'); | |||
} 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() { | |||
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) { | |||
scrollToID('top') | |||
this.isShowMessageCover = true | |||
scrollToID('top'); | |||
this.isShowMessageCover = true; | |||
} else if (status == 1) { | |||
this.goCreateNew() | |||
this.goCreateNew(); | |||
} | |||
} catch (error) { | |||
console.log(error, 'error') | |||
Toast.fail(error.message) | |||
console.log(error, 'error'); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
goCreateNew() { | |||
this.$router.push('/chooseModel') | |||
this.$router.push('/chooseModel'); | |||
} | |||
}, | |||
mounted() { | |||
this.inPage = true | |||
scrollToID('top') | |||
this.inPage = true; | |||
scrollToID('top'); | |||
}, | |||
created() { | |||
this.loadVideoList(1, this.pageSize, this.videoType) | |||
this.loadVideoList(1, this.pageSize, this.videoType); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||