diff --git a/src/pagesUser/poleStorageLog/index.scss b/src/pagesUser/poleStorageLog/index.scss index 890699b..d5b6101 100644 --- a/src/pagesUser/poleStorageLog/index.scss +++ b/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; + } + } + } } diff --git a/src/pagesUser/poleStorageLog/index.tsx b/src/pagesUser/poleStorageLog/index.tsx index a315eee..7c9869a 100644 --- a/src/pagesUser/poleStorageLog/index.tsx +++ b/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([ + { + 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([ + { + 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) => ( + + {/* 标题行 */} + + {log.cabinetName} + {log.status} + + + {/* 信息列表 */} + + + 门店信息 + {log.storeInfo} + + + 门店位置 + {log.storeAddress} + + + {/* 根据类型显示不同字段 */} + {log.type === 'return' ? ( + <> + + 退租开始时间 + {log.returnStartTime} + + + 退租截止时间 + {log.returnEndTime} + + + 退还押金 + {log.returnDeposit} + + + 退还租金 + {log.returnRent} + + + ) : ( + <> + + {log.type === 'renew' ? '续租开始时间' : '租赁开始时间'} + {log.startTime} + + + {log.type === 'renew' ? '续租截止时间' : '租赁截止时间'} + {log.endTime} + + + 押金 + {log.deposit} + + + 预付租金 + {log.prepaidRent} + + + )} + + + 订单编号 + {log.orderNo} + + + 付款时间 + {log.paymentTime} + + + 类型 + {getTypeText(log.type)} + + + + ) + + // 渲染存取记录卡片 + const renderAccessCard = (log: AccessLogItem) => ( + + {/* 标题行 */} + + {log.cabinetName} + + + {/* 分隔线 */} + + + {/* 信息列表 */} + + + 操作类型 + {getOperationTypeText(log.operationType)} + + + 操作时间 + {log.operationTime} + + + + ) + return ( - 存杆柜记录 + {/* Tab 导航 */} + + + + + + + + {/* 内容区域 */} + + {activeTab === 0 ? ( + // 租赁记录 + rentalLogs.length === 0 ? ( + + ) : ( + + {rentalLogs.map(log => renderRentalCard(log))} + + ) + ) : ( + // 存取记录 + accessLogs.length === 0 ? ( + + ) : ( + + {accessLogs.map(log => renderAccessCard(log))} + + ) + )} + ) }