QianNiaoShop/pagesT/driver/driver.vue

<template>
	<view class="selSupplier">
		<view class="customer-ul">
			<view class="customer-li" v-for="(item, index) in driver_list" :key="index" @click="changeData(item)">
				<view class="customer-name">{{ item.driverName }}</view>
				<view class="other">
					<view class="concat clearfix">
						<text class="float_left">{{ item.plateNumber }}</text>
						<view class="float_right">
							<u-icon name="phone-fill" size="26"></u-icon>
							<text class="phone-text">{{ item.phone }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="load_status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				driver_list: [],
				page: 1,
				pageSize: 10,
				total: 0,
				load_status: 'nomore',
			};
		},
		onLoad() {
			this.getAllDriver()
		},
		onPullDownRefresh() {
			this.getAllDriver()
		},
		// 上拉加载
		onReachBottom() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllDriver()
			}
		},
		methods: {
			getAllDriver() {
				this.$u.api.getAllDriver({
					page: this.page,
					pageSize: this.pageSize,
					state: 5,
				}).then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.driver_list = res.data;
					} else {
						this.driver_list = this.driver_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
			},
			changeData(item) {
				// 选择返回上一页
				this._prePage().driverData = item;
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-view {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 0;

		.input-view {
			padding: 0 24rpx;

			input {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 24rpx;
				display: inline-block;
				width: 580rpx;
				border: 1px solid #f5f5f5;
				vertical-align: middle;
				border-radius: 8rpx;
				background-color: #f7f8fa;
			}

			.add-icon {
				margin-left: 14rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.bottom-view {
		z-index: 99;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		line-height: 90rpx;
		color: #ffffff;
		background-color: $uni-color-primary;
		text-align: center;
	}

	.customer-ul {
		padding-bottom: 20rpx;

		.customer-li {
			width: 702rpx;
			margin: 0 auto;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-top: 20rpx;

			.customer-name {
				padding: 0 20rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #f5f5f5;
			}

			.other {
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				line-height: 50rpx;
				position: relative;

				.check-tag {
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 40rpx;
					color: #999999;

					.custom-icon-xuanze_xuanzhong {
						color: $uni-color-primary;
					}
				}

				.concat {
					.float_right {
						color: $uni-color-primary;

						.phone-text {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>