diff --git a/src/apis/myAccount.js b/src/apis/myAccount.js
index 3371ea8..bec0256 100644
--- a/src/apis/myAccount.js
+++ b/src/apis/myAccount.js
@@ -48,4 +48,29 @@ export function useCodeUserApi() {
url: `api/user/getUseCodeUser`,
method: 'get'
})
+}
+
+/**
+ * @description 修改用户名和头像
+ * @params
+ * @returns
+ */
+export function updUserInfoApi(data) {
+ return request({
+ url: `api/user/updUserInfo`,
+ method: 'post',
+ data
+ })
+}
+
+/**
+ * @description 获取用户信息
+ * @params
+ * @returns
+ */
+export function getUserInfoApi() {
+ return request({
+ url: `api/user/getUserInfo`,
+ method: 'get',
+ })
}
\ No newline at end of file
diff --git a/src/components/myLoadingIcon.vue b/src/components/myLoadingIcon.vue
new file mode 100644
index 0000000..3366999
--- /dev/null
+++ b/src/components/myLoadingIcon.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
index eefbee5..b192b79 100644
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -4,30 +4,36 @@ export default {
dashboard: "Dashboard",
document: "Document",
},
-
+ // 公用
+ public:{
+ cancel:'Cancel',
+ confirm:'Confirm',
+ username:'Username',
+ avatar:'Avatar',
+ },
// 登录页面国际化
login: {
title: "Metavatar-PC",
username: "Username",
email: "E-mail",
password: "Password",
- confirmPassword: "Confirm Password",
+ confirmPassword: "Confirm password",
login: "Sign in",
register: "Sign up",
loginBtn: "Sign in",
registerBtn: "Sign up",
- verifyCode: "Verify Code",
+ verifyCode: "Verify code",
signIn: "Already got an account? Sign in here",
signUp: "Don't have an account? Sign up here",
forgetPwd: "I forgot my password",
- forgetPwdTitle:'forgot password',
+ forgetPwdTitle:'Forgot password',
SendEmail:'Send an email',
resetPassword:'Reset password',
setNewPwd:'Set new password',
- newPwd:'new password',
- oldPwd:'old password',
- confirmNewPwd:'confirm new password',
- confirm:'confirm',
+ newPwd:'New password',
+ oldPwd:'Old password',
+ confirmNewPwd:'Confirm new password',
+ confirm:'Confirm',
gohome:'Back to home page'
},
@@ -40,26 +46,29 @@ export default {
// 创作视频
createVideo: {
- title: "CreateVideo",
- availableMould:"Available Moulds",
+ title: "Create Video",
+ availableMould:"Available moulds",
personalWarehouse:'Personal warehouse',
- typeScript: "Type your Script",
- uploadAudio: "Upload Audio",
+ typeScript: "Type your script",
+ uploadAudio: "Upload audio",
recordedAudio:'Recorded audio',
startRecorded:'Start recording',
stopRecorded:'Stop recording',
- aiScript: "Ai Script",
+ aiScript: "Ai script",
typeTitle: "Type a title",
confirm: "Confirm",
aiText: "Please input here",
languages: "Languages",
voices: "Voices",
styles: "Styles",
- reselect: "reselect",
+ reselect: "Reselect",
sureUpload: "Confirm upload",
- generateVideo: "Generate Video",
- saveVideo:'save manuscript',
+ generateVideo: "Generate video",
+ saveVideo:'Save manuscript',
select:'Please select',
+ music:'Music',
+ Aipicture:'Ai-generated pictures',
+ AipictureTip:'Please customize your picture',
},
// 我的视频
@@ -68,28 +77,29 @@ export default {
search: "Search...",
name: "Name",
date: "Date",
- videoTitle: "Video Title:",
+ videoTitle: "Video title:",
download: "Download",
delete: "Delete",
more: "More",
loading: "Loading , just a moment",
noList: "Nothing here. How about making one ?",
- goCreate: "Go Create !",
- manuscript: "manuscript",
+ goCreate: "Go create !",
+ manuscript: "Manuscript",
generating: "Generating",
generationFailed: "Failed",
generationSucceed: "Succeed",
- manuscriptText: "manuscript",
- generatingText: "The video is generating, please wait a moment",
+ manuscriptText: "Manuscript",
+ generatingText: "The video is generating, Please wait a moment",
generationFailedText: "The video generate is failed, Reason:",
- edit:'edit'
+ edit:'Edit'
},
// 个人账户
account: {
title: "My Account",
- reSetPwd: "Reset Password",
- until: "until",
+ reSetPwd: "Reset password",
+ editInfo:'Edit personal information',
+ until: "Until",
getMore: "UPGRADE",
copyCode: "Copy invitation code",
saveCode: "Save QR code",
@@ -102,7 +112,7 @@ export default {
failed: "Failed",
msg1: "Obtain one video production time",
inputCode:'Please enter the invitation code',
- submit:'submit',
+ submit:'Submit',
noListOrder: "没有数据哦,快去邀请更多人加入我们吧~",
noListInvite: "No data, please invite more people to join us",
},
@@ -128,7 +138,7 @@ export default {
expired:
"Your ticket is expired. You can click the button to resend new email then",
sendSuccess: "The email has been resent, you can check it now",
- goLogin: "Login Now",
+ goLogin: "Login now",
reSend: "Resend",
},
};
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
index d2fa0e1..f08c51b 100644
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -4,7 +4,13 @@ export default {
dashboard: "首页",
document: "项目文档",
},
-
+ // 公用
+ public:{
+ cancel:'取消',
+ confirm:'确定',
+ username:'用户名',
+ avatar:'头像',
+ },
// 登录页面国际化
login: {
title: "Metavatar-PC",
@@ -60,6 +66,9 @@ export default {
generateVideo: "生成视频",
saveVideo:'保存草稿',
select:'请选择',
+ music:'音乐',
+ Aipicture:'Ai生成图片',
+ AipictureTip:'请自定义您的图片',
},
// 我的视频
@@ -89,6 +98,7 @@ export default {
account: {
title: "个人账户",
reSetPwd: "修改密码",
+ editInfo:'编辑个人信息',
until: "有效期至",
getMore: "升级套餐",
copyCode: "复制邀请码",
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index ddb5f5f..fe8e71d 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -16,7 +16,13 @@
-
+
+
![]()
+
{{ $t("navbar.account") }}
@@ -43,7 +49,8 @@ import { useTagsViewStore } from "@/store/modules/tagsView";
import { useUserStore } from "@/store/modules/user";
import { useI18n } from "vue-i18n";
import LangSelect from "@/components/LangSelect/index.vue";
-
+import { userInfoModules } from "@/store/modules/userInfo";
+const userInfoPinia = userInfoModules(); //pinia
const { locale } = useI18n();
// 当前语言状态与国际化组件
@@ -159,13 +166,23 @@ watch(
box-shadow: 0 0 1px #0003;
padding-right: 50px;
.avatar {
- width: 30px;
- height: 30px;
+ position: relative;
+ width: 50px;
+ height: 50px;
margin-right: 10px;
margin-left: 20px;
- background-color: #4769da;
+ background-color: #fff;
border-radius: 50%;
cursor: pointer;
+ overflow: hidden;
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-width: 100%;
+ max-height: 100%;
+ }
}
.navItem {
cursor: pointer;
diff --git a/src/main.ts b/src/main.ts
index c822504..8280add 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,6 +19,7 @@ import "uno.css";
import "@/styles/my.scss"; // 引入自己定义的样式
// 引入组件
import myLoading from "@/components/myLoading.vue";
+import myLoadingIcon from "@/components/myLoadingIcon.vue";
const app = createApp(App);
@@ -33,4 +34,4 @@ app.use(ElementPlus);
app.use(router).use(i18n).mount("#app");
// 注册全局组件
-app.component('myLoading',myLoading)
\ No newline at end of file
+app.component('myLoading',myLoading).component('myLoadingIcon',myLoadingIcon)
\ No newline at end of file
diff --git a/src/store/modules/userInfo.js b/src/store/modules/userInfo.js
index db02748..f186337 100644
--- a/src/store/modules/userInfo.js
+++ b/src/store/modules/userInfo.js
@@ -1,14 +1,19 @@
import { defineStore } from "pinia";
import { store } from "@/store";
-
-export const userInfoPinia = defineStore("userInfo", () => {
+import {
+ getUserInfoApi,
+} from "../../apis/myAccount";
+export const userInfoModules = defineStore("userInfo", () => {
// state
- const email = ref("");
+ const userInfo = ref(null)
function setEmail(params) {
email.value = params
}
-
- return { email, setEmail };
+ async function getUserInfo() {
+ const res = await getUserInfoApi()
+ userInfo.value = res.data
+ }
+ return { userInfo, setEmail, getUserInfo };
},
{
persist: true,
diff --git a/src/styles/my.scss b/src/styles/my.scss
index 8165314..58bb358 100644
--- a/src/styles/my.scss
+++ b/src/styles/my.scss
@@ -49,4 +49,29 @@ p {
background: linear-gradient(225deg,
rgb(81 217 202 / 100%),
rgb(114 100 245 / 100%));
-}
\ No newline at end of file
+}
+
+// 自定义按钮
+.customBtn {
+ padding: 10px 15px;
+ text-align: center;
+ background-color: #fff;
+ color: #000;
+ transition: all .3s;
+ border-radius: 15px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #000;
+ color: #fff;
+ }
+}
+
+// element公共样式
+.el-dialog {
+ border-radius: 30px !important;
+}
+
+// :deep(.el-input__wrapper.is-focus) {
+// box-shadow: 0 0 0 1px #000 !important;
+// }
\ No newline at end of file
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 019c155..cbeaaba 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -8,6 +8,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+ copy: typeof import('./../components/myLoading copy.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -71,6 +72,7 @@ declare module '@vue/runtime-core' {
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
MyLoading: typeof import('./../components/myLoading.vue')['default']
+ MyLoadingIcon: typeof import('./../components/myLoadingIcon.vue')['default']
Pagination: typeof import('./../components/Pagination/index.vue')['default']
RightPanel: typeof import('./../components/RightPanel/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index ae8bcd4..7436c33 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -124,9 +124,23 @@
+
+
+
+
+
+
+

+
+
+
+
+
{{ $t("createVideo.personalWarehouse") }}
+
+ {{ $t("createVideo.Aipicture") }}
+
+
+
+
+ {{ $t("createVideo.AipictureTip") }}
+
+
@@ -213,7 +246,7 @@
-
+
{{ $t("createVideo.uploadAudio") }}
@@ -352,7 +385,7 @@
-
+
+
+
+
+
+ {{ $t("createVideo.confirm") }}
+
+
+
+
+
+
+
{{ $t("createVideo.languages") }}
+
+
+
+
{{ $t("createVideo.voices") }}
+
+
+
+
{{ $t("createVideo.styles") }}
+
+
+
+
{{
+ $t("createVideo.generateVideo")
+ }}
+
+
+
+
@@ -663,6 +761,13 @@ async function changeFile() {
}
//#endregion ---------------------------
+//#region AI生成图片
+function chooseAiPic() {
+ showFace.value = 2;
+ showUploadBtn.value = 5;
+}
+//#endregion --------------------------
+
//#region card1的逻辑
const textareaContent = ref("");
function insertIcon() {
@@ -754,6 +859,7 @@ async function getPreviewAudio() {
);
}
previewAudioUrl.value = res.data.data;
+ document.getElementById("audio").play();
} catch (error) {
ElMessage.error(error);
}
@@ -788,6 +894,7 @@ const stopRecording = async () => {
audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
audioData.value = recorder.getWAVBlob();
isRecording.value = true;
+ console.log(document.getElementById("uploadAudio").duration);
} catch (error) {
console.error(error);
}
@@ -831,14 +938,31 @@ async function uploadAudio(isSaveVideo) {
const fileInput = ref(null);
let intervalId = null; // 用于存储 setInterval 的返回值
+const uploadAudioTime = ref(null); // 音频时长
const handleFileChange = async () => {
const file = fileInput.value.files[0];
+
if (file) {
const videoUrl = URL.createObjectURL(file);
audioUrl.value = videoUrl;
audioData.value = file;
+ const audio2 = new Audio();
+ audio2.src = videoUrl;
+ countAudioTime(audio2);
}
};
+// 计算音频的时长
+const countAudioTime = async (audio) => {
+ while (isNaN(audio.duration) || audio.duration === Infinity) {
+ // 延迟一会 不然网页都卡死
+ await new Promise((resolve) => setTimeout(resolve, 200));
+ // 设置随机播放时间,模拟调进度条
+ audio.currentTime = 10000000 * Math.random();
+ }
+ // console.log("音频的总时长:", Math.floor(audio.duration));
+ uploadAudioTime.value = Math.floor(audio.duration);
+};
+
// 获取视频上传进度
const afterSaveAudioId = ref(null);
async function uploadProgress(videoId, isSaveVideo) {
@@ -1007,7 +1131,7 @@ onMounted(async () => {
}
.left {
- width: 70%;
+ width: 68%;
height: 80%;
padding: 20px;
:deep(.el-input__wrapper) {
@@ -1160,6 +1284,54 @@ onMounted(async () => {
border: 2px solid #000;
border-radius: 50%;
}
+
+ .editAiPicBox {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border: 1px solid #ccc;
+ background-color: #f1f2f6;
+ border-radius: 30px;
+ overflow: hidden;
+ .edit {
+ width: 50%;
+ height: 100%;
+
+ background-color: #fff;
+ .TagBox {
+ width: 100%;
+ height: 100%;
+
+ border-radius: 0 0 30px 0;
+ background-color: #f1f2f6;
+ }
+ }
+ .AIpicBox {
+ position: relative;
+ width: 50%;
+ height: 100%;
+ border-radius: 30px 0 0 0;
+ background-color: #fff;
+ .picBox {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 30px 0 0 0;
+ background-color: #fff;
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 30px;
+ }
+ }
+ }
+ }
}
&-bottom {
@@ -1197,7 +1369,7 @@ onMounted(async () => {
overflow-y: scroll;
.faceItem {
position: relative;
- margin-right: 35px;
+ margin-right: 30px;
margin-bottom: 35px;
width: 150px;
height: 150px;
@@ -1276,11 +1448,33 @@ onMounted(async () => {
}
}
}
+ .Aipicture {
+ width: 100%;
+ height: 180px;
+ .title {
+ font-size: 30px;
+ text-align: center;
+ line-height: 80px;
+ 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;
+ }
+ }
}
}
.right {
- width: 30%;
+ width: 32%;
height: 100%;
padding: 30px 30px 20px 30px;
background-color: #f1f2f6;
@@ -1449,7 +1643,7 @@ onMounted(async () => {
}
:deep(.el-tabs__item) {
- width: 34%;
+ width: 25%;
}
:deep(.el-tabs__item:hover) {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index cf15088..7fb2fba 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -502,7 +502,7 @@ import {
import axios from "axios";
// 状态管理依赖
-import { userInfoPinia } from "@/store/modules/userInfo";
+import { userInfoModules } from "@/store/modules/userInfo";
// API依赖
import {
@@ -515,7 +515,7 @@ import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const currentLan = ref(locale);
-const userInfo = userInfoPinia();
+const userInfoPinia = userInfoModules();
const route = useRoute();
const router = useRouter();
/**
@@ -957,7 +957,7 @@ async function doLogin(data: any) {
// 注册成功将账号密码保存到本地
saveInfo(data);
isLogining.value = false;
- userInfo.setEmail(data.email); //保存邮箱到pinia
+ userInfoPinia.getUserInfo(); //保存邮箱到pinia
})
.catch((err) => {
console.log(err, "err");
diff --git a/src/views/myAccount/index.vue b/src/views/myAccount/index.vue
index 309882f..e4dfc97 100644
--- a/src/views/myAccount/index.vue
+++ b/src/views/myAccount/index.vue
@@ -5,16 +5,31 @@
-
![]()
+
-
OLO
-
{{ userInfo.email }}
-
{{ $t("account.reSetPwd") }}
+
+ {{ userInfoPinia.userInfo.name }}
+
+
{{ userInfoPinia.userInfo.email }}
+
+ {{
+ $t("account.editInfo")
+ }}
+ {{ $t("account.reSetPwd") }}
+
@@ -134,6 +149,40 @@
+
+
+
+ {{ $t("public.avatar") }}:
+
+
+
+
+
+
![]()
+
+
+
+
+ {{ $t("public.username") }}:
+
+
+
+
+
+
+ {{ $t("public.cancel") }}
+
+
+ {{ $t("public.confirm") }}
+
+
+
@@ -141,21 +190,82 @@
//#region 导入文件
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
-import { userInfoPinia } from "@/store/modules/userInfo";
+import { userInfoModules } from "@/store/modules/userInfo";
import dayjs from "dayjs";
+import imageCompression from "browser-image-compression"; //压缩图片插件
import {
inviteCodeApi,
useCodeApi,
isUseApi,
useCodeUserApi,
+ updUserInfoApi,
} from "../../apis/myAccount";
+import { awsImgUpload } from "@/apis/createVideo";
import defaultAvater from "../../assets/img/left-top-logo.png";
+
//#endregion ---------------------------
const { locale } = useI18n();
const lanChange = ref(locale); //国际化
-const userInfo = userInfoPinia(); //pinia
+const userInfoPinia = userInfoModules(); //pinia
+
+//#region 编辑个人信息
+const showEditInfoDialog = ref(false); //控制弹窗显隐
+const userNameinput = ref(null); //用户名输入框绑定
+const dialogAvatarUrl = ref(null); //图片回显地址
+const dialogAvatarData = ref(null); //图片上传数据
+const infoDialogLoad = ref(false); //load效果
+// 选择图片
+async function chooseImg(e) {
+ if (e.target.files[0]) {
+ dialogAvatarUrl.value = null;
+ dialogAvatarData.value = null;
+ // 压缩配置
+ const options = {
+ maxSizeMB: 2, // 最大压缩大小为 1MB
+ useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
+ };
+ const compressedFile = await imageCompression(e.target.files[0], options);
+ dialogAvatarUrl.value = URL.createObjectURL(compressedFile);
+ dialogAvatarData.value = compressedFile;
+ } else {
+ return;
+ }
+}
+// 上传编辑信息
+async function submitUserInfo() {
+ let formData = new FormData();
+ const timestamp = Date.now();
+ formData.append("file", dialogAvatarData.value, timestamp + ".png");
+ const res1 = await awsImgUpload(formData);
+ const data = {
+ name: userNameinput.value,
+ avatarUrl: res1.data.url,
+ };
+ try {
+ const res2 = await updUserInfoApi(data);
+ ElMessage.success(
+ lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully`
+ );
+ userInfoPinia.getUserInfo();
+ showEditInfoDialog.value = false;
+ } catch (error) {
+ ElMessage.error(
+ lanChange.value == "zh-cn"
+ ? `修改失败,请稍后重试`
+ : `The modification failed. Please try again later`
+ );
+ }
+}
+// 关闭弹窗清空
+function closeInfoDialog() {
+ userNameinput.value = userInfoPinia.userInfo.name;
+ dialogAvatarUrl.value = userInfoPinia.userInfo.avatarUrl;
+ dialogAvatarData.value = null;
+}
+//#endregion ---------------------------
+
//#region 二维码邀请码区域
const myInviteCode = ref(null); //我的邀请码
async function getMyInviteCode() {
@@ -168,10 +278,18 @@ function copyInviteCode() {
navigator.clipboard
.writeText(inviteCode)
.then(() => {
- ElMessage.success("邀请码已复制到剪贴板");
+ ElMessage.success(
+ lanChange.value == "zh-cn"
+ ? "邀请码已复制到剪贴板"
+ : `The invitation code has been copied to the clipboard`
+ );
})
.catch((error) => {
- ElMessage.error("无法复制邀请码:", error);
+ ElMessage.error(
+ lanChange.value == "zh-cn"
+ ? "无法复制邀请码:"
+ : `Unable to copy invitation code`
+ );
});
}
// 下载二维码图片
@@ -228,6 +346,8 @@ onMounted(() => {
getMyInviteCode(); // 查询用户的邀请码
getIsUseState(); //查询是否使用过邀请码
getInviteList();
+ userNameinput.value = userInfoPinia.userInfo.name;
+ dialogAvatarUrl.value = userInfoPinia.userInfo.avatarUrl;
});
//#endregion ---------------------------
@@ -249,7 +369,7 @@ function routerTo(url) {
}
.left {
- width: 37%;
+ width: 39%;
height: 100%;
padding: 30px;
@@ -307,6 +427,7 @@ function routerTo(url) {
&-two {
position: relative;
height: 80px;
+ overflow: hidden;
.number {
font-size: 30px;
@@ -322,12 +443,14 @@ function routerTo(url) {
position: absolute;
top: -1px;
right: -1px;
+ padding: 5px;
width: 80px;
height: 80px;
- line-height: 80px;
+ line-height: 70px;
text-align: center;
background-color: #000;
color: #fff;
+ font-size: 14px;
transition: all 0.3s;
&:hover {
background-color: #15d1b8;
@@ -416,7 +539,7 @@ function routerTo(url) {
.right {
background-color: #f1f2f6;
padding: 30px;
- width: 63%;
+ width: 61%;
height: 100%;
// height: 95%;
border-radius: 30px 0 0 0;
@@ -567,6 +690,69 @@ function routerTo(url) {
}
}
+.editInfoDialog {
+ .el-row {
+ display: flex;
+ justify-content: space-evenly;
+ }
+ .el-col {
+ margin-bottom: 10px;
+ text-align: right;
+ line-height: 32px;
+ padding-right: 20px;
+ }
+ .dialogAvatar {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ background-color: rgba(204, 204, 204, 0.2);
+ border-radius: 30px;
+ overflow: hidden;
+ &:hover {
+ img {
+ z-index: 0;
+ }
+ .add {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+ }
+ input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ z-index: 3;
+ cursor: pointer;
+ }
+ .add {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ text-align: center;
+ line-height: 200px;
+ font-size: 50px;
+ font-weight: 700;
+ color: #000;
+ transition: all 0.3s;
+ }
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 10px;
+ max-width: 100%;
+ max-height: 100%;
+ z-index: 2;
+ transition: all 0.3s;
+ }
+ }
+}
// 公共类名
.bigWord {
font-size: 30px;
diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue
index 760091f..6f6b08f 100644
--- a/src/views/myCreating/index.vue
+++ b/src/views/myCreating/index.vue
@@ -38,7 +38,7 @@
{{ item.title }}
- {{ item.createDate }}
+ {{ dayjs(item.createDate).format("YYYY-MM-DD") }}
{
console.log(res, "res");
res.data.list.forEach((item) => {
- item.createDate = timestampToTime(item.createDate) || "";
- item.updateDate = timestampToTime(item.updateDate) || "";
- item.createVideoDate = timestampToTime(item.createVideoDate) || "";
+ // item.createDate = timestampToTime(item.createDate) || "";
+ // item.updateDate = timestampToTime(item.updateDate) || "";
+ // item.createVideoDate = timestampToTime(item.createVideoDate) || "";
item.statusName = getStatus(item.videoStatus);
});
videoList.value = res.data.list;
@@ -514,6 +514,7 @@ onMounted(() => {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ font-size: 13px;
}
.statusName {
position: absolute;
diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue
index 2ef9e62..a921018 100644
--- a/src/views/myStore/index.vue
+++ b/src/views/myStore/index.vue
@@ -86,7 +86,8 @@
>
-

+
+
扫描二维码进行付款
@@ -169,7 +170,6 @@ const showPayDialog = ref(false); //套餐信息dialog显示隐藏
const presentItme = reactive({}); //点击的套餐项
function clickPayDialog(item) {
presentItme.value = item;
- console.log(presentItme);
showPayDialog.value = true;
}
function showOrderCode(type) {
@@ -179,6 +179,7 @@ function showOrderCode(type) {
//#region 点击套餐内的支付
const orderCodeDialogShow = ref(false);
+const orderCodeUrl = ref(null);
//#endregion ------------------------------------
//#region
@@ -352,10 +353,18 @@ const orderCodeDialogShow = ref(false);
width: 100%;
.codeImg {
display: flex;
+ margin: auto;
justify-content: space-evenly;
+ align-items: center;
+ width: 300px;
+ height: 300px;
+ border: 1px solid #ccc;
+ border-radius: 15px;
+ overflow: hidden;
+ padding: 10px;
img {
- width: 300px;
- height: 300px;
+ width: 100%;
+ height: 100%;
}
}
.tips {