diff --git a/src/pages/member/be-vip.vue b/src/pages/member/be-vip.vue index f299225..f11d8b8 100644 --- a/src/pages/member/be-vip.vue +++ b/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); ¥ {{ pack.price }} - - ¥{{ pack.original }} + + ¥{{ pack.originalPrice }} @@ -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" > 加载套餐中 创建订单中 - ¥ {{ selectedPackage.price }} 一键激活 - 刷新会员状态中 + 刷新会员状态中 + ¥ {{ selectedPackage.price }} 一键激活 + 套餐暂不可购买 @@ -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;