novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修正多处问题

Browse Source
This commit is contained in:
liwentao
2026-06-29 13:35:29 +08:00
parent 09e587cb65
commit e85f39ab83
37 changed files with 3546 additions and 2539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/memberInfo/memberCard.vue
+282 -179
View File
@@ -1,8 +1,14 @@
<template>
<view class="scroll-container theme-light">
<view class="member-card-page">
<MemberInfoSubNav title="我的会员卡" @back="goBack" />
<view class="member-card-page__body">
<view class="member-card-page">
<!-- 固定页面头部 -->
<view class="member-card-page-header">
<PageHeader title="我的会员卡" subtitle="" :show-back="true" />
</view>
<!-- 滚动内容区域 -->
<view class="member-card-scroll-wrap">
<scroll-view scroll-y class="member-card-scroll">
<view class="member-card-page__body">
<!-- 卡类型切换 -->
<view class="mc-type-tabs">
<view
@@ -10,7 +16,6 @@
:class="{ 'mc-type-tab--active': currentCardType === 'stored' }"
@tap="switchCardType('stored')"
>
<image class="mc-type-tab__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wallet.png" mode="aspectFit" />
<text>储值卡</text>
</view>
<view
@@ -18,7 +23,6 @@
:class="{ 'mc-type-tab--active': currentCardType === 'other' }"
@tap="switchCardType('other')"
>
<image class="mc-type-tab__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png" mode="aspectFit" />
<text>非储值卡</text>
<text class="mc-type-tab__count" v-if="otherCards.length > 0">{{ otherCards.length }}</text>
</view>
@@ -31,11 +35,7 @@
<view class="mc-stored-hero__inner">
<view class="mc-stored-hero__header">
<view class="mc-stored-hero__title-row">
<image
class="mc-stored-hero__crown"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown.png"
mode="aspectFit"
/>
<uni-icons type="star-filled" size="40rpx" color="#FFFFFF" />
<text class="mc-stored-hero__name">{{ displayStoredCard.name }}</text>
</view>
<view class="mc-stored-hero__badge">
@@ -50,19 +50,7 @@
</view>
</view>
<view class="mc-stored-hero__footer">
<view
class="mc-stored-hero__recharge"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap="goRecharge"
>
<image
class="mc-stored-hero__recharge-icon"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/plus.png"
mode="aspectFit"
/>
<text>充值</text>
</view>
<view class="mc-stored-hero__recharge" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="goRecharge">充值</view>
</view>
</view>
</view>
@@ -348,18 +336,8 @@
</scroll-view>
</view>
<view class="mc-rules">
<text class="mc-rules__title">使用规则</text>
<view
v-for="(rule, index) in rules"
:key="index"
class="mc-rules__item"
>
<view class="mc-rules__bullet"></view>
<text class="mc-rules__text">{{ rule }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
@@ -367,14 +345,14 @@
<script setup>
import { ref, computed, watch } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import PageHeader from '@/components/index/PageHeader.vue'
import {
loadMemberStore,
computeRemainingDays,
renewMemberCard,
saveMemberStore
} from '@/common/memberInfo/store.js'
import { backToMemberCenter, PAGE, navigateToPage } from '@/common/constants/routes.js'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { getMyMemberCards, getMyMemberCardsWithStatus, getMemberCardTransactions, getMemberCardTransactionsByRecordId, checkPayPasswordSet, createPayment, getStoredCardInfo, getStoredCardRechargeRecords } from '@/api/main.js'
import { getMemberId } from '@/utils/request.js'
@@ -394,7 +372,6 @@ const recordTabs = ref([
{ key: 'CHECK_IN', label: '到店健身' }
])
const records = ref([])
const rules = ref([])
const activeFilter = ref('all')
const activeSection = ref('records')
const transactions = ref([])
@@ -866,10 +843,6 @@ async function refreshFromServer() {
}
}
function goBack() {
backToMemberCenter()
}
function switchFilter(filter) {
activeFilter.value = filter
}
@@ -1055,21 +1028,50 @@ onShow(() => {
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/member-card-page.css';
// 卡类型切换样式
// ================== 页面布局 ==================
.member-card-page {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: #F5F7FA;
}
.member-card-page-header {
flex-shrink: 0;
position: relative;
z-index: 10;
background: #F5F7FA;
}
.member-card-scroll-wrap {
flex: 1;
overflow: hidden;
}
.member-card-scroll {
height: 100%;
overflow-y: auto;
}
.member-card-page__body {
padding: 24rpx 32rpx;
}
// ================== 卡类型切换 ==================
.mc-type-tabs {
display: flex;
margin: 0 16px 16px;
margin-bottom: 24rpx;
background: #FFFFFF;
border-radius: 12px;
padding: 8px;
gap: 8px;
border-radius: 16rpx;
padding: 8rpx;
gap: 8rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.mc-type-tab {
@@ -1077,51 +1079,43 @@ onShow(() => {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 0;
border-radius: 8px;
font-size: 14px;
gap: 8rpx;
padding: 20rpx 0;
border-radius: 12rpx;
font-size: 28rpx;
color: #718096;
background: #F7FAFC;
transition: all 0.2s;
&--active {
background: #1677FF;
color: #FFFFFF;
font-weight: 600;
}
}
.mc-type-tab__icon {
width: 18px;
height: 18px;
.mc-type-tab--active {
background: linear-gradient(135deg, #1677FF, #4096FF);
color: #FFFFFF;
font-weight: 600;
}
.mc-type-tab__count {
font-size: 12px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
font-size: 22rpx;
padding: 4rpx 12rpx;
border-radius: 20rpx;
background: rgba(0, 0, 0, 0.08);
}
.mc-type-tab--active .mc-type-tab__count {
background: rgba(255, 255, 255, 0.3);
}
// 储值卡区域样式
// ================== 储值卡 ==================
.mc-stored-section {
margin-bottom: 20px;
}
.mc-stored-hero {
margin: 0 16px;
margin-bottom: 24rpx;
}
.mc-stored-hero__inner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 20px;
border-radius: 20rpx;
padding: 32rpx;
color: #FFFFFF;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.25);
}
.mc-stored-hero__header {
@@ -1137,11 +1131,6 @@ onShow(() => {
gap: 8px;
}
.mc-stored-hero__crown {
width: 24px;
height: 24px;
}
.mc-stored-hero__name {
font-size: 18px;
font-weight: 600;
@@ -1182,7 +1171,7 @@ onShow(() => {
.mc-stored-hero__footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
}
.mc-stored-hero__validity {
@@ -1201,20 +1190,14 @@ onShow(() => {
}
.mc-stored-hero__recharge {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 20px;
padding: 16rpx 36rpx;
border-radius: 32rpx;
background: #FFFFFF;
color: #667eea;
font-size: 14px;
font-size: 28rpx;
font-weight: 600;
}
.mc-stored-hero__recharge-icon {
width: 16px;
height: 16px;
color: #667eea;
text-align: center;
line-height: 1;
}
// 无储值卡提示
@@ -1223,10 +1206,10 @@ onShow(() => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 16px;
margin: 0 16px;
padding: 64rpx 32rpx;
background: #FFFFFF;
border-radius: 16px;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.mc-stored-empty__icon {
@@ -1305,11 +1288,12 @@ onShow(() => {
// 筛选条件样式
.mc-filter-tabs {
display: flex;
margin: 0 16px 16px;
margin-bottom: 24rpx;
background: #FFFFFF;
border-radius: 12px;
padding: 8px;
gap: 8px;
border-radius: 16rpx;
padding: 8rpx;
gap: 8rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.mc-filter-tab {
@@ -1345,8 +1329,8 @@ onShow(() => {
// 卡片轮播样式
.mc-swiper-cards {
margin: 0 16px 20px;
padding-bottom: 16px;
margin-bottom: 24rpx;
padding-bottom: 16rpx;
}
.mc-swiper {
@@ -1584,52 +1568,56 @@ onShow(() => {
.mc-section-tabs {
display: flex;
margin: 0 16px;
margin-bottom: 24rpx;
background: #FFFFFF;
border-radius: 12px;
padding: 4px;
border-radius: 16rpx;
padding: 8rpx;
gap: 8rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.mc-section-tab {
flex: 1;
padding: 12px 0;
padding: 20rpx 0;
text-align: center;
border-radius: 8px;
font-size: 15px;
border-radius: 12rpx;
font-size: 28rpx;
color: #718096;
background: #F7FAFC;
transition: all 0.2s;
}
&--active {
background: #1677FF;
color: #FFFFFF;
font-weight: 600;
}
.mc-section-tab--active {
background: linear-gradient(135deg, #1677FF, #4096FF);
color: #FFFFFF;
font-weight: 600;
}
.mc-transactions {
margin: 0 16px;
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
border-radius: 16rpx;
padding: 24rpx 32rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
margin-bottom: 24rpx;
}
.mc-transactions__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 16px;
border-bottom: 1px solid #F0F0F0;
margin-bottom: 20rpx;
}
.mc-transactions__title {
font-size: 17px;
font-size: 28rpx;
font-weight: 600;
color: #1A202C;
color: #1E2A3A;
}
.mc-transactions__refresh {
font-size: 13px;
font-size: 24rpx;
color: #1677FF;
padding: 8rpx 16rpx;
}
.mc-transactions__scroll {
@@ -1642,91 +1630,91 @@ onShow(() => {
}
.mc-transactions__divider {
height: 1px;
height: 1rpx;
background: #F0F0F0;
margin: 0 16px;
}
.mc-transactions__item-inner {
display: flex;
align-items: center;
padding: 16px;
gap: 16px;
padding: 24rpx 0;
gap: 20rpx;
}
.mc-transactions__icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
width: 72rpx;
height: 72rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
&--purchase {
background: #F0FFF4;
}
&--deduct {
background: #FFF5F5;
}
&--renew {
background: #EBF8FF;
}
&--refund {
background: #FEF3E2;
}
&--expire {
background: #F7FAFC;
}
&--default {
background: #F7FAFC;
}
.mc-transactions__icon-wrap--purchase {
background: rgba(76, 175, 80, 0.1);
}
.mc-transactions__icon-wrap--deduct {
background: rgba(242, 153, 74, 0.1);
}
.mc-transactions__icon-wrap--renew {
background: rgba(33, 150, 243, 0.1);
}
.mc-transactions__icon-wrap--refund {
background: rgba(244, 67, 54, 0.1);
}
.mc-transactions__icon-wrap--expire {
background: rgba(158, 158, 158, 0.1);
}
.mc-transactions__icon-wrap--default {
background: rgba(22, 119, 255, 0.1);
}
.mc-transactions__icon-text {
font-size: 24px;
font-size: 32rpx;
}
.mc-transactions__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mc-transactions__item-title {
font-size: 15px;
font-weight: 500;
color: #1A202C;
font-size: 28rpx;
color: #1E2A3A;
display: block;
margin-bottom: 6rpx;
}
.mc-transactions__item-time {
font-size: 12px;
color: #A0AEC0;
font-size: 24rpx;
color: #999;
}
.mc-transactions__value {
font-size: 16px;
font-size: 28rpx;
font-weight: 600;
flex-shrink: 0;
}
&--positive {
color: #059669;
}
&--negative {
color: #DC2626;
}
.mc-transactions__value--positive {
color: #4CAF50;
}
.mc-transactions__value--negative {
color: #333;
}
.mc-transactions__empty {
padding: 64rpx 32rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
}
.mc-transactions__empty-text {
font-size: 14px;
color: #8A99B4;
font-size: 26rpx;
color: #999;
}
.mc-transactions__loading {
@@ -1736,27 +1724,142 @@ onShow(() => {
padding: 32px 16px;
}
.mc-records {
background: #FFFFFF;
border-radius: 16rpx;
padding: 24rpx 32rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
margin-bottom: 24rpx;
}
.mc-records__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.mc-records__title {
font-size: 28rpx;
font-weight: 600;
color: #1E2A3A;
}
.mc-records__tabs {
display: flex;
gap: 8rpx;
}
.mc-records__tab {
padding: 12rpx 20rpx;
border-radius: 12rpx;
font-size: 24rpx;
color: #718096;
background: #F7FAFC;
transition: all 0.2s;
}
.mc-records__tab--active {
background: #1677FF;
color: #FFFFFF;
}
.mc-records__divider {
height: 1rpx;
background: #F0F0F0;
}
.mc-records__scroll {
height: 400rpx;
overflow: hidden;
}
.mc-records__value {
font-size: 16px;
font-weight: 600;
.mc-records__item-inner {
display: flex;
align-items: center;
gap: 20rpx;
padding: 24rpx 0;
}
&--positive {
color: #059669;
}
&--negative {
color: #DC2626;
}
&--pending {
color: #F59E0B;
}
.mc-records__icon-wrap {
width: 72rpx;
height: 72rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mc-records__icon-wrap--orange {
background: rgba(242, 153, 74, 0.1);
}
.mc-records__icon-wrap--green {
background: rgba(76, 175, 80, 0.1);
}
.mc-records__icon-wrap--purple {
background: rgba(156, 39, 176, 0.1);
}
.mc-records__icon-wrap--default {
background: rgba(22, 119, 255, 0.1);
}
.mc-records__icon {
width: 36rpx;
height: 36rpx;
}
.mc-records__icon-text {
font-size: 24px;
font-size: 32rpx;
}
.mc-records__info {
flex: 1;
min-width: 0;
}
.mc-records__item-title {
font-size: 28rpx;
color: #1E2A3A;
display: block;
margin-bottom: 6rpx;
}
.mc-records__item-time {
font-size: 24rpx;
color: #999;
}
.mc-records__value {
font-size: 28rpx;
font-weight: 600;
flex-shrink: 0;
}
.mc-records__value--positive {
color: #4CAF50;
}
.mc-records__value--negative {
color: #333;
}
.mc-records__value--pending {
color: #F2994A;
}
.mc-records__empty {
padding: 64rpx 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.mc-records__empty-text {
font-size: 26rpx;
color: #999;
}
</style>