CXSG_H5/pages/vehicleMaintain/vehicleMaintainDetails.vue

<template>
	<view class="vehicleMaintainDetails">
		<!-- 导航栏 -->
		<navigationBar title="车辆维修">
		</navigationBar>
		<view class="main">
			<view class="scroll-view-item">
				<view class="list topList">
					<view class="name">
						能耀新能源有限公司汽车服务分公司
					</view>
					<view class="btn">
						纠错
					</view>
				</view>
				<view class="list imgList">
					<image src="../../static/images/detailsImg.png" class="img" mode=""></image>
					<view class="label">
						<p>综合性车辆</p>
					</view>
				</view>
				<view class="list">
					<view class="time">
						<text style="color: #00B312;margin-right: 10.53rpx;">营业时间</text>
						<text>08:30-16:30</text>
					</view>
					<view class="phone">
						<u-icon name="phone-fill" color="#2979ff" size="35"></u-icon>
						<text>0574-51101889</text>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="list">
					<view class="site">
						<text>宁波市海曙区环城西路北段377号</text>
						<text style="color: #7F7F7F;">距您0.12Km</text>
					</view>
					<view class="location">
						<image src="../../static/images/location.png" class="img" mode=""></image>
						<text>去这里</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		errorHint
	} from "@/api/list.js"
	export default {
		data() {
			return {
				// 纠错
				errorShow: false,
				errorData: {
					serveModule: 1,
					serveId: null,
					feedbackType: null,
					feedbackContent: "",
					feedbackBy: null,
				},
				feedbackContent: '',
				// 激活
				active: null,
				// 纠错提示
				errorHintData: []
			};
		},
		onLoad(data) {
			// console.log(data.id);


		},
		methods: {
			// 纠错
			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>
	.vehicleMaintainDetails {
		height: 100%;

		.main {
			.scroll-view-item {
				height: 100%;

				.list {
					display: flex;
					justify-content: space-between;
					margin-bottom: 21.05rpx;

					.time {
						font-size: 25.26rpx;
					}

					.phone {
						display: flex;
						font-size: 25.26rpx;
					}

					.site {
						display: flex;
						flex-direction: column;
						font-size: 25.26rpx;
					}

					.location {
						width: 84.21rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 21.05rpx;

						.img {
							width: 42.11rpx;
							height: 42.11rpx;
						}
					}
				}

				.topList {
					.name {
						font-size: 33.68rpx;
						color: #000A15;
					}

					.btn {
						width: 92.63rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						border: 2.11rpx solid #4C81CF;
						color: #4C81CF;
						border-radius: 105.26rpx;
						font-size: 21.05rpx;
					}
				}

				.imgList {
					display: flex;

					.img {
						width: 305.26rpx;
						height: 231.58rpx;
						border-radius: 21.05rpx;
					}

					.label {
						flex: 1;
						padding-left: 21.05rpx;

						p {
							font-size: 25.26rpx;


							&:before {
								content: "";
								display: inline-block;
								width: 10.53rpx;
								height: 10.53rpx;
								border-radius: 105.26rpx;
								background-color: #FFD540;
								margin-right: 12.63rpx;
							}
						}
					}
				}
			}
		}

		.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>