我的模块页面交互调整

src/common/api/order.js

@@ -159,7 +159,7 @@ let orderApiFun = function(vm){
 	// 获取我的钱包-收入流水
 	let listStatement = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v2/statement', params);
 	// 获取我的钱包-支付单一览
-	let payableRecord = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/payable/v2/queryPayableRecord', params);
+	let payableRecord = async (params = {}) => await vm.$u.post(settle + vm.vuex_token + '/payable/v2/queryPayableRecord', params, formType);
 	// 获取我的钱包-师傅提现
 	let workerApplyPay = async (payableId) => await vm.$u.post(`/wxh-worker-rest/rest/${vm.vuex_token}/applypay/${payableId}/workerApplyPay`);
 

src/components/mine/statement.vue

@@ -63,8 +63,12 @@
 			}
 		},
 		methods:{
-			handleClick() {
-				this.$emit('click', this.data.orderId)
+			handleClick() {
+				if(this.data.status == '已确认') {
+					this.$emit('click', this.data.orderId)
+				} else {
+					this.$u.toast('需等系统确认该订单，才可查看订单详情')
+				}
 			}
 		}
 	}

src/pages/mine/wallet/index.vue

@@ -38,8 +38,8 @@
 					</view>
 				</view>
 			</view>
-			<view class="line-view"></view>
-			<view class="list-view">
+			<view class="line-view" v-if="hasList"></view>
+			<view class="list-view" v-if="hasList">
 				<view class="u-flex u-row-center" v-if="loading">
 					<u-loading color="#2272FF" :show="loading"></u-loading>
 				</view>
@@ -72,6 +72,9 @@
 			}
 		},
 		computed: {
+			hasList() {
+				return this.loading || this.statementList && this.statementList.length
+			},
 			statementContent() {
 				if(this.loading) {
 					return '当前展示最近5条，点击查看全部'

src/pages/mine/wallet/settlement.vue

@@ -21,10 +21,21 @@
 					</view>
 				</view>
 				<image :src="liushuibeijingImage" class="head-back-image" mode="widthFix"></image>
-				<view class="list-view">
-					<view v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
-						<Settlement :data="item" @click="handleClickCell"></Settlement>
+				<view class="list-view" v-if="hasInfo">
+					<view class="u-flex u-row-center" v-if="loading">
+						<u-gap height="20"></u-gap>
+						<u-loading color="#2272FF" :show="loading"></u-loading>
 					</view>
+					<view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
+						<Settlement :data="item"></Settlement>
+					</view>
+				</view>
+				<view class="list-view-empty" v-else>
+					<u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="true" duration="450">
+						<u-loading slot="loading"></u-loading>
+						<view slot="error" style="font-size: 24rpx;">加载失败</view>
+					</u-image>
+					<text class="desc">本月没有账单信息</text>
 				</view>
 			</view>
 		</view>
@@ -34,16 +45,15 @@
 <script>
 	let now = new Date(new Date().toLocaleDateString()).getTime();
 	import Settlement from "@/components/mine/settlement.vue"
+	const baseinfo = {totalAmount: 0, payableRecordExtendDtos: []}
 	export default {
 		components: {
 			Settlement
 		},
 		data() {
 			return {
-				info: {
-					totalAmount: 0,
-					payableRecordExtendDtos: []
-				},
+				loading: true,
+				info: baseinfo,
 				date: '2021-05',
 				params: {
 					payableRecordStatus: null,
@@ -59,40 +69,34 @@
 			imageUrl() {
 				return process.uniEnv.qn_base_url
 			},
+			hasInfo() {
+				return this.loading || this.info.payableRecordExtendDtos && this.info.payableRecordExtendDtos.length
+			},
+			banner() {
+				return this.imageUrl + 'Bill.png'
+			},
 		},
-		created() {
-			var item = {
-				paymentTime: new Date().getTime(),
-				payableRecordStatusText: '提现',
-				payableRecordNumber: 'EE999777',
-				settlementAmount: 9899
-			}
-			this.info.payableRecordExtendDtos = [item, item, item, item, item]
-		},
 		onLoad() {
 			this.loadPayRecord()
 		},
 		methods: {
 			async loadPayRecord() {
 				let self = this
+				self.loading = true
 				let startTime = self.moment(self.date).format('YYYY-MM-DD')
 				let endTime = self.moment(self.date).endOf('month').format('YYYY-MM-DD')
 				self.params.starDate = startTime
 				self.params.endDate = endTime
 				let res = await self.$u.api.payableRecord(self.params)
+				self.loading = false
 				if(res && res.code == 200) {
-					self.info = res.data && res.data[self.date] || self.info
+					self.info = res.data && res.data[self.date] || baseinfo
 				}
 			},
 			bindDateChange: function(e) {
 			    this.date = e.target.value
 				this.loadPayRecord()
 			},
-			handleClickCell(orderId) {
-				uni.navigateTo({
-					url: 'pages/order/detail?id=' + orderId
-				})
-			}
 		}
 	}
 </script>
@@ -139,7 +143,6 @@
 				}
 
 				.head-bottom-view {
-					
 					display: flex;
 					align-items: flex-start;
 					justify-content: space-between;
@@ -159,6 +162,25 @@
 				z-index: 1;
 				padding-bottom: 20rpx;
 			}
+			.list-view-empty {
+				position: relative;
+				z-index: 1;
+				height: 680rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-top: 142rpx;
+				.empty-image {
+					width: 376rpx;
+				}
+				.desc {
+					margin-top: 48rpx;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #666666;
+					line-height: 40px;
+				}
+			}
 		}
 		}
 	}

src/pages/mine/wallet/statement.vue

@@ -21,17 +21,30 @@
 					</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">
+				<view class="list-view"  v-if="hasInfo">
+					<view class="u-flex u-row-center" v-if="loading">
+						<u-gap height="20"></u-gap>
+						<u-loading color="#2272FF" :show="loading"></u-loading>
+					</view>
+					<view v-else v-for="(item, index) in data.statementList" :key="index">
 						<Statement :data="item" @click="handleClickCell"></Statement>
 					</view>
 				</view>
+				<view class="list-view-empty" v-else>
+					<u-image class="empty-image" :src="banner" width="374" height="246" mode="widthFix" :fade="true" duration="450">
+						<u-loading slot="loading"></u-loading>
+						<view slot="error" style="font-size: 24rpx;">加载失败</view>
+					</u-image>
+					<text class="desc">本月没有流水信息</text>
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	let now = new Date(new Date().toLocaleDateString()).getTime();
+	const baseinfo = {expectedAmount: 0, settledAmount: 0, statementList: []}
 	import Statement from "@/components/mine/statement.vue"
 	export default {
 		components: {
@@ -44,7 +57,12 @@
 					settledAmount: 0,
 					statementList: []
 				},
-				date: '2021-05'
+				date: '2021-05',
+				params: {
+					starDate: null,
+					endDate: null,
+				},
+				loading: true,
 			}
 		},
 		computed: {
@@ -68,30 +86,43 @@
 			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]
