diff --git a/dist.zip b/dist.zip deleted file mode 100644 index 72459fd..0000000 Binary files a/dist.zip and /dev/null differ diff --git a/src/api/generateVideo.js b/src/api/generateVideo.js new file mode 100644 index 0000000..d73b545 --- /dev/null +++ b/src/api/generateVideo.js @@ -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', + }) +} \ No newline at end of file diff --git a/src/api/getPaper.js b/src/api/getPaper.js new file mode 100644 index 0000000..77e28a9 --- /dev/null +++ b/src/api/getPaper.js @@ -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 + }) +} \ No newline at end of file diff --git a/src/api/login.js b/src/api/login.js new file mode 100644 index 0000000..4e89463 --- /dev/null +++ b/src/api/login.js @@ -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 + }) +} \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js index bf9e678..ce8f558 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -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 { // 正常返回 diff --git a/src/views/login/login.vue b/src/views/login/login.vue index 33bd5de..f67df52 100644 --- a/src/views/login/login.vue +++ b/src/views/login/login.vue @@ -27,7 +27,9 @@
请输入短信验证码
- 登录/注册 + 登录/注册 @@ -66,7 +68,7 @@ 忘记密码? - 登录/注册 @@ -89,7 +91,9 @@ 跳过 - 确定 + 确定 @@ -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"); diff --git a/src/views/model/generateVideo.vue b/src/views/model/generateVideo.vue index e11fb8a..c69fd20 100644 --- a/src/views/model/generateVideo.vue +++ b/src/views/model/generateVideo.vue @@ -11,6 +11,7 @@
{{ item.title }}
+ +
暂无可用声音
@@ -31,6 +34,7 @@
{{ item.title }}
+ +
暂无可用背景
上一步
- +
-
-
- +
+
+
视频生成中……
请耐心等待或稍后再来,视频会保存到您的视频作品中 @@ -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; diff --git a/src/views/model/getPaper.vue b/src/views/model/getPaper.vue index 7fae884..6bd4713 100644 --- a/src/views/model/getPaper.vue +++ b/src/views/model/getPaper.vue @@ -28,11 +28,15 @@