vue-insagent-app/pages/caragent/index.vue

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="headers"></view>
		<view class="wab">
			<view class="wab_query">

				<view class="carset dis j-s a-c" v-if="carInfoList.length>0">
					<u-tabs ref="uTabs" name="licenseNo" :list="carInfoList" :current="carcurrent" @change="tabsChange"
						:height='60' font-size="34" gutter='20' inactive-color="#8482a9" :bar-width="40" :bold='true'
						style="font-weight: bold;letter-spacing: -1px;width:90%;padding-right:60px;"></u-tabs>
					<view class="icon dis j-s a-c">
						<view style="width: 1px; height: 20px;background-color: #999;"></view>
						<u-icon name="plus" size="30" label='添加车辆' color="#323136" label-color='#323136' @click="addcar"
							style="font-weight: bold;"></u-icon>
					</view>

				</view>
				<swiper v-if="carInfoList.length>0" class="swiper-box" :current="swiperCurrent" @change="swiperchange"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(carInfoItem,carInfoIndex) in carInfoList"
						:key="carInfoItem.id">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="dis f-c j-s a-s" style="height: 100%;width: 100%;">
								<view class="swipertop dis j-s a-c">
									<view class=" brand dis f-c ">
										<text>{{carInfoItem.vehicleBrand?carInfoItem.vehicleBrand:'未知品牌'}}</text>
										<view class="dis ">
											<u-icon name="level" label='已认证' color="#af7432" label-color='#af7432'
												label-size='24' size="24"
												style="font-weight: bold;background-color: #fff4e6;padding: 6px 10px;border-radius: 20px;margin-right: 12px;"></u-icon>
											<u-icon name="edit-pen" label='编辑车辆' color="#5e5b70" label-color='#5e5b70'
												label-size='24' size="24"
												style="font-weight: bold;background-color: #f8f8fa;padding: 6px 10px;border-radius: 20px;"
												@click="edit(carInfoItem)"></u-icon>
										</view>
									</view>
									<image src="../../static/icon/Group@2x.png" mode=""
										style="width: 50px;height: 50px;">
									</image>
								</view>
								<view class="swiperbtn dis j-s a-c">
									<view class="dis a-c j-c">
										<text v-if='carInfoItem.distanceTime'>距年检到期还剩</text>
										<text v-else-if='carInfoItem.overdueTime'>年检已逾期</text>
										<text v-if="carInfoItem.distanceTime"
											style="margin: 0 10px;">{{carInfoItem.distanceTime}}</text>
										<text v-else-if="carInfoItem.overdueTime"
											style="margin: 0 10px;">{{carInfoItem.overdueTime}}</text>

										<text>天</text>
									</view>
									<view
										style="width: 1px; height: 20px;background-color: #999;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
									</view>
									<view class="dis a-c j-c">
										<text style="margin-right: 10px;">注册日期</text>
										<text>{{carInfoItem.registerTime}}</text>
									</view>
								</view>
							</view>

						</scroll-view>
					</swiper-item>
				</swiper>
				<view class="dis  f-c carAddition" v-else>
					<view class="title">
						<text>添加爱车</text>
						<text>已有百万车主添加车辆信息</text>
					</view>
					<view class="banner dis a-c j-c">
						<image src="../../static/image/claim/banner.png" mode=""></image>
						<u-button type="success" @click="addcar" shape="circle" class="dis a-c j-s"
							style="position: absolute;"><u-icon name="plus" color="#plus" size="30"></u-icon>
							<text style="font-weight: bold;font-size: 15px;">点击添加</text>
						</u-button>
					</view>

				</view>
			</view>
			<view class="wab_data ">
				<view class="data_top">
					<view>
						<u-icon name="bookmark-fill" color="#E2E2E4" size="30" class="icon_photo">
						</u-icon>
						<text>支持办理</text>
					</view>
					<view style="padding: 30rpx;">
						<u-subsection :list="list" :current="current" height="60" :active-color="activeColor"
							@change="sectionChange"></u-subsection>
					</view>
				</view>
			</view>
			<view class="data_btn heng" :style="transform">
				<view class="data_flow">
					<view class="heng" style="padding: 0 40rpx;box-sizing: border-box;">
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="file-text-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">一键下单</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="camera-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">上门取车</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="rewind-right-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">极速办理</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="email-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">还车上门</text>
						</view>
					</view>
					<view class="data_condition dis f-c">
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">服务说明</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">该服务仅包含上门取送车代办年检的人工费，不包含年检机构需要收取的车辆年检费用，</li>
							<li style="text-indent: 0.4rem;">脱检车辆不提供上门取车服务，请选择自驾到站代办</li>
							<li style="text-indent: 0.4rem;">每张服务券最多1辆车使用</li>
							<li style="text-indent: 0.4rem;">需您当天一次性体验完毕所有项目。如果首次年检未通过，二次年检时限为2个工作日(不含周末)</li>
							<li style="text-indent: 0.4rem;">代办过程中除办理年检所需费用和燃油费用需要客户承担以外，如停车费、过路费等由代送检单位承担。</li>
						</ul>
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">服务流程</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">下单后代办商家将会与您取得联系，确认取送车地址和时间。(也可按短信提示主动联系商家)</li>
							<li style="text-indent: 0.4rem;">年检当天代办人员会到达指定取车地点</li>
							<li style="text-indent: 0.4rem;">交予车辆及交强险保单和行驶证正副本</li>
							<li style="text-indent: 0.4rem;">完成年检后，代办人员会将车辆送回指定地点并交还相关物料</li>
						</ul>
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">适用车型</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">7座及以下非营运轿车(面包车、警车、货车、营运车、7座以上车辆除外)</li>
							<li style="text-indent: 0.4rem;margin-top: 20px;color: #5c5a68;font-weight: bold;">
								注:本服务费用为代办年检的人工费不含年检费</li>
						</ul>
					</view>
				</view>
				<view class="data_flow">
					<view class="heng" style="padding: 0 40rpx;box-sizing: border-box;">
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="file-text-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">一键下单</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="camera-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">自驾到站</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="rewind-right-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">专人代办</text>
						</view>
						<u-icon name="arrow-right" color="#69b3f0" size="20" style="margin-top: 30rpx;">
						</u-icon>
						<view class="shu">
							<view class="yuan heng1">
								<u-icon name="email-fill" color="#fff" size="40">
								</u-icon>
							</view>
							<text style="font-size: 12px;">完成年检</text>
						</view>
					</view>
					<view class="data_condition shu1">
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">服务说明</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">该服务仅包含自驾到站代办年检的人工费，不包含年检机构需要收取的车辆年检费用</li>
							<li style="text-indent: 0.4rem;">每张服务券最多1辆车使用</li>
							<li style="text-indent: 0.4rem;">需您当天一次性体验完毕所有项目</li>
						</ul>
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">服务流程</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">该服务需提前至少一至两个工作日预约，请提前拨打商家电话，进行预约及确认信息</li>
							<li style="text-indent: 0.4rem;">年检当天需携带交强险保单和行驶证正副本，驱车至指定年检站</li>
							<li style="text-indent: 0.4rem;">到站后您只需大厅等待，将有专人为您提供代办年检服务</li>
							<li style="text-indent: 0.4rem;">完成年检后，代办人员会将车辆和相关物料交还给您</li>
						</ul>
						<view class="info">
							<u-icon name="bookmark-fill" color="#E2E2E4" size="35" class="icon_photo">
							</u-icon>
							<text style="color: #5c5a68;margin-left: 10px;font-weight: bold;">适用车型</text>
						</view>
						<ul>
							<li style="text-indent: 0.4rem;">7座及以下非营运轿车(面包车、警车、货车、营运车、7座以上车辆除外)</li>
							<li style="text-indent: 0.4rem;margin-top: 20px;color: #5c5a68;font-weight: bold;">
								注:本服务费用为代办年检的人工费不含年检费</li>
						</ul>
					</view>
				</view>
			</view>
		</view>
		<view class="shu color">
			<view class="heng1 " style="margin: 30px 0;font-size: 16px;">
				<text @click="issue()" style="cursor: pointer;">优惠券</text>
				<view style="width: 2rpx;height: 40rpx;margin: 0 50rpx;background-color: #E9EAEE;"></view>
				<text @click="order()" style="cursor: pointer;">我的订单</text>
			</view>
			<view class="shu">
				<view class="heng1">
					<view class="logo"></view>
					<view>本服务由晋掌柜提供</view>
				</view>
				<text>客服电话：020-62936789</text>
			</view>
		</view>
		<view class="flexd dis j-c a-c" @click="banli()">
			<text style="font-size: 36rpx;color: #fff;">上门取车待办</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				activeitemstyle: {},
				list: [{
						name: '上门取车介绍'
					},
					{
						name: '自驾到站介绍'
					},
				],
				carInfoList: [], //
				swiperCurrent: 0,
				carcurrent: 0,
				current: 0,
				activeColor: this.$u.color['primary'],
				transform: "transform:translateX(0)",
			}
		},
		onShow() {
			this.getCarInfo();
		},
		onLoad() {
			this.getCarInfo();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async getCarInfo() {
				let res = await this.$http.post('/ser/carInfo/queryByUserId');
				if (res.code == '200') {
					this.carInfoList = res.data;
				}
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.carcurrent = current;
			},
			swiperchange(e) {
				this.carcurrent = e.detail.current;
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			sectionChange(index) {
				this.current = index;
				if (index == 1) {
					this.transform = "transform:translateX(-55%)";
				} else if (index == 0) {
					this.transform = "transform:translateX(0)";
				}
			},
			addcar() {
				uni.navigateTo({
					url: "/pages/caragent/addcar"
				})
			},
			issue() {
				uni.navigateTo({
					url: "/pages/ticket/issue"
				})
			},
			order() {
				uni.navigateTo({
					url: "/pages/ticket/order"
				})
			},
			banli() {
				uni.navigateTo({
					url: "/pages/caragent/confirmorder?licenseNo=" + this.carInfoList[this.carcurrent].licenseNo +
						"&id=" + this.carInfoList[this.carcurrent].id,
				})
			},
			edit(item) {
				uni.navigateTo({
					url: `/pages/caragent/editcar?info=${JSON.stringify(item)}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wab_query {
		width: 100%;
		height: auto;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 10px 0 #a8bbca;
		margin-top: -40px;
		padding: 10px 20px;

		.carset {
			border-bottom: 1px solid #f2f2f2;
			position: relative;

			.icon {
				width: 85px;
				height: auto;
				padding: 5px 0;
				background-color: #fff;
				z-index: 99;
				position: absolute;
				right: 0;
				top: 0;
				box-shadow: -20px 2px 20px #fff;
			}
		}

		.swiper-box {
			padding-top: 20px;
			box-sizing: border-box;
			height: 160px;

			.brand {
				>text {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 10px;
				}
			}

			.swiperbtn {
				width: 100%;
				height: 50px;
				position: relative;
				background-color: #f8f8fa;
				border-radius: 10px;
				padding: 0 10px;

				>view {
					text {
						color: #8985a0;
						font-size: 12px;
					}

					text:nth-child(2) {
						color: #000;
						font-size: 14px;
						font-weight: bold;
					}
				}


			}
		}
	}

	.ts {
		font-size: 40rpx;
		font-weight: bold;
	}

	.ts>text {
		color: #fc8908;
		margin: 0 10rpx;
	}

	.car {
		width: 100%;
		font-size: 40rpx;
		font-weight: bold;

	}

	.nianjian {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nianjian>text {
		border: 2rpx solid #17A2B8;
		font-size: 20rpx;
		color: #007AFF;
		padding: 2rpx;
		box-sizing: border-box;
	}

	.flexd {
		height: 100rpx;
		position: fixed;
		left: 36rpx;
		right: 36rpx;
		bottom: 10rpx;
		border-radius: 60rpx;
		box-shadow: 0 0px 3px 0px #7d7d7d;
		background-color: #007BFF;
	}


	.color {
		margin-bottom: 150rpx;
		color: #696A6E;
	}

	.logo {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-image: url(../../static/bigLogo.png);
		background-size: 100% 100%;
	}

	.data_condition {
		width: 100%;
		height: auto;
		background: #F5F9FC;
		margin-top: 40px;
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			margin: 10px 0;
		}
	}

	.data_condition>ul>li {
		color: #8e89a7;
	}

	.yuan {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background-image: linear-gradient(#aad9f5, #69b3f0);
	}

	.headers {
		width: 100%;
		height: 240rpx;
		background-image: url(../../static/image/claim/claimtop.png);
		background-size: 100% 100%;
	}

	.wab {
		width: 100%;
		height: auto;
		padding: 0 36rpx 30rpx 36rpx;
		box-sizing: border-box;
	}



	.heng {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

	}

	.heng1 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.shu1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.wab_data {
		width: 100%;
		height: auto;
		padding: 60rpx 40rpx;
		box-sizing: border-box;

	}

	.data_top {
		font-size: 32rpx;
		color: #3F4D5A;
	}

	.data_btn {
		width: 220%;
		height: auto;
		transition: all 0.5s ease;
	}

	.data_flow {
		width: 45%;
		height: auto;
	}

	.carAddition {
		.banner {
			position: relative;
			height: 150px;

			image {
				width: 100%;
				height: 100%;
				opacity: 0.4;
			}
		}

		.title {
			width: 100%;
			border-bottom: 1px solid #f2f2f2;
			padding: 5px 0;

			text:first-child {
				color: #000;
				font-size: 14px;
				font-weight: bold;
				margin-right: 10px;
			}

			text:last-child {
				color: #333;
				font-size: 12px;
			}
		}

	}
</style>