设备注销功能开发

components/vehicle-detail/vehicle-detail.vue

@@ -16,7 +16,7 @@
 		</view>
 		<view class="info-item">
 			<text class="label">订单车牌号</text>
-			<text class="value">{{ state.vehicleInfo.vehicleId }}</text>
+			<text class="value">{{ state.vehicleInfo.vehiclePlate }}</text>
 		</view>
 		<view class="info-item">
 			<text class="label">收费车型</text>

login/login.vue

@@ -20,7 +20,7 @@
 			<view class="form-input" v-if="state.loginType === 'code'">
 				<input class="input" v-model="state.code" placeholder="请输入验证码" placeholder-class="form-placeholder"
 					maxlength="6" type="number" />
-				<verification-code :bg="false" :mobile="state.username" businessType=0></verification-code>
+				<verification-code :bg="false" :mobile="state.username" :businessType="0"></verification-code>
 			</view>
 		</view>
 

pages.json

@@ -677,6 +677,13 @@
 						"enablePullDownRefresh": false
 					}
 				},
+				{
+					"path": "ETC-log-off/breach_contract_pay",
+					"style": {
+						"navigationBarTitleText": "违约金支付",
+						"enablePullDownRefresh": false
+					}
+				},
 				{
 					"path": "ETC-log-off/upload-card",
 					"style": {

pages/bluetooth/bluetooth.vue

@@ -710,7 +710,10 @@
 	});
 
 	function oks() {
-		//routeType 1.激活（订单来）  2.圈存 （/pages/recharge/recharge来）3.ping码解锁 4.信息读取  5从哪里来回哪里去监听bluetoothLink  7消费明细去圈存  8单位账户圈存  9对公账户修复 11 卡签续约
+		//routeType 
+		// 1.激活（订单来）  2.圈存 （/pages/recharge/recharge来）3.ping码解锁 4.信息读取
+		// 5从哪里来回哪里去监听bluetoothLink  7消费明细去圈存  8单位账户圈存  9对公账户修复 11 卡签续约
+		// 12: 解除挂失  13：设备注销
 		if (routeType.value == "1") {
 			if (state.isAfter == '1') {
 				uni.navigateTo({
@@ -784,6 +787,8 @@
 			uni.navigateTo({
 				url: `subpackage/after-sale/releaseSuspension/cardloss?${objectToQueryString(state.pageParams)}`
 			})
+		} else if (routeType.value == "13") {
+			
 		} else {
 			return;
 		}

static/css/common.scss

@@ -387,4 +387,32 @@
 		color: #01243A;
 		margin-bottom: 12rpx;
 	}
+}
+// 自定义checked框
+.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;
+		}
+	}
 }

stores/device.js

@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+
+export const deviceStore = defineStore("deviceStore", {
+	state: () => ({
+		deviceInfo: {
+			cardId: '',
+			obuId: '',
+			cardTypeNew: '',
+			cardType: '',
+			cardExpireTime: '',
+			obuExpireTime: ''
+		}, // 卡签注销设备详情
+		logOff: { // 车辆注销参数相关参数
+			cancelAgeLimit: 0, // 注销年限
+			cancelAmount: 0, // 注销违约金 单位：分
+			isBlack: false, // 是否存在黑名单
+			isCancel: false, // 是否需要支付违约金
+			productName: "" // 产品名称
+		}
+	}),
+
+	getters: {},
+	
+	actions: {
+		setDeviceInfoStore (info) {
+			this.deviceInfo = info
+		},
+		setLogOffStore (info) {
+			this.logOff = info
+		}
+	}
+})

subpackage/after-sale/ETC-log-off/breach_contract_pay.vue

