Browse Source

api分离、整合

release
HolyKnightIX 2 years ago
parent
commit
7deff8397e
9 changed files with 428 additions and 392 deletions
  1. BIN
      dist.zip
  2. +61
    -0
      src/api/generateVideo.js
  3. +26
    -0
      src/api/getPaper.js
  4. +50
    -0
      src/api/login.js
  5. +5
    -1
      src/utils/request.js
  6. +107
    -124
      src/views/login/login.vue
  7. +132
    -190
      src/views/model/generateVideo.vue
  8. +47
    -76
      src/views/model/getPaper.vue
  9. +0
    -1
      vue.config.js

BIN
dist.zip View File


+ 61
- 0
src/api/generateVideo.js View File

@@ -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',
})
}

+ 26
- 0
src/api/getPaper.js View File

@@ -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
})
}

+ 50
- 0
src/api/login.js View File

@@ -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
})
}

+ 5
- 1
src/utils/request.js View File

@@ -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 {
// 正常返回


+ 107
- 124
src/views/login/login.vue View File

@@ -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");


+ 132
- 190
src/views/model/generateVideo.vue View File

@@ -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;


+ 47
- 76
src/views/model/getPaper.vue View File

@@ -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() {


+ 0
- 1
vue.config.js View File

@@ -61,5 +61,4 @@ module.exports = {
}),
],
}

}

Loading…
Cancel
Save