+			banner() {
+				return this.imageUrl + 'Bill.png'
+			},
+			hasInfo() {
+				return this.loading || this.data.statementList && this.data.statementList.length
+			},
 		},
 		onLoad() {
-
+			this.loadStatement()
 		},
 		methods: {
 			bindDateChange: function(e) {
-			   this.date = e.target.value
+			   this.date = e.target.value
+			   this.loadStatement()
 			},
-			handleClickCell(orderId) {
+			handleClickCell(orderId) {
+				
 				uni.navigateTo({
 					url: 'pages/order/detail?id=' + orderId
 				})
-			}
+			},
+			async loadStatement() {
+				let self = this
+				self.loading = true
+				let startTime = self.moment(self.date).format('YYYY-MM-DD')
+				let endTime = self.moment(self.date).endOf('month').format('YYYY-MM-DD')
+				self.params.starDate = startTime
+				self.params.endDate = endTime
+				let res = await self.$u.api.listStatement(self.params)
+				self.loading = false
+				if(res && res.code == 200) {
+					let data = res.data
+					self.data.settledAmount = data && data.settledAmount || 0
+					self.data.expectedAmount = data && data.expectedAmount || 0
+					self.data.statementList = data && data.orderList || []
+				}
+			},
 		}
 	}
 </script>
@@ -158,6 +189,25 @@
 				z-index: 1;
 				padding-bottom: 20rpx;
 			}
+			.list-view-empty {
+				position: relative;
+				z-index: 1;
+				height: 680rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-top: 142rpx;
+				.empty-image {
+					width: 376rpx;
+				}
+				.desc {
+					margin-top: 48rpx;
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #666666;
+					line-height: 40px;
+				}
+			}
 		}
 		}
 	}