瀏覽代碼

样式修复及获取声音列表

master
congzc 2 年之前
父節點
當前提交
399e77245d
共有 4 個檔案被更改,包括 615 行新增439 行删除
  1. +62
    -52
      src/views/model/chooseModel.vue
  2. +403
    -243
      src/views/model/editModel.vue
  3. +33
    -30
      src/views/model/previewModel.vue
  4. +117
    -114
      src/views/myPage/myPage.vue

+ 62
- 52
src/views/model/chooseModel.vue 查看文件

@@ -3,9 +3,17 @@
<div id="top"></div> <div id="top"></div>
<HeadTop /> <HeadTop />
<!-- 顶部tab栏 --> <!-- 顶部tab栏 -->
<van-tabs @click="chooseType1" class="typeOutSide" animated color="#7264F5" line-width=46 line-height=6 title-inactive-color="#666" title-active-color="#333">
<van-tab v-for="item in tabList" :key="item" :title="item">
</van-tab>
<van-tabs
@click="chooseType1"
class="typeOutSide"
animated
color="#7264F5"
line-width="46"
line-height="6"
title-inactive-color="#666"
title-active-color="#333"
>
<van-tab v-for="item in tabList" :key="item" :title="item"> </van-tab>
</van-tabs> </van-tabs>


<!-- <div class="title">选择模板</div> --> <!-- <div class="title">选择模板</div> -->
@@ -46,54 +54,54 @@
</template> </template>


<script> <script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { Toast } from "vant";
import { scrollToID } from "../../utils";
import Vue from 'vue'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
import { Toast } from 'vant'
import { scrollToID } from '../../utils'
import { import {
getModeList, getModeList,
getModeDetailById, getModeDetailById,
saveOrUpdateUserVideo,
} from "../../api/chooseModel";
saveOrUpdateUserVideo
} from '../../api/chooseModel'


