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

<template>
	<vehicleDetail ref="vehicleDetailRef" :vehicleId="state.vehicleId" @getVehicleDetail="getVehicleDetail"></vehicleDetail>
	
	<div class="card-block project-detail">
		<div class="title">您当前的产品</div>
		<div class="detail project-name">{{ state.deviceLogOutState.productName }}</div>
		
		<template v-if="state.deviceLogOutState.isCancel">
			<div class="detail">当前办理时间未满{{ state.deviceLogOutState.cancelAgeLimit }}年</div>
			<div class="detail">需要支付违约金 {{ (state.deviceLogOutState.cancelAmount / 100).toFixed(2) }}元</div>
		</template>
		
		<template v-if="state.deviceLogOutState.isBlack">
			<div class="title">您当前的设备存在黑名单</div>
			<div class="detail">请<text class="light-tip">处理黑名单</text>后，在申请注销</div>
			<div class="search-black">
				<button type="default" class="ui-btn black-search-btn">黑名单查询</button>
			</div>
		</template>
	</div>
	
	<FixedFooter >
		<button type="default" class="ui-btn" :style="{opacity: state.deviceLogOutState.isBlack ? '0.75' : 1}" :disabled="state.deviceLogOutState.isBlack" @click="nextACtion">下一步</button>
	</FixedFooter>
</template>

<script lang="ts" setup>
	import { getCodeName } from "@/datas/queryKey.js";

	import { reactive, ref } from "vue"
	import { navTo,desensitization, objectToQueryString } from "@/utils/utils"
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	import {requestNew} from "@/utils/network/request.js";
	import { commGetDetail, cancelValid, deviceLogOutStateQuery } from "@/utils/network/api.js";
	import vehicleDetail from '@/components/vehicle-detail/vehicle-detail.vue'
	import FixedFooter from "@/components/common/FixedFooter.vue";
	import { deviceStore } from '@/stores/device.js'
	
	const { setDeviceInfoStore, setLogOffStore } = deviceStore()
	
	const state = reactive({
		vehicleId: '',
		data: {
			cardStatus: undefined,
			obuStatus: undefined,
		},
		type: undefined,
		cardType:"",
		vehicleInfo: {
			cardId: '',
			obuId: '',
			cardTypeNew: ''
		},
		deviceLogOutState: {
			cancelAgeLimit: 0, // 注销年限
			cancelAmount: 0, // 注销违约金 单位：分
			isBlack: false, // 是否存在黑名单
			isCancel: false, // 是否需要支付违约金
			productName: "" // 产品名称
		}
	});

	/*视图进入后操作*/
	onLoad((option) => {
		if (option.vehicleId) {
			state.vehicleId = decodeURIComponent(option.vehicleId)
		}
	});
	onUnload(() => {

	});
	
	// 是
	const getDeviceLogOutStateQuery = () => {
		let option = {
			data: {
				vehicleId: state.vehicleId,
				cardId: state.vehicleInfo.cardId,
				obuId: state.vehicleInfo.obuId
			},
			method: "POST",
			showLoading: true,
		}
		requestNew(deviceLogOutStateQuery, option).then(res => {
			state.deviceLogOutState = res
			setLogOffStore(res)
		})
	}
	
	// 获取车辆详情
	const getVehicleDetail = (res) => {
		state.vehicleInfo = res
		setDeviceInfoStore(res) // 缓存车辆详情
		if (state.vehicleInfo.cardId && state.vehicleInfo.obuId) {
			getDeviceLogOutStateQuery()
		} else {
			uni.showModal({
				title: '提示',
				content: '改车辆暂无ETC卡签信息，无法注销',
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
	
	/*下一步*/
	const nextACtion = () => {
		if (state.deviceLogOutState.isBlack) {
			uni.showModal({
				title: '提示',
				content: `您当前的设备存在黑名单,请处理黑名单后，在申请注销`
			})
			return false
		}
		navTo(`/subpackage/after-sale/ETC-log-off/etc-log-off?vehicleId=${state.vehicleId}`)
	}
</script>

<style lang="scss" scoped>
	.search-black{
	}
	.black-search-btn{
		height: 70rpx;
		line-height: 70rpx;
		width: 220rpx;
		font-size: 24rpx;
	}
	.project-detail{
		.title{
			color: #004576;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		.title::before{
			content: "";
			display: block;
			width: 2px;
			height: 30rpx;
			background-color: #004576;
			margin-right: 12rpx;
		}
		.detail{
			color: #01243A;
			font-size: 30rpx;
			margin-bottom: 24rpx;
			color: #01243A;
		}
		.light-tip{
			color: #D6AD47;
		}
		.project-name{
			color: #D6AD47;
		}
	}
</style>