congzc vor 2 Jahren
Ursprung
Commit
9b38d08963
18 geänderte Dateien mit 34665 neuen und 14018 gelöschten Zeilen
  1. +24552
    -4438
      package-lock.json
  2. +5
    -2
      package.json
  3. +8
    -6
      src/App.vue
  4. BIN
      src/assets/icon/icon-list1.png
  5. BIN
      src/assets/icon/icon-list2.png
  6. BIN
      src/assets/icon/icon-trash.png
  7. +2
    -0
      src/main.js
  8. +12
    -0
      src/router/index.js
  9. +13
    -6
      src/views/model/chooseModel.vue
  10. +10
    -6
      src/views/model/editModel.vue
  11. +93
    -0
      src/views/model/editPosition-chatgpt.vue
  12. +182
    -0
      src/views/model/editPosition-my.vue
  13. +213
    -0
      src/views/model/editPosition.vue
  14. +0
    -489
      src/views/myPage/myPage copy 3.vue
  15. +219
    -112
      src/views/myPage/myPage copy.vue
  16. +125
    -18
      src/views/myPage/myPage.vue
  17. +8
    -3
      vue.config.js
  18. +9223
    -8938
      yarn.lock

+ 24552
- 4438
package-lock.json
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 5
- 2
package.json Datei anzeigen

@@ -9,16 +9,17 @@
"dependencies": {
"axios": "0.18.1",
"element-ui": "^2.15.12",
"franc": "^6.1.0",
"install": "^0.13.0",
"lib-flexible": "^0.3.2",
"mic-recorder-to-mp3": "^2.2.2",
"npm": "^9.6.2",
"postcss-px2rem": "^0.3.0",
"register-service-worker": "^1.7.1",
"sass-loader": "^7.0.0",
"swiper": "^4.5.1",
"vant": "^2.12.48",
"vue": "^2.6.11",
"vue-masonry": "^0.16.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
@@ -27,7 +28,9 @@
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"node-sass": "^4.14.1",
"node-sass": "^6.0.1",
"sass": "^1.60.0",
"sass-loader": "^7.0.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-template-compiler": "^2.6.11"
}


+ 8
- 6
src/App.vue Datei anzeigen

@@ -1,21 +1,23 @@
<template>
<div id="app">
<!-- <keep-alive> -->
<router-view></router-view>
<!-- </keep-alive> -->
<tail />
</div>
</template>
<script>
import top from "./components/common/top";
import tail from "./components/common/tail";
import top from './components/common/top'
import tail from './components/common/tail'
export default {
components: {
top,
tail,
tail
},
data() {
return {};
},
};
return {}
}
}
</script>

<style lang="scss">


BIN
src/assets/icon/icon-list1.png Datei anzeigen

Vorher Nachher
Breite: 200  |  Höhe: 200  |  Größe: 4.5 KiB

BIN
src/assets/icon/icon-list2.png Datei anzeigen

Vorher Nachher
Breite: 200  |  Höhe: 200  |  Größe: 2.9 KiB

BIN
src/assets/icon/icon-trash.png Datei anzeigen

Vorher Nachher
Breite: 200  |  Höhe: 200  |  Größe: 5.5 KiB

+ 2
- 0
src/main.js Datei anzeigen

@@ -12,7 +12,9 @@ import ElementUI from 'element-ui'; //引入js
import 'element-ui/lib/theme-chalk/index.css';//引入css
import "@/styles/reset.scss"; // 引入清除默认样式
import "@/styles/index.scss"; // 引入全局样式
import { VueMasonryPlugin } from 'vue-masonry';

Vue.use(VueMasonryPlugin); // 瀑布流插件
Vue.use(ElementUI);
Vue.use(Vant)



+ 12
- 0
src/router/index.js Datei anzeigen