Vue.use(Toast);
Vue.use(Toast)
export default { export default {
components: { components: {
HeadTop,
HeadTop
}, },
data() { data() {
return { return {
inPage: false, inPage: false,
type: 0, type: 0,
currentId: "",
currentId: '',
modeList: [], // 模板列表 modeList: [], // 模板列表
tabList: ['全部','男性','女性','原P','武装直升机','粥P','二刺猿']
};
tabList: ['全部', '男性', '女性']
}
}, },
computed: { computed: {
...mapState({ ...mapState({
characters: (state) => state.publicObj.characters,
}),
characters: (state) => state.publicObj.characters
})
}, },


methods: { methods: {
...mapActions(["setCharacters"]),
...mapActions(['setCharacters']),
//点击tab栏选择模板列表 //点击tab栏选择模板列表
chooseType1(name, title) { chooseType1(name, title) {
this.type = this.tabList.findIndex(item => item==title)
this.loadModeList(this.type);
this.type = this.tabList.findIndex((item) => item == title)
this.loadModeList(this.type)
}, },
globalWatcher(e) { globalWatcher(e) {
console.log(e, "e");
console.log(e, 'e')
}, },


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


chooseModel(num) { chooseModel(num) {
this.phase = num;
this.phase = num
}, },


// chooseType(num) { // chooseType(num) {
@@ -103,48 +111,50 @@ export default {


selectModel(id) { selectModel(id) {
if (this.currentId != id) { if (this.currentId != id) {
this.currentId = id;
this.currentId = id
} else { } else {
this.getModeDetail(id);
this.getModeDetail(id)
} }
}, },


// 获取模板列表 // 获取模板列表
async loadModeList(sex) { async loadModeList(sex) {
try { try {
sex = sex == 0 ? "" : sex;
const res = await getModeList(sex);
console.log(res, "获取模板列表");
this.modeList = res.data.list;
sex = sex == 0 ? '' : sex
const res = await getModeList(sex)
console.log(res, '获取模板列表')
this.modeList = res.data.list
} catch (error) { } catch (error) {
console.log(error, "error");
Toast.fail(error.message);
console.log(error, 'error')
Toast.fail(error.message)
} }
}, },
// 根据id获取模板详情 // 根据id获取模板详情
async getModeDetail(id) { async getModeDetail(id) {
try { try {
const res = await getModeDetailById(id);
console.log(res, "根据id获取模板详情");
const modelDetail = res.data;
const res = await getModeDetailById(id)
console.log(res, '根据id获取模板详情')
const modelDetail = res.data
this.$router.push({ this.$router.push({
path: '/previewModel', path: '/previewModel',
query: { query: {
imgUrl: res.data.coverImg,
modelId:res.data.id }
imgUrl: res.data.coverImg, //模版图片路径
mouldSmId: res.data.mouldSmId, //模版标识
modelId: res.data.id //模版id
}
}) })


// this.goSetPaperWork(modelDetail); // this.goSetPaperWork(modelDetail);
} catch (error) { } catch (error) {
console.log(error, "error");
Toast.fail(error.message);
console.log(error, 'error')
Toast.fail(error.message)
} }
}, },


async saveToSetPaper(data, modelDetail) { async saveToSetPaper(data, modelDetail) {
try { try {
const res = await saveOrUpdateUserVideo(data);
console.log(res, "保存或修改用户作品");
const res = await saveOrUpdateUserVideo(data)
console.log(res, '保存或修改用户作品')
// this.$router.push({ // this.$router.push({
// path: "/getPaper", // path: "/getPaper",
// query: { // query: {
@@ -153,8 +163,8 @@ export default {
// }, // },
// }); // });
} catch (error) { } catch (error) {
console.log(error, "error");
Toast.fail(error.message);
console.log(error, 'error')
Toast.fail(error.message)
} }
}, },


@@ -168,21 +178,21 @@ export default {
// id: "", // id: "",
type: 1, type: 1,
personMouldId: modelDetail.id, //模板id personMouldId: modelDetail.id, //模板id
personMouldSmId: modelDetail.mouldSmId, //模板标识
personMouldSmId: modelDetail.mouldSmId //模板标识
// voiceMouldId: "", // voiceMouldId: "",
// voiceMouldId: "", // voiceMouldId: "",
};
this.saveToSetPaper(data, modelDetail);
},
}
this.saveToSetPaper(data, modelDetail)
}
}, },
mounted() { mounted() {
this.inPage = true;
scrollToID("top");
this.inPage = true
scrollToID('top')
}, },
created() { created() {
this.loadModeList(2);
},
};
this.loadModeList(2)
}
}
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
@@ -234,7 +244,7 @@ export default {
position: sticky; position: sticky;
top: 0px; top: 0px;
z-index: 99; z-index: 99;
.type { .type {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;


+ 403
- 243
src/views/model/editModel.vue 查看文件

@@ -1,283 +1,429 @@
<template> <template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<!-- 中间内容区 -->
<div class="content">
<!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="">
<!-- 字幕 -->
<div v-html="textareaContent" v-show="showSubtitle" class="shouModelImg-subtitle"></div>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<!-- 中间内容区 -->
<div class="content">
<!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="" />
<!-- 字幕 -->
<div
v-html="textareaContent"
v-show="showSubtitle"
class="shouModelImg-subtitle"
></div>
</div>
<!-- 文字 -->
<div class="addText">
<div class="addText-title">添加文案</div>
<div class="desalinate">
<span>已录入{{ textareaContent.length }}字</span>&nbsp;&nbsp;
<span>视频时长:&nbsp;00:16</span>
</div> </div>
<!-- 文字 -->
<div class="addText">
<div class="addText-title">添加文案</div>
<div class="desalinate">
<span>已录入{{textareaContent.length}}字</span>&nbsp;&nbsp;
<span>视频时长:&nbsp;00:16</span>
</div>
</div>
<!-- 标题框 -->
<div class="textInput">
<div class="textInput-in">
<!-- 标题 -->
<el-input v-model="inputTitle" placeholder="请输入标题">
<template slot="append">
<img src="../../assets/icon/icon-pencil.png" alt="" />
</template>
</el-input>
<div class="divider" />
<!-- 语音内容 -->
<el-input
@change="loadVoice"
rows="4"
type="textarea"
v-model="textareaContent"
></el-input>
</div> </div>
<!-- 标题框 -->
<div class="textInput">
<div class="textInput-in">
<!-- 标题 -->
<el-input v-model="inputTitle" placeholder="请输入标题">
<template slot="append">
<img src="../../assets/icon/icon-pencil.png" alt="">
</template>
</el-input>
<div class="divider" />
<!-- 语音内容 -->
<el-input rows="4" type="textarea" v-model="textareaContent"></el-input>
</div>
</div>
<!-- 播报声音 -->
<div class="addText">
<div class="addText-title">
播报声音<span class="redWord">(必选)</span>
</div> </div>
<!-- 播报声音 -->
<div class="addText">
<div class="addText-title">播报声音<span class="redWord">(必选)</span></div>
<div>
英语_女性_安娜
<div>英语_女性_安娜</div>
</div>
<!-- 合成按钮 -->
<div class="makeVideo" @click="videoMake">立即制作</div>
<!-- 上移下移 -->
<div v-if="false" class="upAndBottomBtn">
<div class="moveLayer">
<div class="btnContent">
<img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388"
alt=""
/>
上移一层
</div> </div>
</div> </div>
<!-- 合成按钮 -->
<div class="makeVideo" @click="showSynthesisDialog=true">立即制作</div>
<!-- 上移下移 -->
<div class="upAndBottomBtn">
<div class="moveLayer">
<div class="btnContent">
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="">
上移一层
</div>
</div>
<div class="moveLayer below">
<div class="btnContent active">
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="">
下移一层
</div>
<div class="moveLayer below">
<div class="btnContent active">
<img
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd"
alt=""
/>
下移一层
</div> </div>
</div> </div>
</div> </div>
<!-- 底部导航栏 -->
<div class="bottom">
<van-tabbar class="bottom-tab">
<van-tabbar-item @click="clickBottomTab(1)">
<span>更改声音</span>
<template #icon="props">
<img src="../../assets/icon/icon-microphone.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(2)">
<span>更改背景</span>
<template #icon="props">
<img src="../../assets/icon/icon-background.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(3)">
<span>添加素材</span>
<template #icon="props">
<img src="../../assets/icon/icon-material.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(4)">
<span v-show="showSubtitle">取消字幕</span>
<span v-show="!showSubtitle">添加字幕</span>
<template #icon="props">
<img src="../../assets/icon/icon-subtitle.png" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>
</div>


<!-- 合成视频进度条 -->
<div v-if="showSynthesisDialog" class="synthesisDialog">
<div class="synthesisDialog-in">
<el-progress color="#7264F5" define-back-color="#f0effe" stroke-width="12" class="progress" :percentage="26"></el-progress>
<div class="synthesisDialog-text">正在生成视频,请耐心等待!</div>
</div>
<!-- 底部导航栏 -->
<div class="bottom">
<van-tabbar class="bottom-tab">
<van-tabbar-item @click="clickBottomTab(1)">
<span>更改声音</span>
<template #icon="props">
<img src="../../assets/icon/icon-microphone.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(2)">
<span>更改背景</span>
<template #icon="props">
<img src="../../assets/icon/icon-background.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(3)">
<span>添加素材</span>
<template #icon="props">
<img src="../../assets/icon/icon-material.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(4)">
<span v-show="showSubtitle">取消字幕</span>
<span v-show="!showSubtitle">添加字幕</span>
<template #icon="props">
<img src="../../assets/icon/icon-subtitle.png" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>

<!-- 合成视频进度条 -->
<div v-if="showSynthesisDialog" class="synthesisDialog">
<div class="synthesisDialog-in">
<el-progress
color="#7264F5"
define-back-color="#f0effe"
stroke-width="12"
class="progress"
:percentage="26"
></el-progress>
<div class="synthesisDialog-text">正在生成视频,请耐心等待!</div>
</div> </div>
</div>


<!-- 点击tab栏弹出框 -->
<van-action-sheet class="tabSheet" v-model="showTabSheet" >
<!-- 声音 -->
<div v-show="bottomTabActive==1">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-microphone.png" alt=""> 更改声音</div>
<div><img class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></div>
<!-- 点击tab栏弹出框 -->
<van-action-sheet class="tabSheet" v-model="showTabSheet">
<!-- 声音 -->
<div v-show="bottomTabActive == 1">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div>
<img
class="img"
src="../../assets/icon/icon-microphone.png"
alt=""
/>
更改声音
</div> </div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<van-tabs color="#7264F5" line-width=46 line-height=6 title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable>
<van-tab v-for="(item,index) in soundTabList" :title="item" :key="index">
<!-- 展示页 -->
<div class="list">
<div @click="soundItemListAction=index" class="listItem" :class="{ 'active': soundItemListAction ===index }" v-for="(item,index) in soundItemList" :key="index">
<img src="../../assets/icon/icon-earphone.png" alt="">
<div >{{ item }}</div>
</div>
</div>
</van-tab>
</van-tabs>
<div @click="showTabSheet = !showTabSheet">
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
</div> </div>
</div> </div>
<!-- 背景 -->
<div v-show="bottomTabActive==2">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-background.png" alt=""> 更换背景</div>
<div><img class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<van-tabs
color="#7264F5"
line-width="46"
line-height="6"
title-inactive-color="#666"
title-active-color="#333"
v-model="soundListAction"
swipeable
>
<van-tab
v-for="(item, index) in soundTabList"
:title="item"
:key="index"
>
<!-- 展示页 -->
<div class="list">
<div v-if="soundItemList.length == 0">暂无数据</div>
<div
v-if="soundItemList.length != 0"
@click="soundItemListAction = index"
class="listItem"
:class="{ active: soundItemListAction === index }"
v-for="(item, index) in soundItemList"
:key="index"
>
<img src="../../assets/icon/icon-earphone.png" alt="" />
<div>{{ item.title }}</div>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</div>
<!-- 背景 -->
<div v-show="bottomTabActive == 2">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div>
<img
class="img"
src="../../assets/icon/icon-background.png"
alt=""
/>
更换背景
</div> </div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div @click="bjAction=0" class="myTab-item" :class="{'active':bjAction==0}"><img src="../../assets/icon/icon-folder@2x.png" alt=""> 背景库</div>
<div @click="bjAction=1" class="myTab-item" :class="{'active':bjAction==1}"><img src="../../assets/icon/icon-upload@2x.png" alt="">我上传的</div>
<div @click="showTabSheet = !showTabSheet">
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div
@click="bjAction = 0"
class="myTab-item"
:class="{ active: bjAction == 0 }"
>
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库
</div> </div>
<!-- 展示 -->
<div class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="bjAction==1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="">
<input type="file">
<div
@click="bjAction = 1"
class="myTab-item"
:class="{ active: bjAction == 1 }"
>
<img src="../../assets/icon/icon-upload@2x.png" alt="" />我上传的
</div>
</div>
<!-- 展示 -->
<div v-if="bjLibrary.length == 0">暂无数据</div>
<div v-if="bjLibrary.length != 0" class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="bjAction == 1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="" />
<input type="file" />
</div>
<!-- 图片列表 -->
<div
@click="bjImgAction = index"
class="myTab-show-list-item"
v-for="(item, index) in 7"
:key="index"
>
<div
:class="{ 'myTab-show-list-active': bjImgAction == index }"
>
<div class="whiteBox"></div>
</div> </div>
<!-- 图片列表 -->
<div @click="bjImgAction=index" class="myTab-show-list-item" v-for="(item,index) in 7" :key="index" >
<div :class=" {'myTab-show-list-active':bjImgAction==index}">
<div class="whiteBox">
</div>
</div>
<!-- 删除上传素材 -->
<div class="icon-error" v-if="bjAction==1&&bjImgAction==index">
×
</div>
<!-- 中间图片 -->
<img src="" alt="">
<!-- 删除上传素材 -->
<div
class="icon-error"
v-if="bjAction == 1 && bjImgAction == index"
>
×
</div> </div>
<!-- 中间图片 -->
<img src="" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 素材 -->
<div v-show="bottomTabActive==3">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-material.png" alt=""> 更换素材</div>
<div><img class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></div>
</div>
<!-- 素材 -->
<div v-show="bottomTabActive == 3">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div>
<img class="img" src="../../assets/icon/icon-material.png" alt="" />
更换素材
</div>
<div @click="showTabSheet = !showTabSheet">
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" />
</div> </div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div @click="scAction=0" class="myTab-item" :class="{'active':scAction==0}"><img src="../../assets/icon/icon-folder@2x.png" alt=""> 背景库</div>
<div @click="scAction=1" class="myTab-item" :class="{'active':scAction==1}"><img src="../../assets/icon/icon-upload@2x.png" alt="">我上传的</div>
</div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div
@click="scAction = 0"
class="myTab-item"
:class="{ active: scAction == 0 }"
>
<img src="../../assets/icon/icon-folder@2x.png" alt="" /> 背景库
</div>
<div
@click="scAction = 1"
class="myTab-item"
:class="{ active: scAction == 1 }"
>
<img src="../../assets/icon/icon-upload@2x.png" alt="" />我上传的
</div> </div>
<!-- 展示 -->
<div class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="scAction==1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="">
<input type="file">
</div>
<!-- 展示 -->
<div v-if="bjLibrary.length == 0">暂无数据</div>
<div v-if="scLibrary.length != 0" class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="scAction == 1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="" />
<input type="file" />
</div>
<!-- 图片列表 -->
<div
@click="scImgAction = index"
class="myTab-show-list-item"
v-for="(item, index) in 7"
:key="index"
>
<div
:class="{ 'myTab-show-list-active': scImgAction == index }"
>
<div class="whiteBox"></div>
</div> </div>
<!-- 图片列表 -->
<div @click="scImgAction=index" class="myTab-show-list-item" v-for="(item,index) in 7" :key="index" >
<div :class=" {'myTab-show-list-active':scImgAction==index}">
<div class="whiteBox">
</div>
</div>
<!-- 删除上传素材 -->
<div class="icon-error" v-if="scAction==1&&scImgAction==index">
×
</div>
<!-- 中间图片 -->
<img src="" alt="">
<!-- 删除上传素材 -->
<div
class="icon-error"
v-if="scAction == 1 && scImgAction == index"
>
×
</div> </div>
<!-- 中间图片 -->
<img src="" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</van-action-sheet>
</div>
</div>
</van-action-sheet>
</div>
</template> </template>


<script> <script>
// 组件 // 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import Vue from 'vue'
import { Toast } from 'vant'
import { mapState, mapActions } from 'vuex'
import HeadTop from './../../components/common/head.vue'
// 工具 // 工具
import { scrollToID } from "../../utils";
import { scrollToID } from '../../utils'
// 接口
import {
doCreateVideo,
doFindVideoById,
getVoiceList,
getBackGroundList,
doFindInviteCode,
saveOrUpdateUserVideo
} from '@/api/generateVideo'


Vue.use(Toast);
Vue.use(Toast)
export default { export default {
components: { components: {
HeadTop,
HeadTop
}, },
data() { data() {
return { return {
inPage: false, inPage: false,
imgUrl:null,
imgUrl: null,
modelId: null, modelId: null,
mouldSmId: null,
inputTitle: '', inputTitle: '',
textareaContent: '', // 输入框内容 textareaContent: '', // 输入框内容
bottomTabActive: 2,// 底部导航高亮
showSubtitle: true, // 是否展示字幕
showSynthesisDialog: false,//合成进度条窗口显示隐藏
showTabSheet: false, //tab栏弹出框显隐
soundTabList: ['男生', '女生', '御姐', '萝莉'], // 声音tab栏标题
soundListAction:-1,//声音tab栏标题高亮
soundItemList: ['普通话', '英语', '日语', '日语', '日语', '日语', '日语'],// 声音展示列表
soundItemListAction:-1,// 声音展示列表高亮
bjAction:-1,// 背景:素材库和上传高亮
bjImgAction:-1,// 选中背景图高亮
scAction:-1,// 素材:素材库和上传高亮
scImgAction:-1,// 选中素材图高亮
};
bottomTabActive: 2, // 底部导航高亮
showSubtitle: false, // 是否展示字幕
showSynthesisDialog: false, //合成进度条窗口显示隐藏
showTabSheet: false, //tab栏弹出框显隐
soundTabList: ['全部'], // 声音tab栏标题
soundListAction: -1, //声音tab栏标题高亮
soundItemList: [], // 声音展示列表
soundItemListAction: -1, // 声音展示列表高亮
bjAction: 0, // 背景:素材库和上传高亮
bjImgAction: -1, // 选中背景图高亮
scAction: 0, // 素材:素材库和上传高亮
scImgAction: -1, // 选中素材图高亮
bjLibrary: [], // 背景库列表
myBjLibrary: [], // 我上传的背景库列表
scLibrary: [], // 素材库列表
myScLibrary: [] // 我上传的素材库列表
}
}, },
computed: { computed: {
...mapState({ ...mapState({
characters: (state) => state.publicObj.characters,
}),
characters: (state) => state.publicObj.characters
})
}, },


methods: { methods: {
...mapActions(["setCharacters"]),
...mapActions(['setCharacters']),
// 点击底部tab栏 // 点击底部tab栏
clickBottomTab(index) { clickBottomTab(index) {
if (index != 4) { if (index != 4) {
this.bottomTabActive = index this.bottomTabActive = index
console.log(this.bottomTabActive);
this.showTabSheet=!this.showTabSheet
console.log(this.bottomTabActive)
this.showTabSheet = !this.showTabSheet
} else { } else {
//字幕切换 //字幕切换
this.showSubtitle=!this.showSubtitle
this.showSubtitle = !this.showSubtitle
} }
}, },
go(url) {
this.$router.push(url);
// 点击立即制作
videoMake() {
if (this.textareaContent.length == 0) {
Toast('您还没有输入文案')
}
},
// 获取声音列表
async loadVoice() {
if (this.textareaContent.length != 0) {
const data = {
paperwork: this.textareaContent
}
try {
const res = await getVoiceList(data)
console.log(res, '获取声音列表')
this.soundItemList = res.data.list
} catch (error) {
console.log(error, 'error')
Toast.fail(error.message)
}
} else {
Toast('您还没有输入文案')
}
}, },
go(url) {
this.$router.push(url)
}
}, },
created() { created() {
this.imgUrl=this.$route.query.imgUrl
this.modelId=this.$route.query.modelId
this.imgUrl = this.$route.query.imgUrl
this.modelId = this.$route.query.modelId
this.mouldSmId = this.$route.query.mouldSmId
}, },
mounted() { mounted() {
this.inPage = true;
scrollToID("top");
},
};
this.inPage = true
scrollToID('top')
}
}
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {

// transform会导致其子元素固定定位失效 // transform会导致其子元素固定定位失效
// transform: translateX(30%); // transform: translateX(30%);
opacity: 0; opacity: 0;
@@ -292,17 +438,16 @@ export default {
padding: 0 10px; padding: 0 10px;
padding-bottom: 50px; padding-bottom: 50px;


.shouModelImg { .shouModelImg {
display: flex; display: flex;
position: relative; position: relative;
justify-content: center ;
justify-content: center;
width: 100%; width: 100%;
img { img {
width: 200px; width: 200px;
height: 351px; height: 351px;
border-radius: 12px; border-radius: 12px;
};
}
&-subtitle { &-subtitle {
position: absolute; position: absolute;
top: 220px; top: 220px;
@@ -312,7 +457,7 @@ export default {
width: 160px; width: 160px;
height: 24px; height: 24px;
line-height: 20px; line-height: 20px;
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
@@ -332,7 +477,11 @@ export default {
margin-top: 10px; margin-top: 10px;
padding: 1px; padding: 1px;
width: 100%; width: 100%;
background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));
background: linear-gradient(
225deg,
rgba(81, 217, 202, 1),
rgba(114, 100, 245, 1)
);
border-radius: 6px; border-radius: 6px;
&-in { &-in {
width: 100%; width: 100%;
@@ -354,7 +503,12 @@ export default {
width: 100%; width: 100%;
height: 1px; height: 1px;
border-top: 1px solid; border-top: 1px solid;
border-image: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)) 1 1;
border-image: linear-gradient(
225deg,
rgba(81, 217, 202, 1),
rgba(114, 100, 245, 1)
)
1 1;
} }
::v-deep .el-input__inner { ::v-deep .el-input__inner {
border: none; border: none;
@@ -373,7 +527,7 @@ export default {
font-size: 20px; font-size: 20px;
line-height: 50px; line-height: 50px;
color: #fff; color: #fff;
background: linear-gradient(316deg, #6EE4D7 0%, #37C4F1 32%, #A49AFC 100%);
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
border-radius: 25px; border-radius: 25px;
} }
.upAndBottomBtn { .upAndBottomBtn {
@@ -409,9 +563,8 @@ export default {
} }
} }
.bottom { .bottom {

::v-deep .van-tabbar-item { ::v-deep .van-tabbar-item {
color: rgba(51, 51, 51, 1)!important;
color: rgba(51, 51, 51, 1) !important;
font-size: 10px !important; font-size: 10px !important;
} }
} }
@@ -422,8 +575,8 @@ export default {
width: 100vw; width: 100vw;
height: 110vh; height: 110vh;
z-index: 99999; z-index: 99999;
color:#333;
background: rgba(0,0,0,0.5);
color: #333;
background: rgba(0, 0, 0, 0.5);
&-in { &-in {
position: absolute; position: absolute;
top: 40%; top: 40%;
@@ -449,12 +602,12 @@ export default {
} }
.tabSheet { .tabSheet {
height: 280px; height: 280px;
padding: 10px;
padding-bottom: 0px; padding-bottom: 0px;
background-color: #f9f9f9; background-color: #f9f9f9;
&-title { &-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 10px;
height: 40px; height: 40px;
font-size: 13px; font-size: 13px;
line-height: 40px; line-height: 40px;
@@ -466,15 +619,16 @@ export default {
height: 16px; height: 16px;
} }
.yesImg { .yesImg {
margin-top: -13px;
margin-top: -3px;
width: 24px; width: 24px;
height: 16px; height: 16px;
} }
} }
&-content { &-content {
height: 220px; height: 220px;
padding: 0 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
::v-deep .van-tab{
::v-deep .van-tab {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
::v-deep .van-tab--active { ::v-deep .van-tab--active {
@@ -499,31 +653,32 @@ export default {
width: 170px; width: 170px;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
background: rgba(186,186,189,0.5);
background: rgba(186, 186, 189, 0.5);
border-radius: 24px; border-radius: 24px;
color: #fff; color: #fff;
img { img {
width: 32px; width: 32px;
} }
>div {
> div {
flex: 1; flex: 1;
margin-left: 12px; margin-left: 12px;
} }
} }
.active { .active {
background: #7264F5;
background: #7264f5;
} }
} }
.list::-webkit-scrollbar { .list::-webkit-scrollbar {
width:0;
width: 0;
} }
} }
.myTab { .myTab {
display: flex; display: flex;
margin: 10px 0;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
height: 40px; height: 40px;
background-color: #EEEEEE;
background-color: #eeeeee;
border-radius: 6px; border-radius: 6px;
&-item { &-item {
width: 50%; width: 50%;
@@ -531,7 +686,7 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
background-color: #EEEEEE;
background-color: #eeeeee;
border-radius: 6px; border-radius: 6px;
img { img {
width: 20px; width: 20px;
@@ -544,7 +699,7 @@ export default {
} }
&-show { &-show {
width: 100%; width: 100%;
height: 190px;
height: 170px;
&-title { &-title {
font-size: 16px; font-size: 16px;
i { i {
@@ -553,7 +708,7 @@ export default {
margin-left: 3px; margin-left: 3px;
width: 23px; width: 23px;
height: 3px; height: 3px;
background: #7264F5;
background: #7264f5;
border-radius: 2px; border-radius: 2px;
} }
} }
@@ -564,10 +719,8 @@ export default {
display: flex; display: flex;
justify-content: start; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
&-list::-webkit-scrollbar {
width:0;
}
&-item {

&-item {
position: relative; position: relative;
margin-right: 9px; margin-right: 9px;
margin-top: 10px; margin-top: 10px;
@@ -587,7 +740,7 @@ export default {
top: 5px; top: 5px;
right: 5px; right: 5px;
z-index: 99999; z-index: 99999;
display: block!important;
display: block !important;
float: right; float: right;
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -598,11 +751,10 @@ export default {
border-radius: 6px; border-radius: 6px;
} }
&:nth-child(4n) { &:nth-child(4n) {
margin-right: 0px!important;
margin-right: 0px !important;
} }
} }
&-active { &-active {
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -3px; left: -3px;
@@ -611,8 +763,12 @@ export default {
width: 86px; width: 86px;
height: 126px; height: 126px;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));

background: linear-gradient(
225deg,
rgba(81, 217, 202, 1),
rgba(114, 100, 245, 1)
);
.whiteBox { .whiteBox {
transition: all 0.5s; transition: all 0.5s;
width: 100%; width: 100%;
@@ -634,7 +790,7 @@ export default {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
} }
input { input {
width: 100%; width: 100%;
@@ -645,5 +801,9 @@ export default {
} }
} }
} }
// 隐藏滚动条
.myTab-show-list::-webkit-scrollbar {
display: none;
}
} }
</style> </style>

+ 33
- 30
src/views/model/previewModel.vue 查看文件

@@ -4,7 +4,7 @@
<HeadTop /> <HeadTop />
<!-- 展示图片 --> <!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg"> <div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="">
<img :src="imgUrl" alt="" />
</div> </div>
<div class="makeMpdel" @click="handleMakeMpdel">立即制作</div> <div class="makeMpdel" @click="handleMakeMpdel">立即制作</div>
</div> </div>
@@ -12,57 +12,60 @@


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


Vue.use(Toast);
Vue.use(Toast)
export default { export default {
components: { components: {
HeadTop,
HeadTop
}, },
data() { data() {
return { return {
inPage: false, inPage: false,
imgUrl: null,
modelId:null
};
imgUrl: null, //模版图片地址
modelId: null, //模版id
mouldSmId: null //模版标识
}
}, },
computed: { computed: {
...mapState({ ...mapState({
characters: (state) => state.publicObj.characters,
}),
characters: (state) => state.publicObj.characters
})
}, },


methods: { methods: {
...mapActions(["setCharacters"]),
...mapActions(['setCharacters']),
// 点击立即制作 // 点击立即制作
handleMakeMpdel() { handleMakeMpdel() {
this.$router.push({ this.$router.push({
path: '/editModel',
query: {
imgUrl: this.imgUrl,
modelId: this.modelId
}
})
path: '/editModel',
query: {
imgUrl: this.imgUrl,
modelId: this.modelId,
mouldSmId: this.mouldSmId
}
})
}, },


go(url) { go(url) {
this.$router.push(url);
},
this.$router.push(url)
}
}, },
created() { created() {
this.imgUrl=this.$route.query.imgUrl
this.modelId=this.$route.query.modelId
this.imgUrl = this.$route.query.imgUrl
this.modelId = this.$route.query.modelId
this.mouldSmId = this.$route.query.mouldSmId
}, },
mounted() { mounted() {
this.inPage = true;
scrollToID("top");
},
};
this.inPage = true
scrollToID('top')
}
}
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
@@ -77,7 +80,7 @@ export default {
} }
.shouModelImg { .shouModelImg {
padding: 20px 30px; padding: 20px 30px;
img { img {
width: 315px; width: 315px;
height: 518px; height: 518px;
@@ -92,7 +95,7 @@ export default {
font-size: 20px; font-size: 20px;
line-height: 50px; line-height: 50px;
color: #fff; color: #fff;
background: linear-gradient(316deg, #6EE4D7 0%, #37C4F1 32%, #A49AFC 100%);
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
border-radius: 25px; border-radius: 25px;
} }
</style> </style>

+ 117
- 114
src/views/myPage/myPage.vue 查看文件

@@ -7,19 +7,18 @@
<!-- 展示列表 --> <!-- 展示列表 -->
<div class="item"> <div class="item">
<div class="title"> <div class="title">
<img src="../../assets/img/myVideo.png" alt="">
<img src="../../assets/img/myVideo.png" alt="" />
我的视频作品 我的视频作品
<span class="floatRight" style="float: right;">草稿箱</span>
<span class="floatRight" style="float: right">草稿箱</span>
</div> </div>
<!-- 具体内容 --> <!-- 具体内容 -->
<van-swipe-cell v-for="(item, index) in videoList" :key="item.id?item.id:index">
<van-swipe-cell
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">
<!-- 左侧图片 --> <!-- 左侧图片 -->
<div class="videoPrv" @click="goDetail(item)"> <div class="videoPrv" @click="goDetail(item)">
<img src="../../assets/img/BG@2x.png" /> <img src="../../assets/img/BG@2x.png" />
@@ -31,7 +30,7 @@
<!-- 中间文字 --> <!-- 中间文字 -->
<div class="videoInfo" @click="goDetail(item)"> <div class="videoInfo" @click="goDetail(item)">
<div class="videoName"> <div class="videoName">
{{ item.title || "暂无" }}
{{ item.title || '暂无' }}
</div> </div>
<div class="createTime"> <div class="createTime">
视频时长:{{ formatSeconds(item.videoTime) }} 视频时长:{{ formatSeconds(item.videoTime) }}
@@ -41,7 +40,7 @@
</div> </div>
<div class="createTime"> <div class="createTime">
创建时间:{{ 创建时间:{{
changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss")
changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss')
}} }}
</div> </div>
</div> </div>
@@ -52,9 +51,13 @@
<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;&nbsp;&nbsp;编辑</div>
<div @click="goDelete(item.id)"><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</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-popup>


<!-- <van-dialog class="dialog" <!-- <van-dialog class="dialog"
@@ -90,7 +93,7 @@
<!-- 创建新作品 --> <!-- 创建新作品 -->
<!-- <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 <div
@@ -112,142 +115,142 @@


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


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


methods: { methods: {
...mapActions(["setCharacters"]),
...mapActions(['setCharacters']),
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.loadVideoList(this.currentPage, this.pageSize)
}, },


// 点击空白区域退出提示 // 点击空白区域退出提示
exitCover(e) { exitCover(e) {
if (e.srcElement.id != "message") {
this.isShowMessageCover = false;
if (e.srcElement.id != 'message') {
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) {
const status = item.videoStatus;
const status = item.videoStatus
if (status == 0) { if (status == 0) {
this.$router.push({ this.$router.push({
path: "/getPaper",
path: '/getPaper',
query: { query: {
id: item.id,
},
});
id: item.id
}
})
} else if (status == 1) { } else if (status == 1) {
Toast.fail("视频生成中");
return;
Toast.fail('视频生成中')
return
} else if (status == 2) { } else if (status == 2) {
const url = item.videoPathUri + item.videoPath;
const url = item.videoPathUri + item.videoPath
this.$router.push({ this.$router.push({
path: "/downloadVideo",
path: '/downloadVideo',
query: { query: {
videoId: item.videoId, videoId: item.videoId,
videoUrl: url,
},
});
videoUrl: url
}
})
} else if (status == 3) { } else if (status == 3) {
this.$router.push({ this.$router.push({
path: "/getPaper",
path: '/getPaper',
query: { query: {
id: item.id,
},
});
id: item.id
}
})
} }
}, },
// 删除作品 // 删除作品
goDelete(id) { goDelete(id) {
Dialog.confirm({ Dialog.confirm({
title: "删除作品",
message: "您确定要删除该作品吗?",
title: '删除作品',
message: '您确定要删除该作品吗?'
}) })
.then(async() => {
await this.deleteVideoById(id);
this.loadVideoList(this.currentPage, this.pageSize);
.then(async () => {
await this.deleteVideoById(id)
this.loadVideoList(this.currentPage, this.pageSize)
}) })
.catch(() => { .catch(() => {
return;
});
return
})
}, },


/** /**
@@ -255,13 +258,13 @@ export default {
*/ */
async loadVideoList(pageNum, pageSize) { async loadVideoList(pageNum, pageSize) {
try { 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) { } catch (error) {
console.log(error, "error");
Toast.fail(error.message);
console.log(error, 'error')
Toast.fail(error.message)
} }
}, },


@@ -270,12 +273,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)
} }
}, },


@@ -284,11 +287,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)
} }
}, },


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


<style lang="scss" scoped> <style lang="scss" scoped>
@@ -394,7 +397,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
.videoPrv { .videoPrv {
width: 150px; width: 150px;
height: 100px; height: 100px;
@@ -438,7 +441,7 @@ export default {
div { div {
width: 4px; width: 4px;
height: 4px; height: 4px;
background-color: #51D9CA;
background-color: #51d9ca;
} }
} }
.dialog { .dialog {
@@ -454,7 +457,7 @@ export default {
justify-content: center; justify-content: center;
top: 70%; top: 70%;
left: 290px; left: 290px;
padding-left: 10px;
width: 80px; width: 80px;
height: 60px; height: 60px;
border-radius: 12px; border-radius: 12px;
@@ -464,7 +467,7 @@ export default {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
} }
::v-deep .van-overlay { ::v-deep .van-overlay {
background-color: rgba(0,0,0,0);
background-color: rgba(0, 0, 0, 0);
} }
::v-deep .van-button { ::v-deep .van-button {
display: none; display: none;
@@ -520,18 +523,18 @@ export default {
margin-left: 190px; margin-left: 190px;
} }
.goNewAdd { .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);
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 { .messageCover {
position: fixed; position: fixed;


Loading…
取消
儲存