Przeglądaj źródła

新增试看时长配置,优化视频播放器逻辑,提升用户体验

wuyi 3 miesięcy temu
rodzic
commit
5ed65652d2
4 zmienionych plików z 29 dodań i 6 usunięć
  1. 8 0
      src/store/price.ts
  2. 5 1
      src/types/price.ts
  3. 6 3
      src/types/vip.ts
  4. 10 2
      src/views/VideoPlayer.vue

+ 8 - 0
src/store/price.ts

@@ -40,6 +40,7 @@ export const usePriceStore = defineStore("price", () => {
         yearly: "0",
         lifetime: "0",
         single: "0",
+        preview_duration: "30",
       };
 
       response.forEach((item) => {
@@ -67,6 +68,12 @@ export const usePriceStore = defineStore("price", () => {
     return getPrice("single");
   };
 
+  // 获取试看时长(秒)
+  const getPreviewDuration = (): number => {
+    const duration = getPrice("preview_duration");
+    return parseInt(duration) || 30; // 默认30秒
+  };
+
   // 获取会员套餐列表
   const getMembershipPlans = computed((): MembershipPlan[] => {
     if (!priceConfig.value) return [];
@@ -99,6 +106,7 @@ export const usePriceStore = defineStore("price", () => {
     fetchPriceConfig,
     getPrice,
     getSinglePrice,
+    getPreviewDuration,
     getMembershipPlans,
     isPriceConfigLoaded,
   };

+ 5 - 1
src/types/price.ts

@@ -16,7 +16,8 @@ export type MembershipType =
   | "quarterly"
   | "yearly"
   | "lifetime"
-  | "single";
+  | "single"
+  | "preview_duration";
 
 // 会员套餐信息
 export interface MembershipPlan {
@@ -36,6 +37,7 @@ export interface PriceConfigMap {
   yearly: string;
   lifetime: string;
   single: string;
+  preview_duration: string;
 }
 
 // 会员套餐标签映射
@@ -48,6 +50,7 @@ export const membershipLabels: Record<MembershipType, string> = {
   yearly: "一年",
   lifetime: "终身",
   single: "单片购买",
+  preview_duration: "试看时长",
 };
 
 // 会员套餐时长映射
@@ -60,4 +63,5 @@ export const membershipDurations: Record<MembershipType, string> = {
   yearly: "365天",
   lifetime: "永久",
   single: "永久",
+  preview_duration: "秒",
 };

+ 6 - 3
src/types/vip.ts

@@ -14,9 +14,12 @@ export const canWatchFullVideo = (vipLevel: VipLevel): boolean => {
   return vipLevel !== VipLevel.GUEST && vipLevel !== VipLevel.FREE;
 };
 
-// 试看时长
-export const getTrialDuration = (): number => {
-  return 5 * 60;
+// 试看时长(从价格配置获取,默认30秒)
+export const getTrialDuration = (priceStore?: any): number => {
+  if (priceStore && priceStore.getPreviewDuration) {
+    return priceStore.getPreviewDuration();
+  }
+  return 30; // 默认30秒
 };
 
 export const vipLevelToText = (level: VipLevel | string): string => {

+ 10 - 2
src/views/VideoPlayer.vue

@@ -61,7 +61,15 @@
       </div>
 
       <!-- 游客和免费用户购买按钮 -->
-      <div v-if="isGuestOrFree && !isSinglePurchased" class="flex gap-1.5">
+      <div
+        v-if="isGuestOrFree && !isSinglePurchased"
+        class="flex items-center gap-1.5"
+      >
+        <!-- 试看时间信息 -->
+        <div class="text-xs text-white/60 px-2 py-1">
+          试看 {{ trialDuration }} 秒
+        </div>
+
         <button
           @click="showMembershipPurchaseModal = true"
           class="px-2 py-1 rounded-md bg-brand text-slate-900 text-xs font-medium hover:bg-brand/90 transition"
@@ -700,7 +708,7 @@ const device = generateMacAddress();
 // 计算属性
 const currentVipLevel = computed(() => userStore.getVipLevel());
 const isGuestOrFree = computed(() => !canWatchFullVideo(currentVipLevel.value));
-const trialDuration = computed(() => getTrialDuration());
+const trialDuration = computed(() => getTrialDuration(priceStore));
 
 // VideoProcessor 事件处理
 const onCoverLoaded = (url: string) => {