qjd-user-uniapp/pagesMain/entrustList.vue

<template>
	<scroll-view class="container" scroll-y="true" @scrolltolower="handleLoadMore()">
		<view class="entrust-info">
			<view class="entrust-info-text">共{{entrustTotle}}个委托订单</view>
		</view>
		<view 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">备注信息：</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,
			}
		},
		onLoad(options) {
			this.productData = {
				productId: options.productId,
				productName: options.productName,
				tenantCode: options.tenantCode,
				areaSize: options.areaSize,
			}
		},
		onShow() {
			this.entrustList = []
			this.getEntrustList()
		},
		methods: {
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this.pageIndex++
					this.getEntrustList()
				}
			},
			//  获取委托
			getEntrustList() {
				NET.request(API.getEvaluateList, {
					productId: this.productData.productId,
					pageIndex: this.pageIndex,
					pageSize: 10,
				}, 'POST').then(res => {
					if (res.isSuccess) {
						if (res.data.list.length) {
							this.isOver = res.data.list.length != 10
							this.plantList = this.plantList.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
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		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;
			}
		}

		.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: #52A63A;
			}
		}
	}
</style>