update:优化vip套餐

src/pages/member/be-vip.vue

@@ -19,7 +19,7 @@ const loadingConfig = ref(false);
 const paying = ref(false);
 const refreshing = ref(false);
 
-// 会员页核心展示数据：视觉、权益、套餐均按蓝湖当前两张设计稿拆分。
+// 会员页核心展示数据：视觉、权益按蓝湖当前两张设计稿拆分，套餐完全使用接口数据。
 const memberTypes = [
   {
     key: "normal",
@@ -41,11 +41,6 @@ const memberTypes = [
       { label: "排位赛\n每日+20次", icon: "../../static/vip/vip-rank.png" },
       { label: "约战\n每日+20次", icon: "../../static/vip/vip-battle.png" },
     ],
-    packages: [
-      { name: "连续包月", price: "20", original: "35" },
-      { name: "12个月", price: "300", original: "420" },
-      { name: "3个月", price: "84", original: "105" },
-    ],
   },
   {
     key: "super",
@@ -70,11 +65,6 @@ const memberTypes = [
       { label: "排位赛无限制", icon: "../../static/vip/svip-rank.png" },
       { label: "专享SVIP客服", icon: "../../static/vip/svip-service.png" },
     ],
-    packages: [
-      { name: "连续包月", price: "20", original: "35" },
-      { name: "12个月", price: "300", original: "420" },
-      { name: "3个月", price: "84", original: "105" },
-    ],
   },
 ];
 
@@ -140,9 +130,17 @@ const getMenuName = (item) => {
   return item.name || item.vipName || item.title || "";
 };
 
+const formatPrice = (value) => {
+  if (value === undefined || value === null || value === "") return "";
+  return String(value).replace("￥", "").replace("¥", "");
+};
+
 const getMenuPrice = (item) => {
-  const value = item.price || item.total || item.amount || item.money;
-  return value ? String(value).replace("￥", "").replace("¥", "") : "";
+  return formatPrice(item && item.price);
+};
+
+const getMenuOriginalPrice = (item) => {
+  return formatPrice(item && item.originalPrice);
 };
 
 const getMenuSortValue = (item) => {
@@ -177,48 +175,19 @@ const getMenuType = (item) => {
   return "";
 };
 
-const getPackageMonths = (name) => {
-  if (/连续包月/.test(name)) return 1;
-  const match = String(name || "").match(/(\d+)\s*个?月/);
-  return match ? Number(match[1]) : 0;
-};
-
-const matchPackageSource = (type, pack, index) => {
-  const menus = sortMenusBySort(configMenus.value);
-  const typedMenus = menus.filter((item) => {
-    const menuType = getMenuType(item);
-    if (type.key === "super") return menuType === "super";
-    return menuType === "normal";
-  });
-  const pool = typedMenus.length ? typedMenus : menus;
-  const packMonths = getPackageMonths(pack.name);
-  return (
-    pool.find((item) => getMenuName(item).indexOf(pack.name) !== -1) ||
-    pool.find((item) => packMonths && getPackageMonths(getMenuName(item)) === packMonths) ||
-    pool.find((item) => getMenuPrice(item) === pack.price) ||
-    pool[index]
-  );
-};
-
 const getPackages = (type) => {
-  return type.packages
-    .map((item, index) => {
-      const source = matchPackageSource(type, item, index);
+  return sortMenusBySort(configMenus.value)
+    .filter((item) => getMenuType(item) === type.key)
+    .map((item) => {
       return {
-        ...item,
-        source,
-        name: source ? getMenuName(source) || item.name : item.name,
-        price: source ? getMenuPrice(source) || item.price : item.price,
-        icon: source && source.icon,
-        id: source && source.id,
+        source: item,
+        id: item.id,
+        name: getMenuName(item),
+        price: getMenuPrice(item),
+        originalPrice: getMenuOriginalPrice(item),
+        icon: item.icon,
       };
-    })
-    .map((item, index) => ({ item, index }))
-    .sort((a, b) => {
-      const sortDiff = getMenuSortValue(a.item.source) - getMenuSortValue(b.item.source);
-      return sortDiff || a.index - b.index;
-    })
-    .map(({ item }) => item);
+    });
 };
 
 const currentPackages = computed(() => {
@@ -487,7 +456,7 @@ onShow(loadVipConfig);
                 <view class="package-list">
                   <view
                     v-for="(pack, index) in getPackages(type)"
-                    :key="`${type.key}-${pack.id || pack.name}`"
+                    :key="`${type.key}-${pack.id || pack.name || index}`"
                     class="package-card"
                     :class="{ 'package-card--active': selectedPackageIndex === index }"
                     @click="selectPackage(index)"
@@ -498,8 +467,8 @@ onShow(loadVipConfig);
                         <text class="package-price__symbol">¥</text>
                         <text class="package-price__value">{{ pack.price }}</text>
                       </view>
-                      <view class="package-origin">
-                        <text>¥{{ pack.original }}</text>
+                      <view v-if="pack.originalPrice" class="package-origin">
+                        <text>¥{{ pack.originalPrice }}</text>
                         <view class="package-origin__line" />
                       </view>
                     </view>
@@ -511,13 +480,14 @@ onShow(loadVipConfig);
                 hover-class="none"
                 class="activate-btn"
                 :class="type.buttonClass"
-                :disabled="loadingConfig || paying || refreshing"
+                :disabled="loadingConfig || paying || refreshing || !selectedPackage"
                 @click="onPay"
               >
                 <text v-if="loadingConfig">加载套餐中</text>
                 <text v-else-if="paying">创建订单中</text>
-                <text v-else-if="!refreshing">¥ {{ selectedPackage.price }} 一键激活</text>
-                <text v-else>刷新会员状态中</text>
+                <text v-else-if="refreshing">刷新会员状态中</text>
+                <text v-else-if="selectedPackage">¥ {{ selectedPackage.price }} 一键激活</text>
+                <text v-else>套餐暂不可购买</text>
               </button>
 
               <view class="agreement">
@@ -784,8 +754,8 @@ onShow(loadVipConfig);
 }
 
 .package-list {
-  display: flex;
-  width: 984rpx;
+  display: inline-flex;
+  min-width: 100%;
   padding: 6rpx 84rpx 6rpx 6rpx;
   box-sizing: border-box;
 }
@@ -793,6 +763,7 @@ onShow(loadVipConfig);
 .package-card {
   position: relative;
   width: 264rpx;
+  flex: 0 0 264rpx;
   height: 224rpx;
   border-radius: 16rpx;
   border: 2rpx solid #999999;