1.添加流水页面

pages.json

@@ -1,5 +1,18 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+		    "path" : "pages/user/runningWater/runningWater",
+		    "style" :                                                                                    
+		    {
+		        "enablePullDownRefresh": false,
+				"navigationBarTitleText": "",
+				"backgroundTextStyle": "light",
+				"navigationBarBackgroundColor": "#f06c7a",
+				"backgroundColorTop": "#f06c7a",
+				"navigationBarTextStyle": "white"
+		    }
+		    
+		},
 		{
 			"path": "pages/tabBar/home/home",
 			"style": {

pages/user/runningWater/runningWater.vue

@@ -0,0 +1,107 @@
+<template>
+	<view>
+		<view class="backcorf06 width100 height60 fcorfff fotct font24 fontspec10">流水明细</view>
+		<view class="width90 mart20 height60">
+			<picker class="flleft" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
+				<view class="uni-input datetim">{{date}}<i class="down"></i></view>
+			</picker>
+			<view class="rigMart flright">
+				<view class="width100 font14 fcor999 fontspec">
+					订单数量: 7
+				</view>
+				<view class="width100 font14 fcor999 fontspec">
+					支出: -8233.00
+				</view>
+			</view>
+		</view>
+
+		<view class="width100 height90 backcorfff" style="margin-top: 1px;">
+			<view class="width70 flleft">
+				<view class="font16 fcor333 fontwig6 width100 paddleft10 mart10">2021-01-03 22:38</view>
+				<view class="font13 fcor999 width100 paddleft10 mart10">支出-加油-重庆解放碑站点</view>
+				<view class="font12 fcor999 width100 paddleft10 mart5">订单编号 : 434243232234</view>
+			</view>
+			<view class="width30 flright">
+				<view class="fotct pricew fcoreb5 fontwig6 font14">1500.00元</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			const currentDate = this.getDate({
+				format: true
+			})
+			return {
+				date: currentDate,
+			}
+		},
+		computed: {
+			startDate() {
+				return this.getDate('start');
+			},
+			endDate() {
+				return this.getDate('end');
+			}
+		},
+		methods: {
+			bindDateChange: function(e) {
+				this.date = e.target.value;
+			},
+			getDate(type) {
+				const date = new Date();
+				let year = date.getFullYear();
+				let month = date.getMonth() + 1;
+				let day = date.getDate();
+
+				if (type === 'start') {
+					year = year - 60;
+				} else if (type === 'end') {
+					year = year + 2;
+				}
+				month = month > 9 ? month : '0' + month;;
+				day = day > 9 ? day : '0' + day;
+				return `${year}-${month}-${day}`;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f6f6f6;
+	}
+
+
+	.datetim {
+		width: 130px;
+		height: 30px;
+		line-height: 30px;
+		background-color: #ffffff;
+		text-align: center;
+		border-radius: 15px;
+	}
+
+	i {
+		border: solid #666666;
+		border-width: 0 2px 2px 0;
+		display: inline-block;
+		padding: 4px;
+		margin-left: 10px;
+		vertical-align: 3px;
+	}
+
+	.down {
+		-webkit-transform: rotate(45deg);
+	}
+
+	.pricew {
+		line-height: 90px;
+	}
+
+	.rigMart {
+		width: 250rpx;
+	}
+</style>