richard/mp-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化 UI

Browse Source
This commit is contained in:
richarjiang
2026-04-09 11:31:12 +08:00
parent 74551085e3
commit a40b4e47e5
5 changed files with 145 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app/src/components/BrandBanner.vue
View File

@@ -14,16 +14,14 @@
<!-- Circular logo --> <!-- Circular logo -->
<view class="logo-circle"> <view class="logo-circle">
<image <image
v-if="studioInfo?.logo"
class="logo-img" class="logo-img"
:src="studioInfo.logo" :src="logoImage"
mode="aspectFit" mode="aspectFill"
/> />
<text v-else class="logo-placeholder">FC</text>
</view> </view>
<!-- Studio name --> <!-- Studio name -->
<text class="studio-name">{{ studioInfo?.name || 'Focus Core' }}</text> <text class="studio-name">Focus Core</text>
</view> </view>
</view> </view>
</template> </template>
@@ -36,6 +34,7 @@ defineProps<{
}>() }>()
const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg' const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
const logoImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/logo.jpg'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -89,8 +88,9 @@ const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/
} }
.logo-img { .logo-img {
width: 160rpx; width: 200rpx;
height: 160rpx; height: 200rpx;
border-radius: 50%;
} }
.logo-placeholder { .logo-placeholder {

5
packages/app/src/components/CardShop.vue
View File

@@ -111,8 +111,11 @@ function goToAllCards() {
<style lang="scss" scoped> <style lang="scss" scoped>
.card-shop { .card-shop {
background: #ffffff; background: #ffffff;
margin-top: 16rpx; margin: 16rpx 24rpx 0;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
} }
/* ── Section header ── */ /* ── Section header ── */

5
packages/app/src/components/FlashSaleSection.vue
View File

@@ -157,8 +157,11 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.flash-sale-section { .flash-sale-section {
background: #fff; background: #fff;
margin-top: 16rpx; margin: 16rpx 24rpx 0;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
} }
/* ── Section header ── */ /* ── Section header ── */

498
packages/app/src/components/QuickEntry.vue
View File

@@ -1,98 +1,54 @@
<template> <template>
<view class="quick-entry"> <view class="quick-entry">
<!-- ① Not logged in --> <!-- ① Not logged in -->
<view v-if="!userStore.loggedIn" class="entry-card login-card" @tap="handleLogin"> <view v-if="!userStore.loggedIn" class="entry-pill pill-login" @tap="handleLogin">
<view class="entry-content"> <view class="pill-dot dot-login" />
<view class="entry-left"> <text class="pill-label">欢迎来到工作室</text>
<view class="entry-icon-wrap login-icon"> <view class="pill-action action-login">
<view class="icon-user" /> <text class="pill-action-text">微信登录</text>
</view>
<view class="entry-text">
<text class="entry-title">欢迎来到工作室</text>
<text class="entry-subtitle">登录后即可预约课程</text>
</view>
</view>
<view class="entry-btn login-btn">
<text class="entry-btn-text">微信登录</text>
</view>
</view> </view>
</view> </view>
<!-- ② Logged in, no memberships at all → new user --> <!-- ② Logged in, no memberships → new user -->
<view <view
v-else-if="userStore.loggedIn && userStore.memberships.length === 0" v-else-if="userStore.loggedIn && userStore.memberships.length === 0"
class="entry-card trial-card" class="entry-pill pill-trial"
@tap="handleTrialEntry" @tap="handleTrialEntry"
> >
<view class="entry-content"> <view class="pill-tag tag-trial">体验</view>
<view class="entry-left"> <text class="pill-label">首次体验专属课程</text>
<view class="entry-icon-wrap trial-icon"> <view class="pill-action action-trial">
<view class="icon-star" /> <text class="pill-action-text">预约体验课</text>
</view>
<view class="entry-text">
<text class="entry-title">初次体验</text>
<text class="entry-subtitle">专属体验课，了解普拉提</text>
</view>
</view>
<view class="entry-btn trial-btn">
<text class="entry-btn-text">预约体验课</text>
</view>
</view> </view>
<view class="card-badge trial-badge">新会员专享</view>
</view> </view>
<!-- ③ Has valid active card + running low warning --> <!-- ③ Has valid active card -->
<template v-else-if="userStore.hasValidMembership"> <template v-else-if="userStore.hasValidMembership">
<view class="entry-card active-card" @tap="handleBooking"> <view class="entry-pill pill-active" @tap="handleBooking">
<view class="entry-content"> <view class="pill-dot dot-active" />
<view class="entry-left"> <text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
<view class="entry-icon-wrap active-icon"> <view class="pill-action action-book">
<view class="icon-clock" /> <text class="pill-action-text">约课</text>
</view>
<view class="entry-text">
<text class="entry-title">一键约课</text>
<text class="entry-subtitle">{{ activeMembershipLabel }}</text>
</view>
</view>
<view class="entry-btn book-btn">
<text class="entry-btn-text">立即预约</text>
</view>
</view>
<!-- Running low badge -->
<view v-if="isRunningLow" class="card-badge low-badge">
仅剩 {{ lowestRemainingTimes }} 次
</view> </view>
</view> </view>
<!-- Renew reminder if running low --> <!-- Running low: thin accent strip -->
<view v-if="isRunningLow" class="renew-tip" @tap="scrollToCardShop"> <view v-if="isRunningLow" class="renew-strip" @tap="scrollToCardShop">
<view class="renew-tip-icon"> <text class="renew-strip-text">仅剩 {{ lowestRemainingTimes }} 次 · 续卡保持节奏</text>
<view class="icon-warning" /> <text class="renew-strip-arrow">›</text>
</view>
<text class="renew-tip-text">课次即将用完，点击续卡保持练习节奏</text>
<text class="renew-tip-action">续卡 ›</text>
</view> </view>
</template> </template>
<!-- ④ Has memberships but none active → buy card --> <!-- ④ Has memberships but none active → buy card -->
<view <view
v-else v-else
class="entry-card expired-card" class="entry-pill pill-expired"
@tap="scrollToCardShop" @tap="scrollToCardShop"
> >
<view class="entry-content"> <view class="pill-dot dot-expired" />
<view class="entry-left"> <text class="pill-label">会员卡已到期</text>
<view class="entry-icon-wrap expired-icon"> <view class="pill-action action-renew">
<view class="icon-card" /> <text class="pill-action-text">续卡</text>
</view>
<view class="entry-text">
<text class="entry-title">续费会员卡</text>
<text class="entry-subtitle">您的卡已到期，续卡继续练习</text>
</view>
</view>
<view class="entry-btn renew-btn">
<text class="entry-btn-text">购买会员卡</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -123,7 +79,6 @@ async function handleLogin() {
} }
function handleTrialEntry() { function handleTrialEntry() {
// Navigate to the first TRIAL card detail page
uni.navigateTo({ url: '/pages/card/detail?trial=1' }) uni.navigateTo({ url: '/pages/card/detail?trial=1' })
} }
@@ -135,22 +90,20 @@ function scrollToCardShop() {
emit('scroll-to-card-shop') emit('scroll-to-card-shop')
} }
// Computed: label for the active membership
const activeMembershipLabel = computed(() => { const activeMembershipLabel = computed(() => {
const active = userStore.activeMemberships const active = userStore.activeMemberships
if (!active.length) return '' if (!active.length) return ''
const m = active[0] const m = active[0]
const cardName = m.cardType.name const cardName = m.cardType.name
if (m.cardType.type === CardTypeCategory.TIMES && m.remainingTimes !== null) { if (m.cardType.type === CardTypeCategory.TIMES && m.remainingTimes !== null) {
return `${cardName} · 剩余 ${m.remainingTimes} 次` return `${cardName} · 剩余 ${m.remainingTimes} 次`
} }
const expire = new Date(m.expireDate) const expire = new Date(m.expireDate)
const today = new Date() const today = new Date()
const daysLeft = Math.ceil((expire.getTime() - today.getTime()) / 86400000) const daysLeft = Math.ceil((expire.getTime() - today.getTime()) / 86400000)
return `${cardName} · 剩余 ${daysLeft} 天` return `${cardName} · 剩余 ${daysLeft} 天`
}) })
// Check if any TIMES card has ≤ 2 remaining
const isRunningLow = computed(() => { const isRunningLow = computed(() => {
return userStore.activeMemberships.some( return userStore.activeMemberships.some(
(m) => (m) =>
@@ -174,358 +127,159 @@ const lowestRemainingTimes = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.quick-entry { .quick-entry {
margin: 24rpx 24rpx 0; padding: 20rpx 24rpx 0;
} }
.entry-card { /* ── Pill base ── */
position: relative; .entry-pill {
border-radius: 16rpx; display: flex;
padding: 36rpx 32rpx; align-items: center;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08); height: 80rpx;
overflow: hidden; border-radius: 40rpx;
padding: 0 8rpx 0 24rpx;
gap: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
} }
.login-card { /* ── Pill variants ── */
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%); .pill-login {
background: #1a1a2e;
} }
.trial-card { .pill-trial {
background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%); background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
} }
.active-card { .pill-active {
background: linear-gradient(135deg, #2a3a4a 0%, #1a2a3a 100%); background: #ffffff;
border: 1rpx solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
} }
.expired-card { .pill-expired {
background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%); background: #f5f5f5;
border: 1rpx solid rgba(0, 0, 0, 0.04);
box-shadow: none;
} }
.entry-content { /* ── Status dot ── */
display: flex; .pill-dot {
align-items: center; width: 14rpx;
justify-content: space-between; height: 14rpx;
gap: 24rpx;
}
.entry-left {
display: flex;
align-items: center;
gap: 28rpx;
flex: 1;
}
.entry-icon-wrap {
width: 88rpx;
height: 88rpx;
border-radius: 50%; border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; flex-shrink: 0;
position: relative;
} }
.login-icon { .dot-login {
background: rgba(255, 255, 255, 0.12); background: $primary-color;
box-shadow: 0 0 8rpx rgba($primary-color, 0.6);
} }
.trial-icon { .dot-active {
background: rgba(255, 215, 0, 0.2); background: #34c759;
box-shadow: 0 0 8rpx rgba(52, 199, 89, 0.5);
} }
.active-icon { .dot-expired {
background: rgba(168, 196, 206, 0.25); background: #aaa;
} }
.expired-icon { /* ── Tag (trial only) ── */
background: rgba(255, 255, 255, 0.12); .pill-tag {
} font-size: 20rpx;
font-weight: 700;
/* ── Icon shapes (pure CSS) ── */ padding: 4rpx 14rpx;
border-radius: 20rpx;
/* User icon: head + shoulders */ flex-shrink: 0;
.icon-user {
position: relative;
width: 36rpx;
height: 36rpx;
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #fff;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 28rpx;
height: 14rpx;
border-radius: 14rpx 14rpx 0 0;
background: #fff;
}
}
/* Star icon - diamond shape */
.icon-star {
position: relative;
width: 32rpx;
height: 32rpx;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 24rpx;
height: 24rpx;
background: #ffd700;
}
}
/* Clock icon - circle with dot */
.icon-clock {
position: relative;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 3rpx solid #fff;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #fff;
}
}
/* Card icon */
.icon-card {
position: relative;
width: 36rpx;
height: 26rpx;
border-radius: 4rpx;
border: 3rpx solid #fff;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12rpx;
height: 6rpx;
border-radius: 2rpx;
background: #fff;
}
}
/* 闪电 icon — 更有能量感 */
.icon-warning {
position: relative;
width: 22rpx;
height: 22rpx;
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(-15deg);
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-bottom: 18rpx solid #ffffff;
}
&::after {
content: '';
position: absolute;
bottom: 2rpx;
left: 50%;
transform: translateX(-50%);
width: 10rpx;
height: 3rpx;
background: rgba(255, 255, 255, 0.5);
border-radius: 2rpx;
}
}
.entry-text {
flex: 1;
min-width: 0;
}
.entry-title {
display: block;
font-size: 34rpx;
font-weight: 600;
color: #ffffff;
margin-bottom: 8rpx;
letter-spacing: 1rpx; letter-spacing: 1rpx;
} }
.entry-subtitle { .tag-trial {
display: block; background: rgba(255, 215, 0, 0.25);
font-size: 24rpx; color: #ffd700;
color: rgba(255, 255, 255, 0.6);
line-height: 1.4;
} }
.entry-btn { /* ── Label text ── */
.pill-label {
flex: 1;
font-size: 26rpx;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1;
}
.pill-label-active {
color: #333;
}
.pill-expired .pill-label {
color: #888;
}
/* ── Action button ── */
.pill-action {
flex-shrink: 0; flex-shrink: 0;
padding: 18rpx 36rpx; height: 60rpx;
border-radius: 40rpx; padding: 0 28rpx;
border-radius: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
opacity: 0.5;
}
} }
.entry-btn-text { .pill-action-text {
font-size: 28rpx; font-size: 24rpx;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
position: relative; line-height: 1;
z-index: 1;
} }
.login-btn, .action-login {
.trial-btn,
.book-btn {
background: $primary-color; background: $primary-color;
.pill-action-text { color: #1a1a2e; }
} }
.renew-btn { .action-trial {
background: #666; background: rgba(255, 215, 0, 0.2);
.pill-action-text { color: #ffd700; }
} }
.login-btn .entry-btn-text, .action-book {
.trial-btn .entry-btn-text, background: #1a1a2e;
.book-btn .entry-btn-text, .pill-action-text { color: #fff; }
.renew-btn .entry-btn-text {
color: #1a1a2e;
} }
/* Corner badge */ .action-renew {
.card-badge { background: #e0e0e0;
position: absolute; .pill-action-text { color: #555; }
top: 0;
right: 0;
padding: 8rpx 20rpx;
font-size: 20rpx;
font-weight: 600;
border-radius: 0 16rpx 0 16rpx;
} }
.trial-badge { /* ── Renew strip (running low) ── */
background: linear-gradient(135deg, #ffd700, #ffaa00); .renew-strip {
color: #1a1a2e;
}
.low-badge {
background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
color: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
}
/* Renew tip bar — 充满能量的激励配色 */
.renew-tip {
display: flex;
align-items: center;
gap: 16rpx;
margin-top: 16rpx;
padding: 22rpx 28rpx;
background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 60%, #FFAA5C 100%);
border-radius: 16rpx;
box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
position: relative;
overflow: hidden;
/* 右上角光晕装饰 */
&::before {
content: '';
position: absolute;
top: -20rpx;
right: -20rpx;
width: 120rpx;
height: 120rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
pointer-events: none;
}
/* 底部微光 */
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
pointer-events: none;
}
}
.renew-tip-icon {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; gap: 8rpx;
position: relative; margin-top: 12rpx;
z-index: 1; padding: 14rpx 24rpx;
backdrop-filter: blur(4rpx); background: linear-gradient(135deg, #FF6B35, #FF8E53);
border-radius: 24rpx;
} }
.renew-tip-text { .renew-strip-text {
flex: 1; font-size: 22rpx;
font-size: 26rpx;
color: #ffffff;
line-height: 1.5;
font-weight: 500; font-weight: 500;
position: relative; color: #fff;
z-index: 1; letter-spacing: 0.5rpx;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
} }
.renew-tip-action { .renew-strip-arrow {
font-size: 26rpx; font-size: 28rpx;
color: #ffffff;
font-weight: 700; font-weight: 700;
flex-shrink: 0; color: rgba(255, 255, 255, 0.8);
position: relative; line-height: 1;
z-index: 1;
letter-spacing: 1rpx;
/* 箭头增强感 */
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
} }
</style> </style>

4
packages/app/src/components/StudioInfo.vue
View File

@@ -69,7 +69,11 @@ function copyAddress() {
<style lang="scss" scoped> <style lang="scss" scoped>
.studio-info { .studio-info {
margin: 16rpx 24rpx 0;
background: #ffffff; background: #ffffff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
} }
/* ── Photo strip ── */ /* ── Photo strip ── */