租赁记录

src/pagesUser/poleStorageLog/index.scss

@@ -1,5 +1,119 @@
 .pole-storage-log-page {
   min-height: 100vh;
   background-color: #F2F3F5;
-  padding: 30px;
+
+  // Tab 容器
+  .tab-container {
+    background-color: #FFFFFF;
+
+    :global {
+      // Tab 导航容器
+      .taroify-tabs__nav {
+        background-color: #FFFFFF !important;
+      }
+
+      // 未选中 Tab
+      .taroify-tabs__tab {
+        font-size: 33px !important;
+        color: #8B8B8B !important;
+      }
+
+      // 选中 Tab
+      .taroify-tabs__tab--active {
+        color: #333333 !important;
+      }
+
+      // 选中指示线
+      .taroify-tabs__line {
+        background-color: #03C175 !important;
+      }
+    }
+  }
+
+  // 内容区域
+  .content-area {
+    padding: 30px;
+  }
+
+  // 记录列表
+  .log-list {
+    // 记录卡片
+    .log-card {
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      // 标题行
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+
+        .cabinet-name {
+          font-size: 33px;
+          color: #1A1A1A;
+          font-weight: 500;
+        }
+
+        .status {
+          font-size: 28px;
+          color: #8B8B8B;
+        }
+      }
+
+      // 信息列表
+      .info-list {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        .info-row {
+          display: flex;
+          align-items: flex-start;
+
+          .info-label {
+            width: 180px;
+            font-size: 28px;
+            color: #333333;
+            flex-shrink: 0;
+          }
+
+          .info-value {
+            flex: 1;
+            margin-left: 30px;
+            font-size: 28px;
+            color: #595959;
+            text-align: left;
+            word-break: break-all;
+          }
+        }
+      }
+    }
+
+    // 存取记录卡片特殊样式
+    .access-card {
+      // 标题行（无状态标签）
+      .card-header {
+        margin-bottom: 0;
+      }
+
+      // 虚线分隔
+      .divider {
+        height: 1PX;
+        border-bottom: 1PX dashed #D3D8DE;
+        margin: 30px 0;
+      }
+
+      // 信息列表（间距更小）
+      .info-list {
+        gap: 20px;
+      }
+    }
+  }
 }

src/pagesUser/poleStorageLog/index.tsx

@@ -2,17 +2,272 @@
  * 存杆柜记录
  */
 import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Tabs } from '@taroify/core'
+import EmptyData from '@/components/EmptyData'
 import './index.scss'
 
