余额排版优化

hdApp/src/pagesStore/me/shopYeChange.vue

@@ -1,54 +1,79 @@
 <template>
-	<div>
-		<block v-if="!$util.isEmpty(list.data)">
-			<t-table :headerBackgroundColor="'#F0F2F6'">
-				<t-tr header>
-					<t-th><view style="width:150upx;">来源</view></t-th>
-					<t-th><view style="width:200upx;">事项</view></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 style="width:150upx;">
-								<view>{{ item.addTime.substr(5,11) }}</view>
-								<view>{{item.ptStyle==1?'零售':'批发'}}-{{ item.fromType ==1 ? '门店' : item.fromType == 2 ? '商城' : item.fromType ==3 ? '朋友圈' : '其它' }}</view>
+	<view class="app-content">
+		<view style="text-align:center;padding-top:20upx;margin-bottom:20upx;">
+			<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
+		</view>
+		<view class="main-view">
+			<block v-if="!$util.isEmpty(list.data)">
+				<!-- 表头 -->
+				<view class="table-header">
+					<view class="header-item source-col">来源</view>
+					<view class="header-item event-col">事项</view>
+					<view class="header-item amount-col">金额</view>
+					<view class="header-item balance-col">余额</view>
+				</view>
+				
+				<!-- 数据行 -->
+				<view class="table-body">
+					<view 
+						v-for="(item, index) in list.data" 
+						:key="index" 
+						class="table-row"
+						@click="goDetail(item)"
+					>
+						<view class="row-item source-col">
+							<view class="source-info">
+								<view class="time">{{ item.addTime.substr(5,11) }}</view>
+								<view class="type">{{item.ptStyle==1?'零售':'批发'}}-{{ item.fromType ==1 ? '门店' : item.fromType == 2 ? '商城' : item.fromType ==3 ? '朋友圈' : '其它' }}</view>
 							</view>
-						</t-td>
-						<t-td align="center" color="info"><view style="width:200upx;">{{ item.event }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ parseFloat(item.amount) }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ parseFloat(item.balance) }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ parseFloat(item.txBalance) }}</view></t-td>
-					</t-tr>
+						</view>
+						<view class="row-item event-col">
+							<view class="event-text">{{ item.event }}</view>
+						</view>
+						<view class="row-item amount-col">
+							<view class="amount-text">{{ parseFloat(item.amount) }}</view>
+						</view>
+						<view class="row-item balance-col">
+							<view class="balance-text">{{ parseFloat(item.balance) }}</view>
+						</view>
+					</view>
 				</view>
-			</t-table>
-		</block>
-		<block v-else>
-			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-		</block>
-	</div>
+			</block>
+			<block v-else>
+				<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+			</block>
+		</view>
+	</view>
 </template>
 <script>
+import DateSelect from "@/components/module/dateSelect";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { changeList } from '@/api/shop-ye-change'
 import list from '@/mixins/list'
 export default {
-	name: "cashList",
+	name: "shopYeChange",
 	components: {
-		AppWrapperEmpty
+		AppWrapperEmpty,
+		DateSelect
 	},
 	mixins:[list],
 	data() {
 		return {
+			params:{
+				searchTime:'',
+				startTime: "",
+				endTime: "",
+			}
 		};
 	},
 	methods: {
+		selectDateFn(val) {
+			this.params = {...this.params,...val}
+			this.resetList()
+			this.init()
+		},
 		async init(){
-			const res = await changeList({
-				page:this.list.page,tx:0
-			})
+			const res = await changeList({ page:this.list.page,tx:0,...this.params })
 			if (this.$util.isEmpty(res.data.list)){
 				this.completes(res)
 				return
@@ -82,4 +107,122 @@ export default {
 	
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.app-content {
+	background-color: #f5f5f5;
+	min-height: 100vh;
+}
+
+.main-view {
+	padding: 0;
+}
+
+.table-header {
+	display: flex;
+	background-color: #F0F2F6;
+	padding: 24upx 16upx;
+	margin-bottom: 2upx;
+	font-size: 32upx;
+	font-weight: 600;
+	color: #000;
+}
+
+.table-body {
+	background-color: #fff;
+	overflow: hidden;
+}
+
+.table-row {
+	display: flex;
+	padding: 24upx 16upx;
+	border-bottom: 1upx solid #f0f0f0;
+	transition: background-color 0.2s ease;
+	
+	&:last-child {
+		border-bottom: none;
+	}
+	
+	&:active {
+		background-color: #f8f9fa;
+	}
+}
+
+.header-item {
+	font-size: 32upx;
+	font-weight: 600;
+	color: #000;
+	display: flex;
+	align-items: center;
+}
+
+.header-item.amount-col {
+	justify-content: center;
+}
+
+.header-item.balance-col {
+	justify-content: flex-end;
+}
+
+.row-item {
+	font-size: 30upx;
+	color: #000;
+	display: flex;
+	align-items: center;
+}
+
+.source-col {
+	flex: 0 0 180upx;
+	justify-content: flex-start;
+}
+
+.event-col {
+	flex: 1;
+	justify-content: flex-start;
+}
+
+.amount-col {
+	flex: 0 0 100upx;
+	justify-content: center;
+}
+
+.balance-col {
+	flex: 0 0 130upx;
+	justify-content: flex-end;
+}
+
+.source-info {
+	text-align: left;
+	
+	.time {
+		font-size: 28upx;
+		color: #000;
+		margin-bottom: 8upx;
+	}
+	
+	.type {
+		font-size: 26upx;
+		color: #000;
+	}
+}
+
+.event-text {
+	font-size: 28upx;
+	color: #000;
+	text-align: left;
+	line-height: 1.4;
+}
+
+.amount-text {
+	font-size: 30upx;
+	color: #000;
+	font-weight: 500;
+}
+
+.balance-text {
+	font-size: 30upx;
+	color: #000;
+	font-weight: 500;
+	text-align: right;
+	width: 100%;
+}
+</style>