zhywpt-sp/components/vehicle-detail/vehicle-detail.vue

<!-- 车辆详情 -->
<template>
	<view class="main-block vehicle-info-section">
		<view class="title">基本信息</view>
		<view class="info-item">
			<text class="label">用户名称</text>
			<text class="value">{{ state.vehicleInfo.customerName }}</text>
		</view>
		<view class="info-item">
			<text class="label">用户证件类型</text>
			<text class="value">{{ getCodeName('ID_TYPE', state.vehicleInfo.customerIdType) }}</text>
		</view>
		<view class="info-item">
			<text class="label">用户证件号</text>
			<text class="value">{{ state.vehicleInfo.customerIdNum }}</text>
		</view>
		<view class="info-item">
			<text class="label">订单车牌号</text>
			<text class="value">{{ state.vehicleInfo.vehicleId }}</text>
		</view>
		<view class="info-item">
			<text class="label">收费车型</text>
			<text class="value">{{ getCodeName('VEHICLE_TYPE', state.vehicleInfo.type) }}</text>
		</view>
	</view>
	
	<view class="main-block">
		<view class="title">卡信息</view>
		<view class="card-message">
			<image class="project-photo" :src="`${$imgUrl}issuance/cardPicture.png`" mode=""></image>
			<view class="msg">
				<view class="vehiclePlate">
					<text>卡号：</text>
					<text>{{state.vehicleInfo.cardId}}</text>
				</view>
				<view>
					<text>卡类型：</text>
					<text class="cardStatus">{{ getCodeName('CARD_TYPE', state.vehicleInfo.cardType)}}</text>
				</view>
				<view>
					<text>卡状态：</text>
					<text
						class="cardStatus success"
						:class="{warning: state.vehicleInfo.cardStatus === 'YKGQ' || state.vehicleInfo.cardStatus === 'WKGQ'}"
					>{{ getCodeName('CARD_STATUS', state.vehicleInfo.cardStatus) }}</text>
				</view>
				<view>
					<text>到期时间：</text>
					<text :class="{'is-warning': state.vehicleInfo.cardIsHaveRenewal}">{{ state.vehicleInfo.cardExpireTime }}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="main-block">
		<view class="title">OBU设备信息</view>
		<view class="card-message">
			<image class="project-photo" :src="`${$imgUrl}issuance/obuPicture.png`" mode=""></image>
			<view class="msg">
				<view class="vehiclePlate">
					<text>OBU：</text>
					<text>{{ state.vehicleInfo.obuId }}</text>
				</view>
				<view>
					<text>OBU状态：</text>
					<text
						class="cardStatus success"
						:class="{warning: state.vehicleInfo.obuStatus === 'YQGQ' || state.vehicleInfo.obuStatus === 'WQGQ'}">
						{{ getCodeName('OBU_STATUS', state.vehicleInfo.obuStatus) }}
					</text>
				</view>
				<view>
					<text>到期时间：</text>
					<text :class="{'is-warning': state.vehicleInfo.obuIsHaveRenewal}">{{ state.vehicleInfo.obuExpireTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from "vue";
	import { getCarInfoHaveCard } from '@/utils/network/api.js'
	import { requestNew } from "@/utils/network/request.js";
	import { getCodeName } from "@/datas/queryKey.js";
	
	const props = defineProps({
		vehicleId: {
			type: String,
			default: '',
			required: true
		},
		isRenewal: { // 是否是续期功能里面的车辆详情
			type: Boolean,
			default: false
		}
	})
	
	const emit = defineEmits(['getVehicleDetail']);
	
	const state = reactive({
		vehicleInfo: {
			customerName: '',
			customerIdType: '',
			customerIdNum: '',
			vehicleId: '',
			type: '',
			cardId: '',
			cardType: '',
			cardStatus: '',
			cardExpireTime: '',
			obuId: '',
			obuStatus: '',
			obuExpireTime: '',
			cardIsHaveRenewal: false, // 卡是否需要续期
			obuIsHaveRenewal: false, // obu是否需要续期
		},
	});
	
	onMounted(() => {
		if (props.vehicleId) {
			getDetail()
		}
	})
	
	const getDetail = () => {
		const options = {
			data: {vehicleId: props.vehicleId},
			method: "POST",
			showLoading: true,
		};
		requestNew(getCarInfoHaveCard, options).then(res => {
			state.vehicleInfo = res
			
			if(props.isRenewal) isHaveRenewal() // 续期功能
			
			emit("getVehicleDetail", state.vehicleInfo)
		})
	}
	
	const updateInfo = () => {
		getDetail()
	}
	
	// 续期功能
	const isHaveRenewal = () => {
		// 续期功能里面，对时间进行判断，确认是否可以续期
		let nowTime = new Date().getTime()
		let cardExpireTime = new Date(state.vehicleInfo.cardExpireTime).getTime()
		let obuExpireTime = new Date(state.vehicleInfo.obuExpireTime).getTime()
		// 如果卡到期时间小于一年，则可以续期
		if (cardExpireTime - nowTime < 365 * 24 * 60 * 60 * 1000) {
			state.vehicleInfo.cardIsHaveRenewal = true
		}
		// 如果obu到期时间小于一年，则可以续期
		if (obuExpireTime - nowTime < 365 * 24 * 60 * 60 * 1000) {
			state.vehicleInfo.obuIsHaveRenewal = true
		}
	}
	
	defineExpose({
		updateInfo
	})
	
</script>

<style lang="scss" scoped>
	.vehicle-info-section {
	  margin: 0 30rpx 20rpx;
	  border-radius: 12rpx;
	  padding: 30rpx;
	
	  .info-item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 20rpx 0;
	    border-bottom: 1rpx solid #f0f0f0;
	
	    &:last-child {
	      border-bottom: none;
	    }
	
	    .label {
	      font-size: 28rpx;
	      color: #004576;
	      // flex: 0;
	    }
	
	    .value {
	      font-size: 28rpx;
	      color: #333;
	      // flex: 1;
	      text-align: right;
	    }
	  }
	}
	.card-message {
		display: flex;
		padding-bottom: 20rpx;
		align-items: center;
		.project-photo{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			background-color: #E9EDF0;
			border-radius: 8rpx;
		}
		.msg view{
			line-height: 50rpx;
			color: #666666;
			font-size: 28rpx;
		}
		
		.success{
			color: #3CCA7C;
		}
		.warning{
			color: #CE1717;
		}
	
		.vehiclePlate {
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
		}
		.is-warning{
			color: #FF9900;
		}
	}
	
	.main-block {
		background-color: white;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	
		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #01243A;
			margin-bottom: 12rpx;
		}
	}
</style>