feat: 场馆选择页改为全屏黑白双栏布局

- venue-select: 整个屏幕左右平分，左深色(综合场馆)右浅色(冰场馆)
- venue-select: 移除导航栏、边框、描述文字
- venue.js: 综合场馆排第一，首次进入默认comprehensive
- VenueSwitchHeader: 简化为场馆名+箭头单行卡片

miniprogram/src/components/VenueSwitchHeader.vue

@@ -1,13 +1,7 @@
 <template>
   <view class="venue-switch-header" @tap="switchVenue">
-    <view class="venue-switch-main">
+    <text class="venue-name">{{ venueName }}</text>
-      <text class="venue-switch-kicker">当前场馆</text>
+    <view class="venue-arrow" />
-      <text class="venue-switch-name">{{ venueName }}</text>
-    </view>
-    <view class="venue-switch-action">
-      <text class="venue-switch-action__text">切换场馆</text>
-      <view class="venue-switch-action__arrow" />
-    </view>
   </view>
 </template>
 
@@ -26,74 +20,30 @@ const switchVenue = () => {
 
 <style lang="scss" scoped>
 .venue-switch-header {
-  min-height: 96rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
-  margin-bottom: $spacing-md;
-  padding: 18rpx 20rpx;
-  border: 1rpx solid rgba(226, 232, 240, 0.96);
   border-radius: $border-radius-base;
-  background: rgba(255, 255, 255, 0.98);
+  background: $bg-color-main;
-  box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid $border-color;
 }
 
 .venue-switch-header:active {
   background: $bg-color-hover;
 }
 
-.venue-switch-main {
+.venue-name {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4rpx;
-}
-
-.venue-switch-kicker {
-  color: $text-color-light;
-  font-size: 20rpx;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.venue-switch-name {
-  overflow: hidden;
   color: $text-color-main;
   font-size: 30rpx;
   font-weight: 900;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.venue-switch-action {
+.venue-arrow {
-  flex-shrink: 0;
+  width: 16rpx;
-  display: inline-flex;
+  height: 16rpx;
-  align-items: center;
+  border-top: 3rpx solid $text-color-light;
-  justify-content: center;
+  border-right: 3rpx solid $text-color-light;
-  gap: 6rpx;
-  height: 56rpx;
-  padding: 0 16rpx;
-  border: 1rpx solid $border-color;
-  border-radius: $border-radius-sm;
-  background: $bg-color-soft;
-  color: $text-color-regular;
-}
-
-.venue-switch-action__text,
-.venue-switch-action__arrow {
-  color: $text-color-regular;
-  font-size: 23rpx;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.venue-switch-action__arrow {
-  width: 12rpx;
-  height: 12rpx;
-  border-top: 2rpx solid $text-color-muted;
-  border-right: 2rpx solid $text-color-muted;
   transform: rotate(45deg);
 }
 </style>

miniprogram/src/pages.json

@@ -12,6 +12,7 @@
       "path": "pages/venue-select/index",
       "style": {
         "navigationBarTitleText": "选择场馆",
+        "navigationStyle": "custom",
         "navigationBarBackgroundColor": "#FFFFFF",
         "navigationBarTextStyle": "black"
       }

miniprogram/src/pages/venue-select/index.vue

@@ -1,32 +1,13 @@
 <template>
   <view v-if="isReady" class="venue-select-page">
-    <view class="header">
+    <view
-      <text class="title">选择场馆</text>
+      v-for="venue in venues"
-      <text class="subtitle">进入对应场馆后，会员、预约、订单和支付数据彼此独立。</text>
+      :key="venue.key"
-    </view>
+      class="venue-half"
-
+      :class="venue.key === 'comprehensive' ? 'dark' : 'light'"
-    <view v-if="selectedVenue" class="current-card">
+      @tap="selectVenue(venue.key)"
-      <text class="current-label">当前场馆</text>
+    >
-      <text class="current-name">{{ selectedVenue.name }}</text>
+      <text class="venue-name">{{ venue.name }}</text>
-      <button class="primary-button continue-btn" @tap="continueCurrentVenue">继续进入</button>
-    </view>
-
-    <view class="venue-list">
-      <view
-        v-for="venue in venues"
-        :key="venue.key"
-        class="venue-card"
-        :class="{ active: venue.key === currentVenue }"
-        @tap="selectVenue(venue.key)"
-      >
-        <view class="venue-main">
-          <text class="venue-name">{{ venue.name }}</text>
-          <text class="venue-desc">{{ venue.description }}</text>
-        </view>
-        <view class="venue-action">
-          <text>{{ venue.key === currentVenue ? '切换进入' : '进入' }}</text>
-        </view>
-      </view>
     </view>
   </view>
 </template>
@@ -41,7 +22,6 @@ const venueStore = useVenueStore()
 const venues = VENUE_OPTIONS
 const isReady = ref(false)
 const currentVenue = computed(() => venueStore.currentVenue)
-const selectedVenue = computed(() => venueStore.currentVenueOption)
 
 onLoad((options) => {
   const storedVenue = venueStore.init()
@@ -58,122 +38,43 @@ onLoad((options) => {
 const selectVenue = (venueKey) => {
   venueStore.enterVenue(venueKey)
 }
-
-const continueCurrentVenue = () => {
-  if (!venueStore.currentVenue) return
-  venueStore.enterVenue(venueStore.currentVenue)
-}
 </script>
 
 <style lang="scss" scoped>
 .venue-select-page {
   min-height: 100vh;
-  padding: 96rpx 32rpx 48rpx;
-  background: $bg-color-soft;
-}
-
-.header {
   display: flex;
-  flex-direction: column;
-  gap: 18rpx;
-  margin-bottom: 56rpx;
 }
 
-.title {
+.venue-half {
-  color: $text-color-main;
-  font-size: 48rpx;
-  font-weight: 900;
-}
-
-.subtitle {
-  color: $text-color-muted;
-  font-size: 26rpx;
-  line-height: 1.6;
-}
-
-.venue-list {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
-}
-
-.current-card {
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
-  margin-bottom: 32rpx;
-  padding: 28rpx;
-  border-radius: $border-radius-lg;
-  background: $bg-color-main;
-  border: 1rpx solid $border-color;
-}
-
-.current-label {
-  color: $text-color-muted;
-  font-size: 22rpx;
-  font-weight: 700;
-}
-
-.current-name {
-  color: $text-color-main;
-  font-size: 32rpx;
-  font-weight: 900;
-}
-
-.continue-btn {
-  margin-top: 12rpx;
-}
-
-.venue-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24rpx;
-  padding: 32rpx;
-  border: 1rpx solid $border-color;
-  border-radius: $border-radius-lg;
-  background: $bg-color-main;
-}
-
-.venue-card.active {
-  border-color: $color-primary;
-  background: $color-primary-light;
-}
-
-.venue-main {
-  display: flex;
   flex: 1;
-  min-width: 0;
-  flex-direction: column;
-  gap: 12rpx;
-}
-
-.venue-name {
-  color: $text-color-main;
-  font-size: 34rpx;
-  font-weight: 900;
-}
-
-.venue-desc {
-  color: $text-color-muted;
-  font-size: 24rpx;
-  line-height: 1.5;
-}
-
-.venue-action {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 96rpx;
-  height: 56rpx;
-  border-radius: $border-radius-sm;
-  background: $text-color-main;
-  color: #FFFFFF;
-  font-size: 24rpx;
-  font-weight: 800;
 }
 
-.venue-card.active .venue-action {
+.venue-half:active {
-  background: $color-primary;
+  opacity: 0.9;
+}
+
+.venue-half.dark {
+  background: #0F172A;
+}
+
+.venue-half.dark .venue-name {
+  color: #FFFFFF;
+}
+
+.venue-half.light {
+  background: #F8FAFC;
+}
+
+.venue-half.light .venue-name {
+  color: #0F172A;
+}
+
+.venue-name {
+  font-size: 40rpx;
+  font-weight: 900;
 }
 </style>

miniprogram/src/utils/venue.js

@@ -6,8 +6,8 @@ export const VENUE_KEYS = Object.freeze({
 })
 
 export const VENUE_OPTIONS = Object.freeze([
-  { key: VENUE_KEYS.ICE, name: '冰场馆', description: '课程预约、会员卡与滑冰服务' },
+  { key: VENUE_KEYS.COMPREHENSIVE, name: '综合场馆' },
-  { key: VENUE_KEYS.COMPREHENSIVE, name: '综合场馆', description: '课程、包场、门票、订单与余额' }
+  { key: VENUE_KEYS.ICE, name: '冰场馆' }
 ])
 
 export const isVenueKey = (value) => value === VENUE_KEYS.ICE || value === VENUE_KEYS.COMPREHENSIVE
@@ -16,7 +16,7 @@ export const getVenueOption = (venueKey) => VENUE_OPTIONS.find((item) => item.ke
 
 export const getStoredVenue = () => {
   const venue = uni.getStorageSync(CURRENT_VENUE_KEY)
-  return isVenueKey(venue) ? venue : ''
+  return isVenueKey(venue) ? venue : VENUE_KEYS.COMPREHENSIVE
 }
 
 export const setStoredVenue = (venueKey) => {