From f70843f3ddca406aa94ba6d7d1345760b7eb7c3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Tue, 16 Dec 2025 17:11:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BA=A2=E5=8C=85=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/user/history/index.css     | 154 +++++++++++++++++++++++
 packages/user/history/index.vue     |  77 ++++++++++++
 packages/user/myRedPacket/index.css | 152 +++++++++++++++++++++++
 packages/user/myRedPacket/index.vue | 106 ++++++++++++++++
 packages/user/redPacket/index.css   | 182 ++++++++++++++++++++++++++++
 packages/user/redPacket/index.vue   |  85 +++++++++++++
 pages.json                          |  21 ++++
 pages/user/index.vue                |   7 +-
 8 files changed, 782 insertions(+), 2 deletions(-)
 create mode 100644 packages/user/history/index.css
 create mode 100644 packages/user/history/index.vue
 create mode 100644 packages/user/myRedPacket/index.css
 create mode 100644 packages/user/myRedPacket/index.vue
 create mode 100644 packages/user/redPacket/index.css
 create mode 100644 packages/user/redPacket/index.vue

diff --git a/packages/user/history/index.css b/packages/user/history/index.css
new file mode 100644
index 00000000..d42a028b
--- /dev/null
+++ b/packages/user/history/index.css
@@ -0,0 +1,154 @@
+page {
+    background-color: #f6f7fb;
+}
+
+.container {
+    padding-bottom: 20rpx;
+}
+
+/* 顶部统计 */
+.stats {
+    display: flex;
+    justify-content: space-around;
+    background-color: #fff;
+    padding: 30rpx 20rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.stat-item {
+    text-align: center;
+    flex: 1;
+}
+
+.stat-label {
+    font-size: 28rpx;
+    color: #8c8c8c;
+    margin-bottom: 10rpx;
+}
+
+.stat-value {
+    font-size: 48rpx;
+    font-weight: bold;
+    color: #333;
+}
+
+/* 分类标签 */
+.tabs {
+    display: flex;
+    background-color: #fff;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    overflow-x: auto;
+}
+
+.tab {
+    width: 50%;
+    text-align: center;
+    padding: 15rpx 25rpx;
+    font-size: 28rpx;
+    color: #666;
+    margin-right: 20rpx;
+    white-space: nowrap;
+}
+
+.tab.active {
+    color: #409eff;
+    border-bottom: 5rpx solid #409eff;
+}
+
+/* 红包列表 */
+.content {
+    padding: 0 20rpx;
+}
+
+.item {
+    padding: 20rpx;
+    height: 130rpx;
+    margin-bottom: 30rpx;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f2f2f2;
+    color: #999999;
+}
+
+.item_left {
+    font-size: 40rpx;
+    font-weight: bold;
+    width: 170rpx;
+    height: 170rpx;
+    line-height: 170rpx;
+    padding-left: 30rpx;
+    border-radius: 20rpx 80rpx 80rpx 20rpx;
+    position: relative;
+    left: -22rpx;
+}
+
+.item_center {
+    flex: 1;
+    margin: 0 20rpx;
+}
+
+.title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+}
+
+.time {
+    font-size: 24rpx;
+    margin: 10rpx 0;
+}
+
+.desc {
+    font-size: 26rpx;
+}
+
+.item_right {
+    margin-right: 20rpx;
+}
+
+.status2 {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 150rpx;
+    height: 120rpx;
+    overflow: hidden;
+    transform: rotate(0deg);
+}
+
+.status2::after {
+    content: attr(data-status);
+    position: absolute;
+    top: 25rpx;
+    right: -50rpx;
+    width: 180rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    text-align: center;
+    color: #999999;
+    font-size: 24rpx;
+    font-weight: bold;
+    transform: rotate(45deg);
+    border-radius: 0 20rpx 0 0;
+    background: #cccccc;
+    box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.item {
+    position: relative;
+    overflow: visible;
+}
+
+/* 滚动条样式 */
+.tabs::-webkit-scrollbar {
+    height: 0;
+}
+
+.tabs::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/packages/user/history/index.vue b/packages/user/history/index.vue
new file mode 100644
index 00000000..c6c38b77
--- /dev/null
+++ b/packages/user/history/index.vue
@@ -0,0 +1,77 @@
+<template>
+    <view class="container">
+        <!-- 分类标签 -->
+        <view class="tabs">
+            <view v-for="(tab, index) in tabList" :key="index" :class="['tab', { active: currentTab === index }]"
+                @click="switchTab(index)">
+                {{ tab }}
+            </view>
+        </view>
+        <!-- 红包列表 -->
+        <view class="content">
+            <view v-for="(item, index) in redPacketList" :key="index">
+                <view class="item">
+                    <view class="item_left">￥{{ item.yuan }}</view>
+                    <view class="item_center">
+                        <view class="title">{{ item.name }}</view>
+                        <view class="time">{{ item.time }}</view>
+                        <view class="desc">{{ item.shiyong }}</view>
+                    </view>
+                    <view class="status2" :data-status="item.status"></view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            currentTab: 0, // 当前选中的标签索引
+            tabList: ['已使用', '已过期'],
+            redPacketList: [
+                {
+                    name: '新用户注册红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '全平台使用',
+                    status: '去使用',
+                    yuan: 5.32
+                },
+                {
+                    name: '满减红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '全平台使用',
+                    status: '去使用',
+                    yuan: 5,
+                    manjian: '满0元可用'
+                },
+                {
+                    name: '固定红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '限改店铺指定商品使用',
+                    status: '去使用',
+                    yuan: 5
+                },
+                {
+                    name: '固定红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '限广州地区使用',
+                    status: '去使用',
+                    yuan: 5
+                }
+            ]
+        }
+    },
+    methods: {
+        switchTab(index) {
+            this.currentTab = index;
+            console.log('选中的标签:', this.tabList[index]);
+        }
+    }
+}
+</script>
+
+<style>
+@import url("./index.css");
+</style>
\ No newline at end of file
diff --git a/packages/user/myRedPacket/index.css b/packages/user/myRedPacket/index.css
new file mode 100644
index 00000000..43cf9956
--- /dev/null
+++ b/packages/user/myRedPacket/index.css
@@ -0,0 +1,152 @@
+page {
+    background-color: #f6f7fb;
+}
+
+.container {
+    padding-bottom: 20rpx;
+}
+
+/* 顶部统计 */
+.stats {
+    display: flex;
+    justify-content: space-around;
+    background-color: #fff;
+    padding: 30rpx 20rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.stat-item {
+    text-align: center;
+    flex: 1;
+}
+
+.stat-label {
+    font-size: 28rpx;
+    color: #8c8c8c;
+    margin-bottom: 10rpx;
+}
+
+.stat-value {
+    font-size: 48rpx;
+    font-weight: bold;
+    color: #333;
+}
+
+/* 分类标签 */
+.tabs {
+    display: flex;
+    background-color: #fff;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    overflow-x: auto;
+}
+
+.tab {
+    flex-shrink: 0;
+    padding: 15rpx 25rpx;
+    font-size: 28rpx;
+    color: #666;
+    margin-right: 20rpx;
+    white-space: nowrap;
+}
+
+.tab.active {
+    color: black;
+    font-weight: bold;
+}
+
+/* 红包列表 */
+.content {
+    padding: 0 20rpx;
+}
+
+.item {
+    padding: 20rpx;
+    height: 130rpx;
+    margin-bottom: 30rpx;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 3rpx solid #ff775a;
+    background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%);
+    position: relative;
+    overflow: visible;
+}
+
+.item_left {
+    width: 200rpx;
+    height: 170rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx 80rpx 80rpx 20rpx;
+    border: 3rpx solid #ff775a;
+    position: relative;
+    left: -22rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.price {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #ff7557;
+    margin-bottom: 5rpx;
+}
+
+.manjian {
+    font-size: 20rpx;
+    color: #ff7557;
+    background-color: #fff0ed;
+    padding: 5rpx 10rpx;
+    border-radius: 10rpx;
+}
+
+.item_center {
+    flex: 1;
+    margin: 0 20rpx;
+    color: #fff;
+}
+
+.title {
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+}
+
+.time {
+    color: #ffffff9a;
+    font-size: 24rpx;
+    margin-bottom: 10rpx;
+}
+
+.desc {
+    font-size: 26rpx;
+}
+
+.item_right {
+    margin-right: 20rpx;
+}
+
+.status {
+    width: 120rpx;
+    padding: 15rpx 10rpx;
+    text-align: center;
+    background-color: #fff;
+    border-radius: 50rpx;
+    color: #ff7557;
+    font-size: 24rpx;
+    font-weight: bold;
+}
+
+/* 滚动条样式 */
+.tabs::-webkit-scrollbar {
+    height: 0;
+}
+
+.tabs::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/packages/user/myRedPacket/index.vue b/packages/user/myRedPacket/index.vue
new file mode 100644
index 00000000..c1c077b9
--- /dev/null
+++ b/packages/user/myRedPacket/index.vue
@@ -0,0 +1,106 @@
+<template>
+    <view class="container">
+        <!-- 顶部统计 -->
+        <view class="stats">
+            <view class="stat-item">
+                <view class="stat-label">红包数（个）</view>
+                <view class="stat-value">1000,000</view>
+            </view>
+            <view class="stat-item">
+                <view class="stat-label">红包金额（元）</view>
+                <view class="stat-value">1000,000</view>
+            </view>
+        </view>
+        
+        <!-- 分类标签 -->
+        <view class="tabs">
+            <view 
+                v-for="(tab, index) in tabList" 
+                :key="index"
+                :class="['tab', { active: currentTab === index }]"
+                @click="switchTab(index)"
+            >
+                {{ tab }}
+            </view>
+        </view>
+        
+        <!-- 红包列表 -->
+        <view class="content">
+            <view v-for="(item, index) in redPacketList" :key="index">
+                <view class="item">
+                    <view class="item_left">
+                        <view class="price">￥{{ item.yuan }}</view>
+                        <view v-if="item.manjian" class="manjian">{{ item.manjian }}</view>
+                    </view>
+                    <view class="item_center">
+                        <view class="title">{{ item.name }}</view>
+                        <view class="time">{{ item.time }}</view>
+                        <view class="desc">{{ item.shiyong }}</view>
+                    </view>
+                    <view class="item_right">
+                        <view class="status" @click="useRedPacket(item)">{{ item.status }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
+export default {
+    data() {
+        return {
+            currentTab: 0, // 当前选中的标签索引
+            tabList: ['全部', '平台', '地区', '店铺', '历史记录'], // 标签列表
+            redPacketList: [
+                {
+                    name: '新用户注册红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '全平台使用',
+                    status: '去使用',
+                    yuan: 5.32
+                },
+                {
+                    name: '满减红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '全平台使用',
+                    status: '去使用',
+                    yuan: 5,
+                    manjian: '满0元可用'
+                },
+                {
+                    name: '固定红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '限改店铺指定商品使用',
+                    status: '去使用',
+                    yuan: 5
+                },
+                {
+                    name: '固定红包',
+                    time: '2085.07.77 00:27到期',
+                    shiyong: '限广州地区使用',
+                    status: '去使用',
+                    yuan: 5
+                }
+            ]
+        }
+    },
+    methods: {
+        useRedPacket(item) {
+            console.log('使用红包:', item);
+        },
+        switchTab(index) {
+            this.currentTab = index;
+            console.log('选中的标签:', this.tabList[index]);
+            if(this.tabList[index] == '历史记录'){
+                NavgateTo('/packages/user/history/index');
+            }
+        }
+    }
+}
+</script>
+
+<style>
+@import url("./index.css");
+</style>
\ No newline at end of file
diff --git a/packages/user/redPacket/index.css b/packages/user/redPacket/index.css
new file mode 100644
index 00000000..f7b44be3
--- /dev/null
+++ b/packages/user/redPacket/index.css
@@ -0,0 +1,182 @@
+.container {
+    padding: 20rpx;
+}
+
+.item {
+    padding: 20rpx;
+    height: 130rpx;
+    margin-bottom: 30rpx;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 3rpx solid #ff775a;
+    background: linear-gradient(90deg, #ff3c11 0%, #fe8c72 100%);
+}
+
+.item_left {
+    font-size: 40rpx;
+    font-weight: bold;
+    width: 170rpx;
+    height: 170rpx;
+    line-height: 170rpx;
+    padding-left: 30rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx 80rpx 80rpx 20rpx;
+    border: 3rpx solid #ff775a;
+    position: relative;
+    left: -22rpx;
+}
+
+.item_center {
+    flex: 1;
+    margin: 0 20rpx;
+}
+
+.title {
+    font-size: 32rpx;
+    color: white;
+    font-weight: bold;
+}
+
+.time {
+    color: #ffffff9a;
+    font-size: 24rpx;
+    margin: 10rpx 0;
+}
+
+.desc {
+    color: #fff;
+    font-size: 26rpx;
+}
+
+.item_right {
+    margin-right: 20rpx;
+}
+
+.status {
+    width: 120rpx;
+    padding: 10rpx;
+    text-align: center;
+    background-color: #fff;
+    border-radius: 50rpx;
+    color: #ff7557;
+    font-size: 24rpx;
+    font-weight: bold;
+}
+
+.status2 {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 150rpx;
+    height: 120rpx;
+    overflow: hidden;
+    transform: rotate(0deg);
+}
+
+.status2::after {
+    content: attr(data-status);
+    position: absolute;
+    top: 10rpx;
+    right: -50rpx;
+    width: 180rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    text-align: center;
+    color: #921d0c;
+    font-size: 24rpx;
+    font-weight: bold;
+    transform: rotate(30deg);
+    border-radius: 0 20rpx 0 0;
+    background: linear-gradient(90deg, #f0dfa5 0%, #c6a437 100%);
+    box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.item {
+    position: relative;
+    overflow: visible;
+}
+
+.bottom {
+    position: fixed;
+    bottom: 0rpx;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    color: #0079fe;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: bold;
+    background-color: #fff;
+    padding: 20rpx 0 40rpx 0;
+}
+
+
+/* 弹窗样式 */
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup-content {
+    width: 600rpx;
+    padding: 60rpx 40rpx;
+    background-color: white;
+    border-radius: 20rpx;
+    text-align: center;
+    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
+}
+
+.popup-icon {
+    width: 160rpx;
+    height: 160rpx;
+    background-color: #e8fdf2;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto 40rpx;
+}
+
+.checkmark {
+    width: 30rpx;
+    height: 70rpx;
+    border-right: 20rpx solid #52c41a;
+    border-bottom: 20rpx solid #52c41a;
+    transform: rotate(45deg);
+}
+
+.popup-title {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #262626;
+    margin-bottom: 20rpx;
+}
+
+.popup-desc {
+    font-size: 28rpx;
+    color: #8c8c8c;
+    margin-bottom: 50rpx;
+    line-height: 40rpx;
+}
+
+.popup-btn {
+    width: 100%;
+    height: 90rpx;
+    background-color: #ff4d4f;
+    color: white;
+    border: none;
+    border-radius: 45rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/packages/user/redPacket/index.vue b/packages/user/redPacket/index.vue
new file mode 100644
index 00000000..5cd320ed
--- /dev/null
+++ b/packages/user/redPacket/index.vue
@@ -0,0 +1,85 @@
+<template>
+    <view class="container">
+        <view class="content">
+            <view v-for="(item, index) in redPacketList" :key="index">
+                <view class="item">
+                    <view class="item_left">￥{{ item.yuan }}</view>
+                    <view class="item_center">
+                        <view class="title">{{ item.name }}</view>
+                        <view class="time">{{ item.time }}</view>
+                        <view class="desc">{{ item.shiyong }}</view>
+                    </view>
+                    <view class="item_right">
+                        <view class="status" @click="showPopup(item)">{{ item.status }}</view>
+                    </view>
+                    <view class="status2" :data-status="item.status"></view>
+                </view>
+            </view>
+        </view>
+        <view class="bottom">
+            <view @click="goRedPacket()">我的权益</view>
+        </view>
+        
+        <!-- 弹窗 -->
+        <view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
+            <view class="popup-content" @click.stop>
+                <view class="popup-icon">
+                    <view class="checkmark"></view>
+                </view>
+                <view class="popup-title">领取成功!</view>
+                <view class="popup-desc">已存入您的账户</view>
+                <button class="popup-btn" @click="hidePopup">确定</button>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
+export default {
+    data() {
+        return {
+            redPacketList: [
+                {
+                    name: '100元红包',
+                    time: '2023-01-01 10:00:00',
+                    shiyong: '用于购买商品',
+                    status: '待领取',
+                    yuan: 100
+                },
+                {
+                    name: '50元红包',
+                    time: '2023-01-02 12:00:00',
+                    shiyong: '用于购买商品',
+                    status: '待领取',
+                    yuan: 50
+                },
+                {
+                    name: '20元红包',
+                    time: '2023-01-03 14:00:00',
+                    shiyong: '用于购买商品',
+                    status: '已使用',
+                    yuan: 20
+                }
+            ],
+            popupVisible: false,
+            currentItem: null
+        }
+    },
+    methods: {
+        showPopup(item) {
+            this.currentItem = item;
+            this.popupVisible = true;
+        },
+        hidePopup() {
+            this.popupVisible = false;
+            this.currentItem = null;
+        },
+        goRedPacket() {
+            NavgateTo('/packages/user/myRedPacket/index');
+        }
+    }
+}
+</script>
+<style>
+@import url("./index.css");
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index bdfcfa4e..d6701591 100644
--- a/pages.json
+++ b/pages.json
@@ -499,6 +499,27 @@
 						"navigationBarBackgroundColor": "#fff",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "redPacket/index",
+					"style": {
+						"navigationBarTitleText": "红包中心",
+						"navigationBarBackgroundColor": "#fff"
+					}
+				},
+				{
+					"path": "myRedPacket/index",
+					"style": {
+						"navigationBarTitleText": "我的权益",
+						"navigationBarBackgroundColor": "#fff"
+					}
+				},
+				{
+					"path": "history/index",
+					"style": {
+						"navigationBarTitleText": "历史记录",
+						"navigationBarBackgroundColor": "#fff"
+					}
 				}
 			]
 		},
diff --git a/pages/user/index.vue b/pages/user/index.vue
index 5c986257..032ec83e 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -40,9 +40,9 @@
 				<view>{{ userInfo.property_housing_fund }}元</view>
 				<view>物业费</view>
 			</view>
-			<view class="section_label" @click="goWallet(3)">
+			<view class="section_label" @click="goRedPacket()">
 				<view>0元</view>
-				<view>红包卡券</view>
+				<view>红包中心</view>
 			</view>
 		</view>
 
@@ -274,6 +274,9 @@ export default {
 		goWallet(type, item) {
 			NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
 		},
+		goRedPacket() {
+			NavgateTo('/packages/user/redPacket/index');
+		},
 		// 头像点击
 		toLogin() {
 			NavgateTo('/packages/user/replenishInfo/index');