Przeglądaj źródła

优化视频播放器购买按钮逻辑,新增用户类型判断,提升用户体验

wuyi 3 miesięcy temu
rodzic
commit
94e4b64b2e
1 zmienionych plików z 22 dodań i 8 usunięć
  1. 22 8
      src/views/VideoPlayer.vue

+ 22 - 8
src/views/VideoPlayer.vue

@@ -60,21 +60,23 @@
         </div>
       </div>
 
-      <!-- 游客和免费用户购买按钮 -->
+      <!-- 购买按钮区域 -->
       <div
-        v-if="isGuestOrFree && !isSinglePurchased"
+        v-if="!isSinglePurchased && !isVip"
         class="flex items-center gap-1.5"
       >
-        <!-- 试看时间信息 -->
-        <div class="text-xs text-white/60 px-2 py-1">
+        <!-- 游客和免费用户显示试看时间信息 -->
+        <div v-if="isGuestOrFree" class="text-xs text-white/60 px-2 py-1">
           试看 {{ trialDuration }} 秒
         </div>
 
+        <!-- 只有非游客用户才显示购买会员按钮 -->
         <button
+          v-if="!isGuest"
           @click="showMembershipPurchaseModal = true"
           class="px-2 py-1 rounded-md bg-brand text-slate-900 text-xs font-medium hover:bg-brand/90 transition"
         >
-          购买会员
+          开通会员
         </button>
         <button
           @click="showSinglePurchaseModal = true"
@@ -117,7 +119,7 @@
 
         <!-- 试看结束遮罩 -->
         <div
-          v-if="showTrialEndModal && !isSinglePurchased"
+          v-if="showTrialEndModal && !isSinglePurchased && !isVip"
           class="absolute inset-0 bg-black/80 flex items-center justify-center z-50"
         >
           <div
@@ -127,14 +129,17 @@
               试看时间已结束
             </div>
             <div class="text-white/70 text-sm mb-6">
-              购买会员或单独购买本片继续观看
+              <span v-if="!isGuest">购买会员或单独购买本片继续观看</span>
+              <span v-else>单独购买本片继续观看</span>
             </div>
             <div class="space-y-3">
+              <!-- 只有非游客用户才显示购买会员按钮 -->
               <button
+                v-if="!isGuest"
                 @click="purchaseMembership"
                 class="w-full bg-brand hover:bg-brand/90 text-slate-900 py-3 px-4 rounded-lg font-medium transition"
               >
-                购买会员
+                开通会员
               </button>
               <button
                 @click="purchaseVideo"
@@ -710,6 +715,15 @@ const currentVipLevel = computed(() => userStore.getVipLevel());
 const isGuestOrFree = computed(() => !canWatchFullVideo(currentVipLevel.value));
 const trialDuration = computed(() => getTrialDuration(priceStore));
 
+// 参考Account.vue的用户类型判断
+const isGuest = computed(() => {
+  return userStore.userInfo?.vipLevel === "guest";
+});
+const isVip = computed(() => {
+  const level = userStore.userInfo?.vipLevel;
+  return level && level !== VipLevel.GUEST && level !== VipLevel.FREE;
+});
+
 // VideoProcessor 事件处理
 const onCoverLoaded = (url: string) => {
   // 封面加载完成