From 1fbb9bddb8f81c7a8fd2f6c66c652e3397858f28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Mon, 29 Sep 2025 10:17:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=9A=84=E9=92=B1=E5=8C=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/user/wallet/index.css | 147 +++++++++++++++++++++++++++++++++
 packages/user/wallet/index.vue | 106 ++++++++++++++++++++++++
 pages.json                     |   7 ++
 pages/user/index.vue           |   9 +-
 4 files changed, 266 insertions(+), 3 deletions(-)
 create mode 100644 packages/user/wallet/index.css
 create mode 100644 packages/user/wallet/index.vue

diff --git a/packages/user/wallet/index.css b/packages/user/wallet/index.css
new file mode 100644
index 00000000..56337b66
--- /dev/null
+++ b/packages/user/wallet/index.css
@@ -0,0 +1,147 @@
+page {
+    background-color: #f6f7fb;
+}
+
+.header {
+    width: 750rpx;
+    padding-bottom: 20rpx;
+    background-color: #ffffff;
+}
+
+.searchBox {
+    display: flex;
+    align-items: center;
+    z-index: 2;
+}
+
+.searchBox_left {
+    box-sizing: border-box;
+    padding-left: 20rpx;
+    position: absolute;
+    left: 0;
+}
+
+.searchBox_mid {
+    font-size: 32rpx;
+    color: #222222;
+    flex: 1;
+    text-align: center;
+}
+
+/* 余额显示部分样式 */
+.balance-container {
+    width: 93%;
+    height: 250rpx;
+    background-color: #ffffff;
+    margin-bottom: 15rpx;
+    padding: 25rpx;
+}
+
+.balance-content {
+    height: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding-left: 50rpx;
+    color: #894b11;
+    background: linear-gradient(to top right, #f6e2b7, #eab16a);
+    border-radius: 25rpx;
+}
+
+.balance-title {
+    font-size: 45rpx;
+    font-weight: 500;
+    margin-bottom: 20rpx;
+}
+
+.balance-amount {
+    font-size: 70rpx;
+    font-weight: 500;
+}
+
+.balance-icon {
+    position: absolute;
+    right: 50rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.balance-icon image {
+    width: 200rpx;
+    height: 200rpx;
+}
+
+/* 余额变动记录样式 */
+.records-container {
+    margin-top: 30rpx;
+    padding: 0 40rpx;
+    background-color: #ffffff;
+    padding: 25rpx;
+}
+
+.records-title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #222222;
+    margin-bottom: 30rpx;
+}
+
+.records-list {
+    width: 100%;
+}
+
+.record-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 30rpx 0;
+    border-bottom: 1rpx solid #EEEEEE;
+}
+
+.record-info {
+    flex: 1;
+}
+
+.record-name {
+    font-size: 32rpx;
+    color: #222222;
+    margin-bottom: 10rpx;
+}
+
+.record-time {
+    font-size: 26rpx;
+    color: #999999;
+}
+
+.record-amount {
+    text-align: right;
+}
+
+.amount-sign {
+    font-size: 28rpx;
+}
+
+.amount-value {
+    font-size: 36rpx;
+    font-weight: bold;
+}
+
+.positive {
+    color: #51c651;
+}
+
+.negative {
+    color: #FF4444;
+}
+
+.record-balance {
+    font-size: 26rpx;
+    color: #999999;
+    margin-top: 10rpx;
+}
\ No newline at end of file
diff --git a/packages/user/wallet/index.vue b/packages/user/wallet/index.vue
new file mode 100644
index 00000000..73f1f582
--- /dev/null
+++ b/packages/user/wallet/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <view>
+        <view class="header">
+            <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
+                <view class="searchBox_left" @click="back">
+                    <u-icon name="arrow-left" size="20px" color="#000"></u-icon>
+                </view>
+                <view class="searchBox_mid">{{ topVal }}</view>
+            </view>
+        </view>
+
+        <!-- 余额显示部分 -->
+        <view class="balance-container">
+            <view class="balance-content">
+                <view>
+                    <view class="balance-title">{{ topVal }}余额（元）</view>
+                    <view class="balance-amount">{{ balance }}</view>
+                    <view class="balance-icon">
+                        <image :src="photoVal" mode="widthFix" />
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 余额变动记录 -->
+        <view class="records-container">
+            <view class="records-title">{{ topVal }}变动记录</view>
+            <view class="records-list">
+                <view class="record-item" v-for="(record, index) in records" :key="index">
+                    <view class="record-info">
+                        <view class="record-name">{{ record.name }}</view>
+                        <view class="record-time">{{ record.time }}</view>
+                    </view>
+                    <view class="record-amount">
+                        <view>
+                            <text :class="['amount-sign', record.amount.startsWith('+') ? 'positive' : 'negative']">{{
+                                record.amount.startsWith('+') ? '+' : '-' }}</text>
+                            <text :class="['amount-value', record.amount.startsWith('+') ? 'positive' : 'negative']">¥{{
+                                record.amount.replace(/[+-]/, '') }}</text>
+                        </view>
+                        <view class="record-balance">余:¥{{ record.remain }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
+export default {
+    data() {
+        return {
+            top: "",
+            localHeight: "",
+            topVal: "",
+            photoVal: '',
+            balance: "160.80",
+            records: [
+                {
+                    name: "退单-1312312317972",
+                    time: "2025-08-12 13:00:00",
+                    amount: "-1808.5",
+                    remain: "286.79"
+                },
+                {
+                    name: "退单-1312312317972",
+                    time: "2025-08-12 13:00:00",
+                    amount: "-1808.5",
+                    remain: "286.79"
+                }
+            ]
+        }
+    },
+    onLoad(options) {
+        const meun = menuButtonInfo();
+        this.top = meun.top;
+        this.localHeight = meun.height;
+        this.topVal = options.type == 1 ? '积分' : (options.type == 2 ? '物业公积金' : '红包卡券');
+        this.photoVal = options.type == 1 ? 'http://localhost:8080/user_wallet1.png' : (options.type == 2 ? 'http://localhost:8080/user_wallet2.png' : 'http://localhost:8080/user_wallet3.png');
+        this.getWalletInfo();
+    },
+    methods: {
+        back() {
+            uni.navigateBack({
+                delta: 1
+            });
+        },
+        // 获取钱包信息
+        getWalletInfo() {
+            // 这里应该是真实的接口调用
+            // 暂时使用模拟数据
+            console.log('获取钱包信息');
+            // 实际项目中应该调用接口获取余额和交易记录
+            // request('/api/wallet/info', 'GET').then(res => {
+            //     if (res.code === 0) {
+            //         this.balance = res.data.balance;
+            //         this.records = res.data.records;
+            //     }
+            // })
+        }
+    }
+}
+</script>
+<style>
+@import url("./index.css");
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index ea2deaa4..34b29fc1 100644
--- a/pages.json
+++ b/pages.json
@@ -435,6 +435,13 @@
 				{
 					"path": "customerService/index",
 					"style": {}
+				},
+				{
+					"path": "wallet/index",
+					"style": {
+						"navigationBarBackgroundColor": "#fff",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},
diff --git a/pages/user/index.vue b/pages/user/index.vue
index 6eb28458..05ab2e3d 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -24,7 +24,7 @@
 			</view>
 		</view>
 		<view class="section section1">
-			<view class="section_label">
+			<view class="section_label" @click="goWallet(1)">
 				<view>{{ userInfo.property_housing_fund }}</view>
 				<view>积分</view>
 			</view>
@@ -32,11 +32,11 @@
 				<view>0.00</view>
 				<view>繁华币</view>
 			</view>
-			<view class="section_label">
+			<view class="section_label" @click="goWallet(2)">
 				<view>{{ userInfo.property_housing_fund }}元</view>
 				<view>物业费公积金</view>
 			</view>
-			<view class="section_label">
+			<view class="section_label" @click="goWallet(3)">
 				<view>0元</view>
 				<view>红包卡券</view>
 			</view>
@@ -267,6 +267,9 @@ export default {
 	},
 
 	methods: {
+		goWallet(type) {
+			NavgateTo('/packages/user/wallet/index?type=' + type);
+		},
 		// 头像点击
 		toLogin() {
 			NavgateTo('/packages/user/replenishInfo/index');