congzc 1 年之前
父節點
當前提交
7bd249efcd
共有 10 個文件被更改,包括 412 次插入44 次删除
  1. +29
    -5
      src/apis/createVideo.js
  2. +1
    -0
      src/lang/package/en.ts
  3. +1
    -0
      src/lang/package/zh-cn.ts
  4. +1
    -1
      src/layout/components/Sidebar/index.vue
  5. +19
    -1
      src/router/index.ts
  6. +0
    -2
      src/store/modules/userInfo.js
  7. +68
    -0
      src/views/APIAccess/index.vue
  8. +290
    -33
      src/views/createVideo/index.vue
  9. +1
    -0
      src/views/myAccount/index.vue
  10. +2
    -2
      src/views/myStore/index.vue

+ 29
- 5
src/apis/createVideo.js 查看文件

@@ -62,7 +62,7 @@ export function delImgApi(id) {
} }


/** /**
* @description 上传
* @description 上传
* @params data * @params data
* @returns data * @returns data
*/ */
@@ -75,7 +75,7 @@ export function videoUpload(data) {
} }


/** /**
* @description 获取频上传进度
* @description 获取频上传进度
* @params videoId * @params videoId
* @returns data * @returns data
*/ */
@@ -184,12 +184,36 @@ export function findByIdApi(id) {


/** /**
* @description 获取音乐列表 * @description 获取音乐列表
* @params data
* @params pageNum,pageSize
* @returns data
*/
export function musicListSystemApi(pageNum, pageSize) {
return request({
url: `api/userPhotoVideo/music?pageNum=${pageNum}&pageSize=${pageSize}&type=1`,
method: 'get',
})
}
/**
* @description 获取音乐列表
* @params pageNum,pageSize
* @returns data * @returns data
*/ */
export function musicListApi() {
export function musicListPersonApi(pageNum, pageSize) {
return request({ return request({
url: `api/userPhotoVideo/music`,
url: `api/userPhotoVideo/userMusic?pageNum=${pageNum}&pageSize=${pageSize}&type=3`,
method: 'get', method: 'get',
}) })
}

/**
* @description 保存音频(新)
* @params videoId
* @returns data
*/
export function saveMusicApi(data) {
return request({
url: `/api/userPhotoVideo/save`,
method: 'post',
data
})
} }

+ 1
- 0
src/lang/package/en.ts 查看文件

@@ -72,6 +72,7 @@ export default {
chooseMusic:'Choose Music', chooseMusic:'Choose Music',
searchMusic:'Search Music', searchMusic:'Search Music',
comingSoon:'coming soon', comingSoon:'coming soon',
hotMusic:'Hit song',
}, },


// 我的视频 // 我的视频


+ 1
- 0
src/lang/package/zh-cn.ts 查看文件

@@ -72,6 +72,7 @@ export default {
chooseMusic:'选择音乐', chooseMusic:'选择音乐',
searchMusic:'搜索音乐', searchMusic:'搜索音乐',
comingSoon:'敬请期待', comingSoon:'敬请期待',
hotMusic:'热门歌曲',
}, },


// 我的视频 // 我的视频


+ 1
- 1
src/layout/components/Sidebar/index.vue 查看文件

@@ -21,7 +21,7 @@
</div> </div>
{{ $t("shop.title") }} {{ $t("shop.title") }}
</div> </div>
<div class="myRouter-item API" @click="routerTo('/myStore')">
<div class="myRouter-item API" @click="routerTo('/APIAccess')">
<div class="icon"> <div class="icon">
<el-icon><i-ep-DocumentAdd /></el-icon> <el-icon><i-ep-DocumentAdd /></el-icon>
</div> </div>


+ 19
- 1
src/router/index.ts 查看文件

@@ -104,7 +104,25 @@ export const constantRoutes: RouteRecordRaw[] = [
}, },
], ],
}, },

// API Access
{
path: "/",
component: Layout,
redirect: "/APIAccess",
children: [
{
path: "APIAccess",
component: () => import("@/views/APIAccess/index.vue"),
name: "APIAccess",
meta: {
title: "APIAccess",
icon: "homepage",
affix: true,
name: "API Access",
},
},
],
},
// { // {
// path: "/dashboard", // path: "/dashboard",
// component: Layout, // component: Layout,


+ 0
- 2
src/store/modules/userInfo.js 查看文件

