luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: UI
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 45s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-16 11:13:57 +08:00
parent e2d3d8172f
commit 89aafa7317
1 changed files with 62 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
pages/my-wallet/my-wallet.vue
View File

@@ -2,24 +2,17 @@
<view class="container">
<view class="pd-20">
<view class="wallet-card">
<view class="balance-section">
<view class="balance-header">
<view class="balance-label">账户余额(元)</view>
<view class="recharge-btn-wrapper">
<button class="btn-recharge" @tap="showRechargeModal = true">充值</button>
</view>
<view class="wallet-header">
<view class="header-left">
<view class="balance-label">账户余额</view>
<view class="balance-amount">¥{{ formatMoney(walletDetail.balance) }}</view>
</view>
<view class="balance-amount">{{ formatMoney(walletDetail.balance) }}</view>
<button class="btn-recharge" @tap="showRechargeModal = true">充值</button>
</view>
<view class="wallet-footer">
<view class="footer-item">
<view class="footer-label">冻结金额</view>
<view class="footer-value">{{ formatMoney(walletDetail.frozen_balance) }}</view>
</view>
<view class="footer-divider"></view>
<view class="footer-item">
<view class="footer-label">更新时间</view>
<view class="footer-value">{{ formatDateTime(walletDetail.updated_at) }}</view>
<view class="wallet-info">
<view class="info-item">
<view class="info-label">冻结金额</view>
<view class="info-value">¥{{ formatMoney(walletDetail.frozen_balance) }}</view>
</view>
</view>
</view>
@@ -38,7 +31,7 @@
<swiper class="tab-swiper" :current="currentTab" @change="onSwiperChange" :circular="false"
:acceleration="true">
<swiper-item class="swiper-item-content">
<scroll-view scroll-y class="list-content">
<scroll-view scroll-y class="list-content" @scrolltolower="loadMoreRecharge">
<view v-if="rechargeList.length === 0 && !rechargeLoading" class="empty-state">
<view class="empty-icon">📋</view>
<view class="empty-title">暂无充值订单</view>
@@ -78,14 +71,13 @@
<view class="load-more" v-if="rechargeList.length > 0">
<text v-if="rechargeLoading">加载中...</text>
<text v-else-if="rechargeNoMore">— 没有更多了 —</text>
<text v-else @tap="loadMoreRecharge">点击加载更多</text>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item-content">
<scroll-view scroll-y class="list-content">
<scroll-view scroll-y class="list-content" @scrolltolower="loadMoreTransaction">
<view v-if="transactionList.length === 0 && !transactionLoading" class="empty-state">
<view class="empty-icon">💰</view>
<view class="empty-title">暂无钱包流水</view>
@@ -123,7 +115,6 @@
<view class="load-more" v-if="transactionList.length > 0">
<text v-if="transactionLoading">加载中...</text>
<text v-else-if="transactionNoMore">— 没有更多了 —</text>
<text v-else @tap="loadMoreTransaction">点击加载更多</text>
</view>
</view>
</scroll-view>
@@ -601,75 +592,76 @@
}
.wallet-card {
background: linear-gradient(135deg, #0A84FF 0%, #5AC8FA 50%, #64D2FF 100%);
border-radius: 24rpx;
padding: 36rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: var(--radius-large);
padding: 40rpx;
color: #fff;
box-shadow: 0 8rpx 32rpx rgba(10, 132, 255, 0.3);
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.25);
.balance-section {
margin-bottom: 28rpx;
.wallet-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 32rpx;
.balance-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
.header-left {
flex: 1;
.balance-label {
font-size: 24rpx;
opacity: 0.75;
font-size: 26rpx;
opacity: 0.85;
margin-bottom: 12rpx;
font-weight: 500;
}
.recharge-btn-wrapper {
.btn-recharge {
background: #fff;
border: none;
color: var(--primary);
font-size: 26rpx;
padding: 12rpx 32rpx;
border-radius: 40rpx;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
&::after {
border: none;
}
}
.balance-amount {
font-size: 64rpx;
font-weight: 700;
letter-spacing: -2rpx;
line-height: 1;
}
}
.balance-amount {
font-size: 72rpx;
font-weight: 700;
letter-spacing: -2rpx;
.btn-recharge {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2rpx solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 28rpx;
padding: 16rpx 32rpx;
border-radius: 50rpx;
font-weight: 600;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
background: rgba(255, 255, 255, 0.3);
transform: scale(0.95);
}
}
}
.wallet-footer {
display: flex;
align-items: center;
.wallet-info {
padding-top: 24rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
.footer-divider {
width: 1rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.3);
margin: 0 32rpx;
}
.info-item {
display: flex;
align-items: center;
justify-content: space-between;
.footer-item {
flex: 1;
.footer-label {
font-size: 22rpx;
opacity: 0.7;
margin-bottom: 6rpx;
.info-label {
font-size: 24rpx;
opacity: 0.8;
font-weight: 500;
}
.footer-value {
font-size: 26rpx;
.info-value {
font-size: 28rpx;
font-weight: 600;
}
}