+// 租赁记录数据接口
+interface RentalLogItem {
+  id: string
+  cabinetName: string        // 柜子名称
+  status: string              // 状态：已完成
+  storeInfo: string           // 门店信息
+  storeAddress: string        // 门店位置
+  orderNo: string             // 订单编号
+  paymentTime: string         // 付款时间
+  type: 'rental' | 'renew' | 'return'  // 类型：起租、续租、退租
+  
+  // 起租/续租字段
+  startTime?: string          // 开始时间
+  endTime?: string            // 截止时间
+  deposit?: string            // 押金
+  prepaidRent?: string        // 预付租金
+  
+  // 退租字段
+  returnStartTime?: string    // 退租开始时间
+  returnEndTime?: string      // 退租截止时间
+  returnDeposit?: string      // 退还押金
+  returnRent?: string         // 退还租金
+}
+
+// 存取记录数据接口
+interface AccessLogItem {
+  id: string
+  cabinetName: string        // 柜子名称
+  operationType: 'open' | 'close'  // 操作类型：开门、关门
+  operationTime: string      // 操作时间
+}
+
 const PoleStorageLog = () => {
+  const [activeTab, setActiveTab] = useState(0) // 0: 租赁记录, 1: 存取记录
+
+  // 模拟租赁记录数据
+  const [rentalLogs] = useState<RentalLogItem[]>([
+    {
+      id: '1',
+      cabinetName: 'A02号柜',
+      status: '已完成',
+      storeInfo: '北京黑八大师联盟球厅店',
+      storeAddress: 'XXX市XXX区XXX街道XXXXXX路XXXXXX',
+      startTime: '2025-01-01',
+      endTime: '2025-01-10',
+      deposit: '100.00元',
+      prepaidRent: '10.00元',
+      orderNo: 'jfkskjfksdjfl',
+      paymentTime: '2025-01-01 00:00:00',
+      type: 'rental'
+    },
+    {
+      id: '2',
+      cabinetName: 'A02号柜',
+      status: '已完成',
+      storeInfo: '北京黑八大师联盟球厅店',
+      storeAddress: 'XXX市XXX区XXX街道XXXXXX路XXXXXX',
+      startTime: '2025-01-11',
+      endTime: '2025-01-30',
+      deposit: '0.00元',
+      prepaidRent: '20.00元',
+      orderNo: 'jfkskjfksdjflsdfsdfdfs',
+      paymentTime: '2025-01-11 00:00:00',
+      type: 'renew'
+    },
+    {
+      id: '3',
+      cabinetName: 'A02号柜',
+      status: '已完成',
+      storeInfo: '北京黑八大师联盟球厅店',
+      storeAddress: 'XXX市XXX区XXX街道XXXXXX路XXXXXX',
+      returnStartTime: '2025-01-21',
+      returnEndTime: '2025-01-30',
+      returnDeposit: '100.00元',
+      returnRent: '10.00元',
+      orderNo: 'jfkskjfksdjflsdfsdfdsdfds',
+      paymentTime: '2025-01-21 00:00:00',
+      type: 'return'
+    }
+  ])
+
+  // 模拟存取记录数据
+  const [accessLogs] = useState<AccessLogItem[]>([
+    {
+      id: '1',
+      cabinetName: 'A02号柜',
+      operationType: 'open',
+      operationTime: '2025-01-03 00:00:00'
+    },
+    {
+      id: '2',
+      cabinetName: 'A02号柜',
+      operationType: 'close',
+      operationTime: '2025-01-03 02:30:00'
+    },
+    {
+      id: '3',
+      cabinetName: 'A02号柜',
+      operationType: 'open',
+      operationTime: '2025-01-05 10:00:00'
+    },
+    {
+      id: '4',
+      cabinetName: 'A02号柜',
+      operationType: 'close',
+      operationTime: '2025-01-05 12:15:00'
+    }
+  ])
+
   useLoad(() => {
     console.log('存杆柜记录页面加载')
   })
 
+  // 获取类型文本
+  const getTypeText = (type: string) => {
+    if (type === 'rental') return '起租'
+    if (type === 'renew') return '续租'
+    if (type === 'return') return '退租'
+    return ''
+  }
+
+  // 获取操作类型文本
+  const getOperationTypeText = (type: string) => {
+    return type === 'open' ? '开门' : '关门'
+  }
+
+  // 渲染租赁记录卡片
+  const renderRentalCard = (log: RentalLogItem) => (
+    <View key={log.id} className="log-card">
+      {/* 标题行 */}
+      <View className="card-header">
+        <Text className="cabinet-name">{log.cabinetName}</Text>
+        <Text className="status">{log.status}</Text>
+      </View>
+
+      {/* 信息列表 */}
+      <View className="info-list">
+        <View className="info-row">
+          <Text className="info-label">门店信息</Text>
+          <Text className="info-value">{log.storeInfo}</Text>
+        </View>
+        <View className="info-row">
+          <Text className="info-label">门店位置</Text>
+          <Text className="info-value">{log.storeAddress}</Text>
+        </View>
+
+        {/* 根据类型显示不同字段 */}
+        {log.type === 'return' ? (
+          <>
+            <View className="info-row">
+              <Text className="info-label">退租开始时间</Text>
+              <Text className="info-value">{log.returnStartTime}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">退租截止时间</Text>
+              <Text className="info-value">{log.returnEndTime}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">退还押金</Text>
+              <Text className="info-value">{log.returnDeposit}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">退还租金</Text>
+              <Text className="info-value">{log.returnRent}</Text>
+            </View>
+          </>
+        ) : (
+          <>
+            <View className="info-row">
+              <Text className="info-label">{log.type === 'renew' ? '续租开始时间' : '租赁开始时间'}</Text>
+              <Text className="info-value">{log.startTime}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">{log.type === 'renew' ? '续租截止时间' : '租赁截止时间'}</Text>
+              <Text className="info-value">{log.endTime}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">押金</Text>
+              <Text className="info-value">{log.deposit}</Text>
+            </View>
+            <View className="info-row">
+              <Text className="info-label">预付租金</Text>
+              <Text className="info-value">{log.prepaidRent}</Text>
+            </View>
+          </>
+        )}
+
+        <View className="info-row">
+          <Text className="info-label">订单编号</Text>
+          <Text className="info-value">{log.orderNo}</Text>
+        </View>
+        <View className="info-row">
+          <Text className="info-label">付款时间</Text>
+          <Text className="info-value">{log.paymentTime}</Text>
+        </View>
+        <View className="info-row">
+          <Text className="info-label">类型</Text>
+          <Text className="info-value">{getTypeText(log.type)}</Text>
+        </View>
+      </View>
+    </View>
+  )
+
+  // 渲染存取记录卡片
+  const renderAccessCard = (log: AccessLogItem) => (
+    <View key={log.id} className="log-card access-card">
+      {/* 标题行 */}
+      <View className="card-header">
+        <Text className="cabinet-name">{log.cabinetName}</Text>
+      </View>
+
+      {/* 分隔线 */}
+      <View className="divider" />
+
+      {/* 信息列表 */}
+      <View className="info-list">
+        <View className="info-row">
+          <Text className="info-label">操作类型</Text>
+          <Text className="info-value">{getOperationTypeText(log.operationType)}</Text>
+        </View>
+        <View className="info-row">
+          <Text className="info-label">操作时间</Text>
+          <Text className="info-value">{log.operationTime}</Text>
+        </View>
+      </View>
+    </View>
+  )
+
   return (
     <View className="pole-storage-log-page">
-      <Text>存杆柜记录</Text>
+      {/* Tab 导航 */}
+      <View className="tab-container">
+        <Tabs value={activeTab} onChange={setActiveTab}>
+          <Tabs.TabPane title="租赁记录" />
+          <Tabs.TabPane title="存取记录" />
+        </Tabs>
+      </View>
+
+      {/* 内容区域 */}
+      <View className="content-area">
+        {activeTab === 0 ? (
+          // 租赁记录
+          rentalLogs.length === 0 ? (
+            <EmptyData />
+          ) : (
+            <View className="log-list">
+              {rentalLogs.map(log => renderRentalCard(log))}
+            </View>
+          )
+        ) : (
+          // 存取记录
+          accessLogs.length === 0 ? (
+            <EmptyData />
+          ) : (
+            <View className="log-list">
+              {accessLogs.map(log => renderAccessCard(log))}
+            </View>
+          )
+        )}
+      </View>
     </View>
   )
 }