@@ -10,9 +10,7 @@ export const userInfoModules = defineStore("userInfoState", () => {
// 登录获取用户信息 // 登录获取用户信息
async function getUserInfo() { async function getUserInfo() {
const res = await getUserInfoApi() const res = await getUserInfoApi()
console.log(res.data);
userInfo.value = res.data userInfo.value = res.data
console.log(userInfo);
} }
// 退出清除用户信息 // 退出清除用户信息
function loginOut(params) { function loginOut(params) {


+ 68
- 0
src/views/APIAccess/index.vue 查看文件

@@ -0,0 +1,68 @@
<template>
<div class="page">
<div class="title">
<el-icon><i-ep-Lock /></el-icon>{{ $t("createVideo.comingSoon") }}
</div>
</div>
</template>

<script setup>
//#region 导入
import { getCurrentInstance } from "vue";
import { packageInfoApi } from "@/apis/myStore";
import { useI18n } from "vue-i18n";

import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
//#endregion ------------------------------------

//#region 页面初始化
onMounted(async () => {});
//#endregion ------------------------------------

//#region

//#endregion ------------------------------------

//#region

//#endregion ------------------------------------
</script>

<style lang="scss" scoped>
.page {
min-width: calc(100vw - 210px);
height: calc(100vh - 80px);
padding: 20px 20px 0 20px;
background-color: #fff;
border-radius: 25px 0 0;
padding: 20px;
}
.title {
font-size: 50px;
text-align: center;
line-height: 180px;
background-image: -webkit-linear-gradient(
left,
#4b61dc,
#15d1b8 25%,
#4b61dc 50%,
#15d1b8 75%,
#4b61dc
) !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-background-size: 200% 100% !important;
background-size: 200% 100% !important;
.el-icon {
vertical-align: text-top;
font-size: 55px;
}
}
</style>

+ 290
- 33
src/views/createVideo/index.vue 查看文件

@@ -108,8 +108,9 @@
<!-- 选中需要上传的图片后 --> <!-- 选中需要上传的图片后 -->
<div class="left-top" v-show="showUploadBtn == 4"> <div class="left-top" v-show="showUploadBtn == 4">
<el-row style="display: flex; justify-content: flex-end"> <el-row style="display: flex; justify-content: flex-end">
<!-- 上传按钮 -->
<div class="btnBox" v-show="submitImgBtn">
<!-- 上传按钮 废弃了-->
<!-- <div v-if="false" class="btnBox" v-show="submitImgBtn"> -->
<div v-if="false" class="btnBox">
<button class="uploadBtn"> <button class="uploadBtn">
{{ $t("createVideo.reselect") }} {{ $t("createVideo.reselect") }}
<input accept="image/*" type="file" @change="lookImg" /> <input accept="image/*" type="file" @change="lookImg" />
@@ -236,6 +237,7 @@
:infinite-scroll-disabled="overLoadUser" :infinite-scroll-disabled="overLoadUser"
> >
<div class="title"> <div class="title">
<el-icon><i-ep-Lock /></el-icon>
{{ $t("createVideo.comingSoon") }} {{ $t("createVideo.comingSoon") }}
</div> </div>
</div> </div>
@@ -428,30 +430,87 @@
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
{{ $t("createVideo.chooseMusic") }} {{ $t("createVideo.chooseMusic") }}
</p> </p>
<!-- 搜索框 -->
<!-- <div class="flex justify-between" style="width: 99%">
<el-input
v-model="searchInput"
:placeholder="$t('createVideo.searchMusic')"
@keyup.enter="searchMusicList"
<!-- tab栏 -->
<div class="musicTab">
<div
class="musicTabItem"
:class="musicTabActive == 1 ? 'musicTabItemActive' : ''"
@click="musicTabActive = 1"
>
{{ $t("createVideo.hotMusic") }}
</div>
<div
v-if="AccessToken"
class="musicTabItem"
:class="musicTabActive == 2 ? 'musicTabItemActive' : ''"
@click="musicTabActive = 2"
>
{{ $t("createVideo.personalWarehouse") }}
</div>
</div>
<!-- 上传音乐 -->
<div v-if="musicTabActive == 2" class="uploadVideo">
+
<input
accept="audio/*"
type="file"
ref="fileMusicInput"
@click="e.target.value = null"
@change="uploadMusic"
/> />
<el-icon class="icon-edit" @click="searchMusicList"
><i-ep-search
/></el-icon>
</div> -->
<!-- 音乐列表展示 -->
<div class="musicList">
</div>
<!-- 系统音乐列表展示 -->
<div v-if="musicTabActive == 1" class="musicList">
<div
@click="chooseMusicUrl(item.url, item.id)"
class="musicItem"
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
v-for="item in musicListSystem"
:key="item.id"
>
<span class="musicNmae"> 🎵{{ item.name }}</span>
<span class="musicTime"> {{ handleTime(item.time) }}</span>
</div>
</div>
<!-- 个人音乐列表展示 -->
<div v-if="musicTabActive == 2" class="musicList">
<div <div
@click="chooseMusicUrl(item.url, item.id)" @click="chooseMusicUrl(item.url, item.id)"
class="musicItem" class="musicItem"
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''" :class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
v-for="item in musicList"
v-for="item in musicListPerson"
:key="item.id" :key="item.id"
> >
<span class="musicNmae"> {{ item.name }}</span>
<span class="musicNmae"> 🎵{{ item.name }}</span>
<span class="musicTime"> {{ handleTime(item.time) }}</span> <span class="musicTime"> {{ handleTime(item.time) }}</span>
</div> </div>
</div> </div>
<!-- 系统分页 -->
<div v-if="musicTabActive == 1" class="pagination">
<el-pagination
v-model:current-page="musicListPageNumSystem"
v-model:page-size="musicListPageSize"
:small="false"
:disabled="false"
:background="true"
layout="total, prev, pager, next, jumper"
:total="musicListTotalSystem"
@current-change="musicListPageNumSystemChange"
/>
</div>
<!-- 个人分页 -->
<div v-if="musicTabActive == 2" class="pagination">
<el-pagination
v-model:current-page="musicListPageNumPerson"
v-model:page-size="musicListPageSize"
:small="false"
:disabled="false"
:background="true"
layout="total, prev, pager, next, jumper"
:total="musicListTotalPerson"
@current-change="musicListPageNumPersonChange"
/>
</div>
<div class="AudioBox" v-if="audioMusicUrl"> <div class="AudioBox" v-if="audioMusicUrl">
<audio controls :src="audioMusicUrl" id="uploadAudio"></audio> <audio controls :src="audioMusicUrl" id="uploadAudio"></audio>
</div> </div>
@@ -610,7 +669,9 @@ import {
createVideoApi, createVideoApi,
previewAudioApi, previewAudioApi,
findByIdApi, findByIdApi,
musicListApi,
musicListSystemApi,
musicListPersonApi,
saveMusicApi,
} from "@/apis/createVideo"; } from "@/apis/createVideo";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import Recorder from "js-audio-recorder"; //mp3插件 import Recorder from "js-audio-recorder"; //mp3插件
@@ -802,6 +863,9 @@ async function changeFile() {
} }
faceItemActive.value = res2.data.id; faceItemActive.value = res2.data.id;
imgUrl.value = res2.data.material; imgUrl.value = res2.data.material;
submitImgBtn.value = false;
console.log(123654);
showUploadBtn.value = 1;
} catch (error) { } catch (error) {
ElMessage.error(error); ElMessage.error(error);
} }
@@ -1096,8 +1160,31 @@ async function saveOrUpdate(index, isSaveVideo) {
}; };
if (index == 1) { if (index == 1) {
createLoading.value = true; createLoading.value = true;
if (!saveOrUpdateData.personPhotoId) {
ElMessage.error(
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
);
createLoading.value = false;
return;
}
if (!saveOrUpdateData.paperwork) {
ElMessage.error(
lanChange.value == "zh-cn" ? `请输入文案` : `Please enter copy`
);
createLoading.value = false;
return;
}
if (!saveOrUpdateData.voiceMouldId) {
ElMessage.error(
lanChange.value == "zh-cn" ? `请选择声音` : `Please select sound`
);
createLoading.value = false;
return;
}
try { try {
const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
if (res2.code == 1002) {
}
// 这个if判断是不是仅仅保存视频 // 这个if判断是不是仅仅保存视频
if (isSaveVideo == "saveVideo") { if (isSaveVideo == "saveVideo") {
ElMessage.success( ElMessage.success(
@@ -1118,11 +1205,28 @@ async function saveOrUpdate(index, isSaveVideo) {
createLoading.value = false; createLoading.value = false;
router.push("/myCreating"); router.push("/myCreating");
} catch (error) { } catch (error) {
// ElMessage.error($t(error.message));
ElMessage.error(error); ElMessage.error(error);
createLoading.value = false; createLoading.value = false;
} }
} }
if (index == 2) { if (index == 2) {
if (!saveOrUpdateData.personPhotoId) {
ElMessage.error(
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
);
createLoading.value = false;
return;
}
if (!saveOrUpdateData.voiceMaterialId) {
ElMessage.error(
lanChange.value == "zh-cn"
? `请选择音频文件`
: `Please select an audio file`
);
createLoading.value = false;
return;
}
try { try {
const res1 = await uploadAudio(isSaveVideo); // 上传音频 const res1 = await uploadAudio(isSaveVideo); // 上传音频
} catch (error) { } catch (error) {
@@ -1132,6 +1236,22 @@ async function saveOrUpdate(index, isSaveVideo) {
} }
if (index == 3) { if (index == 3) {
try { try {
if (!saveOrUpdateData.personPhotoId) {
ElMessage.error(
lanChange.value == "zh-cn" ? `请选择图片` : `Please select a picture`
);
createLoading.value = false;
return;
}
if (!saveOrUpdateData.musicId) {
ElMessage.error(
lanChange.value == "zh-cn"
? `请选择音乐文件`
: `Please select an music file`
);
createLoading.value = false;
return;
}
const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 const res1 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据


// 这个if判断是不是仅仅保存视频 // 这个if判断是不是仅仅保存视频
@@ -1186,18 +1306,48 @@ async function findById(findId) {
//#endregion ---------------------------- //#endregion ----------------------------


//#region 音乐tab //#region 音乐tab
const musicList = ref(null); //展示音乐列表
const musicListSystem = ref(null); //展示音乐列表
const musicListPerson = ref(null); //展示音乐列表
const audioMusicUrl = ref(null); //选中音乐Url回显 const audioMusicUrl = ref(null); //选中音乐Url回显
const musicItemAction = ref(null); //选中高亮 const musicItemAction = ref(null); //选中高亮
// 获取音乐列表
async function getMusicList() {
const musicListPageNumSystem = ref(1); //系统音乐页数
const musicListTotalSystem = ref(10); //系统音乐总条数
const musicListPageNumPerson = ref(1); //个人音乐页数
const musicListTotalPerson = ref(10); //个人音乐总条数
const musicListPageSize = ref(8); //
const musicTabActive = ref(1); //热门歌曲和个人仓库高亮
const musicData = ref(null); //上传歌曲的数据
const fileMusicInput = ref(null); // 上传组件的dom
// 获取系统音乐列表
async function getmusicListSystem(pageNum, pageSize) {
try { try {
const res = await musicListApi();
musicList.value = res.data;
const res = await musicListSystemApi(pageNum, pageSize);
musicListSystem.value = res.data.list;
musicListTotalSystem.value = Number(res.data.total);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} }
// 获取个人音乐列表
async function getmusicListPerson(pageNum, pageSize) {
try {
const res = await musicListPersonApi(pageNum, pageSize);
musicListPerson.value = res.data.list;
musicListTotalPerson.value = Number(res.data.total);
} catch (error) {
console.log(error);
}
}
// 系统页数发生改变
const musicListPageNumSystemChange = (val) => {
musicListPageNumSystem.value = val;
getmusicListSystem(musicListPageNumSystem.value, musicListPageSize.value);
};
// 个人页数发生改变
const musicListPageNumPersonChange = (val) => {
musicListPageNumPerson.value = val;
getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value);
};
// 点击选择音乐 // 点击选择音乐
function chooseMusicUrl(url, id) { function chooseMusicUrl(url, id) {
audioMusicUrl.value = url; audioMusicUrl.value = url;
@@ -1205,18 +1355,51 @@ function chooseMusicUrl(url, id) {
} }
// 转化秒为分秒 // 转化秒为分秒
function handleTime(time) { function handleTime(time) {
let m = Math.floor(time / 60);
let s = time % 60;
let m = Math.floor(time / 60).toFixed(0);
let s = (time % 60).toFixed(0);
if (s < 10) { if (s < 10) {
s = "0" + s; s = "0" + s;
} }
return m + ":" + s; return m + ":" + s;
} }
// 搜索功能
const searchInput = ref(null);
async function searchMusicList() {
// const res = await
console.log("搜索");
// 选择文件上传音乐
async function uploadMusic() {
const file = fileMusicInput.value.files[0];
if (file) {
const videoUrl = URL.createObjectURL(file);
musicData.value = file;
let formData = new FormData();
formData.append("file", musicData.value, file.name + ".mp3");
try {
const res = await videoUpload(formData);
if (res) {
// ElMessage.success("上传成功!");
} else {
ElMessage.error(
lanChange.value == "zh-cn"
? `上传音频失败!`
: `Failed to upload audio!`
);
return;
}
// 查询进度
intervalId = setInterval(async () => {
const res2 = await uploadProgressApi(res.data.videoId);
if (res2.data == "complete") {
clearInterval(intervalId);
try {
const res3 = await saveMusicApi({ voiceId: res.data.videoId });
afterSaveAudioId.value = res2.data.id; // 得到id
} catch (error) {
ElMessage.error(error);
}
}
}, 1000);
// ElMessage.success("上传成功!");
} catch (error) {
ElMessage.error(error);
}
}
} }
//#endregion ---------------------------- //#endregion ----------------------------


@@ -1242,14 +1425,26 @@ onMounted(async () => {
getAiFaceList(1, 10, 1); getAiFaceList(1, 10, 1);
if (AccessToken) { if (AccessToken) {
getAiFaceUserList(1, 10, 3); getAiFaceUserList(1, 10, 3);
await getmusicListPerson(
musicListPageNumPerson.value,
musicListPageSize.value
);
} }
await voiceTotal(); await voiceTotal();
if (route.query.id) { if (route.query.id) {
await findById(route.query.id); await findById(route.query.id);
} }
await getMusicList();
await getmusicListSystem(
musicListPageNumSystem.value,
musicListPageSize.value
);


musicList.value.forEach((item) => {
musicListSystem.value.forEach((item) => {
if (item.id == musicItemAction.value) {
audioMusicUrl.value = item.url;
}
});
musicListPerson.value.forEach((item) => {
if (item.id == musicItemAction.value) { if (item.id == musicItemAction.value) {
audioMusicUrl.value = item.url; audioMusicUrl.value = item.url;
} }
@@ -1607,6 +1802,10 @@ onMounted(async () => {
background-clip: text !important; background-clip: text !important;
-webkit-background-size: 200% 100% !important; -webkit-background-size: 200% 100% !important;
background-size: 200% 100% !important; background-size: 200% 100% !important;
.el-icon {
vertical-align: text-top;
font-size: 32px;
}
} }
} }
.aiPicTab { .aiPicTab {
@@ -1758,7 +1957,6 @@ onMounted(async () => {
width: 100%; width: 100%;
border: #000 1px solid; border: #000 1px solid;
border-radius: 10px; border-radius: 10px;

overflow: hidden; overflow: hidden;
transition: all 0.3s; transition: all 0.3s;
box-shadow: #00000026 2px 2px 2px 2px; box-shadow: #00000026 2px 2px 2px 2px;
@@ -1841,6 +2039,49 @@ onMounted(async () => {
.el-icon { .el-icon {
vertical-align: text-top; vertical-align: text-top;
} }
.musicTab {
display: flex;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
.musicTabItem {
background-color: #f5f7fa;
width: 50%;
cursor: pointer;
}
.musicTabItemActive {
background-color: #000;
color: #fff;
}
}
.uploadVideo {
position: relative;
margin-top: 10px;
width: 100%;
border: #000 1px solid;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s;
box-shadow: #00000026 2px 2px 2px 2px;
&:hover {
transform: translateY(-10px);
}
text-align: center;
margin-bottom: 20px;
height: 100px;
font-size: 50px;
font-weight: 700;
line-height: 100px;
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.musicList { .musicList {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -1861,7 +2102,8 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
.musicNmae { .musicNmae {
display: inline-block; display: inline-block;
width: 320px;
width: 280px;
margin-right: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@@ -1879,6 +2121,21 @@ onMounted(async () => {
color: #fff; color: #fff;
} }
} }
.pagination {
// position: fixed;
// bottom: 20px;
// left: 50%;
// transform: translateX(-50%);
margin-top: 10px;
background-color: #ffffff;
padding: 10px 20px;
border-radius: 8px;
transition: all 0.3s;
cursor: pointer;
&:hover {
background-color: #b8b8b873;
}
}
.AudioBox { .AudioBox {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;


+ 1
- 0
src/views/myAccount/index.vue 查看文件

@@ -38,6 +38,7 @@
Free for a limited time Free for a limited time
</div> </div>
<div v-if="lanChange == 'zh-cn'" class="number">限时免费</div> <div v-if="lanChange == 'zh-cn'" class="number">限时免费</div>

<div class="time">{{ $t("account.until") }} 2023/7/31</div> <div class="time">{{ $t("account.until") }} 2023/7/31</div>
<div class="getMore pointer" @click="routerTo('/myStore')"> <div class="getMore pointer" @click="routerTo('/myStore')">
{{ $t("account.getMore") }} {{ $t("account.getMore") }}


+ 2
- 2
src/views/myStore/index.vue 查看文件

@@ -12,7 +12,7 @@
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="content"> <div class="content">
<div class="title"> <div class="title">
{{ $t(item.typeDesc) }}
{{ item.typeDesc }}
</div> </div>
<div class="money"> <div class="money">
<span class="price">{{ <span class="price">{{
@@ -351,7 +351,7 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
line-height: 780px; line-height: 780px;
font-size: 200px;
font-size: 120px;
font-weight: 900; font-weight: 900;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);


Loading…
取消
儲存