收入流水

src/pages/mine/wallet/statement.vue

@@ -2,15 +2,28 @@
 	<view class="statement-view">
 		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="收入流水" titleColor="#333333"
 			:border-bottom="false"></u-navbar>
+		<view class="statement-conten">
 			<view class="statement-content-view">
 				<view class="head-view">
 					<view class="head-top-view">
-						
+						<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+						    <view class="date-input">
+								<text class="date-text">{{date}}</text>
+								<u-icon name="arrow-down"></u-icon>
+							</view>
+						</picker>
 					</view>
 					<view class="head-bottom-view">
-						<view v-for="(value, key) in items" :key="key">
+						<view v-for="(value, key) in items" :key="key" class="head-amount-view">
 							<view><text>{{value}}</text></view>
-							<view><text>{{info[key]}}</text></view>
+							<view class="head-amount-text"><text>{{info[key]}}</text></view>
+						</view>
+					</view>
+				</view>
+				<image :src="liushuibeijingImage" class="head-back-image" mode="widthFix"></image>
+				<view class="list-view">
+					<view v-for="(item, index) in data.statementList" :key="index">
+						<Statement :data="item"></Statement>
 					</view>
 				</view>
 			</view>
@@ -19,24 +32,58 @@
 </template>
 
 <script>
+	import Statement from "@/components/mine/statement.vue"
 	export default {
+		components: {
+			Statement
+		},
 		data() {
 			return {
-
+				data: {
+					expectedAmount: 0,
+					settledAmount: 0,
+					statementList: []
+				},
+				date: '2021-05'
 			}
 		},
 		computed: {
 			info() {
-				return {...this.data, number: this.data.statementList.length}
+				return {
+					...this.data,
+					number: this.data.statementList.length
+				}
 			},
 			items() {
 				return {
-					paymentTime: '预结（元）',
-					payableRecordStatusText: '已确认（元）',
+					expectedAmount: '预结（元）',
+					settledAmount: '已确认（元）',
 					number: '订单数（单）',
 				}
 
+			},
+			liushuibeijingImage() {
+				return this.imageUrl + 'liushuibeijing.png'
+			},
+			imageUrl() {
+				return process.uniEnv.qn_base_url
+			},
+		},
+		created() {
+			var item = {
+				paymentTime: new Date().getTime(),
+				payableRecordStatusText: '预结',
+				orderNumber: 'EE999777',
+				orderServiceType: '安装',
+				inGuaranteePeriod: false, // true 保内；false 保外
+				payableAmount: 9899
 			}
+			this.data.statementList = [item, item, item, item, item]
+		},
+		methods: {
+			bindDateChange: function(e) {
+			            this.date = e.target.value
+			},
 		}
 	}
 </script>
@@ -47,7 +94,63 @@
 		flex-direction: column;
 		height: 100vh;
 		background-color: #F4F5F7;
+		.statement-conten {
+		overflow: auto;
+
+		.statement-content-view {
+			margin: 10rpx 30rpx 30rpx 30rpx;
+			border-radius: 12rpx;
+			position: relative;
+			
+			border-radius: 12rpx;
+			background-color: #FFFFFF;
+				.head-back-image {
+					position: relative;
+					width: 100%;
+					z-index: 0;
+				}
+
+			.head-view {
+				z-index: 1;
+				padding: 30rpx;
+				color: #FFFFFF;
+				
+				position: absolute;
+					width: 100%;
+
+				.head-top-view {
+					margin-top: 10rpx;
+					margin-bottom: 50rpx;
+					.date-input {
+						.date-text {
+							padding-right: 10rpx;
+							font-size: 28rpx;
+						}
+					}
+				}
+
+				.head-bottom-view {
+					
+					display: flex;
+					align-items: flex-start;
+					justify-content: space-between;
+
+					.head-amount-view {
+						font-size: 24rpx;
 
-		.statement-content-view {}
+						.head-amount-text {
+							font-size: 40rpx;
+							margin-top: 10rpx;
+						}
+					}
+				}
+			}
+			.list-view {
+				position: relative;
+				z-index: 1;
+				padding-bottom: 20rpx;
+			}
+		}
+		}
 	}
 </style>