记录变化

ghsApp/src/admin/custom/rechargeChange.vue

@@ -1,28 +1,48 @@
 <template>
-<view class="app-content">
+	<view class="page-container">
 		<block v-if="!$util.isEmpty(list.data)">
-			<t-table :headerBackgroundColor="'#F0F2F6'">
-				<t-tr header>
-					<t-th>日期</t-th>
-					<t-th>场景</t-th>
-					<t-th>人员</t-th>
-					<t-th>状态</t-th>
-					<t-th>金额</t-th>
-					<t-th>充后余额</t-th>
-					<t-th>备注</t-th>
-				</t-tr>
-				<view v-for="(item, index) in list.data" :key="index" @click="goDetail(item)">
-					<t-tr>
-						<t-td align="center" color="info"><view >{{ item.addTime.substr(5,11) }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.onlinePay == 2 ? '线上' : '线下'}}<view>{{ item.payWay==0?'微信':item.payWay == 1 ?'支付宝':''}}</view></view></t-td>
-						<t-td align="center" color="info"><view >{{ item.staffName }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.payStatus == 1 ? '已付款' : '待付款' }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.amount }}{{item.rechargeType==1?'返':''}}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.payStatus == 1 ? parseFloat(item.balance):'' }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.remark }}</view></t-td>
-					</t-tr>
+			<view class="table-wrapper">
+				<!-- 表头 -->
+				<view class="table-header">
+					<view class="th th-date">日期</view>
+					<view class="th th-scene">场景</view>
+					<view class="th th-staff">人员</view>
+					<view class="th th-amount">金额</view>
+					<view class="th th-balance">余额</view>
+					<view class="th th-code">支付单号</view>
 				</view>
-			</t-table>
+				
+				<!-- 表体 -->
+				<view class="table-body">
+					<view 
+						v-for="(item, index) in list.data" 
+						:key="index" 
+						class="table-row"
+						@click="goDetail(item)"
+					>
+						<view class="td td-date">{{ item.addTime.substr(5,11) }}</view>
+						<view class="td td-scene">
+							<view class="scene-type">{{ item.onlinePay == 2 ? '线上' : '线下' }}</view>
+							<view class="scene-way">{{ item.payWay==0?'微信':item.payWay == 1 ?'支付宝':'' }}</view>
+							<view class="scene-status" :class="item.payStatus == 1 ? 'status-paid' : 'status-unpaid'">
+								{{ item.payStatus == 1 ? '已付款' : '待付款' }}
+							</view>
+						</view>
+						<view class="td td-staff">{{ item.staffName }}</view>
+						<view class="td td-amount" :class="item.io == 1 ? 'amount-in' : 'amount-out'">
+							{{ item.amount }}{{item.rechargeType==1?'返':''}}
+						</view>
+						<view class="td td-balance">
+							<view v-if="item.payStatus == 1">{{ parseFloat(item.balance) }}</view>
+							<view class="balance-remark" v-if="item.remark">{{ item.remark }}</view>
+						</view>
+						<view class="td td-code">
+							<view v-if="item.payReturnCode" class="code-text">{{ item.payReturnCode }}</view>
+							<view v-else class="code-empty">-</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</block>
 		<block v-else>
 			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
@@ -78,4 +98,181 @@ export default {
 	}
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.page-container {
+	background-color: #fff;
+}
+
+.table-wrapper {
+	background-color: #fff;
+}
+
+// 表头
+.table-header {
+	display: flex;
+	background-color: #F0F2F6;
+	border-bottom: 2rpx solid #e8e8e8;
+	
+	.th {
+		padding: 24rpx 10rpx;
+		font-size: 26rpx;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		border-right: 1rpx solid #e8e8e8;
+		
+		&:last-child {
+			border-right: none;
+		}
+	}
+	
+	.th-date {
+		width: 140rpx;
+	}
+	
+	.th-scene {
+		width: 150rpx;
+	}
+	
+	.th-staff {
+		width: 120rpx;
+	}
+	
+	.th-amount {
+		width: 140rpx;
+	}
+	
+	.th-balance {
+		flex: 1;
+		min-width: 120rpx;
+	}
+	
+	.th-code {
+		width: 160rpx;
+	}
+}
+
+// 表体
+.table-body {
+	.table-row {
+		display: flex;
+		border-bottom: 1rpx solid #f0f0f0;
+		transition: background-color 0.2s;
+		
+		&:active {
+			background-color: #fafafa;
+		}
+		
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+	
+	.td {
+		padding: 24rpx 10rpx;
+		font-size: 26rpx;
+		color: #666;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border-right: 1rpx solid #f5f5f5;
+		
+		&:last-child {
+			border-right: none;
+		}
+	}
+	
+	.td-date {
+		width: 140rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: center;
+	}
+	
+	.td-scene {
+		width: 150rpx;
+		align-items: center;
+		
+		.scene-type {
+			font-size: 26rpx;
+			color: #333;
+			margin-bottom: 4rpx;
+		}
+		
+		.scene-way {
+			font-size: 24rpx;
+			color: #666;
+			margin-bottom: 6rpx;
+		}
+		
+		.scene-status {
+			font-size: 22rpx;
+			padding: 4rpx 12rpx;
+			border-radius: 4rpx;
+			
+			&.status-paid {
+				color: #52c41a;
+				background-color: #f6ffed;
+			}
+			
+			&.status-unpaid {
+				color: #faad14;
+				background-color: #fffbe6;
+			}
+		}
+	}
+	
+	.td-staff {
+		width: 120rpx;
+		font-size: 26rpx;
+		color: #333;
+		text-align: center;
+	}
+	
+	.td-amount {
+		width: 140rpx;
+		font-size: 24rpx;
+		font-weight: bold;
+		
+		&.amount-in {
+			color: #52c41a;
+		}
+		
+		&.amount-out {
+			color: #ff4d4f;
+		}
+	}
+	
+	.td-balance {
+		flex: 1;
+		min-width: 120rpx;
+		font-size: 26rpx;
+		color: #333;
+		
+		.balance-remark {
+			font-size: 22rpx;
+			color: #999;
+			margin-top: 6rpx;
+			text-align: center;
+		}
+	}
+	
+	.td-code {
+		width: 160rpx;
+		
+		.code-text {
+			font-size: 22rpx;
+			color: #666;
+			word-break: break-all;
+			text-align: center;
+			line-height: 1.4;
+		}
+		
+		.code-empty {
+			font-size: 26rpx;
+			color: #ccc;
+		}
+	}
+}
+</style>