@@ -0,0 +1,61 @@ | |||
import request from '@/utils/request' | |||
/** | |||
* @description 通过id获取视频 | |||
* @param {number | string} id | |||
* @returns data | |||
*/ | |||
export function doFindVideoById(id) { | |||
return request({ | |||
url: `/api/userVideo/findVideo?id=${id}`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 生成视频 | |||
* @param {object} data | |||
* @returns data | |||
*/ | |||
export function doCreateVideo(data) { | |||
return request({ | |||
url: `/api/userVideo/createVideo`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 查询用户邀请码状态 | |||
* @returns data | |||
*/ | |||
export function doFindInviteCode() { | |||
return request({ | |||
url: `/api/inviteCode/find`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 获取声音列表 | |||
* @param {object} data | |||
* @returns data | |||
*/ | |||
export function getVoiceList(data) { | |||
return request({ | |||
url: `/api/mouldPatch/voiceList?pageNum=1&pageSize=10`, | |||
method: 'post', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 获取背景列表 | |||
* @returns data | |||
*/ | |||
export function getBackGroundList() { | |||
return request({ | |||
url: `/api/mouldPatch/list?type=4&pageNum=1&pageSize=10`, | |||
method: 'get', | |||
}) | |||
} |
@@ -0,0 +1,26 @@ | |||
import request from '@/utils/request' | |||
/** | |||
* @description:根据id获取用户作品详情 | |||
* @param {number} id | |||
* @return data | |||
*/ | |||
export function getModelDetailById(id) { | |||
return request({ | |||
url: `/api/userVideo/findById?id=${id}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description:保存或修改用户作品 | |||
* @param {object} data | |||
* @return data | |||
*/ | |||
export function saveOrUpdateUserVideo(data) { | |||
return request({ | |||
url: `/api/userVideo/saveOrUpdate`, | |||
method: 'post', | |||
data: data | |||
}) | |||
} |
@@ -0,0 +1,50 @@ | |||
import request from '@/utils/request' | |||
/** | |||
* @description 获取手机验证码 | |||
* @param {number} phone | |||
* @returns data | |||
*/ | |||
export function getCodeByPhone(phone) { | |||
return request({ | |||
url: `/api/user/sendLoginPhoneCode?phone=${phone}`, | |||
method: 'get' | |||
}) | |||
} | |||
/** | |||
* @description 短信验证码登录 | |||
* @param {object} loginParams (phone,code) | |||
* @returns data | |||
*/ | |||
export function doLoginByPhone(loginParams) { | |||
return request({ | |||
url: `/api/user/doLoginByPhone`, | |||
method: 'post', | |||
data: loginParams | |||
}) | |||
} | |||
/** | |||
* @description 查询用户邀请码状态 | |||
* @returns data | |||
*/ | |||
export function doFindInviteCode() { | |||
return request({ | |||
url: `/api/inviteCode/find`, | |||
method: 'get', | |||
}) | |||
} | |||
/** | |||
* @description 更新邀请码 | |||
* @param {object} inviteCodeData | |||
* @returns data | |||
*/ | |||
export function doUpdateInviteCode(inviteCodeData) { | |||
return request({ | |||
url: `/api/inviteCode/update`, | |||
method: 'post', | |||
data: inviteCodeData | |||
}) | |||
} |
@@ -29,7 +29,6 @@ request.interceptors.request.use( | |||
// 响应拦截器 | |||
request.interceptors.response.use( | |||
// response为返回值 | |||
function (response) { | |||
// 弹出错误 | |||
if (response.data.code != 200) { | |||
@@ -37,9 +36,14 @@ request.interceptors.response.use( | |||
if (response.data.code == 1052) { | |||
router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return | |||
// 其他错误 | |||
} else if (response.data.code == 500) { | |||
Toast.fail("系统异常,请稍后再试"); | |||
return Promise.reject() | |||
} else { | |||
Toast.fail(response.data.message); | |||
return Promise.reject() | |||
} | |||
} else { | |||
// 正常返回 | |||
@@ -27,7 +27,9 @@ | |||
<div class="inputCode">请输入短信验证码</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button class="submitBtn" @click="login">登录/注册</el-button> | |||
<el-button class="submitBtn" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -66,7 +68,7 @@ | |||
<span class="forgetPwd">忘记密码?</span> | |||
<el-form-item> | |||
<el-button class="submitBtn inside" @click="login" | |||
<el-button class="submitBtn inside" @click="loginByPhoneCode" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
@@ -89,7 +91,9 @@ | |||
<el-form-item> | |||
<el-button class="skipBtn skip" @click="skip">跳过</el-button> | |||
<el-button class="skipBtn submit" @click="goMyPage">确定</el-button> | |||
<el-button class="skipBtn submit" @click="submitInviteCode" | |||
>确定</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -100,8 +104,13 @@ | |||
import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
import { | |||
getCodeByPhone, | |||
doLoginByPhone, | |||
doFindInviteCode, | |||
doUpdateInviteCode, | |||
} from "../../api/login"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -176,12 +185,23 @@ export default { | |||
methods: { | |||
...mapActions(["setCharacters"]), | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
// 跳过填写邀请码 | |||
skip() { | |||
this.$router.push("/myPage"); | |||
}, | |||
// 获取手机短信验证码 | |||
getCode() { | |||
if (this.codeInfo != "获取验证码") { | |||
Toast.fail("请求过于频繁,请稍后再试"); | |||
return; | |||
} | |||
const phoneValue = this.form.phone; | |||
// 将手机号置入本地存储 | |||
localStorage.setItem("phoneValue", phoneValue); | |||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | |||
let phoneValide = phoneReg.test(phoneValue); | |||
@@ -189,144 +209,107 @@ export default { | |||
if (!phoneValide) { | |||
Toast.fail("请输入正确的手机号!"); | |||
} else { | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/user/sendLoginPhoneCode?phone=${phoneValue}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res.data); | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
Toast.success("短信验证码发送成功!"); | |||
this.codeInfo = 60; | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo--; | |||
} else { | |||
clearInterval(timer); | |||
this.codeInfo = "获取验证码"; | |||
} | |||
}, 1000); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
this.getPhoneCode(phoneValue); | |||
} | |||
}, | |||
go(url) { | |||
this.$router.push(url); | |||
}, | |||
login() { | |||
// 手机验证码登录 | |||
loginByPhoneCode() { | |||
const data = { | |||
phone: this.form.phone, | |||
code: this.form.code, | |||
}; | |||
console.log(data, "data"); | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/user/doLoginByPhone`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
// console.log(res, "res"); | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
const token = res.data.data.token; | |||
localStorage.setItem("AccessToken", token); | |||
this.doFindInviteCode(); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
// 查询用户邀请码状态 | |||
doFindInviteCode() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/inviteCode/find`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res); | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
const status = res.data.data.status; | |||
// 当没有邀请码时 | |||
if (status == 0) { | |||
this.loginType = 3; | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
Toast.success("登录成功!"); | |||
this.$router.push("/myPage"); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
// 跳过填写邀请码 | |||
skip() { | |||
this.$router.push("/myPage"); | |||
this.LoginByPhone(data); | |||
}, | |||
// 携带邀请码跳转至我的页面 | |||
goMyPage() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
// 提交邀请码 | |||
submitInviteCode() { | |||
const data = { | |||
inviteCode: this.formIII.inviteCode, | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/inviteCode/update`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.updateInviteCode(data); | |||
}, | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
return; | |||
/** | |||
* @description:获取手机验证码 | |||
*/ | |||
async getPhoneCode(phone) { | |||
try { | |||
const res = await getCodeByPhone(phone); | |||
Toast.success("短信验证码发送成功!"); | |||
this.codeInfo = 60; | |||
const timer = setInterval(() => { | |||
if (this.codeInfo != 1) { | |||
this.codeInfo--; | |||
} else { | |||
Toast.success("登录成功!"); | |||
this.$router.push("/myPage"); | |||
clearInterval(timer); | |||
this.codeInfo = "获取验证码"; | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, 1000); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:短信验证码登录 | |||
*/ | |||
async LoginByPhone(loginParams) { | |||
try { | |||
const res = await doLoginByPhone(loginParams); | |||
console.log(res, "登录数据"); | |||
const token = res.data.token; | |||
// 将token置入本地存储 | |||
localStorage.setItem("AccessToken", token); | |||
this.checkInviteCode(); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode(); | |||
console.log(res, "查询用户邀请码数据"); | |||
const status = res.data.status; | |||
// 当没有邀请码时,切换输入验证码页面 | |||
if (status == 0) { | |||
this.loginType = 3; | |||
// 有邀请码直接前往我的页面 | |||
} else if (status == 1) { | |||
Toast.success("登录成功!"); | |||
this.$router.push("/myPage"); | |||
} | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:更新邀请码 | |||
*/ | |||
async updateInviteCode(inviteCodeData) { | |||
try { | |||
const res = await doUpdateInviteCode(inviteCodeData); | |||
console.log(res, "更新邀请码数据"); | |||
Toast.success("登录成功!"); | |||
this.$router.push("/myPage"); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
}, | |||
created() { | |||
// 手机号记忆回填 | |||
const phoneValue = localStorage.getItem("phoneValue"); | |||
if (phoneValue) { | |||
this.form.phone = phoneValue; | |||
} | |||
this.form.phone = phoneValue ? phoneValue : ""; | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
@@ -11,6 +11,7 @@ | |||
<div class="soundList"> | |||
<div | |||
class="item" | |||
v-if="soundList.length" | |||
v-for="(item, index) in soundList" | |||
:key="index" | |||
@click="setIn('sound', item.id)" | |||
@@ -23,6 +24,8 @@ | |||
></div> | |||
<div class="tag">{{ item.title }}</div> | |||
</div> | |||
<div class="instead" v-if="!soundList.length">暂无可用声音</div> | |||
</div> | |||
</div> | |||
@@ -31,6 +34,7 @@ | |||
<div class="backGroundList"> | |||
<div | |||
class="item" | |||
v-if="backGroundList.length" | |||
v-for="(item, index) in backGroundList" | |||
:key="index" | |||
@click="setIn('backGround', item.id)" | |||
@@ -43,17 +47,19 @@ | |||
></div> | |||
<div class="tag">{{ item.title }}</div> | |||
</div> | |||
<div class="instead" v-if="!backGroundList.length">暂无可用背景</div> | |||
</div> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="back" @click="back">上一步</div> | |||
<div class="next" @click="doFindInviteCode">合成视频</div> | |||
<div class="next" @click="checkInviteCode">合成视频</div> | |||
</div> | |||
<div :class="isShowCover ? 'coverUp active' : 'coverUp'"> | |||
<div class="inside" @click="goMy"> | |||
<!-- <img src="../../assets/img/loading.png" alt="" /> --> | |||
<div :class="isShowCover ? 'coverUp active' : 'coverUp'" @click="goMy"> | |||
<div class="inside"> | |||
<img src="../../assets/img/loading.png" alt="" /> | |||
<div class="generating">视频生成中……</div> | |||
<div class="alert"> | |||
请耐心等待或稍后再来,视频会保存到您的视频作品中 | |||
@@ -85,6 +91,14 @@ import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
import { | |||
doCreateVideo, | |||
doFindVideoById, | |||
getVoiceList, | |||
getBackGroundList, | |||
doFindInviteCode, | |||
} from "../../api/generateVideo"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
@@ -138,43 +152,7 @@ export default { | |||
title: "紫色", | |||
}, | |||
], | |||
backGroundList: [ | |||
{ | |||
id: 1, | |||
color: "red", | |||
title: "红色", | |||
}, | |||
{ | |||
id: 2, | |||
color: "orange", | |||
title: "橙色", | |||
}, | |||
{ | |||
id: 3, | |||
color: "yellow", | |||
title: "黄色", | |||
}, | |||
{ | |||
id: 4, | |||
color: "green", | |||
title: "绿色", | |||
}, | |||
{ | |||
id: 5, | |||
color: "aqua", | |||
title: "青色", | |||
}, | |||
{ | |||
id: 6, | |||
color: "blue", | |||
title: "蓝色", | |||
}, | |||
{ | |||
id: 7, | |||
color: "purple", | |||
title: "紫色", | |||
}, | |||
], | |||
backGroundList: [], | |||
}; | |||
}, | |||
computed: { | |||
@@ -225,167 +203,118 @@ export default { | |||
goMy() { | |||
if (this.isShowCover == true) { | |||
this.$router.push("/myPage"); | |||
this.timerOver = true; | |||
} | |||
}, | |||
findVideo() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
id: this.id, | |||
}; | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/findVideo?id=${this.id}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
// 点击空白区域退出提示 | |||
exitCover(e) { | |||
if (e.srcElement.id != "message") { | |||
this.isShowMessageCover = false; | |||
} | |||
}, | |||
if (res.data.data.videoStatus == 2) { | |||
this.isShowCover = false; | |||
Toast.success("视频生成成功!"); | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
query: { | |||
videoDetail: res.data.data, | |||
}, | |||
}); | |||
this.timerOver = true; | |||
return; | |||
} else if (res.data.data.videoStatus == 3) { | |||
this.isShowCover = false; | |||
Toast.fail(`视频生成失败!失败原因:${res.data.data.videoMsg}`); | |||
this.timerOver = true; | |||
return; | |||
/** | |||
* @description:生成视频 | |||
*/ | |||
async createVideo() { | |||
try { | |||
const res = await doCreateVideo(data); | |||
console.log(res, "生成视频"); | |||
Toast.success("提交成功!"); | |||
setTimeout(() => { | |||
this.isShowCover = true; | |||
}, 2000); | |||
const timer = setInterval(() => { | |||
// 重复调取此接口直到videoStatus == 2 | |||
this.getVideo(this.id); | |||
if (this.timerOver) { | |||
clearInterval(timer); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, 1000); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
getVoiceList() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
/** | |||
* @description:获取声音列表 | |||
*/ | |||
async loadVoice() { | |||
const data = { | |||
paperwork: this.paperwork, | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/mouldPatch/voiceList?pageNum=1&pageSize=10`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
console.log(res); | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
try { | |||
const res = await getVoiceList(data); | |||
console.log(res, "获取声音列表"); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
getBackGroundList() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/mouldPatch/list?type=4&pageNum=1&pageSize=10`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res); | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
/** | |||
* @description:获取背景列表 | |||
*/ | |||
async loadBackGrounnd() { | |||
try { | |||
const res = await getBackGroundList(); | |||
console.log(res, "获取背景列表"); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
submit() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
const data = { | |||
id: this.id, | |||
}; | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/userVideo/createVideo`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
if (res.data.code != 200) { | |||
Toast.fail(res.data.message); | |||
} else { | |||
Toast.success("提交成功!"); | |||
setTimeout(() => { | |||
this.isShowCover = true; | |||
}, 2000); | |||
const timer = setInterval(() => { | |||
this.findVideo(); | |||
if (this.timerOver) { | |||
clearInterval(timer); | |||
} | |||
}, 1000); | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
/** | |||
* @description:通过id获取视频 | |||
*/ | |||
async getVideo(id) { | |||
try { | |||
const res = await doFindVideoById(id); | |||
console.log(res, "通过id获取视频"); | |||
if (res.data.videoStatus == 2) { | |||
this.isShowCover = false; | |||
Toast.success("视频生成成功!"); | |||
this.$router.push({ | |||
path: "/downloadVideo", | |||
query: { | |||
videoDetail: res.data, | |||
}, | |||
}); | |||
this.timerOver = true; | |||
return; | |||
} else if (res.data.videoStatus == 3) { | |||
this.isShowCover = false; | |||
Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | |||
this.timerOver = true; | |||
return; | |||
} | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
// 查询用户邀请码状态 | |||
doFindInviteCode() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/inviteCode/find`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
console.log(res); | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
const status = res.data.data.status; | |||
// 当没有邀请码时 | |||
if (status == 1) { | |||
this.submit(); | |||
} else if (status == 0) { | |||
this.isShowMessageCover = true; | |||
return; | |||
} | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
exitCover(e) { | |||
if (e.srcElement.id != "message") { | |||
this.isShowMessageCover = false; | |||
/** | |||
* @description:查询用户邀请码状态 | |||
*/ | |||
async checkInviteCode() { | |||
try { | |||
const res = await doFindInviteCode(); | |||
console.log(res, "查询用户邀请码数据"); | |||
const status = res.data.status; | |||
// 当没有邀请码时 | |||
if (status == 1) { | |||
this.createVideo(); | |||
} else if (status == 0) { | |||
this.isShowMessageCover = true; | |||
return; | |||
} | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
}, | |||
@@ -394,8 +323,8 @@ export default { | |||
this.coverImg = this.$route.query.coverImg; | |||
this.id = this.$route.query.id; | |||
this.paperwork = this.$route.query.paperwork; | |||
this.getVoiceList(); | |||
this.getBackGroundList(); | |||
this.loadVoice(); | |||
this.loadBackGrounnd(); | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
@@ -482,6 +411,12 @@ export default { | |||
&::-webkit-scrollbar { | |||
width: 0 !important; | |||
} | |||
.instead { | |||
position: relative; | |||
left: 38%; | |||
height: 45px; | |||
line-height: 45px; | |||
} | |||
} | |||
} | |||
.backGround { | |||
@@ -541,6 +476,12 @@ export default { | |||
&::-webkit-scrollbar { | |||
width: 0 !important; | |||
} | |||
.instead { | |||
position: relative; | |||
left: 38%; | |||
height: 45px; | |||
line-height: 45px; | |||
} | |||
} | |||
} | |||
.bottomBtn { | |||
@@ -589,9 +530,10 @@ export default { | |||
transform: translate(-50%, -50%); | |||
img { | |||
width: 80px; | |||
height: 80px; | |||
width: 75px; | |||
height: 75px; | |||
animation: rotation 2s linear infinite; | |||
margin-bottom: 10px; | |||
} | |||
.generating { | |||
font-size: 18px; | |||
@@ -28,11 +28,15 @@ | |||
<script> | |||
import Vue from "vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
import { | |||
getModelDetailById, | |||
saveOrUpdateUserVideo, | |||
} from "../../api/getPaper.js"; | |||
Vue.use(Toast); | |||
export default { | |||
components: { | |||
@@ -63,85 +67,52 @@ export default { | |||
this.$router.back(); | |||
}, | |||
getDetailById(id) { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
this.$axios({ | |||
method: "get", | |||
url: `${baseUrl}/api/userVideo/findById?id=${id}`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.modelDetail = res.data.data.personMould; | |||
}) | |||
.catch((err) => { | |||
Toast.fail(err.message); | |||
}); | |||
}, | |||
goNext() { | |||
const AccessToken = localStorage.getItem("AccessToken"); | |||
let data = {}; | |||
let data = { | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
}; | |||
if (this.id) { | |||
data = { | |||
id: this.id, | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
} else { | |||
data = { | |||
// id: "", | |||
type: 1, | |||
personMouldId: this.modelDetail.id, //模板id | |||
personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
paperwork: this.paperwork, | |||
title: this.modelDetail.title, | |||
// voiceMouldId: "", | |||
// voiceMouldId: "", | |||
}; | |||
data.id = this.id; | |||
} | |||
this.saveOrUpdate(data); | |||
}, | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/userVideo/saveOrUpdate`, | |||
headers: { | |||
"Content-Type": "application/json;charset=UTF-8", | |||
token: AccessToken, | |||
}, | |||
data, | |||
}) | |||
.then((res) => { | |||
if (res.data.code == 1052) { | |||
this.$router.push("/login"); | |||
Toast.fail("登录过期,请重新登录!"); | |||
return; | |||
} | |||
this.$router.push({ | |||
path: "/generateVideo", | |||
query: { | |||
coverImg: this.modelDetail.coverImg, | |||
paperwork: this.paperwork, | |||
id: res.data.data.id, | |||
}, | |||
}); | |||
}) | |||
.catch((err) => { | |||
console.log(err, "err"); | |||
Toast.fail(err.message); | |||
/** | |||
* @description:根据id获取用户作品详情 | |||
*/ | |||
async getDetailById(id) { | |||
try { | |||
const res = await getModelDetailById(id); | |||
this.modelDetail = res.data.personMould; | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
/** | |||
* @description:保存或修改用户作品 | |||
*/ | |||
async saveOrUpdate(data) { | |||
try { | |||
const res = await saveOrUpdateUserVideo(data); | |||
console.log(res, "保存或修改用户作品"); | |||
this.$router.push({ | |||
path: "/generateVideo", | |||
query: { | |||
id: res.data.id, | |||
coverImg: this.modelDetail.coverImg, | |||
paperwork: this.paperwork, | |||
}, | |||
}); | |||
} catch (error) { | |||
console.log(error); | |||
Toast.fail(error.message); | |||
} | |||
}, | |||
}, | |||
created() { | |||
@@ -150,7 +121,7 @@ export default { | |||
this.getDetailById(this.id); | |||
} else { | |||
this.modelDetail = this.$route.query.modelDetail; | |||
console.log(this.modelDetail); | |||
console.log(this.modelDetail, "modelDetail"); | |||
} | |||
}, | |||
mounted() { | |||
@@ -61,5 +61,4 @@ module.exports = { | |||
}), | |||
], | |||
} | |||
} |