@@ -0,0 +1,196 @@
+<template>
+	<view class="content">
+		<view @click="confirmPay()" class="ul-item">
+			<image style="width: 100%; height: 146rpx;" :src="`${$imgUrl}issuance/equity-bg.png`"
+				mode='scaleToFill'>
+			</image>
+			<view class="item-value">
+				<view class="money">
+					<text class='unit'>￥</text>
+					<text>{{ state.deviceLogOutState.cancelAmount }}</text>
+				</view>
+				<view class="content">
+					<view class="title">
+						违约金
+					</view>
+				</view>
+				<view class="r-btn">支付</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { reactive, ref, computed } from "vue";
+	import { onLoad } from "@dcloudio/uni-app";
+	import { breachContractPaySearch, deviceLogOutStateQuery, breachContractPay, confirmBreachContract } from '@/utils/network/api.js'
+	import { requestNew } from "@/utils/network/request.js";
+	import { number } from "echarts";
+	import { confirm } from '@/utils/utils'
+	import { logOffConfirm } from './js/log-off.js'
+	import { deviceStore } from '@/stores/device.js'
+	
+	const deviceStores = deviceStore()
+	const state = reactive({
+		orderNo: '',
+		vehicleId: '',
+		isConnectDevice: false, // 是否连接设备
+		deviceLogOutState: {
+			cancelAgeLimit: 0, // 注销年限
+			cancelAmount: 0, // 注销违约金 单位：分
+			isBlack: false, // 是否存在黑名单
+			isCancel: false, // 是否需要支付违约金
+			productName: "" // 产品名称
+		},
+		flag: true
+	})
+	
+	onLoad(({orderNo, vehicleId, isConnectDevice}) => {
+		if (orderNo) {
+			state.orderNo = orderNo
+			state.vehicleId = vehicleId
+			state.isConnectDevice = isConnectDevice === '1'
+			getDeviceLogOutStateQuery()
+		}
+	})
+	
+	const getDeviceLogOutStateQuery = () => {
+		let option = {
+			data: {
+				vehicleId: state.vehicleId,
+				cardId: deviceStores.deviceInfo.cardId,
+				obuId: deviceStores.deviceInfo.obuId
+			},
+			method: "POST",
+			showLoading: true,
+		}
+		requestNew(deviceLogOutStateQuery, option).then(res => {
+			state.deviceLogOutState = res
+			console.log(state.deviceLogOutState)
+		})
+	}
+	
+	const getPayInfo = () => {
+		let option = {
+			type: 2,
+			data: {orderNo: state.orderNo},
+			method: "POST",
+			showLoading: true,
+		}
+		requestNew(breachContractPaySearch, option).then(res => {
+			
+		})
+	}
+	
+	const confirmPay = () => {
+		if (!state.flag) return false
+		let option = {
+			type: 2,
+			data: {orderNo: state.orderNo},
+			method: "POST",
+			showLoading: true,
+		}
+		state.flag = false
+		requestNew(breachContractPay, option).then(res => {
+			const data = res;
+			uni.requestPayment({
+				provider: "wxpay",
+				orderInfo: "",
+				timeStamp: data.timeStamp,
+				nonceStr: data.nonceStr,
+				package: data.wxPackage ? data.wxPackage : "",
+				signType: data.signType,
+				paySign: data.paySign,
+				success: (e) => {
+					console.log("支付成功", res);
+					let params = {
+						cardExpireTime: deviceStores.deviceInfo.cardExpireTime,
+						hasDevice: '',
+						obuExpireTime: deviceStores.deviceInfo.obuExpireTime,
+						orderNo: state.orderNo
+					}
+					logOffConfirm(params)
+				},
+				fail: function (err) {
+					confirm(err, () => { }, "支付失败", false);
+				},
+			});
+			state.flag = true
+		}).catch(() => {
+			state.flag = true
+		})
+		
+	}
+	
+	const confirmLogOut = () => {
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		padding: 32rpx;
+	}
+	.ul-item {
+		display: flex;
+		align-items: center;
+	
+		&:nth-child(n+2) {
+			margin-top: 30rpx;
+		}
+	
+		.item-value {
+			padding: 20rpx;
+			position: absolute;
+			display: flex;
+			align-items: center;
+			width: 81%;
+			box-sizing: border-box;
+			height: 146rpx;
+	
+			.money {
+				color: #fff;
+				font-size: 46rpx;
+				font-family: SourceHanSansCN, SourceHanSansCN;
+				font-weight: 400;
+				flex: 1;
+	
+				.unit {
+					font-size: 29rpx;
+					margin-right: 2rpx;
+				}
+			}
+	
+			.content {
+				margin-left: 60rpx;
+				flex: 2;
+	
+				.title {
+					font-weight: 400;
+					font-family: SourceHanSansCN, SourceHanSansCN;
+					font-size: 36rpx;
+					color: #2C3246;
+				}
+			}
+	
+			.r-btn {
+				width: 139rpx;
+				height: 65rpx;
+				background: radial-gradient(at 0% 0%, #C6B077 0%, #DFCC96 100%);
+				border-radius: 33rpx;
+				font-family: SourceHanSansCN, SourceHanSansCN;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #FFFFFF;
+				line-height: 65rpx;
+				text-align: center;
+				flex: 1;
+			}
+		}
+	
+		.icon-tip {
+			width: 100rpx;
+			height: 100rpx;
+		}
+	}
+</style>

subpackage/after-sale/ETC-log-off/etc-log-off.vue

@@ -55,12 +55,26 @@
 			<view class="title"> 是否可以连接设备 </view>
 			<u-form label-width="230" :model="formData" ref="uForm" :label-style='labelStyle'>
 				<u-form-item label=" " borderBottom>
-					<u-radio-group activeColor="#2CE242" v-model="state.isConnectDevice" @change="isConnectDeviceChange">
+					<!-- <u-radio-group activeColor="#2CE242" v-model="state.isConnectDevice" @change="isConnectDeviceChange">
 						<view class="u-radio-list">
 							<view class="u-radio-block"><u-radio name="1">是</u-radio></view>
 							<view class="u-radio-block"><u-radio name="2">否</u-radio></view>
 						</view>
-					</u-radio-group>
+					</u-radio-group> -->
+					
+					<view class="column-checkbox-group">
+						<view
+							v-for="item in state.checkboxOption"
+							:key="item.value"
+							class="column-checkbox"
+							style="justify-content: flex-end;"
+							@click="isConnectDeviceChange(item.value)">
+							<view class="checkbox-icon" :class="{'is-checked': item.value === state.isConnectDevice}">
+								<u-icon name="checkbox-mark" :color="item.value === state.isConnectDevice ? '#FFFFFF' : '#FFFFFF'"></u-icon>
+							</view>
+							<text>{{ item.label  }}</text>
+						</view>
+					</view>
 				</u-form-item>
 			</u-form>
 		</view>
@@ -95,13 +109,11 @@
 	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
 	import { getVehiclePlateColorPai } from '@/datas/vehiclePlateColor'
 	import uploadOcr from '@/components/uploadOcr';
-	import { compareDates } from '@/utils/utils'
+	import { compareDates, objectToQueryString } from '@/utils/utils'
 	// import { getCardDetail } from '@/static/etcUtil/etc-bluethooh.js'
+	import { deviceStore } from '@/stores/device.js'
 	
-	const commonStoreUse = commonStore()
-	const { getSelectIndex, setIsRefresh } = commonStoreUse
-	
-	const refreshKey = 'runWaterRefundInfo'
+	const deviceStores = deviceStore()
 	
 	const isMultiProvince = [
 		{name: '单省', id: 0},
@@ -114,9 +126,6 @@
 	
 	interface pageParams{
 		vehicleId: string,
-		cardId: string,
-		obuId: string,
-		cardType: string
 	}
 	
 	const labelStyle = {
@@ -166,6 +175,10 @@
 		chooseBankInfo: '',
 		refundInfoList: [],
 		isConnectDevice: "", // 是否可以连接设备
+		checkboxOption: [
+			{value: '1', label: '是'},
+			{value: '2', label: '否'}
+		],
 	})
 	
 	onLoad((option: pageParams) => {
@@ -174,10 +187,12 @@
 			let arr = state.vehicleId.split('_')
 			formData.vehiclePlate = arr[0]
 		}
-		if (option.cardId) formData.cardId = option.cardId
-		if (option.obuId) formData.obuId = option.obuId
-		if (option.cardType) {
-			formData.cardType = option.cardType
+		let deviceInfo = deviceStores.deviceInfo
+		console.log(deviceStores.deviceInfo)
+		formData.cardId = deviceInfo.cardId
+		formData.obuId = deviceInfo.obuId
+		if (deviceInfo.cardType) {
+			formData.cardType = deviceInfo.cardTypeNew
 			if (formData.cardType === 'STORED_VALUE_CARD') {
 				formData.operateType = 'BANK'
 			} else {
@@ -213,12 +228,26 @@
 		}
 		//调用方式
 		requestNew(deviceLogOutApply, options).then(res => {
+			console.log(res)
 			if (state.isConnectDevice === '1') { // 可连接设备
 				uni.navigateTo({
 					url: '/pages/bluetooth/bluetooth?routeType=13'
 				})
 			} else {
-				
+				// 如果需要缴纳违约金
+				if (deviceStores.logOff.isCancel) {
+					let params = {
+						orderNo: res.orderNo,
+						vehicleId: formData.vehicleId,
+						isConnectDevice: '2'
+					}
+					uni.navigateTo({
+						url: `/subpackage/after-sale/ETC-log-off/breach_contract_pay?${objectToQueryString(params)}`
+					})
+					
+				} else {
+					
+				}
 			}
 			// uni.redirectTo({
 			// 	url: '/pages/common/submit-result?back=1&tipText=' + '预计1-3日完成资料审核'
@@ -256,6 +285,9 @@
 		} else if (formData.cardType === 'STORED_VALUE_CARD' && !state.chooseBankInfo) {
 			msg('请选择退费信息');
 			isVerify = false;
+		} else if (!state.isConnectDevice) {
+			msg('请选择是否可以连接设备');
+			isVerify = false;
 		}
 		return isVerify;
 	}
@@ -336,8 +368,6 @@
 	
 	// 选择开户航
 	const chooseBank = (val, obj) => {
-		console.log(val)
-		console.log(obj)
 		formData.bankIdCode = obj.bankIdCode
 		formData.bankName = obj.bankName
 		formData.bankProvince = obj.bankProvince
@@ -511,6 +541,8 @@
 		justify-content: flex-end;
 		.u-radio-block{
 			width: 50%;
+			display: flex;
+			justify-content: flex-end;		
 		}
 	}
 </style>

subpackage/after-sale/ETC-log-off/js/log-off.js

@@ -0,0 +1,26 @@
+import { confirmBreachContract } from '@/utils/network/api.js'
+
+// 注销确认
+export const logOffConfirm = (params) => {
+	let option = {
+		data: params,
+		method: "POST",
+		showLoading: false,
+	}
+	uni.showLoading({
+		title: '注销中...'
+	})
+	requestNew(confirmBreachContract, option).then(res => {
+		uni.hideLoading()
+		uni.showToast({
+			title: '注销成功'
+		})
+		setTimeout(() => {
+			uni.switchTab({
+				url: '/pages/service/service'
+			})
+		}, 1000)
+	}).catch(() => {
+		uni.hideLoading()
+	})
+}

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

@@ -34,6 +34,9 @@
 	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: '',
@@ -80,12 +83,14 @@
 		}
 		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 {
@@ -109,13 +114,7 @@
 			})
 			return false
 		}
-		let params = {
-			vehicleId: state.vehicleId,
-			cardId: state.vehicleInfo.cardId,
-			cardType: state.vehicleInfo.cardTypeNew,
-			obuId: state.vehicleInfo.obuId,
-		}
-		navTo(`/subpackage/after-sale/ETC-log-off/etc-log-off?${objectToQueryString(params)}`)
+		navTo(`/subpackage/after-sale/ETC-log-off/etc-log-off?vehicleId=${state.vehicleId}`)
 	}
 </script>
 