@@ -56,6 +56,18 @@ const routes = [
name: 'editModel',
component: () => import("../views/model/editModel"),
},
// 编辑位置new
{
path: '/editPosition',
name: 'editPosition',
component: () => import("../views/model/editPosition"),
},
// 编辑位置new
{
path: '/editPosition-chatgpt',
name: 'editPosition-chatgpt',
component: () => import("../views/model/editPosition-chatgpt"),
},
// 聊天首页new
{
path: '/chat',


+ 13
- 6
src/views/model/chooseModel.vue Datei anzeigen

@@ -33,8 +33,9 @@
</div> -->
<!-- 模板列表 -->
<div class="choose">
<div class="modeList">
<div class="modeList" v-masonry item-selector=".model" column-width="175">
<div
v-masonry-tile
class="model"
:class="currentId == item.id ? 'active' : ''"
v-if="modeList.length >= 1"
@@ -161,6 +162,7 @@ export default {
path: '/previewModel',
query: {
saveID: res.data.id,
id: res.data.id,
imgUrl: modelDetail.coverImg, //模版图片路径
mouldSmId: modelDetail.mouldSmId, //模版标识
modelId: modelDetail.id, //模版id
@@ -285,8 +287,11 @@ export default {
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin: auto;
padding: 0 23px;
// margin: auto;
// padding: 0 23px;
padding-left: 20px;
width: 100%;
margin-right: -20px;

.model {
position: relative;
@@ -294,9 +299,11 @@ export default {
margin-bottom: 15px;
// border: 1px solid #00000028;
// padding: 8px;
width: 154px;
height: 305px;
transition: all 0.3s;
// width: 154px;
max-width: 170px;
// height: 305px;
max-height: 310px;
// transition: all 0.3s;
opacity: 0.9;
img {
border-radius: 8px;


+ 10
- 6
src/views/model/editModel.vue Datei anzeigen

@@ -326,6 +326,8 @@ import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
// 工具
import { scrollToID } from '../../utils'
// 语言检测插件
import { franc } from 'franc'
// 接口
import {
doCreateVideo,
@@ -350,7 +352,7 @@ export default {
mouldSmId: null,
saveID: null, // 作品id
inputTitle: '',
textareaContent: '', // 输入框内容
textareaContent: 'qweqwe', // 输入框内容
bottomTabActive: 2, // 底部导航高亮
showSubtitle: false, // 是否展示字幕
showSynthesisDialog: false, //合成进度条窗口显示隐藏
@@ -395,6 +397,8 @@ export default {
// 获取声音列表
async loadVoice() {
if (this.textareaContent.length != 0) {
const language = franc(this.textareaContent)
console.log(language, '语种')
const data = {
paperwork: this.textareaContent
}
@@ -530,12 +534,11 @@ export default {
async getDetailById(id) {
try {
const res = await getModelDetailById(id)
console.log(res, '根据作品ID获取信息')
this.imgUrl = res.data.personMould.coverImg
this.modelId = res.data.personMouldId
this.mouldSmId = res.data.personMouldSmId
this.inputTitle = res.data.title
this.textareaContent = res.data.paperwork
this.textareaContent = res.data.paperwork || ''
this.soundChoose.id = res.data.voiceMouldId
this.soundChoose.mouldSmId = res.data.voiceMouldSmId
await this.loadVoice() // 获取音频列表
@@ -554,14 +557,15 @@ export default {
this.$router.push(url)
}
},
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) {
this.getDetailById(this.saveID)
console.log(this.$route.query.id)
await this.getDetailById(this.$route.query.id)
}
},
mounted() {


+ 93
- 0
src/views/model/editPosition-chatgpt.vue Datei anzeigen

@@ -0,0 +1,93 @@
<template>
<div
class="image-container"
ref="container"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
>
<img
:src="imageUrl"
ref="image"
:style="{
transform:
'scale(' + scale + ') translate(' + offsetX + 'px, ' + offsetY + 'px)'
}"
/>
</div>
</template>

<script>
export default {
data() {
return {
imageUrl: 'https://picsum.photos/600/400',
lastX: 0,
lastY: 0,
isDragging: false,
startX: 0,
startY: 0,
scale: 1,
lastScale: 1,
offsetX: 0,
offsetY: 0
}
},
methods: {
onTouchStart(event) {
if (event.touches.length === 2) {
this.lastX = (event.touches[0].clientX + event.touches[1].clientX) / 2
this.lastY = (event.touches[0].clientY + event.touches[1].clientY) / 2
this.lastScale = this.scale
this.isDragging = false
} else if (event.touches.length === 1) {
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
this.isDragging = true
}
},
onTouchMove(event) {
if (event.touches.length === 2) {
const x = (event.touches[0].clientX + event.touches[1].clientX) / 2
const y = (event.touches[0].clientY + event.touches[1].clientY) / 2
const deltaX = x - this.lastX
const deltaY = y - this.lastY
const scale =
(event.touches[0].clientX - event.touches[1].clientX) /
(this.lastX - this.lastY)
this.scale = this.lastScale * scale
this.offsetX += deltaX
this.offsetY += deltaY
this.lastX = x
this.lastY = y
} else if (event.touches.length === 1 && this.isDragging) {
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
this.offsetX += deltaX
this.offsetY += deltaY
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
}
},
onTouchEnd(event) {
this.isDragging = false
}
}
}
</script>

<style>
.image-container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

img {
max-width: 100%;
max-height: 100%;
}
</style>

+ 182
- 0
src/views/model/editPosition-my.vue Datei anzeigen

@@ -0,0 +1,182 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<div @touchmove="onMouseMove" class="content">
<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
style="
{
top: item.x + 'px';
left: item.y + 'px';
transform: scale(item.scale);
}
"
>
<img :src="item.url" alt="" />
<div>11233</div>
</div> -->

<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
:style="{ top: item.x, left: item.y }"
>
<div>{{ item.text }}</div>
</div> -->
<div
@touchstart="onMouseDown"
@touchend="onMouseUp"
class="material"
:style="{
transform:
'scale(' +
scale +
') translate(' +
offsetX +
'px, ' +
offsetY +
'px)'
}"
></div>
</div>
</div>
</template>

<script>
// 组件
import Vue from 'vue'
import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
// 工具
import { scrollToID } from '../../utils'

Vue.use(Toast)
export default {
data() {
return {
inPage: false,
dragging: false,
startX: 0,
startY: 0, // 鼠标位置x y
scale: 1,
lastScale: 1,
offsetX: 200,
offsetY: 200,
materialList: [
{
text: '小div1',
url: 'img/BG@2x.b0cf224b.png',
x: 300,
y: 300,
scale: 1,
zIndex: 3,
num: 1
},
{
text: '小div2',
url: 'img/BG@2x.b0cf224b.png',
x: 100,
y: 0,
scale: 1,
zIndex: 13
},
{
text: '小div3',
url: '@/assets/icon/icon-trash',
x: 0,
y: 100,
scale: 1,
zIndex: 11
},
{
text: '小div4',
url: '@/assets/icon/icon-trash',
x: '100px',
y: '100px',
scale: 1,
zIndex: 10
},
{
text: '小div5',
url: '@/assets/icon/icon-trash',
x: 200,
y: 200,
scale: 1,
zIndex: 4
}
]
}
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters
})
},

methods: {
...mapActions(['setCharacters']),
// 鼠标按下事件
onMouseDown(event) {
this.dragging = true
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
},
// 鼠标抬起
onMouseUp() {
this.dragging = false
},
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
onMouseMove(event) {
if (!this.dragging) return
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
this.offsetX += deltaX
this.offsetY += deltaY
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
},
go(url) {
this.$router.push(url)
}
},
created() {},
mounted() {
this.inPage = true
scrollToID('top')
}
}
</script>

<style lang="scss" scoped>
.page {
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
&.active {
opacity: 1;
transform: translateX(0);
}
}
.content {
position: relative;
width: 375px;
height: 667px;
background-color: green;
.material {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 40px;
background-color: red;
img {
width: 30px;
height: 30px;
// background-color: red;
}
}
}
</style>

+ 213
- 0
src/views/model/editPosition.vue Datei anzeigen

@@ -0,0 +1,213 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<div class="content">
<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
style="
{
top: item.x + 'px';
left: item.y + 'px';
transform: scale(item.scale);
}
"
>
<img :src="item.url" alt="" />
<div>11233</div>
</div> -->

<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
:style="{ top: item.x, left: item.y }"
>
<div>{{ item.text }}</div>
</div> -->
<div
@touchmove="onMouseMove(index)"
@touchstart="onMouseDown(index)"
@touchend="onMouseUp(index)"
v-for="(item, index) in materialList"
:key="index"
class="material"
:style="{
transform:
'scale(' +
item.scale +
') translate(' +
item.x +
'px, ' +
item.y +
'px)',
zIndex: item.zIndex
}"
>
<img :src="item.url" alt="" />
<div>{{ item.text }}</div>
</div>
</div>
</div>
</template>

<script>
// 组件
import Vue from 'vue'
import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
// 工具
import { scrollToID } from '../../utils'

Vue.use(Toast)
export default {
data() {
return {
inPage: false,
dragging: false,
startX: 0,
startY: 0, // 鼠标位置x y
scale: 1,
lastScale: 1,
domIndex: -1, //当前点击的图片
offsetX: 200,
offsetY: 200,
materialList: [
{
text: '小div1',
url: 'img/BG@2x.b0cf224b.png',
x: 300,
y: 300,
scale: 1,
zIndex: 3,
num: 1
},
{
text: '小div2',
url: 'img/BG@2x.b0cf224b.png',
x: 100,
y: 0,
scale: 1,
zIndex: 13
},
{
text: '小div3',
url: '@/assets/icon/icon-trash',
x: 0,
y: 100,
scale: 1,
zIndex: 11
},
{
text: '小div4',
url: '../../assets/icon/icon-trash',
x: 100,
y: 100,
scale: 1,
zIndex: 10
},
{
text: '小div5',
url: '@/assets/icon/icon-trash',
x: 200,
y: 200,
scale: 1,
zIndex: 4
}
]
}
},

computed: {
...mapState({
characters: (state) => state.publicObj.characters
})
// imageStyles() {
// return this.images.map((image, index) => {
// return {
// zIndex: index,
// width: `${image.width}px`,
// height: `${image.height}px`,
// position: 'absolute',
// top: `${image.y}px`,
// left: `${image.x}px`,
// };
// });
// },
},

methods: {
...mapActions(['setCharacters']),
// 鼠标按下事件
onMouseDown(index) {
this.dragging = true
this.domIndex = index
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
},
// 鼠标抬起
onMouseUp(index) {
this.dragging = false
this.domIndex = -1
},
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
onMouseMove(index) {
if (!this.dragging) return
if (this.domIndex != index) return
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
this.materialList[index].x += deltaX
this.materialList[index].y += deltaY
if (this.materialList[index].x < 0) {
this.materialList[index].x = 0
}
if (this.materialList[index].y < 0) {
this.materialList[index].y = 0
}
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
},
go(url) {
this.$router.push(url)
}
},
created() {},
mounted() {
this.inPage = true
scrollToID('top')
}
}
</script>

<style lang="scss" scoped>
.page {
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
&.active {
opacity: 1;
transform: translateX(0);
}
}
.content {
position: relative;
width: 375px;
height: 667px;
background-color: green;
overflow: hidden;
.material {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 140px;
background-color: red;
img {
width: 30px;
height: 30px;
// background-color: red;
}
}
}
</style>

+ 0
- 489
src/views/myPage/myPage copy 3.vue Datei anzeigen

@@ -1,489 +0,0 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<!-- 顶部图 -->
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
<!-- 展示列表 -->
<div class="item">
<div class="title">
<img src="../../assets/img/myVideo.png" alt="">
我的视频作品
<span class="floatRight" style="float: right;">草稿箱</span>
</div>
<!-- 具体内容 -->
<MyVideoItem :videoList="videoList"/>
</div>
<!-- 分页 -->
<van-pagination
v-model="currentPage"
:total-items="total"
:items-per-page="4"
@change="pageChange"
/>

<div class="goAdd" @click="checkInviteCode">+ 创作新作品</div>

<div
class="messageCover"
:class="isShowMessageCover ? 'active' : ''"
@click="exitCover"
>
<div class="message" id="message">
<div class="connect" id="message">请添加微信与我们联系</div>
<div class="qrCode" id="message">
<img src="../../assets/img/SuiMangQRCode.png" alt="" />
</div>
<div class="phoneNum" id="message">或致电13260039498</div>
<div class="clickToClose">点击空白处关闭</div>
</div>
</div>
</div>
</template>

<script>
// 组件
import Vue from "vue";
import { Toast, Dialog } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import MyVideoItem from "./../../components/MyVideoItem.vue";
// 工具
import {
bytesToSize,
timestampToTime,
scrollToID,
formatSeconds,
} from "../../utils";
// 接口
import {
getVideoList,
doGetVideoDetialById,
doFindInviteCode,
deleteVideoById,
} from "../../api/myPage";

Vue.use(Toast);
export default {
components: {
HeadTop,
MyVideoItem
},
data() {
return {
showDialog: true,// 弹出层显示隐藏
inPage: false,
isShowMessageCover: false,
videoList: [],
currentPage: 1,
pageSize: 4,
prePage: "",
total: "",
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

go(url) {
this.$router.push(url);
},

changeTime(timestamp, form) {
return timestampToTime(timestamp, form);
},

pageChange() {
this.loadVideoList(this.currentPage, this.pageSize);
},

// 点击空白区域退出提示
exitCover(e) {
if (e.srcElement.id != "message") {
this.isShowMessageCover = false;
}
},

// 秒转化时分秒
formatSeconds(seconds) {
if (seconds) {
return formatSeconds(seconds);
} else {
return "无";
}
},

// 将bytes转化
bytesToSize(bytes) {
if (bytes) {
return bytesToSize(bytes);
} else {
return "无";
}
},

// 查看详情
goDetail(item) {
const status = item.videoStatus;
if (status == 0) {
this.$router.push({
path: "/getPaper",
query: {
id: item.id,
},
});
} else if (status == 1) {
Toast.fail("视频生成中");
return;
} else if (status == 2) {
const url = item.videoPathUri + item.videoPath;
this.$router.push({
path: "/downloadVideo",
query: {
videoId: item.videoId,
videoUrl: url,
},
});
} else if (status == 3) {
this.$router.push({
path: "/getPaper",
query: {
id: item.id,
},
});
}
},

goDelete(id) {
Dialog.confirm({
title: "删除作品",
message: "您确定要删除该作品吗?",
})
.then(() => {
this.deleteVideoById(id);
this.loadVideoList(this.currentPage, this.pageSize);
})
.catch(() => {
return;
});
},

/**
* @description:获取作品列表
*/
async loadVideoList(pageNum, pageSize) {
try {
const res = await getVideoList(pageNum, pageSize);
console.log(res, "获取作品列表");
this.videoList = res.data.list;
this.total = res.data.total;
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},

/**
* @description 通过视频id获取视频详情
*/
async getVideoDetialById(id) {
try {
const res = await doGetVideoDetialById(id);
console.log(res, "通过视频id获取视频详情");
return res.data;
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},

/**
* @description 根据id删除作品
*/
async deleteVideoById(id) {
try {
const res = await deleteVideoById(id);
console.log(res, "根据id删除作品");
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},

/**
* @description:查询用户邀请码状态
*/
async checkInviteCode() {
try {
const res = await doFindInviteCode();
console.log(res, "查询用户邀请码数据");
const status = res.data.status;

// 当没有邀请码时
if (status == 0) {
scrollToID("top");
this.isShowMessageCover = true;
} else if (status == 1) {
this.goCreateNew();
}
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},

goCreateNew() {
this.$router.push("/chooseModel");
},
},

mounted() {
this.inPage = true;
scrollToID("top");
},

created() {
this.loadVideoList(1, this.pageSize);
},
};
</script>

<style lang="scss" scoped>
.page {
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
padding-bottom: 25px;
&.active {
opacity: 1;
transform: translateX(0);
}
.logoBox {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
cursor: pointer;
background-color: #606060;
.logo {
float: left;
width: 140px;
height: 40px;
}
.userInfo {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
.userImg {
float: right;
width: 30px;
height: 30px;
margin-top: 3px;
margin-right: 10px;
margin-left: 15px;
}
}
}
.showIMG {
padding: 10px;
width: 100%;
height: 140px;
border-radius: 16px;
}
.item {
padding: 15px 10px;
.title {
font-size: 16px;
font-weight: 500;
// margin-left: 15px;
margin-bottom: 20px;
img {
margin-top: -5px;
vertical-align: middle;
width: 24px;
height: 18px;
background-size: 100% 100%;
}
}
::v-deep .itemList {
.videoModel {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.videoPrv {
width: 150px;
height: 100px;
// background-color: #979797;
img {
position: absolute;
width: 150px;
height: 100px;
border-radius: 6px;
}
.cover {
position: absolute;
width: 150px;
height: 100px;
line-height: 100px;
background-color: #00000034;
text-align: center;
border-radius: 6px;
color: #fff;
}
}
.videoInfo {
flex: 1;
margin-left: 12px;
.videoName {
font-size: 16px;
font-weight: 600;
}
.createTime {
font-size: 11px;
color: #999999;
margin-top: 10px;
}
}
.showMore {
width: 20px;
display: flex;
justify-content: space-between;
align-items: center;
// margin-left: 10px;
div {
width: 4px;
height: 4px;
background-color: #51D9CA;
}
}
.tag {
position: absolute;
right: 10px;
top: 10px;
padding: 1px 5px;
border-radius: 5px;
&.text {
color: #fff;
background-color: #a2a2a290;
}
&.generating {
background-color: #ffa600c2;
}
&.finish {
color: #ffffff;
background-color: #00ff88;
}
&.fail {
color: #ffffff;
background-color: #ff0000c3;
}
}
}
.noWork {
width: 100%;
height: 450px;
line-height: 450px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
}
}
.goAdd {
position: sticky;
bottom: 25px;
left: 10px;
width: 300px;
height: 42px;
line-height: 42px;
font-size: 15px;
color: #fff;
text-align: center;
transform: translateX(-50%);
background-color: #0068b7;
border-radius: 5px;
box-shadow: #60606082 1px 1px 1px 1px;
margin-top: 25px;
margin-left: 190px;
}
.messageCover {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #00000091;
transition: all 0.3s;
opacity: 0;
z-index: -1;
.message {
position: sticky;
top: 48%;
transform: translate(-50%, -50%);
width: 272px;
height: 290px;
border-radius: 5px;
background-color: #fff;
text-align: center;
transition: all 0.3s;
margin-left: 50%;
padding: 10px;

.connect {
font-size: 12px;
margin: 19px 0 10px 0;
}
.qrCode {
width: 203px;
height: 213px;
background-color: #ffffff;
border-radius: 5px;
border: solid 1px #595959;
margin: auto;
img {
width: 100%;
height: 100%;
}
}
.phoneNum {
float: left;
font-size: 11px;
margin-top: 8px;
margin-left: 34px;
}
.close {
position: absolute;
top: 8px;
right: 15px;
font-size: 18px;
color: #000;
}
.clickToClose {
position: absolute;
font-size: 14px;
color: #fff;
left: 50%;
bottom: -20%;
transform: translateX(-50%);
}
}

&.active {
z-index: 100;
opacity: 1;
}
}
.delete-button {
position: relative;
left: 1%;
height: 100%;
}
}
</style>

+ 219
- 112
src/views/myPage/myPage copy.vue Datei anzeigen

@@ -7,27 +7,31 @@
<!-- 展示列表 -->
<div class="item">
<div class="title">
<img src="../../assets/img/myVideo.png" alt="">
<img src="../../assets/img/myVideo.png" alt="" />
我的视频作品
<span class="floatRight" style="float: right">草稿箱</span>
</div>
<van-swipe-cell v-for="(item, index) in videoList">
<!-- 具体内容 -->
<van-swipe-cell
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"
@click="goDetail(item)"
>
<div class="videoPrv">
<!-- 每一项 -->
<div v-if="videoList.length > 0" class="videoModel" :key="index">
<!-- 左侧图片 -->
<div class="videoPrv" @click="goDetail(item)">
<img src="../../assets/img/BG@2x.png" />
<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 == ?" class="cover">排队中</div> -->
</div>
<div class="videoInfo">
<!-- 中间文字 -->
<div class="videoInfo" @click="goDetail(item)">
<div class="videoName">
{{ item.title || "暂无" }}
{{ item.title || '暂无' }}
</div>
<div class="createTime">
视频时长:{{ formatSeconds(item.videoTime) }}
@@ -37,17 +41,39 @@
</div>
<div class="createTime">
创建时间:{{
changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss")
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss')
}}
</div>
</div>
<!-- 右侧更多 -->
<div class="showMore" @click.stop="showDialog(item.id)">
<div></div>
<div></div>
<div></div>
</div>
<!-- 弹出层 -->
<van-popup v-if="clickItem == item.id" v-model="showPopup">
<!-- <div @click="closeDialog">
<i class="el-icon-edit" />&nbsp;编辑
</div> -->
<div @click="goDelete(item.id)">
<i class="el-icon-delete" />&nbsp;删除
</div>
</van-popup>

<!-- <van-dialog class="dialog"
v-model="clickItem==item?showTrue:showFalse">
<div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
<div><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
</van-dialog> -->
</div>
<!-- 无数据处理 -->
<div v-if="videoList.length <= 0" class="noWork">
您还没有视频作品
</div>
</div>

<template #right>
<!-- 右滑 -->
<!-- <template #right>
<van-button
square
text="删除"
@@ -55,7 +81,7 @@
class="delete-button"
@click="goDelete(item.id)"
/>
</template>
</template> -->
</van-swipe-cell>
</div>
<!-- 分页 -->
@@ -65,8 +91,11 @@
:items-per-page="4"
@change="pageChange"
/>

<div class="goAdd" @click="checkInviteCode">+ 创作新作品</div>
<!-- 创建新作品 -->
<!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> -->
<div class="goNewAdd" @click="checkInviteCode">
<i class="el-icon-plus"></i>
</div>

<div
class="messageCover"
@@ -87,131 +116,158 @@

<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";
formatSeconds
} from '../../utils'
// 接口
import {
getVideoList,
doGetVideoDetialById,
doFindInviteCode,
deleteVideoById,
} from "../../api/myPage";
deleteVideoById
} from '../../api/myPage'

Vue.use(Toast);
Vue.use(Toast)
export default {
components: {
HeadTop,
HeadTop
},
data() {
return {
showPopup: false, // 编辑和删除显示隐藏
clickItem: -1, // 弹出层显示隐藏
showTrue: true, // 弹出层显示隐藏
showFalse: false, // 弹出层显示隐藏
inPage: false,
isShowMessageCover: false,
videoList: [],
currentPage: 1,
pageSize: 4,
prePage: "",
total: "",
};
prePage: '',
total: ''
}
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
characters: (state) => state.publicObj.characters
})
},

methods: {
...mapActions(["setCharacters"]),

...mapActions(['setCharacters']),
closeDialog() {
Dialog.close
},
// 点击显示编辑删除
showDialog(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.loadVideoList(this.currentPage, this.pageSize)
},

// 点击空白区域退出提示
exitCover(e) {
if (e.srcElement.id != "message") {
this.isShowMessageCover = false;
if (e.srcElement.id != 'message') {
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) {
const status = item.videoStatus;
console.log(item)
const status = item.videoStatus
//草稿
if (status == 0) {
this.$router.push({
path: "/getPaper",
path: '/editModel',
query: {
id: item.id,
},
});
} else if (status == 1) {
Toast.fail("视频生成中");
return;
} else if (status == 2) {
const url = item.videoPathUri + item.videoPath;
saveID: item.id,
imgUrl: item.id,
modelId: item.id,
mouldSmId: item.id,
modify: true
}
})
}
//生成中
else if (status == 1) {
Toast.fail('视频生成中')
return
}
// 成功
else if (status == 2) {
const url = item.videoPathUri + item.videoPath
this.$router.push({
path: "/downloadVideo",
path: '/downloadVideo',
query: {
videoId: item.videoId,
videoUrl: url,
},
});
} else if (status == 3) {
videoUrl: url
}
})
}
// 失败
else if (status == 3) {
this.$router.push({
path: "/getPaper",
path: '/editModel',
query: {
id: item.id,
},
});
imgUrl: item.id,
modelId: item.id,
mouldSmId: item.id,
modify: true
}
})
}
},

// 删除作品
goDelete(id) {
Dialog.confirm({
title: "删除作品",
message: "您确定要删除该作品吗?",
title: '删除作品',
message: '您确定要删除该作品吗?'
})
.then(() => {
this.deleteVideoById(id);
this.loadVideoList(this.currentPage, this.pageSize);
.then(async () => {
await this.deleteVideoById(id)
this.loadVideoList(this.currentPage, this.pageSize)
})
.catch(() => {
return;
});
return
})
},

/**
@@ -219,13 +275,13 @@ export default {
*/
async loadVideoList(pageNum, pageSize) {
try {
const res = await getVideoList(pageNum, pageSize);
console.log(res, "获取作品列表");
this.videoList = res.data.list;
this.total = res.data.total;
const res = await getVideoList(pageNum, pageSize)
console.log(res, '获取作品列表')
this.videoList = res.data.list
this.total = res.data.total
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
console.log(error, 'error')
Toast.fail(error.message)
}
},

@@ -234,12 +290,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)
}
},

@@ -248,11 +304,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)
}
},

