feat: add venue selection shell

2026-06-08 20:48:01 +08:00
parent 3b35786b62
commit c9650b0db1
4 changed files with 238 additions and 0 deletions
@@ -0,0 +1,130 @@
+<template>
+  <view class="venue-select-page">
+    <view class="header">
+      <text class="title">选择场馆</text>
+      <text class="subtitle">进入对应场馆后，会员、预约、订单和支付数据彼此独立。</text>
+    </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>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useVenueStore } from '@/stores/venue'
+import { VENUE_OPTIONS } from '@/utils/venue'
+
+const venueStore = useVenueStore()
+const venues = VENUE_OPTIONS
+const currentVenue = computed(() => venueStore.currentVenue)
+
+onMounted(() => {
+  venueStore.init()
+})
+
+const selectVenue = (venueKey) => {
+  venueStore.enterVenue(venueKey)
+}
+</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 {
+  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;
+}
+
+.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 {
+  background: $color-primary;
+}
+</style>