feat: refine merged venue home and auth states
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
venueName: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const switchVenue = () => {
|
||||
uni.navigateTo({ url: '/pages/venue-select/index?mode=switch' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<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);
|
||||
border-radius: $border-radius-base;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<view class="bookings-page">
|
||||
<view v-if="!session.isLoggedIn" class="unlogged">
|
||||
<text class="brand">星河综合运动中心</text>
|
||||
<text class="desc">登录后查看课程预约、包场预约与篮球门票权益。</text>
|
||||
<button class="primary-button login-btn" @tap="login">微信一键登录</button>
|
||||
</view>
|
||||
<StatePanel
|
||||
v-if="!session.isLoggedIn"
|
||||
primary-text="微信一键登录"
|
||||
type="login"
|
||||
:show-mark="false"
|
||||
@primary="login"
|
||||
/>
|
||||
|
||||
<block v-else>
|
||||
<view class="sticky-tabs">
|
||||
@@ -42,6 +44,7 @@ import { ticketApi } from '@/modules/comprehensive/api/ticket'
|
||||
import { useComprehensiveSessionStore } from '@/modules/comprehensive/stores/session'
|
||||
import { formatDateTime, formatTimeRange } from '@/modules/comprehensive/utils/date'
|
||||
import VenueTabBar from '@/components/VenueTabBar.vue'
|
||||
import StatePanel from '@/components/ice/StatePanel.vue'
|
||||
|
||||
const session = useComprehensiveSessionStore()
|
||||
const businessType = ref('course')
|
||||
@@ -133,33 +136,6 @@ const goDetail = (item) => {
|
||||
background: $bg-color-soft;
|
||||
}
|
||||
|
||||
.unlogged {
|
||||
min-height: 80vh;
|
||||
padding: 180rpx $spacing-lg 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: $text-color-main;
|
||||
font-size: 42rpx;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: $spacing-md;
|
||||
color: $text-color-muted;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 520rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.sticky-tabs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="home-container">
|
||||
<VenueSwitchHeader venue-name="综合场馆" />
|
||||
|
||||
<view class="banner-wrapper">
|
||||
<swiper
|
||||
v-if="banners.length"
|
||||
@@ -72,6 +74,7 @@ import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { contentApi } from '@/modules/comprehensive/api/content'
|
||||
import { formatDate, formatTimeRange } from '@/modules/comprehensive/utils/date'
|
||||
import VenueTabBar from '@/components/VenueTabBar.vue'
|
||||
import VenueSwitchHeader from '@/components/VenueSwitchHeader.vue'
|
||||
|
||||
const banners = ref([])
|
||||
const upcomingCourses = ref([])
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<view class="profile-page container">
|
||||
<view v-if="!session.isLoggedIn" class="unlogged">
|
||||
<text class="brand">星河综合运动中心</text>
|
||||
<text class="desc">登录后查看余额、订单、门票权益与个人资料。</text>
|
||||
<button class="primary-button login-btn" @tap="login">微信一键登录</button>
|
||||
</view>
|
||||
<StatePanel
|
||||
v-if="!session.isLoggedIn"
|
||||
primary-text="微信一键登录"
|
||||
type="login"
|
||||
:show-mark="false"
|
||||
@primary="login"
|
||||
/>
|
||||
|
||||
<block v-else>
|
||||
<view class="user-profile-hero" @tap="go('/pages/comprehensive/profile/detail')">
|
||||
@@ -74,6 +76,7 @@
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useComprehensiveSessionStore } from '@/modules/comprehensive/stores/session'
|
||||
import VenueTabBar from '@/components/VenueTabBar.vue'
|
||||
import StatePanel from '@/components/ice/StatePanel.vue'
|
||||
|
||||
const session = useComprehensiveSessionStore()
|
||||
const avatarInitial = computed(() => (session.member?.nickname || '用户').slice(0, 1))
|
||||
@@ -105,33 +108,6 @@ const go = (url) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.unlogged {
|
||||
min-height: 80vh;
|
||||
padding-top: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: $text-color-main;
|
||||
font-size: 42rpx;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: $spacing-md;
|
||||
color: $text-color-muted;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 520rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.user-profile-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
/>
|
||||
|
||||
<block v-else>
|
||||
<VenueSwitchHeader venue-name="冰场馆" />
|
||||
|
||||
<!-- 极简无感大图轮播 -->
|
||||
<view class="banner-wrapper">
|
||||
<swiper
|
||||
@@ -94,6 +96,7 @@ import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { homeApi } from '@/modules/ice/api/home'
|
||||
import { errorMessage } from '@/modules/ice/api/session'
|
||||
import VenueTabBar from '@/components/VenueTabBar.vue'
|
||||
import VenueSwitchHeader from '@/components/VenueSwitchHeader.vue'
|
||||
import StatePanel from '@/components/ice/StatePanel.vue'
|
||||
|
||||
const todayStr = ref('')
|
||||
|
||||
Reference in New Issue
Block a user