@@ -261,37 +317,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.loadVideoList(1, this.pageSize)
}
}
</script>

<style lang="scss" scoped>
@@ -333,15 +389,12 @@ export default {
}
.showIMG {
padding: 10px;
width: 355px;
height: 130px;
width: 100%;
height: 140px;
border-radius: 16px;
}
.item {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
padding: 15px 10px;
.title {
font-size: 16px;
font-weight: 500;
@@ -360,9 +413,8 @@ export default {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
border-bottom: 1px solid #00000010;
padding: 0 20px 25px 25px;
margin-bottom: 20px;

.videoPrv {
width: 150px;
height: 100px;
@@ -371,6 +423,7 @@ export default {
position: absolute;
width: 150px;
height: 100px;
border-radius: 6px;
}
.cover {
position: absolute;
@@ -379,22 +432,62 @@ export default {
line-height: 100px;
background-color: #00000034;
text-align: center;
border-radius: 6px;
color: #fff;
}
}
.videoInfo {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10px;
flex: 1;
margin-left: 12px;
.videoName {
font-size: 16px;
font-weight: 600;
}
.createTime {
font-size: 11px;
color: #999999;
margin-top: 5px;
}
}
.showMore {
width: 20px;
display: flex;
justify-content: space-between;
align-items: center;
// margin-left: 10px;
div {
width: 4px;
height: 4px;
background-color: #51d9ca;
}
}
.dialog {
i {
margin-left: -10px;
}
}
// 弹出层样式
::v-deep .van-popup {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
top: 70%;
left: 290px;
width: 80px;
height: 30px;
border-radius: 12px;
font-size: 14px;
line-height: 28px;
text-align: center;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
::v-deep .van-overlay {
background-color: rgba(0, 0, 0, 0);
}
::v-deep .van-button {
display: none;
}
.tag {
position: absolute;
right: 10px;
@@ -445,6 +538,20 @@ export default {
margin-top: 25px;
margin-left: 190px;
}
.goNewAdd {
position: sticky;
left: 300px;
bottom: 25px;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 40px;
line-height: 60px;
text-align: center;
color: #ffffff;
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25);
}
.messageCover {
position: fixed;
top: 0;


+ 125
- 18
src/views/myPage/myPage.vue Datei anzeigen

@@ -9,10 +9,61 @@
<div class="title">
<img src="../../assets/img/myVideo.png" alt="" />
我的视频作品
<span class="floatRight" style="float: right">草稿箱</span>
<span
v-show="listActive == 1"
class="floatRight"
@click="listActive = 2"
><img src="../../assets/icon/icon-list2.png" alt="" /></span
><span
@click="listActive = 1"
v-show="listActive == 2"
class="floatRight"
><img src="../../assets/icon/icon-list1.png" alt=""
/></span>
<span class="floatRight">只看竖屏</span>
<span class="floatRight">只看横屏</span>
</div>
<!-- 具体内容 -->
<!-- 列表样式--大图 -->
<div
v-show="listActive == 1"
v-masonry
class="waterFall"
item-selector=".waterFall-item"
column-width="175"
>
<div
v-masonry-tile
v-for="(item, index) in videoList"
class="waterFall-item"
:key="item.id ? item.id : index"
@click="goDetail(item)"
>
<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>
<!-- 列表样式--小图 -->
<van-swipe-cell
v-show="listActive == 2"
loading
v-for="(item, index) in videoList"
:key="item.id ? item.id : index"
@@ -60,28 +111,12 @@
<i class="el-icon-delete" />&nbsp;删除
</div>
</van-popup>

<!-- <van-dialog class="dialog"
v-model="clickItem==item?showTrue:showFalse">
<div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
<div><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
</van-dialog> -->
</div>
<!-- 无数据处理 -->
<div v-if="videoList.length <= 0" class="noWork">
您还没有视频作品
</div>
</div>
<!-- 右滑 -->
<!-- <template #right>
<van-button
square
text="删除"
type="danger"
class="delete-button"
@click="goDelete(item.id)"
/>
</template> -->
</van-swipe-cell>
</div>
<!-- 分页 -->
@@ -152,7 +187,10 @@ export default {
currentPage: 1,
pageSize: 4,
prePage: '',
total: ''
total: '',
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
defaultImg1: require('@/assets/img/bg.png'), //默认图片
listActive: 1 // 显示列表样式
}
},
computed: {
@@ -218,6 +256,7 @@ export default {
path: '/editModel',
query: {
saveID: item.id,
id: item.id,
imgUrl: item.id,
modelId: item.id,
mouldSmId: item.id,
@@ -351,6 +390,14 @@ export default {
</script>

<style lang="scss" scoped>
.floatRight {
margin-left: 20px;
img {
vertical-align: bottom !important;
margin-top: 2px !important;
color: red;
}
}
.page {
transform: translateX(30%);
opacity: 0;
@@ -624,4 +671,64 @@ export default {
height: 100%;
}
}

// 瀑布流
.waterFall {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-right: -20px;
width: 100%;
&-item {
// max-width: 355px; //非瀑布流
max-width: 170px;
max-height: 300px;
// background-color: red;
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
// background-color: red;
}
&-mask {
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 5px 8px 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
height: 80px;
width: 100%;
color: #f7dcdc;
}
&-state {
position: absolute;
top: 0px;
left: 0px;
padding: 7.5px;
border-radius: 0 0 12px 0;
color: #f7dcdc;
background-color: rgba(0, 0, 0, 0.3);
}
&-del {
position: absolute;
top: 0px;
right: 0px;
height: 30px;
width: 30px;
padding: 7.5px;
border-radius: 0 0 0 12px;
background-color: rgba(0, 0, 0, 0.3);
img {
height: 15px;
width: 15px;
}
}
}
}
</style>

+ 8
- 3
vue.config.js Datei anzeigen

@@ -1,6 +1,13 @@
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
},
css: {
loaderOptions: {
css: {
@@ -12,8 +19,6 @@ module.exports = {
// remUnit: 75
// })]
// }


}
},



+ 9223
- 8938
yarn.lock
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


Laden…
Abbrechen
Speichern