update：新增门店vip相关

2026-10-21 15:27:31 +08:00
parent 5bb9df8a03
commit 00f84fc3e4
23 changed files with 874 additions and 215 deletions
@@ -747,6 +747,21 @@ export const getGiftDetailAPI = (id) => {
    );
 };

+// 分页获取启用门店及当前用户在各店的会员状态。
+export const getStoreVipListAPI = ({page = 1, pageSize = 20} = {}) => {
+    return request("GET", "/store/list", {page, pageSize});
+};
+
+// 查询当前用户在指定门店的会员状态及权益剩余次数。
+export const getStoreBenefitAPI = (storeId) => {
+    return request("GET", "/store/benefit", {storeId});
+};
+
+// 获取体验中心 VIP 介绍纯文本，无需登录。
+export const getStoreVipIntroAPI = () => {
+    return request("GET", "/store/vip-intro");
+};
+
 // 根据用户定位分页获取附近门店。
 export const getNearbyStoresAPI = ({
    longitude,
@@ -1,5 +1,5 @@
-{
-  "pages": [
+{
+  "pages": [
    {
      "path": "pages/index"
    },
@@ -9,133 +9,136 @@
    {
      "path": "pages/friend-battle"
    },
-    {
-      "path": "pages/point-book"
-    },
-    {
-      "path": "pages/point-book-rank"
-    },
-    {
-      "path": "pages/my-like-list"
-    },
-    {
-      "path": "pages/audio-test"
-    },
-    {
-      "path": "pages/calibration"
-    },
-    {
-      "path": "pages/about-us"
-    },
-    {
-      "path": "pages/webview",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/melee-battle"
-    },
-    {
-      "path": "pages/battle-result"
-    },
-    {
-      "path": "pages/friend-battle-result"
-    },
-    {
-      "path": "pages/point-book-edit"
-    },
-    {
-      "path": "pages/point-book-create"
-    },
-    {
-      "path": "pages/point-book-list"
-    },
-    {
-      "path": "pages/point-book-detail"
-    },
-    {
-      "path": "pages/point-book-detail-share"
-    },
-    {
-      "path": "pages/match-page"
-    },
-    {
-      "path": "pages/my-device"
-    },
-    {
-      "path": "pages/device-intro"
-    },
-    {
-      "path": "pages/user"
-    },
-    {
-      "path": "pages/grade-intro"
-    },
-    {
-      "path": "pages/rank-intro"
-    },
-    {
-      "path": "pages/my-growth"
-    },
-    {
-      "path": "pages/first-try"
-    },
-    {
-      "path": "pages/practise"
-    },
-    {
-      "path": "pages/practise-one"
-    },
-    {
-      "path": "pages/practise-two"
-    },
-    {
-      "path": "pages/battle-room"
-    },
-    {
-      "path": "pages/ranking"
-    },
-    {
-      "path": "pages/rank-list"
-    },
-    {
-      "path": "pages/match-detail"
-    },
-    {
-      "path": "pages/melee-bow-data"
-    },
-    {
-      "path": "pages/mine-bow-data"
-    },
-    {
-      "path": "pages/ota-wifi",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    }
-  ],
-  "globalStyle": {
-    "backgroundColor": "@bgColor",
-    "backgroundColorBottom": "@bgColorBottom",
-    "backgroundColorTop": "@bgColorTop",
-    "backgroundTextStyle": "@bgTxtStyle",
-    "navigationBarBackgroundColor": "#000000",
-    "navigationBarTextStyle": "@navTxtStyle",
-    "navigationBarTitleText": "Uni Creator",
-    "navigationStyle": "custom",
-    "enablePullDownRefresh": false
-  },
-  "easycom": {
-    "autoscan": true,
-    "custom": {
-      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
-    }
-  },
+    {
+      "path": "pages/point-book"
+    },
+    {
+      "path": "pages/point-book-rank"
+    },
+    {
+      "path": "pages/my-like-list"
+    },
+    {
+      "path": "pages/audio-test"
+    },
+    {
+      "path": "pages/calibration"
+    },
+    {
+      "path": "pages/about-us"
+    },
+    {
+      "path": "pages/webview",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/melee-battle"
+    },
+    {
+      "path": "pages/battle-result"
+    },
+    {
+      "path": "pages/friend-battle-result"
+    },
+    {
+      "path": "pages/point-book-edit"
+    },
+    {
+      "path": "pages/point-book-create"
+    },
+    {
+      "path": "pages/point-book-list"
+    },
+    {
+      "path": "pages/point-book-detail"
+    },
+    {
+      "path": "pages/point-book-detail-share"
+    },
+    {
+      "path": "pages/match-page"
+    },
+    {
+      "path": "pages/my-device"
+    },
+    {
+      "path": "pages/device-intro"
+    },
+    {
+      "path": "pages/user"
+    },
+    {
+      "path": "pages/grade-intro"
+    },
+    {
+      "path": "pages/rank-intro"
+    },
+    {
+      "path": "pages/my-growth"
+    },
+    {
+      "path": "pages/first-try"
+    },
+    {
+      "path": "pages/practise"
+    },
+    {
+      "path": "pages/practise-one"
+    },
+    {
+      "path": "pages/practise-two"
+    },
+    {
+      "path": "pages/battle-room"
+    },
+    {
+      "path": "pages/ranking"
+    },
+    {
+      "path": "pages/rank-list"
+    },
+    {
+      "path": "pages/match-detail"
+    },
+    {
+      "path": "pages/melee-bow-data"
+    },
+    {
+      "path": "pages/mine-bow-data"
+    },
+    {
+      "path": "pages/ota-wifi",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "globalStyle": {
+    "backgroundColor": "@bgColor",
+    "backgroundColorBottom": "@bgColorBottom",
+    "backgroundColorTop": "@bgColorTop",
+    "backgroundTextStyle": "@bgTxtStyle",
+    "navigationBarBackgroundColor": "#000000",
+    "navigationBarTextStyle": "@navTxtStyle",
+    "navigationBarTitleText": "Uni Creator",
+    "navigationStyle": "custom",
+    "enablePullDownRefresh": false
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
  "subPackages": [
    {
      "root": "pages/coin",
      "pages": [
+        {
+          "path": "vip-intro"
+        },
        {
          "path": "index"
        },
@@ -166,48 +169,48 @@
    },
    {
      "root": "pages/member",
-      "pages": [
-        {
-          "path": "orders"
-        },
-        {
-          "path": "order-detail"
-        },
-        {
-          "path": "be-vip"
-        },
-        {
-          "path": "vip-intro"
-        },
-        {
-          "path": "agreement"
-        }
-      ]
-    },
-    {
-      "root": "pages/team-battle",
-      "pages": [
-        {
-          "path": "index"
-        },
-        {
-          "path": "team-bow-data"
-        }
-      ]
-    },
-    {
-      "root": "pages/training",
-      "pages": [
-        {
-          "path": "index"
-        },
-        {
-          "path": "difficulty"
-        },
-        {
-          "path": "practise-one"
-        }
-      ]
-    }
-  ]
-}
+      "pages": [
+        {
+          "path": "orders"
+        },
+        {
+          "path": "order-detail"
+        },
+        {
+          "path": "be-vip"
+        },
+        {
+          "path": "vip-intro"
+        },
+        {
+          "path": "agreement"
+        }
+      ]
+    },
+    {
+      "root": "pages/team-battle",
+      "pages": [
+        {
+          "path": "index"
+        },
+        {
+          "path": "team-bow-data"
+        }
+      ]
+    },
+    {
+      "root": "pages/training",
+      "pages": [
+        {
+          "path": "index"
+        },
+        {
+          "path": "difficulty"
+        },
+        {
+          "path": "practise-one"
+        }
+      ]
+    }
+  ]
+}
@@ -38,13 +38,12 @@ defineProps({
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 706rpx;
+  width: 100%;
  height: 60rpx;
  margin-top: 0;
-  border: 2rpx solid rgba(255, 217, 71, 0.25);
  border-radius: 12rpx;
  box-sizing: border-box;
-  background-color: rgba(255, 217, 71, 0.06);
+  background: linear-gradient(90deg, transparent, rgba(4, 4, 4, 0.7), transparent);
 }

 .balance-item {
@@ -69,7 +68,7 @@ defineProps({

 .balance-list__line {
  width: 2rpx;
-  height: 28rpx;
+  height: 16rpx;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 22rpx;
 }
@@ -10,11 +10,13 @@ const props = defineProps({
    type: String,
    default: "",
  },
+  switchable: { type: Boolean, default: false },
  onBack: {
    type: Function,
    default: null,
  },
 });
+const emit = defineEmits(["select-store"]);
 </script>

 <template>
@@ -30,16 +32,20 @@ const props = defineProps({
          >
            {{ title }}
          </text>
-          <text v-if="subtitle" class="coin-header__subtitle">
-            {{ subtitle }}
-          </text>
+          <view v-if="subtitle" class="coin-header__store" @click="switchable && emit('select-store')">
+            <text class="coin-header__subtitle">{{ subtitle }}</text>
+            <image v-if="switchable" class="coin-header__switch" src="/static/coin/store-switch.png" mode="aspectFit" />
+          </view>
        </view>
      </template>
    </Header>
  </view>
 </template>

-<style scoped>
+<style scoped lang="scss">
+.coin-header__store { display: flex; align-items: center; max-width: 430rpx; }
+.coin-header__store .coin-header__subtitle { overflow: hidden; text-overflow: ellipsis; }
+.coin-header__switch { flex-shrink: 0; width: 28rpx; height: 28rpx; margin-left: 10rpx; }
 .coin-header {
  position: sticky;
  top: 0;
@@ -2,7 +2,7 @@
 import { computed, ref } from "vue";

 const DEFAULT_PRODUCT_IMAGE =
-  "https://static.shelingxingqiu.com/shootmini/static/coin/product-hero-item.png";
+  "https://static.shelingxingqiu.com/shootmini/static/coin/product-hero-bg.png";
 const props = defineProps({
  images: {
    type: Array,
@@ -51,6 +51,9 @@ const productImage = computed(() => {
  height: 312rpx;
  overflow: hidden;
  border-radius: 12rpx;
+  background-image: url("/static/coin/product-card-bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }

 .product-card__image {
@@ -0,0 +1,80 @@
+<script setup>
+defineProps({
+  benefit: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <!-- 与会员卡共用剩余次数，接口缺失时显示占位。 -->
+  <view class="benefit-card">
+    <text class="benefit-card__badge">{{ benefit.remaining }}次</text>
+    <image class="benefit-card__icon" :src="benefit.icon" mode="aspectFit" />
+    <view class="benefit-card__content">
+      <text class="benefit-card__title">{{ benefit.title }}</text>
+      <text class="benefit-card__description">{{ benefit.description }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.benefit-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 176rpx;
+  margin-bottom: 24rpx;
+  padding: 28rpx 28rpx 28rpx 56rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
+  background: linear-gradient(180deg, #080808, rgba(152, 124, 84, 0.4));
+}
+
+// .benefit-card:last-child {
+//   margin-bottom: 0;
+// }
+
+.benefit-card__badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64rpx;
+  height: 32rpx;
+  border-radius: 16rpx 0 16rpx 0;
+  background: linear-gradient(135deg, #ffd19a, #a17636);
+  color: #ffffff;
+  font-size: 22rpx;
+  line-height: 30rpx;
+  text-align: center;
+}
+
+.benefit-card__icon {
+  flex-shrink: 0;
+  width: 120rpx;
+  height: 120rpx;
+  margin-right: 38rpx;
+}
+
+.benefit-card__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.benefit-card__title {
+  display: block;
+  color: #fae6bc;
+  font-size: 30rpx;
+  line-height: 42rpx;
+  font-weight: 500;
+}
+
+.benefit-card__description {
+  display: block;
+  margin-top: 10rpx;
+  color: #ffffff;
+  font-size: 22rpx;
+  line-height: 30rpx;
+}
+</style>
@@ -0,0 +1,61 @@
+<script setup>
+defineProps({
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+  active: {
+    type: String,
+    default: "vip",
+  },
+});
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+  <!-- 业务 Tab 只切换内容，不接管系统导航。 -->
+  <view class="section-tabs">
+    <view
+      v-for="tab in tabs"
+      :key="tab.key"
+      class="section-tabs__item"
+      :class="{ 'section-tabs__item--active': active === tab.key }"
+      hover-class="section-tabs__item--pressed"
+      @click="emit('select', tab.key)"
+    >
+      <text>{{ tab.label }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.section-tabs {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 40rpx 0;
+  box-sizing: border-box;
+}
+
+.section-tabs__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 326rpx;
+  height: 68rpx;
+  border-radius: 34rpx;
+  color: #999999;
+  background: #000000;
+  font-size: 28rpx;
+  line-height: 40rpx;
+}
+
+.section-tabs__item--active {
+  color: #ffffff;
+  background: linear-gradient(135deg, #ffd19a, #a17636);
+}
+
+.section-tabs__item--pressed {
+  opacity: 0.8;
+}
+</style>
@@ -0,0 +1,135 @@
+<script setup>
+defineProps({
+  membership: {
+    type: Object,
+    required: true,
+  },
+  benefits: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["introduction"]);
+</script>
+
+<template>
+  <view class="vip-card" :class="{ 'vip-card--active': membership.active }">
+    <!-- 切图仅含静态字效与徽章，次数、有效期和状态独立渲染。 -->
+    <image class="vip-card__background" :src="membership.cardImage" mode="aspectFit" />
+    <view class="vip-card__benefits">
+      <view v-for="benefit in benefits" :key="benefit.key" class="vip-card__benefit">
+        <text class="vip-card__label">{{ benefit.title }}</text>
+        <view class="vip-card__count">
+          <text class="vip-card__number">{{ membership.remaining[benefit.key] }}</text>
+          <text class="vip-card__unit">次</text>
+        </view>
+      </view>
+    </view>
+    <text class="vip-card__status">
+      {{ membership.active ? `有效期至${membership.expiresAt}` : "未开通" }}
+    </text>
+    <view class="vip-card__introduction" @click="emit('introduction')">
+      <text>查看更多关于体验中心VIP的介绍 &gt;</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.vip-card {
+  position: relative;
+  width: 750rpx;
+  height: 288rpx;
+  color: #333333;
+}
+
+.vip-card__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 750rpx;
+  height: 288rpx;
+}
+
+.vip-card__benefits {
+  position: absolute;
+  top: 124rpx;
+  left: 70rpx;
+  display: flex;
+  justify-content: space-between;
+  width: 400rpx;
+}
+
+.vip-card__benefit {
+  width: 120rpx;
+  text-align: center;
+}
+
+.vip-card__label {
+  display: block;
+  font-size: 20rpx;
+  line-height: 28rpx;
+  white-space: nowrap;
+  opacity: 0.8;
+}
+
+.vip-card__count {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  position: relative;
+  height: 44rpx;
+}
+
+.vip-card__count::before {
+  content: "";
+  position: absolute;
+  left: 16rpx;
+  bottom: 4rpx;
+  width: 88rpx;
+  height: 12rpx;
+  border-radius: 8rpx;
+  background: #ffd947;
+}
+
+.vip-card__number {
+  position: relative;
+  font-size: 40rpx;
+  line-height: 48rpx;
+  font-weight: 500;
+}
+
+.vip-card__unit {
+  position: relative;
+  margin-left: 2rpx;
+  font-size: 22rpx;
+  line-height: 30rpx;
+  opacity: 0.8;
+}
+
+.vip-card__status {
+  position: absolute;
+  top: 212rpx;
+  left: 496rpx;
+  width: 232rpx;
+  color: #888888;
+  font-size: 22rpx;
+  line-height: 30rpx;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.vip-card--active .vip-card__status {
+  color: #b47d42;
+}
+
+.vip-card__introduction {
+  position: absolute;
+  left: 74rpx;
+  bottom: 16rpx;
+  padding: 6rpx 0;
+  font-size: 22rpx;
+  line-height: 30rpx;
+  opacity: 0.8;
+}
+</style>
@@ -0,0 +1,62 @@
+<script setup>
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["open"]);
+const handleOpen = () => {
+  if (!props.active) emit("open");
+};
+</script>
+
+<template>
+  <!-- 当前门店已开通时仅展示状态，未开通时提供线下开通提醒。 -->
+  <view class="vip-footer">
+    <text class="vip-footer__price">特惠价格：9.9元/90天</text>
+    <view class="vip-footer__status" @click="handleOpen">
+      <image class="vip-footer__badge" src="/static/coin/store-vip-badge.png" mode="aspectFit" />
+      <text>{{ active ? "您已开通VIP" : "开通方式：请前往线下门店联系工作人员开通" }}</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.vip-footer {
+  margin-top: 84rpx;
+  padding: 0 24rpx 22rpx;
+  box-sizing: border-box;
+}
+
+.vip-footer__price {
+  display: block;
+  color: #fae6bc;
+  font-size: 40rpx;
+  line-height: 56rpx;
+  font-weight: 500;
+  text-align: center;
+}
+
+.vip-footer__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 90rpx;
+  margin-top: 12rpx;
+  padding: 8rpx 28rpx;
+  box-sizing: border-box;
+  border-radius: 46rpx;
+  color: #333333;
+  background: #ffd947;
+  font-size: 26rpx;
+  line-height: 36rpx;
+}
+
+.vip-footer__badge {
+  flex-shrink: 0;
+  width: 80rpx;
+  height: 74rpx;
+  margin-right: 4rpx;
+}
+</style>
@@ -1,3 +1,4 @@
+// 金币快捷入口保持原有路由与图标配置。
 export const quickMenus = [
  {
    key: "rules",
@@ -20,3 +21,30 @@ export const quickMenus = [
    icon: "https://static.shelingxingqiu.com/shootmini/static/coin/icon-nearby-store.png",
  },
 ];
+
+// 体验中心业务 Tab。
+export const storeSections = [
+  { key: "vip", label: "体验中心VIP" },
+  { key: "coin", label: "我的金币" },
+];
+
+export const storeVipBenefits = [
+  {
+    key: "trial",
+    title: "免费体验权益",
+    description: "使用该权益可免费体验智能弓箭30分钟1次，加入官方社群还可以额外获赠1次。",
+    icon: "/static/coin/store-vip-benefit-trial.png",
+  },
+  {
+    key: "discount",
+    title: "特惠购买权益",
+    description: "使用该权益可以19.9元的特惠价格购买30分钟体验服务1次。",
+    icon: "/static/coin/store-vip-benefit-discount.png",
+  },
+  {
+    key: "drink",
+    title: "到店赠饮权益",
+    description: "使用该权益每次到店后可获得免费赠送的指定饮品一支。",
+    icon: "/static/coin/store-vip-benefit-drink.png",
+  },
+];
@@ -1,14 +1,53 @@
 <script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { computed, ref } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
+import ModalDialog from "@/components/ModalDialog.vue";
 import CoinHeader from "./components/CoinHeader.vue";
 import CoinBalancePanel from "./components/CoinBalancePanel.vue";
 import CoinQuickMenu from "./components/CoinQuickMenu.vue";
 import OfflineExchangeNotice from "./components/OfflineExchangeNotice.vue";
 import RewardProductCard from "./components/RewardProductCard.vue";
 import { getGiftListAPI, getMyGoldAPI } from "@/apis";
-import { quickMenus } from "./data";
+import { quickMenus, storeSections, storeVipBenefits } from "./data";
+import StoreSectionTabs from "./components/StoreSectionTabs.vue";
+import StoreVipCard from "./components/StoreVipCard.vue";
+import StoreBenefitCard from "./components/StoreBenefitCard.vue";
+import StoreVipFooter from "./components/StoreVipFooter.vue";
+import { getSelectedExperienceStore, rememberExperienceStore, loadStoreMembership } from "@/utils/storeVip";
+
+const activeTab = ref("vip");
+const membership = ref(null);
+const vipLoading = ref(false);
+const vipError = ref("");
+const displayedBenefits = computed(() => storeVipBenefits.map((benefit) => ({
+  ...benefit, remaining: membership.value?.remaining[benefit.key] ?? "--",
+})));
+const loadMembership = async () => {
+  if (!selectedStoreId.value || vipLoading.value) return;
+  vipLoading.value = true;
+  vipError.value = "";
+  membership.value = null;
+  try {
+    const result = await loadStoreMembership(selectedStoreId.value);
+    membership.value = result;
+    if (result.name) selectedStoreName.value = result.name;
+    rememberExperienceStore(selectedStoreId.value, selectedStoreName.value);
+  } catch (error) {
+    vipError.value = "会员信息加载失败，请点击重试或切换门店";
+    console.error("加载门店会员失败", error);
+  } finally {
+    vipLoading.value = false;
+  }
+};
+const selectStore = () => uni.redirectTo({ url: `/pages/coin/nearby-stores?tab=${activeTab.value}` });
+const selectTab = (tab) => {
+  if (storeSections.some((item) => item.key === tab)) activeTab.value = tab;
+};
+const showVipIntroduction = () => uni.navigateTo({ url: "/pages/coin/vip-intro" });
+const vipOpeningVisible = ref(false);
+const showVipOpening = () => { vipOpeningVisible.value = true; };
+const closeVipOpening = () => { vipOpeningVisible.value = false; };

 const PAGE_SIZE = 20;
 const coinSummary = ref({
@@ -19,8 +58,8 @@ const selectedStoreId = ref("");
 const selectedStoreName = ref("");
 const rewardProducts = ref([]);
 const productPage = ref(0);
-const productTotal = ref(0);
 const productLoading = ref(false);
+const productError = ref(false);
 const productNoMore = ref(false);

 const loadCoinSummary = async () => {
@@ -40,6 +79,7 @@ const loadProducts = async ({ reset = false } = {}) => {

  const nextPage = reset ? 1 : productPage.value + 1;
  productLoading.value = true;
+  productError.value = false;
  if (reset) productNoMore.value = false;

  try {
@@ -65,7 +105,6 @@ const loadProducts = async ({ reset = false } = {}) => {
    const totalCount = Number(result?.totalCount ?? result?.total);
    const responsePageSize =
      Number(result?.pageSize ?? result?.page_size) || PAGE_SIZE;
-    productTotal.value = Number.isFinite(totalCount) ? totalCount : 0;

    if (Number.isFinite(pageCount) && pageCount >= 0) {
      productNoMore.value = productPage.value >= pageCount;
@@ -79,6 +118,7 @@ const loadProducts = async ({ reset = false } = {}) => {
      rewardProducts.value = [];
      productPage.value = 0;
    }
+    productError.value = true;
    console.error("加载礼品列表失败", error);
  } finally {
    productLoading.value = false;
@@ -115,7 +155,7 @@ const decodeRouteText = (value = "") => {
 const onMenuSelect = (menu) => {
  if (menu.key === "nearbyStores") {
    uni.redirectTo({
-      url: "/pages/coin/nearby-stores",
+      url: `/pages/coin/nearby-stores?tab=${activeTab.value}`,
    });
    return;
  }
@@ -143,50 +183,104 @@ const toProductDetail = (product) => {
 };

 onLoad((options = {}) => {
-  const storeId = String(options.storeId || "");
+  activeTab.value = options.tab === "coin" ? "coin" : "vip";
+  const previous = getSelectedExperienceStore();
+  const storeId = String(options.storeId || previous?.id || "");
  if (!/^\d+$/.test(storeId) || Number(storeId) <= 0) {
-    uni.redirectTo({
-      url: "/pages/coin/nearby-stores",
-    });
+    selectStore();
    return;
  }
-
  selectedStoreId.value = storeId;
-  selectedStoreName.value = decodeRouteText(options.storeName);
-  loadCoinSummary();
+  selectedStoreName.value = options.storeId
+    ? decodeRouteText(options.storeName)
+    : previous?.name || "";
+  rememberExperienceStore(storeId, selectedStoreName.value);
  loadProducts({ reset: true });
 });
+
+// 从介绍、商品等页面返回时刷新会员和余额。
+onShow(() => {
+  if (!selectedStoreId.value) return;
+  loadMembership();
+  loadCoinSummary();
+});
 </script>

 <template>
-  <Container :bgType="6" :isHome="true" @scrolltolower="loadProducts">
+  <!-- 标题固定，门店切换复用原有附近门店页面。 -->
+  <Container :bgType="6" bgColor="#22222e" :isHome="true" @scrolltolower="activeTab === 'coin' && loadProducts()">
    <template #header>
-      <CoinHeader title="我的金币" :subtitle="selectedStoreName" />
+      <CoinHeader title="线下体验中心" :subtitle="selectedStoreName || '选择门店'" switchable @select-store="selectStore" />
    </template>
    <view class="coin-page">
-      <CoinBalancePanel
-        :cumulative="coinSummary.cumulative"
-        :available="coinSummary.available"
+      <StoreSectionTabs
+        :tabs="storeSections"
+        :active="activeTab"
+        @select="selectTab"
      />
-      <CoinQuickMenu :menus="quickMenus" @select="onMenuSelect" />
-      <OfflineExchangeNotice />
-      <view class="reward-section">
-        <view class="reward-grid">
-          <view
-            v-for="product in rewardProducts"
-            :key="product.id"
-            class="reward-grid__item"
-            @click="toProductDetail(product)"
-          >
-            <RewardProductCard :product="product" />
+
+      <!-- 卡片与权益列表共用当前门店的会员数据。 -->
+      <view v-if="activeTab === 'vip'" class="vip-section">
+        <view v-if="vipLoading" class="page-status">会员信息加载中...</view>
+        <view v-else-if="vipError" class="page-status" @click="loadMembership">{{ vipError }}</view>
+        <StoreVipCard
+          v-else-if="membership"
+          :membership="membership"
+          :benefits="storeVipBenefits"
+          @introduction="showVipIntroduction"
+        />
+        <view class="vip-section__content">
+          <text class="vip-section__description">
+            门店体验中心VIP是为热爱射箭运动的用户专属打造的VIP服务，开通后即可享受以下三大专属权益：
+          </text>
+          <view class="vip-section__benefits">
+            <StoreBenefitCard
+              v-for="benefit in displayedBenefits"
+              :key="benefit.key"
+              :benefit="benefit"
+            />
          </view>
        </view>
+        <StoreVipFooter v-if="membership" :active="membership.active" @open="showVipOpening" />
+      </view>
+
+      <!-- 保留原金币接口、分页与详情链路。 -->
+      <view v-else class="coin-section">
+        <CoinBalancePanel
+          :cumulative="coinSummary.cumulative"
+          :available="coinSummary.available"
+        />
+        <CoinQuickMenu :menus="quickMenus" @select="onMenuSelect" />
+        <OfflineExchangeNotice />
+        <view class="reward-section">
+          <view class="reward-grid">
+            <view
+              v-for="product in rewardProducts"
+              :key="product.id"
+              class="reward-grid__item"
+              @click="toProductDetail(product)"
+            >
+              <RewardProductCard :product="product" />
+            </view>
+          </view>
+        </view>
+        <view v-if="productLoading" class="page-status">加载中...</view>
+        <view v-else-if="productError" class="page-status" @click="loadProducts()">加载失败，点击重试</view>
+        <view v-else-if="productNoMore" class="page-status">{{ rewardProducts.length ? '没有更多商品了~' : '暂无兑换商品~' }}</view>
      </view>
    </view>
  </Container>
+  <ModalDialog
+    :show="vipOpeningVisible"
+    content="请前往线下门店体验中心，联系工作人员开通VIP。"
+    :show-cancel="false"
+    confirm-text="我已知晓"
+    :on-confirm="closeVipOpening"
+  />
 </template>

-<style scoped>
+<style scoped lang="scss">
+.page-status { padding: 30rpx; color: #cccccc; text-align: center; font-size: 26rpx; }
 .coin-page {
  width: 100%;
  min-height: 100%;
@@ -194,6 +288,30 @@ onLoad((options = {}) => {
  box-sizing: border-box;
 }

+.vip-section {
+  padding-top: 30rpx;
+}
+
+.vip-section__content {
+  padding: 0 28rpx;
+}
+
+.vip-section__description {
+  display: block;
+  margin-top: 50rpx;
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.vip-section__benefits {
+  margin-top: 30rpx;
+}
+
+.coin-section {
+  padding-top: 20rpx;
+}
+
 .reward-section {
  padding: 20rpx 28rpx 40rpx;
  box-sizing: border-box;
@@ -6,6 +6,9 @@ import CoinHeader from "./components/CoinHeader.vue";
 import LocationPermissionState from "./components/LocationPermissionState.vue";
 import StoreCard from "./components/StoreCard.vue";
 import { getNearbyStoresAPI } from "@/apis";
+import { rememberExperienceStore } from "@/utils/storeVip";
+
+const activeTab = ref("vip");

 const PAGE_SIZE = 20;
 const DEFAULT_STORE_IMAGE =
@@ -113,12 +116,16 @@ const selectStore = (store) => {
  }

  const storeName = encodeURIComponent(store?.name || "");
+  rememberExperienceStore(storeId, store?.name || "");
  uni.redirectTo({
-    url: `/pages/coin/index?storeId=${encodeURIComponent(storeId)}&storeName=${storeName}`,
+    url: `/pages/coin/index?storeId=${encodeURIComponent(storeId)}&storeName=${storeName}&tab=${activeTab.value}`,
  });
 };

-onLoad(locateAndLoadStores);
+onLoad((options = {}) => {
+  activeTab.value = options.tab === "coin" ? "coin" : "vip";
+  locateAndLoadStores();
+});
 </script>

 <template>
@@ -0,0 +1,48 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import CoinHeader from "./components/CoinHeader.vue";
+import { getStoreVipIntroAPI } from "@/apis";
+
+const content = ref("");
+const loading = ref(false);
+const failed = ref(false);
+
+const loadIntroduction = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  failed.value = false;
+  try {
+    const result = await getStoreVipIntroAPI();
+    if (typeof result?.content !== "string") {
+      throw new Error("体验中心 VIP 介绍响应格式异常");
+    }
+    // 保留服务端原文与换行，空白内容单独展示提示。
+    content.value = result.content;
+  } catch (error) {
+    failed.value = true;
+    console.error("加载体验中心 VIP 介绍失败", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onLoad(loadIntroduction);
+</script>
+
+<template>
+  <Container :bgType="6" bgColor="#22222e" :isHome="true">
+    <template #header><CoinHeader title="体验中心VIP介绍" /></template>
+    <view class="vip-intro">
+      <text v-if="loading">加载中...</text>
+      <text v-else-if="failed" @click="loadIntroduction">加载失败，点击重试</text>
+      <text v-else-if="content.trim()">{{ content }}</text>
+      <text v-else>暂无介绍内容</text>
+    </view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.vip-intro { padding: 32rpx 28rpx; color: #ffffff; font-size: 28rpx; line-height: 44rpx; white-space: pre-wrap; }
+</style>
@@ -1,5 +1,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import { getSelectedExperienceStore, hasAnyStoreVip } from "@/utils/storeVip";
 import Container from "@/components/Container.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import UserItem from "@/components/UserItem.vue";
@@ -26,20 +28,40 @@ const toFristTryPage = async () => {
  }
 };
 const toCoinPage = () => {
+  const selected = getSelectedExperienceStore();
  uni.navigateTo({
-    url: "/pages/coin/nearby-stores",
+    url: selected ? "/pages/coin/index?tab=vip" : "/pages/coin/nearby-stores?tab=vip",
  });
 };
 const showCoinEntry = ref(false);
+const storeVipLabel = ref("加载中");
+const storeVipFailed = ref(false);
+let entryRequest = 0;
 const loadCoinEntryVisibility = async () => {
+  const requestId = ++entryRequest;
  showCoinEntry.value = false;
+  storeVipFailed.value = false;
+  storeVipLabel.value = "加载中";
  try {
    const result = await getMyGoldAPI();
+    if (requestId !== entryRequest) return;
    showCoinEntry.value = result?.hasTempBind === true;
+    if (!showCoinEntry.value) return;
+    try {
+      const active = await hasAnyStoreVip();
+      if (requestId !== entryRequest) return;
+      storeVipLabel.value = active ? "VIP已开通" : "VIP未开通";
+    } catch (error) {
+      if (requestId !== entryRequest) return;
+      storeVipLabel.value = "加载失败，重试";
+      storeVipFailed.value = true;
+      console.error("加载入口门店VIP失败", error);
+    }
  } catch (error) {
    console.error("加载金币入口状态失败", error);
  }
 };
+onShow(loadCoinEntryVisibility);
 const toBeVipPage = () => {
  uni.navigateTo({
    url: "/pages/member/be-vip",
@@ -85,7 +107,6 @@ const logout = () => {
  updateUser();
 };
 onMounted(() => {
-  loadCoinEntryVisibility();
  const accountInfo = uni.getAccountInfoSync();
  const envVersion = accountInfo.miniProgram.envVersion;
  if (envVersion !== "release") showLogout.value = true;
@@ -127,9 +148,11 @@ const buildVersion = typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : ''
        </UserItem>
        <UserItem
          v-if="showCoinEntry"
-          title="我的金币"
+          title="线下体验中心"
          :onClick="toCoinPage"
-        />
+        >
+          <text class="store-vip-label" @click.stop="storeVipFailed ? loadCoinEntryVisibility() : toCoinPage()">{{ storeVipLabel }}</text>
+        </UserItem>
        <UserItem title="会员" :onClick="toBeVipPage">
          <view
            v-if="user.sVip === true"
@@ -205,6 +228,7 @@ const buildVersion = typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : ''
 </template>

 <style scoped>
+.store-vip-label { padding: 4rpx 12rpx; border: 1rpx solid #999999; border-radius: 20rpx; font-size: 24rpx; }
 .container {
  background-color: #f5f5f5;
  height: calc(100% - 65px);
@@ -0,0 +1,70 @@
+import { getStoreBenefitAPI, getStoreVipListAPI } from "@/apis";
+import useStore from "@/store";
+
+// 按账号隔离最近选择，刷新登录令牌后仍可恢复同一门店。
+const selectionKey = () => {
+  const version = uni.getAccountInfoSync().miniProgram.envVersion;
+  return `${version}_experience_store_${useStore().user.id || "guest"}`;
+};
+
+export const getSelectedExperienceStore = () => {
+  const value = uni.getStorageSync(selectionKey());
+  return value && /^\d+$/.test(String(value.id)) && Number(value.id) > 0
+    ? { id: String(value.id), name: String(value.name || "") }
+    : null;
+};
+
+export const rememberExperienceStore = (id, name) => {
+  uni.setStorageSync(selectionKey(), { id: String(id), name });
+};
+
+// 入口汇总所有门店；找到有效会员即可结束，未开通须查询完整列表。
+export const hasAnyStoreVip = async () => {
+  const pageSize = 20;
+  let received = 0;
+  for (let page = 1; ; page += 1) {
+    const result = await getStoreVipListAPI({ page, pageSize });
+    const list = result?.list;
+    if (!Array.isArray(list) || !Number.isSafeInteger(result.total) || result.total < 0) {
+      throw new Error("门店会员列表响应格式异常");
+    }
+    if (list.some((item) => item?.isVip === true)) return true;
+    if (list.some((item) => typeof item?.isVip !== "boolean")) {
+      throw new Error("门店会员状态缺失");
+    }
+    received += list.length;
+    if (received >= result.total) return false;
+    // 列表尚未读完却返回空页时，不把不完整结果判为未开通。
+    if (!list.length) throw new Error("门店会员列表分页异常");
+  }
+};
+
+// 只接受非负整数，缺失或异常值不能转换成“已用完”的 0 次。
+const normalizeRemaining = (benefit) => {
+  const remain = benefit?.remain;
+  return Number.isSafeInteger(remain) && remain >= 0 ? remain : "--";
+};
+
+export const normalizeStoreMembership = (store) => {
+  if (typeof store?.isVip !== "boolean") throw new Error("门店会员状态缺失");
+  const active = store.isVip === true;
+  return {
+    active,
+    cardImage: `/static/coin/store-vip-card-${active ? "active" : "inactive"}.png`,
+    expiresAt: active ? String(store.vipExpireAt || "").slice(0, 10).replace(/-/g, "/") || "--" : "",
+    // 未开通或已过期统一为 0；有效会员逐项读取后端剩余次数。
+    remaining: {
+      trial: active ? normalizeRemaining(store.freeTrial) : 0,
+      discount: active ? normalizeRemaining(store.discountPurchase) : 0,
+      drink: active ? normalizeRemaining(store.drink) : 0,
+    },
+  };
+};
+
+export const loadStoreMembership = async (storeId) => {
+  const result = await getStoreBenefitAPI(storeId);
+  if (String(result?.storeId) !== String(storeId)) {
+    throw new Error("门店权益响应与当前门店不匹配");
+  }
+  return { name: result.storeName || "", ...normalizeStoreMembership(result) };
+};