@@ -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( | request.interceptors.response.use( | ||||
// response为返回值 | |||||
function (response) { | function (response) { | ||||
// 弹出错误 | // 弹出错误 | ||||
if (response.data.code != 200) { | if (response.data.code != 200) { | ||||
@@ -37,9 +36,14 @@ request.interceptors.response.use( | |||||
if (response.data.code == 1052) { | if (response.data.code == 1052) { | ||||
router.push("/login"); | router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return | |||||
// 其他错误 | // 其他错误 | ||||
} else if (response.data.code == 500) { | |||||
Toast.fail("系统异常,请稍后再试"); | |||||
return Promise.reject() | |||||
} else { | } else { | ||||
Toast.fail(response.data.message); | Toast.fail(response.data.message); | ||||
return Promise.reject() | |||||
} | } | ||||
} else { | } else { | ||||
// 正常返回 | // 正常返回 | ||||
@@ -27,7 +27,9 @@ | |||||
<div class="inputCode">请输入短信验证码</div> | <div class="inputCode">请输入短信验证码</div> | ||||
</el-form-item> | </el-form-item> | ||||
<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-item> | ||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
@@ -66,7 +68,7 @@ | |||||
<span class="forgetPwd">忘记密码?</span> | <span class="forgetPwd">忘记密码?</span> | ||||
<el-form-item> | <el-form-item> | ||||
<el-button class="submitBtn inside" @click="login" | |||||
<el-button class="submitBtn inside" @click="loginByPhoneCode" | |||||
>登录/注册</el-button | >登录/注册</el-button | ||||
> | > | ||||
</el-form-item> | </el-form-item> | ||||
@@ -89,7 +91,9 @@ | |||||
<el-form-item> | <el-form-item> | ||||
<el-button class="skipBtn skip" @click="skip">跳过</el-button> | <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-item> | ||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
@@ -100,8 +104,13 @@ | |||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | |||||
import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
import { | |||||
getCodeByPhone, | |||||
doLoginByPhone, | |||||
doFindInviteCode, | |||||
doUpdateInviteCode, | |||||
} from "../../api/login"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -176,12 +185,23 @@ export default { | |||||
methods: { | methods: { | ||||
...mapActions(["setCharacters"]), | ...mapActions(["setCharacters"]), | ||||
go(url) { | |||||
this.$router.push(url); | |||||
}, | |||||
// 跳过填写邀请码 | |||||
skip() { | |||||
this.$router.push("/myPage"); | |||||
}, | |||||
// 获取手机短信验证码 | |||||
getCode() { | getCode() { | ||||
if (this.codeInfo != "获取验证码") { | if (this.codeInfo != "获取验证码") { | ||||
Toast.fail("请求过于频繁,请稍后再试"); | Toast.fail("请求过于频繁,请稍后再试"); | ||||
return; | return; | ||||
} | } | ||||
const phoneValue = this.form.phone; | const phoneValue = this.form.phone; | ||||
// 将手机号置入本地存储 | |||||
localStorage.setItem("phoneValue", phoneValue); | localStorage.setItem("phoneValue", phoneValue); | ||||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | ||||
let phoneValide = phoneReg.test(phoneValue); | let phoneValide = phoneReg.test(phoneValue); | ||||
@@ -189,144 +209,107 @@ export default { | |||||
if (!phoneValide) { | if (!phoneValide) { | ||||
Toast.fail("请输入正确的手机号!"); | Toast.fail("请输入正确的手机号!"); | ||||
} else { | } 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 = { | const data = { | ||||
phone: this.form.phone, | phone: this.form.phone, | ||||
code: this.form.code, | 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 = { | const data = { | ||||
inviteCode: this.formIII.inviteCode, | 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 { | } 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() { | created() { | ||||
// 手机号记忆回填 | |||||
const phoneValue = localStorage.getItem("phoneValue"); | const phoneValue = localStorage.getItem("phoneValue"); | ||||
if (phoneValue) { | |||||
this.form.phone = phoneValue; | |||||
} | |||||
this.form.phone = phoneValue ? phoneValue : ""; | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
scrollToID("top"); | scrollToID("top"); | ||||
@@ -11,6 +11,7 @@ | |||||
<div class="soundList"> | <div class="soundList"> | ||||
<div | <div | ||||
class="item" | class="item" | ||||
v-if="soundList.length" | |||||
v-for="(item, index) in soundList" | v-for="(item, index) in soundList" | ||||
:key="index" | :key="index" | ||||
@click="setIn('sound', item.id)" | @click="setIn('sound', item.id)" | ||||
@@ -23,6 +24,8 @@ | |||||
></div> | ></div> | ||||
<div class="tag">{{ item.title }}</div> | <div class="tag">{{ item.title }}</div> | ||||
</div> | </div> | ||||
<div class="instead" v-if="!soundList.length">暂无可用声音</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -31,6 +34,7 @@ | |||||
<div class="backGroundList"> | <div class="backGroundList"> | ||||
<div | <div | ||||
class="item" | class="item" | ||||
v-if="backGroundList.length" | |||||
v-for="(item, index) in backGroundList" | v-for="(item, index) in backGroundList" | ||||
:key="index" | :key="index" | ||||
@click="setIn('backGround', item.id)" | @click="setIn('backGround', item.id)" | ||||
@@ -43,17 +47,19 @@ | |||||
></div> | ></div> | ||||
<div class="tag">{{ item.title }}</div> | <div class="tag">{{ item.title }}</div> | ||||
</div> | </div> | ||||
<div class="instead" v-if="!backGroundList.length">暂无可用背景</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
<div class="next" @click="doFindInviteCode">合成视频</div> | |||||
<div class="next" @click="checkInviteCode">合成视频</div> | |||||
</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="generating">视频生成中……</div> | ||||
<div class="alert"> | <div class="alert"> | ||||
请耐心等待或稍后再来,视频会保存到您的视频作品中 | 请耐心等待或稍后再来,视频会保存到您的视频作品中 | ||||
@@ -85,6 +91,14 @@ import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
import { | |||||
doCreateVideo, | |||||
doFindVideoById, | |||||
getVoiceList, | |||||
getBackGroundList, | |||||
doFindInviteCode, | |||||
} from "../../api/generateVideo"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
components: { | components: { | ||||
@@ -138,43 +152,7 @@ export default { | |||||
title: "紫色", | 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: { | computed: { | ||||
@@ -225,167 +203,118 @@ export default { | |||||
goMy() { | goMy() { | ||||
if (this.isShowCover == true) { | if (this.isShowCover == true) { | ||||
this.$router.push("/myPage"); | 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 = { | const data = { | ||||
paperwork: this.paperwork, | 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.coverImg = this.$route.query.coverImg; | ||||
this.id = this.$route.query.id; | this.id = this.$route.query.id; | ||||
this.paperwork = this.$route.query.paperwork; | this.paperwork = this.$route.query.paperwork; | ||||
this.getVoiceList(); | |||||
this.getBackGroundList(); | |||||
this.loadVoice(); | |||||
this.loadBackGrounnd(); | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
scrollToID("top"); | scrollToID("top"); | ||||
@@ -482,6 +411,12 @@ export default { | |||||
&::-webkit-scrollbar { | &::-webkit-scrollbar { | ||||
width: 0 !important; | width: 0 !important; | ||||
} | } | ||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | |||||
} | } | ||||
} | } | ||||
.backGround { | .backGround { | ||||
@@ -541,6 +476,12 @@ export default { | |||||
&::-webkit-scrollbar { | &::-webkit-scrollbar { | ||||
width: 0 !important; | width: 0 !important; | ||||
} | } | ||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | |||||
} | } | ||||
} | } | ||||
.bottomBtn { | .bottomBtn { | ||||
@@ -589,9 +530,10 @@ export default { | |||||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||||
img { | img { | ||||
width: 80px; | |||||
height: 80px; | |||||
width: 75px; | |||||
height: 75px; | |||||
animation: rotation 2s linear infinite; | animation: rotation 2s linear infinite; | ||||
margin-bottom: 10px; | |||||
} | } | ||||
.generating { | .generating { | ||||
font-size: 18px; | font-size: 18px; | ||||
@@ -28,11 +28,15 @@ | |||||
<script> | <script> | ||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | |||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
import { | |||||
getModelDetailById, | |||||
saveOrUpdateUserVideo, | |||||
} from "../../api/getPaper.js"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
components: { | components: { | ||||
@@ -63,85 +67,52 @@ export default { | |||||
this.$router.back(); | 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() { | 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) { | 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() { | created() { | ||||
@@ -150,7 +121,7 @@ export default { | |||||
this.getDetailById(this.id); | this.getDetailById(this.id); | ||||
} else { | } else { | ||||
this.modelDetail = this.$route.query.modelDetail; | this.modelDetail = this.$route.query.modelDetail; | ||||
console.log(this.modelDetail); | |||||
console.log(this.modelDetail, "modelDetail"); | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
@@ -61,5 +61,4 @@ module.exports = { | |||||
}), | }), | ||||
], | ], | ||||
} | } | ||||
} | } |