subpackage/after-sale/activation/activate.vue

@@ -193,7 +193,8 @@
 		favourable: "",
 		favourableStr: "",
 		money: "",
-		v_userType: ""
+		v_userType: "",
+		cardBalance: ""
 	});
 	const obu = reactive({
 		obuId: "",
@@ -904,6 +905,7 @@
 				vehicleEngineNum: obu.engineNum, // 发动机号码
 				vin: obu.vin, // 车辆识别代码
 				wheelCount: obu.wheelCount, // 车轮数
+				cardBalance: card.cardBalance
 			},
 			method: "POST",
 			showLoading: false,

subpackage/after-sale/deviceInfo/deviceInfo.vue

@@ -50,10 +50,15 @@
 				<view class="cell-left">卡状态</view>
 				<view class="cell-right"><textFilter :loading="card.loading" :text="getCodeName('CARD_STATUS',state.cardStatus)" :typeStr="card.typeStr" type="1"></textFilter></view>
 			</view>
-			<view class="cell" v-if="state.cardTypeName">
+			<view class="cell" v-if="state.cardTypeNameStr">
 				<view class="cell-left">卡类型</view>
-				<view class="cell-right"><textFilter :loading="card.loading" :text="card.cardTypeName" :typeStr="card.typeStr" type="1"></textFilter></view>
+				<view class="cell-right"><textFilter :loading="card.loading" :text="card.cardTypeNameStr" :typeStr="card.typeStr" type="1"></textFilter></view>
 			</view>
+			<view class="cell" v-if="card.cardTypeName === 'STORED_VALUE_CARD'">
+				<view class="cell-left">卡余额</view>
+				<view class="cell-right"><textFilter :loading="card.loading" :text="card.cardBalance" :typeStr="card.typeStr" type="1"></textFilter></view>
+			</view>
+			
 		</view>
 		<view class="info-card">
 			<view class="title">OBU信息</view>
@@ -63,7 +68,7 @@
 			</view>
 			<view class="cell">
 				<view class="cell-left">车辆类型</view>
-				<view class="cell-right"><textFilter :loading="obu.loading" :text="obu.cardTypeName" :typeStr="obu.typeStr" type="2"></textFilter></view>
+				<view class="cell-right"><textFilter :loading="obu.loading" :text="obu.typeStr" :typeStr="obu.typeStr" type="2"></textFilter></view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">车辆用户类型</view>
@@ -184,7 +189,10 @@
 		favourableStr:"",
 		money: "",
 		v_userType: "",
-		loading: true
+		loading: true,
+		cardTypeName: '',
+		cardTypeNameStr: '',
+		cardBalance: ''
 	})
 	const obu = reactive({
 		num: "",
@@ -230,7 +238,6 @@
 		tools.showLoadingAlert("执行指令");
 		let cmdArr = [cmd.HOME_DIRECTORY, cmd.APPLICATION_DIRECTORY, cmd.CMD_READBINARY, cmd.CMD_GETBALANCE];
 		console.log(cmdArr);
-		console.log(bluetoothUtil);
 		bluetoothUtil.transCmd(cmdArr, '10', function(res) { //10：写卡   20：写OBU
 		console.log("5201",res)
 			let str = res[2].substring(res[2].length - 4, res[2].length); //判断是否为9000
@@ -472,6 +479,7 @@
 			params.checksums = card.money
 			params.customerIdNum = card.idNum
 			params.customerName = card.userName
+			params.cardBalance = card.cardBalance
 		}
 		
 		if (obu.typeStr) {
@@ -570,12 +578,15 @@
 			if (result.cardType == 'PRE_CHARGE_CARD') {
 				state.cardTypeName = "预存卡"
 				card['cardTypeName']=3
+				card['cardTypeNameStr']="预存卡"
 			} else if (result.cardType == 'STORED_VALUE_CARD') {
 				state.cardTypeName = "储值卡"
 				card['cardTypeName']=2
+				card['cardTypeNameStr']= "储值卡"
 			} else if (result.cardType == 'CHARGE_CARD'){
 				state.cardTypeName = "记账卡"
 				card['cardTypeName']=1
+				card['cardTypeNameStr'] = "记账卡"
 			}
 			// 卡签提交得信息
 			card['cardStatus']=result.cardStatus

utils/network/api.js

@@ -417,6 +417,9 @@ export const cancelPayQuery = "/iaw/aftersale/cancel/payQuery" // 卡签注销
 export const cancelCancel = "/iaw/aftersale/cancel/cancel" // 卡签注销取消
 export const deviceLogOutStateQuery = "/iaw/deviceCancel/query" // 设备注销条件查询
 export const deviceLogOutApply = "/iaw/deviceCancel/apply" // 设备注销资料上传
+export const breachContractPaySearch = "/iaw/deviceCancel/queryPay" // 违约金支付查询
+export const breachContractPay = "/iaw/deviceCancel/pay" // 违约金支付查询
+export const confirmBreachContract = '/iaw/deviceCancel/confirm' // 确认注销
 
 // 首页接口
 export const infoQuery = "/iaw/api/promptText/query"; //8.212.文本信息查询接口