feat: 场馆选择页改为全屏黑白双栏布局
- venue-select: 整个屏幕左右平分，左深色(综合场馆)右浅色(冰场馆) - venue-select: 移除导航栏、边框、描述文字 - venue.js: 综合场馆排第一，首次进入默认comprehensive - VenueSwitchHeader: 简化为场馆名+箭头单行卡片
This commit is contained in:
gqt
@@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<view class="venue-switch-header" @tap="switchVenue">
|
||||
<view class="venue-switch-main">
|
||||
<text class="venue-switch-kicker">当前场馆</text>
|
||||
<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>
|
||||
<text class="venue-name">{{ venueName }}</text>
|
||||
<view class="venue-arrow" />
|
||||
</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;
|
||||
margin-bottom: $spacing-md;
|
||||
padding: 18rpx 20rpx;
|
||||
border: 1rpx solid rgba(226, 232, 240, 0.96);
|
||||
padding: $spacing-md $spacing-lg;
|
||||
border-radius: $border-radius-base;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
|
||||
background: $bg-color-main;
|
||||
border: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.venue-switch-header:active {
|
||||
background: $bg-color-hover;
|
||||
}
|
||||
|
||||
.venue-switch-main {
|
||||
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;
|
||||
.venue-name {
|
||||
color: $text-color-main;
|
||||
font-size: 30rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.venue-switch-action {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
.venue-arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-top: 3rpx solid $text-color-light;
|
||||
border-right: 3rpx solid $text-color-light;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"path": "pages/venue-select/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择场馆",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
|
||||
@@ -1,32 +1,13 @@
|
||||
<template>
|
||||
<view v-if="isReady" class="venue-select-page">
|
||||
<view class="header">
|
||||
<text class="title">选择场馆</text>
|
||||
<text class="subtitle">进入对应场馆后，会员、预约、订单和支付数据彼此独立。</text>
|
||||
</view>
|
||||
|
||||
<view v-if="selectedVenue" class="current-card">
|
||||
<text class="current-label">当前场馆</text>
|
||||
<text class="current-name">{{ selectedVenue.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 }"
|
||||
class="venue-half"
|
||||
:class="venue.key === 'comprehensive' ? 'dark' : 'light'"
|
||||
@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 {
|
||||
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;
|
||||
.venue-half {
|
||||
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;
|
||||
.venue-half:active {
|
||||
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>
|
||||
|
||||
@@ -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: '综合场馆', description: '课程、包场、门票、订单与余额' }
|
||||
{ key: VENUE_KEYS.COMPREHENSIVE, name: '综合场馆' },
|
||||
{ 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) => {
|
||||
|
||||
Reference in New Issue
Block a user