qjd-user-uniapp/pagesMain/entrustList.vue

<template>
	<scroll-view class="container" :style="{backgroundColor: entrustTotle ? '#f7f7f7' : '#f7f7f7'}" scroll-y="true" @scrolltolower="handleLoadMore()">
		<view class="entrust-info" :style="{height: entrustTotle ? '115px' : '60px'}">
			<view class="entrust-info-text">共{{entrustTotle}}个委托订单</view>
		</view>
		<view v-if="!entrustTotle" class="no-cart">
			<image class="no-cart-img" src="../static/images/noCart.png" mode="aspectFill"></image>
			<text class="no-cart-text">暂无订单</text>
		</view>
		<view v-if="entrustTotle" class="entrust-row" v-for="(item, index) in entrustList" :key="index">
			<view class="entrust-title">已委托订单</view>
			<view class="entrust-text">委托开始时间：{{item.entrustStartTime}}</view>
			<view class="entrust-text">委托时长：{{item.entrustDurationTime}}小时</view>
			<view class="entrust-text">委托金额：
				<text class="entrust-price">￥{{item.payAomount}}</text>
			</view>
			<view class="entrust-text">备注信息：{{item.remarks}}</view>
		</view>
		<view class="entrust-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="goToAdd()" class="handle-custom">发布委托</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</scroll-view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				productData: {
					productId: '',
					productName: '',
					tenantCode: '',
					areaSize: '',
				},
				pageIndex: 1,
				isOver: false,
				entrustList: [],
				entrustTotle: 0,
				orderId: ''
			}
		},
		onLoad(options) {
			this.productData = {
				productId: options.productId,
				productName: options.productName,
				tenantCode: options.tenantCode,
				areaSize: options.areaSize,
			}
			this.orderId = options.orderId
		},
		onShow() {
			this.pageIndex = 1
			this.entrustList = []
			this.getEntrustList()
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.entrustList = []
			this.getEntrustList('refresh')
		},
		methods: {
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this.pageIndex++
					this.getEntrustList()
				}
			},
			//  获取委托
			getEntrustList(refresh) {
				NET.request(API.getEvaluateList, {
					productId: this.productData.productId,
					pageIndex: this.pageIndex,
					pageSize: 10,
				}, 'POST').then(res => {
					if (refresh == 'refresh') {
						uni.stopPullDownRefresh();
					}
					if (res.isSuccess) {
						if (res.data.list.length) {
							this.isOver = res.data.list.length != 10
							this.entrustList = this.entrustList.concat(res.data.list)
							this.entrustTotle = res.data.total
						} 
						// else {
						// 	this.$refs.uTips.show({
						// 		title: '当前无委托订单',
						// 		type: 'warning',
						// 	})
						// }
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取委托列表失败',
						type: 'warning',
					})
				})
			},
			//  跳转详情
			goToAdd() {
				uni.navigateTo({
					url: '/pagesMain/entrustForm?productId=' + this.productData.productId + '&tenantCode=' + this.productData.tenantCode +
						'&productName=' + this.productData.productName + '&areaSize=' + this.productData.areaSize + '&orderId=' + this.orderId
				});
			},
		},
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		// height: 100%;
		height: 100vh;
		float: left;
		background-color: #f7f7f7;
		// background-color: #FFFFFF;
		overflow-y: auto;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 80px;

		.entrust-info {
			width: 100%;
			height: 115px;
			float: left;
			margin-bottom: -65px;
			background: #52A63A;
			border-radius: 0px 0px 20px 20px;

			.entrust-info-text {
				height: 50px;
				float: left;
				margin-left: 15px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 50px;
			}
		}
        
		.no-cart {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			top: 25%;
			left:30%;
			position: absolute;
			.no-cart-img {
				width: 155px;
				height: 200px;
				margin-bottom: 20px;
			}
			.no-cart-text {
				font-size: 16px;
				font-family: PingFang SC;
				color: #999999;
			}
			.button1 {
				/deep/button {
					background-color: #ffffff !important;
					border: 1px solid #74bd60 !important;
					color: #74bd60 !important;
				}
				width: 40%;
				height: 34px;
			}
		}
		.entrust-row {
			width: calc(100% - 30px);
			float: left;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 0 15px 15px 15px;
			padding-bottom: 12px;

			.entrust-title {
				width: 100%;
				height: 45px;
				float: left;
				border-bottom: 1px solid #EEEEEE;
				box-sizing: border-box;
				padding: 14px 15px;
				margin-bottom: 6px;

				.entrust-info-text {
					height: 16px;
					float: left;
					border-left: 2px solid #74BD60;
					padding-left: 6px;
					font-size: 15px;
					font-family: PingFang SC;
					line-height: 16px;
					color: #333333;
				}
			}

			.entrust-text {
				width: 100%;
				height: 24px;
				float: left;
				box-sizing: border-box;
				padding-left: 15px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #333333;
				line-height: 24px;

				.entrust-price {
					color: #52A63A;
				}
			}
		}

		.entrust-handle {
			width: 100%;
			height: 80px;
			float: left;
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			padding: 20px 15px;

			.handle-custom {
				background-color: #56a83a;
				
				/deep/button {
					background-color: #56a83a;
				}

				/deep/.u-btn--success--disabled {
					background-color: #74bd60 !important;
				}
			}
		}
	}
</style>