zhywpt-sp/subpackage/after-sale/ETC-log-off/guide.vue

<template>
	<view class="top-hint">
		<view class="txt">
			<image :src="`${$imgUrl}common/icon-tips.png`" mode="aspectFill" class="imgs"></image>
			<view>
				<text>注意事项：</text>
				<view class="grey-txt">注销成功后ETC设备不可用，注销过程不可逆，如果有需要，请重新办理ETC。</view>
			</view>
		</view>
		
	</view>
	
	<view class="have-gradient" style="margin-top: -20rpx;">
		<view class="have-gradient-inside">
			<view class="title"> 需要准备的材料 </view>
			<view class="cailiao">
				<view class="list" v-for="(item, index) in person" :key="index">
					<view>{{item.name}}</view>
					<image class="icon" :src="`${$imgUrl}${item.img}`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
				</view>
			</view>
		</view>
	</view>
	
	<view class="bg">
		<view class="title"> 办理流程 </view>
		<view class="dot_wrap">
			<view class="dot_wrap_left">
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
				<text class="line"></text>
				<text class="dot"></text>
			</view>
			<view class="dot_wrap_right">
				<view class="item">
					<image :src="`${$imgUrl}issuance/ydy1.png`"></image>
					<view class="destion">
						<view class="destion1">注销申请</view>
						<view class="destion2">辅助说明。</view>
					</view>
					<image :src="`${$imgUrl}issuance/ydy2.png`"></image>
				</view>
				<view class="item">
					<image :src="`${$imgUrl}issuance/ydy3.png`"></image>
					<view class="destion">
						<view class="destion1">上传资料</view>
						<view class="destion2">辅助说明</view>
					</view>
					<image :src="`${$imgUrl}issuance/ydy4.png`"></image>
				</view>
				<view class="item">
					<image :src="`${$imgUrl}issuance/ydy5.png`"></image>
					<view class="destion">
						<view class="destion1">连接设备</view>
						<view class="destion2">辅助说明</view>
					</view>
				</view>
				<view class="item">
					<image :src="`${$imgUrl}issuance/ydy6.png`"></image>
					<view class="destion">
						<view class="destion1">支付欠费和违约金</view>
						<view class="destion2">根据实际使用和购买产品产生。</view>
					</view>
				</view>
				<view class="item">
					<image :src="`${$imgUrl}issuance/ydy9.png`"></image>
					<view class="destion">
						<view class="destion1">提交资料</view>
						<view class="destion2">辅助说明</view>
					</view>
				</view>
				<view class="item" style="margin-bottom: 0;">
					<image :src="`${$imgUrl}issuance/ydy7.png`"></image>
					<view class="destion">
						<view class="destion1">资料审核</view>
						<view class="destion2">辅助说明</view>
					</view>
					<image :src="`${$imgUrl}issuance/ydy8.png`"></image>
				</view>
				<view class="item" style="margin-bottom: 0;">
					<image :src="`${$imgUrl}issuance/ydy7.png`"></image>
					<view class="destion">
						<view class="destion1">注销完成</view>
						<view class="destion2">辅助说明</view>
					</view>
					<image :src="`${$imgUrl}issuance/ydy8.png`"></image>
				</view>
			</view>
		</view>
	</view>
	
	<FixedFooter>
		<button type="default" class="ui-btn" style="margin-bottom: 12rpx;" @click="savaHandle()">
			注销申请
		</button>
	</FixedFooter>
	
</template>

<script setup lang="ts">
	import {navTo} from "@/utils/utils";
	import { ref, reactive } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import FixedFooter from "@/components/common/FixedFooter.vue";
	const person = ref([
		{'name':"申请人身份证人像面",'img':"issuance/sfz.png"},
		{'name':"申请人身份证国徽面",'img':"issuance/sff.png"},
		{'name':"委托书",'img':"issuance/weituo.png"},
	])
	
	const state = reactive({
		vehicleId: ''
	}) 
	
	onLoad(({vehicleId}) => {
	  if (vehicleId) {
		  state.vehicleId = decodeURIComponent(vehicleId)
	  }
	});
	
	const savaHandle = () => {
       navTo(`/subpackage/after-sale/ETC-log-off/log-off-confirm?vehicleId=${state.vehicleId}`)
	}
	
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		margin: 20rpx 30rpx 0;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	}
	.title {
		font-weight: 400;
		font-size: 30rpx;
		color: #01243A;
	}

	.dot_wrap {
		display: flex;
		margin: 30rpx 0;

		.dot_wrap_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;
			margin-top: 20rpx;

			.dot {
				width: 24rpx;
				height: 24rpx;
				background: #01243A;
				border-radius: 50%;
			}

			.line {
				height: 126rpx;
				background-color: transparent;
				border-left: 1px dashed #01243A;
			}
		}

		.dot_wrap_right {
			.item {
				background: #F7F7F7;
				border-radius: 12rpx;
				height: 120rpx;
				display: flex;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				width: 600rpx;
				margin-bottom: 30rpx;

				.destion {
					margin: 0 60rpx 0 20rpx;
					font-weight: 400;

					.destion1 {
						font-size: 28rpx;
						color: #01243A;
					}

					.destion2 {
						font-size: 22rpx;
						color: #999999;
						line-height: 50rpx;
					}
				}

				image {
					width: 46rpx;
					height: 47rpx;
				}
			}
		}
	}

	.des {
		font-weight: 400;
		font-size: 28rpx;
		color: #01243A;
		line-height: 56rpx;
		margin-top: 10rpx;
		text-indent: 1rem;
	}

	.cailiao {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.list {
			width: 48%;
			margin-top: 30rpx;

			view {
				text-align: center;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				color: #01243A;
			}

			.icon {
				width: 100%;
				height: 190rpx;
				background-image: var(--bgimg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 270rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.user-type{
		color: #01243A;
		margin-top: 24rpx;
		.line{
			color: #999999;
		}
	}
</style>