congzc пре 2 година
родитељ
комит
d5930b7c28
7 измењених фајлова са 533 додато и 742 уклоњено
  1. +5
    -1
      README.md
  2. +88
    -109
      src/components/CutImg.vue
  3. +24
    -24
      src/components/common/head.vue
  4. +3
    -0
      src/styles/index.scss
  5. +2
    -1
      src/utils/request.js
  6. +321
    -428
      src/views/model/editModel.vue
  7. +90
    -179
      src/views/myPage/myPage.vue

+ 5
- 1
README.md Прегледај датотеку

@@ -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”,已配置进入动画、回到顶部等功能,可以此为基础添加页面。

+ 88
- 109
src/components/CutImg.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;


+ 24
- 24
src/components/common/head.vue Прегледај датотеку

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


+ 3
- 0
src/styles/index.scss Прегледај датотеку

@@ -37,4 +37,7 @@ p {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;


}
.noScroll {
overflow: hidden;
} }

+ 2
- 1
src/utils/request.js Прегледај датотеку

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


+ 321
- 428
src/views/model/editModel.vue
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 90
- 179
src/views/myPage/myPage.vue Прегледај датотеку

@@ -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" />&nbsp;编辑 <i class="el-icon-edit" />&nbsp;编辑
</div> --> </div> -->
<div @click="goDelete(item.id)"> <div @click="goDelete(item.id)">
<i class="el-icon-delete" />&nbsp;删除
<i class="el-icon-delete" />
&nbsp;删除
</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>


Loading…
Откажи
Сачувај