| @@ -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 = { | |||||
| }), | }), | ||||
| ], | ], | ||||
| } | } | ||||
| } | } | ||||