CXSG_H5/pages/vehicleMaintain/vehicleMaintain.vue

<template>
	<view class="highwayPost">
		<!-- 导航栏 -->
		<navigationBar title="车辆维修">
		</navigationBar>
		<view class="main">
			<view class="search">
				<!-- 				<view class="pullDown" @click="locationShow = true">
					{{location}}
				</view> -->
				<u--input placeholder="搜索店铺" :adjustPosition="false" fontSize="29.47" color="#61696F" shape="circle"
					border="none" v-model="searchText">
					<template slot="suffix">
						<u-icon name="search" @click="search" color="#4F4F4F" size="50"></u-icon>
					</template>
				</u--input>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="scroll-view-item" v-for="(v,i) in ListData" :key="i"
					@click="$goBack(2,'/pages/vehicleMaintain/vehicleMaintainDetails?id=1')">
					<view class="serveImg">
						<image :src="v.imgUrl" v-if="v.imgUrl" mode="aspectFill" class="img"></image>
						<view class="iconBox" v-else>
							<image src="../../static/images/imgFailed.png" mode="aspectFit" class="icon">
							</image>
						</view>
					</view>
					<view class="serveDetails">
						<view class="list topList">
							<view class="name">
								{{v.name}}
							</view>
						</view>
						<view class="list distance">
							<view class="name">
								服务时间:{{v.serveTime}}
							</view>
							<view class="distanceText">
								0.12Km
							</view>
						</view>
						<view class="list siteList">
							<view class="name">
								<view class="user">
									<view class="userName">
										<u-icon name="account-fill" color="#4C81CF" size="32"></u-icon>
										<text>{{v.contactsName}}</text>
									</view>
									<view class="userPhone">
										<u-icon name="phone-fill" color="#4C81CF" size="32"></u-icon>
										<text>{{v.contactsMobile}}</text>
									</view>
								</view>
								<view class="place">
									<u-icon name="map-fill" color="#4C81CF" size="32"></u-icon>
									<text>{{v.address}}</text>
								</view>
							</view>
							<!-- 							<view class="operate">
								<u-icon class="icon" size="45" name="../../static/images/location.png"></u-icon>
								<text class="text">去这里</text>
							</view> -->
						</view>
					</view>
				</view>
				<u-loadmore :status="status" v-if="total != 0" fontSize="30" iconSize="30" />
			</scroll-view>
		</view>
		<!-- 搜索下拉框 -->
		<u-picker :show="locationShow" :columns="locationColumns" @cancel="locationShow = false" itemHeight="120"
			@confirm="locationAffirm"></u-picker>
	</view>
</template>

<script>
	import {
		getList
	} from "@/api/list.js"
	export default {
		data() {
			return {
				// 竖向滚动条位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 地点
				location: '龙观乡',
				// 下拉框
				locationShow: false,
				locationColumns: [
					['龙观乡', '龙观乡', '龙观乡', '龙观乡', '龙观乡', '龙观乡']
				],
				// 搜索
				searchText: "",
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					serveType: 5,
					address: null,
					name: null,
				},
				// 列表数据
				ListData: [],
				// 总数
				total: 0,
				// 加载更多
				status: 'loadmore',
			};
		},
		onLoad() {
			this.getListData()
		},
		methods: {
			// 地点选择确认
			locationAffirm(data) {
				this.location = data.value[0]
				this.locationShow = false
			},
			// 搜索
			search() {
				this.queryParams.pageSize = 10
				this.queryParams.address = this.queryParams.name = this.searchText
				this.getListData()
			},
			// 触底事件
			lower(e) {
				if (this.ListData.length < this.total) {
					this.status = 'loading'
					this.queryParams.pageSize += 10
					this.getListData()
				} else {
					this.status = 'nomore'
				}
			},
			// 获取列表数据
			async getListData() {
				let res = await getList(this.queryParams)
				if (res.code == 200) {
					this.total = res.total
					this.ListData = res.rows
					this.status = 'loadmore'
					// console.log(this.ListData);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.highwayPost {
		height: 100%;

		.main {
			position: relative;

			.scroll-Y {
				height: calc(100% - 80rpx);
			}

			.search {
				height: 68rpx;
				border: 1px solid #75BFFF;
				border-radius: 105.26rpx;
				display: flex;
				padding: 0 20rpx;
				margin-bottom: 34rpx;

				.pullDown {
					width: 126.32rpx;
					height: 100%;
					line-height: 67.37rpx;
					font-size: 29.47rpx;
					text-align: center;
					font-weight: 600;
					margin-right: 21.05rpx;
					padding-right: 20rpx;
					position: relative;

					&::after {
						content: "◢";
						display: inline-block;
						position: absolute;
						right: 0;
						bottom: -10rpx;
					}
				}
			}

			.scroll-view-item {
				display: flex;

				.serveImg {
					flex: none;
					width: 220rpx;
					height: 220rpx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 16.84rpx;
					}

					.iconBox {
						width: 100%;
						height: 100%;
						border-radius: 16.84rpx;
						position: relative;
						border: 1px solid #dfdfdf;

						.icon {
							width: 30%;
							height: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.serveDetails {
					flex: 1;
					padding-left: 18rpx;
					position: relative;

					.list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10.53rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.name {
							width: 336.84rpx;
							// overflow: hidden;
							// white-space: nowrap;
							// text-overflow: ellipsis;
							// -o-text-overflow: ellipsis;
						}
					}

					.topList {
						.name {
							width: 100%;
							font-weight: 600;
							font-size: 29.47rpx;
						}

						.btn {
							width: 75.79rpx;
							height: 31.58rpx;
							line-height: 25rpx;
							font-size: 21.05rpx;
							text-align: center;
							color: #4C81CF;
							border: 1px solid #4C81CF;
							border-radius: 105.26rpx;
						}
					}

					.distance {
						font-size: 21.05rpx;

						.distanceText {
							flex: 1;
							width: 33.68rpx;
						}
					}

					.serveList {
						.name {
							color: #516789;
							font-size: 25.26rpx;
						}
					}

					.siteList {
						align-items: flex-end;
						font-size: 25.26rpx;
						color: #516789;
						position: absolute;
						bottom: 0;

						.name {
							width: 100%;

							.user {
								display: flex;

								.userName,
								.userPhone {
									display: flex;
								}

							}

							.place {
								display: flex;
								align-items: flex-start;
							}
						}

						.operate {
							display: flex;
							flex-direction: column;
							align-items: center;

							.text {
								font-size: 21.05rpx;
							}
						}
					}
				}
			}
		}
	}
</style>