From 4362a4f4c8eb2de058b51a0e2273e4d64aa14236 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 18 Aug 2025 16:24:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                |   6 +
 pages/useList/useList.vue | 331 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 337 insertions(+)
 create mode 100644 pages/useList/useList.vue

diff --git a/pages.json b/pages.json
index 72a1a7c..7186dc8 100644
--- a/pages.json
+++ b/pages.json
@@ -39,6 +39,12 @@
         "navigationBarTitleText": "申请提现"
       }
     },
+    {
+      "path": "pages/useList/useList",
+      "style": {
+        "navigationBarTitleText": "用户列表"
+      }
+    },
     {
       "path": "pages/securityVerification/securityVerification",
       "style": {
diff --git a/pages/useList/useList.vue b/pages/useList/useList.vue
new file mode 100644
index 0000000..04cada6
--- /dev/null
+++ b/pages/useList/useList.vue
@@ -0,0 +1,331 @@
+<template>
+  <view class="page">
+    <!-- 搜索和筛选区域 -->
+    <view class="search-filter-section">
+      <view class="search-box">
+        <uni-icons size="30" type="search"></uni-icons>
+        <input v-model="searchKeyword" class="search-input" placeholder="搜索" @input="onSearch" />
+      </view>
+      <view class="filter-btn" @click="showFilter">
+        <text class="filter-text">筛选</text>
+        <text class="filter-arrow">▼</text>
+      </view>
+    </view>
+
+    <!-- 用户列表 -->
+    <view class="user-list">
+      <view v-for="(user, index) in filteredUsers" :key="user.id" class="user-card">
+        <!-- 用户基本信息 -->
+        <view class="user-info">
+          <view class="avatar-placeholder"></view>
+          <view class="user-details">
+            <text class="username">{{ user.username }}</text>
+            <view class="user-stats">
+              <text class="amount">¥ {{ user.totalAmount }}</text>
+              <text class="device-count">{{ user.deviceCount }}台</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 设备信息表格 -->
+        <view class="device-table">
+          <view class="table-header">
+            <text class="header-cell">类型</text>
+            <text class="header-cell">金额</text>
+            <text class="header-cell">租赁</text>
+            <text class="header-cell">周期</text>
+            <text class="header-cell">到期</text>
+          </view>
+
+          <view
+            v-for="(device, deviceIndex) in user.devices.slice(
+              0,
+              user.isExpanded ? user.devices.length : 1
+            )"
+            :key="deviceIndex"
+            class="table-row"
+          >
+            <text class="table-cell">{{ device.type }}</text>
+            <text class="table-cell">¥ {{ device.amount }}</text>
+            <text class="table-cell">{{ device.rentDate }}</text>
+            <text class="table-cell">{{ device.period }}</text>
+            <text class="table-cell">{{ device.expiryDate }}</text>
+          </view>
+        </view>
+
+        <!-- 展开/收起按钮 -->
+        <view class="expand-btn" @click="toggleExpand(index)">
+          <text class="expand-text">
+            {{ user.isExpanded ? '点击收起' : '点击展开' }}
+          </text>
+          <text class="expand-arrow">
+            {{ user.isExpanded ? '▲' : '▼' }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { commonEnum } from '@/enum/commonEnum.js'
+import UniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
+
+export default {
+  components: { UniIcons },
+  data() {
+    return {
+      searchKeyword: '',
+      users: [
+        {
+          id: 1,
+          username: '用户名',
+          totalAmount: '5000',
+          deviceCount: 2,
+          isExpanded: true,
+          devices: [
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+          ],
+        },
+        {
+          id: 2,
+          username: '用户名',
+          totalAmount: '5000',
+          deviceCount: 5,
+          isExpanded: false,
+          devices: [
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+            {
+              type: '密密麻麻',
+              amount: '1000',
+              rentDate: '2025.07.15 12:56:08',
+              period: '1年',
+              expiryDate: '2025.07.15 12:56:08',
+            },
+          ],
+        },
+      ],
+    }
+  },
+  computed: {
+    filteredUsers() {
+      if (!this.searchKeyword) {
+        return this.users
+      }
+      return this.users.filter(user =>
+        user.username.toLowerCase().includes(this.searchKeyword.toLowerCase())
+      )
+    },
+  },
+  methods: {
+    onSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    showFilter() {
+      // 显示筛选选项
+      uni.showToast({
+        title: '筛选功能开发中',
+        icon: 'none',
+      })
+    },
+    toggleExpand(index) {
+      this.users[index].isExpanded = !this.users[index].isExpanded
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 90vh;
+  background: #f7f7f7;
+  padding-top: 20rpx;
+  padding-bottom: 40rpx;
+}
+
+.search-filter-section {
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx 20rpx 20rpx;
+  gap: 20rpx;
+}
+
+.search-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 10rpx;
+  padding: 20rpx;
+
+  .search-input {
+    flex: 1;
+    font-size: 28rpx;
+  }
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 10rpx;
+  padding: 20rpx;
+
+  .filter-text {
+    font-size: 28rpx;
+    margin-right: 10rpx;
+  }
+
+  .filter-arrow {
+    font-size: 24rpx;
+  }
+}
+
+.user-list {
+  padding: 0 20rpx;
+}
+
+.user-card {
+  background: white;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  padding: 30rpx;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+
+.avatar-placeholder {
+  width: 80rpx;
+  height: 80rpx;
+  background: #e0e0e0;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+
+.user-details {
+  flex: 1;
+}
+
+.username {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.user-stats {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.amount {
+  font-size: 28rpx;
+  color: #ff6b35;
+  font-weight: 500;
+}
+
+.device-count {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.device-table {
+  margin-bottom: 20rpx;
+}
+
+.table-header {
+  display: flex;
+  background: #f8f8f8;
+  border-radius: 10rpx;
+  padding: 20rpx 0;
+  margin-bottom: 10rpx;
+}
+
+.header-cell {
+  flex: 1;
+  text-align: center;
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+.table-row {
+  display: flex;
+  padding: 15rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.table-cell {
+  flex: 1;
+  text-align: center;
+  font-size: 24rpx;
+  color: #333;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx 0;
+  color: #007aff;
+  font-size: 28rpx;
+
+  .expand-text {
+    margin-right: 10rpx;
+  }
+
+  .expand-arrow {
+    font-size: 24rpx;
+  }
+}
+
+view {
+  //border: red solid 1px;
+}
+</style>