Bläddra i källkod

新增VIP到期时间显示功能,优化账户页面逻辑,提升用户体验

wuyi 3 månader sedan
förälder
incheckning
1e8db6f1f4
2 ändrade filer med 32 tillägg och 1 borttagningar
  1. 1 1
      src/components/layout/MainLayout.vue
  2. 31 0
      src/views/Account.vue

+ 1 - 1
src/components/layout/MainLayout.vue

@@ -5,7 +5,7 @@
     <Header @show-login="showLoginDialog = true" @switch-tab="switchTab" />
 
     <main class="max-w-screen-sm mx-auto w-full px-4 pb-28 pt-3">
-      <router-view />
+      <router-view @show-login="showLoginDialog = true" />
     </main>
 
     <button

+ 31 - 0
src/views/Account.vue

@@ -13,6 +13,15 @@ const isVip = computed(() => {
   const level = userStore.userInfo?.vipLevel;
   return level && level !== VipLevel.GUEST && level !== VipLevel.FREE;
 });
+
+// 是否显示VIP到期时间
+const shouldShowExpireTime = computed(() => {
+  return (
+    isVip.value &&
+    userStore.userInfo?.vipLevel !== VipLevel.LIFETIME &&
+    userStore.userInfo?.vipExpireTime
+  );
+});
 const emit = defineEmits(["show-login"]);
 
 const showUpgradeDialog = ref(false);
@@ -54,6 +63,24 @@ const showLoginDialog = () => {
   emit("show-login");
 };
 
+// 格式化VIP到期时间
+const formatVipExpireTime = (expireTime: string | null | undefined): string => {
+  if (!expireTime) return "";
+
+  try {
+    const date = new Date(expireTime);
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+
+    return `${month}-${day} ${hours}:${minutes}`;
+  } catch (error) {
+    console.error("格式化到期时间失败:", error);
+    return "";
+  }
+};
+
 const showError = (message: string) => {
   errorMessage.value = message;
   showErrorDialog.value = true;
@@ -241,6 +268,10 @@ onMounted(() => {
             {{ vipLevelToText(userStore.userInfo?.vipLevel) }}
           </span>
         </h2>
+        <!-- VIP到期时间显示 -->
+        <p v-if="shouldShowExpireTime" class="text-xs text-white/60 mt-1">
+          到期时间:{{ formatVipExpireTime(userStore.userInfo?.vipExpireTime) }}
+        </p>
       </div>
       <div v-if="isLoggedIn" class="flex gap-2">
         <button