CXSG_H5/pages/driveTrain/driveTrain.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">
					<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 class="btn" @click="errorCorrection(v)">
								纠错
							</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>
		<!-- 纠错 -->
		<u-popup :show="errorShow" mode="center" round="14" :customStyle="{width: '90%'}">
			<view class="errorBox">
				<view class="headline">我要反馈问题</view>
				<view class="title">请选择问题</view>
				<view class="fast">
					<view class="li" :class="{active : active == i}" v-for="(v,i) in errorHintData" :key="i"
						@click="(active = i),(errorData.feedbackType = v.dictValue)">
						{{v.dictLabel}}
					</view>
				</view>
				<view class="title">问题描述:</view>
				<u--textarea v-model="feedbackContent" placeholder="请输入" height="100"></u--textarea>
				<view class="btn">
					<span class="sBtn" @click="submitFeedback">提交</span>
					<span class="qBtn" @click="errorShow = false">关闭</span>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getList,
		errorHint,
		setErrorCorrection
	} from "@/api/list.js"
	export default {
		data() {
			return {
				// 竖向滚动条位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 地点
				location: '龙观乡',
				// 下拉框
				locationShow: false,
				locationColumns: [
					['龙观乡', '龙观乡', '龙观乡', '龙观乡', '龙观乡', '龙观乡']
				],
				// 搜索
				searchText: "",
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					serveType: 2,
					address: null,
					name: null,
				},
				// 列表数据
				ListData: [],
				// 总数
				total: 0,
				// 加载更多
				status: 'loadmore',
				// 纠错
				errorShow: false,
				errorData: {
					serveModule: 1,
					serveId: null,
					feedbackType: null,
					feedbackContent: "",
					feedbackBy: null,
				},
				feedbackContent: '',
				// 激活
				active: null,
				// 纠错提示
				errorHintData: []
			};
		},
		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);
				}
			},
			// 纠错
			errorCorrection(data) {
				this.active = null
				this.errorData.feedbackType = null
				this.errorData.feedbackContent = null
				this.feedbackContent = null
				this.errorData.serveId = data.id
				errorHint("feedback_type").then(res => {
					this.errorHintData = res.data
					// this.errorData = data
					this.errorShow = true
				})
			},
			// 提交反馈
			submitFeedback() {
				this.errorData.feedbackContent = this.feedbackContent
				setErrorCorrection(this.errorData).then(res => {
					this.errorShow = false
					this.$refs.uToast.show({
						icon: false,
						type: 'success',
						message: '反馈成功'
					})
				})
			}
		}
	}
</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 {
							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;
							}
						}
					}
				}
			}
		}

		.errorBox {
			padding: 33.68rpx 25.26rpx;

			.headline {
				color: #000A15;
				text-align: center;
				font-weight: 600;
			}

			.title {
				color: #000A15;
				font-weight: 600;
				font-size: 29.47rpx;
				margin: 42.11rpx 0 21.05rpx 0;
			}

			.fast {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.li {
					width: 48%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 29.47rpx;
					border-radius: 50px;
					color: #798C9B;
					text-align: center;
					margin-bottom: 20rpx;
					background-color: rgba(222, 238, 252, 0.3);
				}

				.active {
					background-color: #D7ECFF;
					color: #000A15;
				}
			}

			.btn {
				margin-top: 21.05rpx;
				display: flex;
				justify-content: center;

				.sBtn {
					padding: 10rpx 50rpx;
					font-size: 29.47rpx;
					border-radius: 105.26rpx;
					background-color: #D7ECFF;
					margin-right: 50rpx;
				}

				.qBtn {
					padding: 10rpx 50rpx;
					font-size: 29.47rpx;
					border-radius: 105.26rpx;
					border: 1px solid #D7ECFF;
				}
			}
		}
	}
</style>