zhywpt-sp/subpackage/after-sale/renewalContral/car-detail.vue

<template>
	<view class="top-hint" v-if="!isHandle">
		<view class="txt">
			<image :src="`${$imgUrl}common/icon-tips.png`" mode="aspectFill" class="imgs"></image>
			<view>
				<view>温馨提示</view>
				<view class="grey-txt">有效期剩余一年才可续期，您暂时不用续期</view>
			</view>
		</view>
		
	</view>
	
	<vehicleDetail
		style="margin-top: -20rpx;"
		:vehicleId="state.vehicleId"
		isRenewal
		@getVehicleDetail="getVehicleDetail"
		></vehicleDetail>
	
	<view class="main-block" v-if="isHandle">
		<view class="column-checkbox-group">
			<view
				v-for="item in state.checkboxOption"
				class="column-checkbox"
				@click="toggleCheckbox(item)">
				<view class="checkbox-icon" :class="{'is-checked': item.checked}">
					<u-icon name="checkbox-mark" :color="item.checked ? '#FFFFFF' : '#FFFFFF'"></u-icon>
				</view>
				<text>{{ item.label  }}</text>
			</view>
		</view>
	</view>
	
	<FixedFooter v-if="isHandle">
		<button
			type="default"
			class="ui-btn"
			@click="renewal()">
			卡签续期
		</button>
	</FixedFooter>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { confirm } from "@/utils/utils";
import vehicleDetail from '@/components/vehicle-detail/vehicle-detail.vue'
import FixedFooter from '@/components/common/FixedFooter.vue'

const state = reactive({
	vehicleId: '',
	vehicleInfo: {
		customerName: '',
		customerIdType: '',
		customerIdNum: '',
		vehicleId: '',
		type: '',
		cardId: '',
		cardType: '',
		cardStatus: '',
		cardExpireTime: '',
		obuId: '',
		obuStatus: '',
		obuExpireTime: '',
		customerTel: '',
		renewalType: 0,
		cardIsHaveRenewal: false,
		obuIsHaveRenewal: false,
	},
	renewalStatus: '0',
	checkboxOption: [],
	checkboxValue: [],
	
});

onLoad(({vehicleId}) => {
  if (vehicleId) {
	  state.vehicleId = decodeURIComponent(vehicleId)
  }
});

onShow(() => {
	
});

// 是否可以续期，有效期剩余一年才可续期
const isHandle = computed(() => {
	return state.checkboxOption && state.checkboxOption.length > 0
})

// 获取车辆详情
const getVehicleDetail = (res) => {
	state.vehicleInfo = res
	
	state.checkboxOption = []
	
	// 卡是否可以续期
	if (state.vehicleInfo.cardIsHaveRenewal) {
		state.checkboxOption.push({ label: '卡续期', value: 2, checked: false, isShow: false })
	}
	
	// obu是否可以续期
	if (state.vehicleInfo.obuIsHaveRenewal) {
		state.checkboxOption.push({ label: '签续期', value: 3, checked: false, isShow: false })
	}
}

	
const renewal = () => {
	
	 if (state.checkboxOption && state.checkboxOption.length === 0) {
		 uni.showToast({
			title: '有效期剩余一年才可续期，您暂时不用续期',
		 	icon: 'none'
		 })
		 return
	 }
	
	let isChecked = state.checkboxOption.filter(item => item.checked)
	if (isChecked.length === 0) {
		uni.showToast({
			title: '最少选择一种续期类型',
			icon: 'none'
		})
		return
	}
	let isType = 0 // 1：卡签续签 2：卡续签 3：签续签
	
	let checkedData = state.checkboxOption.filter(item => item.checked)
	
	if (checkedData.length >= 2) {
		isType = 1
	} else if (checkedData[0].value === 2) {
		isType = 2
	} else if (checkedData[0].value === 3) {
		isType = 3
	}
	
	state.vehicleInfo.renewalType = isType
	
	//续签
	// confirm("是否确认续签？", () => {
	let renewalInfo = state.vehicleInfo // 续签缓存
	console.log(renewalInfo)
	uni.setStorageSync('renewalInfo', renewalInfo)
	uni.navigateTo({
		url: `/subpackage/after-sale/renewalContral/renewal-type?vehicleId=${state.vehicleId}`,
	});
	// })
}

//多项选择器
const checkboxGroupChange = (e : any) => {
	console.log(e)
	// let data = e.detail.value
	// state.renewalStatus = data
}

const toggleCheckbox = (item: any) => {
	item.checked = !item.checked
}
</script>

<style lang="scss" scoped>
	.main-block {
		background-color: white;
		width: 88%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	
		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #01243A;
			margin-bottom: 12rpx;
		}
	}
	.column-checkbox-group{
		display: flex;
		.column-checkbox{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			flex: 1;
			.u-icon{
				font-size: 24rpx;
				color: #2CE242;
			}
			.checkbox-icon{
				width: 38rpx;
				height: 38rpx;
				border: 1px solid #c8c9cc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}
			.is-checked{
				border-color: #2CE242;
				background-color: #2CE242;
			}
			.u-icon{
				margin-right: 10rpx;
			}
		}
	}
</style>