zhywpt-sp/subpackage/after-sale/renewalContral/result.vue

<template>
	<view class="main" v-if="state.renewalSuccess">
		<image class="icon-success" :src="`${$imgUrl}common/etc-status-success.png`" mode="heightFix"></image>
		<view class="title">续期成功！</view>
	</view>
	
	<template v-else>
		<view class="main-block" v-if="state.renewalInfo.renewalType == '1' || state.renewalInfo.renewalType == '2'">
			<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.renewalInfo.cardId}}</text>
					</view>
					<view>
						<text>卡类型：</text>
						<text class="cardStatus">{{ getCodeName('CARD_TYPE', state.renewalInfo.cardType)}}</text>
					</view>
					<view>
						<text>卡状态：</text>
						<text class="cardStatus success">{{ getCodeName('CARD_STATUS', state.renewalInfo.cardStatus) }}</text>
					</view>
					<view>
						<text>到期时间：</text>
						<text :class="{'is-warning': state.renewalInfo.cardIsHaveRenewal}">{{ state.renewalInfo.cardExpireTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main-block"  v-if="state.renewalInfo.renewalType == '1' || state.renewalInfo.renewalType == '3'">
			<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.renewalInfo.obuId }}</text>
					</view>
					<view>
						<text>OBU状态：</text>
						<text class="cardStatus success">{{ getCodeName('OBU_STATUS', state.renewalInfo.obuStatus) }}</text>
					</view>
					<view>
						<text>到期时间：</text>
						<text :class="{'is-warning': state.renewalInfo.obuIsHaveRenewal}">{{ state.renewalInfo.obuExpireTime }}</text>
					</view>
				</view>
			</view>
		</view>
	</template>
	
	<button v-if="state.renewalSuccess" class="ui-btn" @click="backHome" style="margin-top: 120rpx;">返回首页</button>
	
	<FixedFooter v-else>
		<button v-if="state.flag" type="default" class="ui-btn" style="opacity: 0.8;">
			<u-loading mode="circle" style="margin-right: 24rpx;" size="12"></u-loading>续期中...
		</button>
		<button
			v-else
			type="default"
			class="ui-btn"
			@click="confirmRenewal()">
			确认续期
		</button>
	</FixedFooter>
	
</template>

<script setup >
	import { ref, reactive } from 'vue'
	import { onLoad, onShow} from "@dcloudio/uni-app";
	import { requestNew } from "@/utils/network/request.js";
	import { cardAndObuRenewal, readAndWriteRenewalInst, renewalConfirm } from '@/utils/network/api.js'
	import { confirm, msg, navTo } from '@/utils/utils'
	import { getCodeName } from "@/datas/queryKey.js";
	import FixedFooter from '@/components/common/FixedFooter.vue'
	const bluetoothUtil = require("../../../static/etcUtil/index.js");
	const tools = require("../../../static/etcUtil/tools.js");
	const state = reactive({
		renewalInfo: {
			customerName: '',
			customerIdType: '',
			customerIdNum: '',
			vehicleId: '',
			type: '',
			cardId: '',
			cardType: '',
			cardStatus: '',
			cardExpireTime: '',
			obuId: '',
			obuStatus: '',
			obuExpireTime: '',
			customerTel: '',
			transWay: '',
			renewalType: ''
		},
		disabled: true,
		renewalSuccess: false,
		flag: false,
		transWay: 'blu' // blu: 蓝牙功能 nfc： nfc：连接
	})
	
	const backHome = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	
	onLoad((option) => {
		let renewalInfo = uni.getStorageSync('renewalInfo')
		state.renewalInfo = renewalInfo
		
		console.log(state.renewalInfo)
	})
	
	const confirmRenewal = () => {
		confirm('确认续期？', () => {
			cmdResultSH()
		})
	}
	
	// 开始卡签续期，初始化
	const startRenewal = () => {
		return new Promise(resolve => {
			let option = {
				type: 2,
				data: {
					cardId: state.renewalInfo.cardId,
					obuId: state.renewalInfo.obuId,
					renewalType: state.renewalInfo.renewalType,
				},
				method: "POST",
				showLoading: true,
			}
			requestNew(cardAndObuRenewal, option).then(res => {
				console.log(res)
				resolve(res)
			}).catch((err) => {
				console.log(err);
				state.flag = false
				tools.hideLoadingAlert();
			})
		})
	}
	
	const cmdResultSH = () => {
		tools.showLoadingAlert('正在续期，请等待')
		state.flag = true
		startRenewal().then(res => {
			bluetoothUtil.transCmd(res.cmd.split(','), res.cmdType == 'CARD' ? '10' : '20', (bluetoothRes) => {
				implementCmdSH(res.transOrderId, res.cmd, bluetoothRes.toString(), res.stepNo)
			}, (err) => {
				console.log(err)
				confirm('续期异常', () => {
					uni.navigateBack()
				})
				tools.hideLoadingAlert();
				state.flag = false
			});
		}).catch(err => {
			state.flag = false
		})
	}
	
	// 续期完成
	const renewalOver = (stepNo) => {
		let option = {
			type: 2,
			data: {
				cardId: state.renewalInfo.cardId,
				obuId: state.renewalInfo.obuId,
				renewalType: state.renewalInfo.renewalType,
				oldCardExpireTime: state.renewalInfo.cardExpireTime,
				oldObuExpireTime: state.renewalInfo.obuExpireTime,
				stepNo: stepNo,
			},
			method: "POST",
			showLoading: true,
		}
		console.log(option)
		requestNew(renewalConfirm, option).then(res => {
			console.log(res)
			tools.hideLoadingAlert();
			msg("续期成功", {
				'icon': 'success',
				'duration': 3000
			})
			state.disabled = true
			state.renewalSuccess = true
			state.flag = false
		}).catch((err) => {
			console.log(err);
			state.flag = false
			tools.hideLoadingAlert();
		}).catch((err) => {
			console.log(err);
			state.flag = false
			tools.hideLoadingAlert();
		})
	}
	
	// 激活指令触发
	const implementCmdSH = (transOrderId, cmd, cmdResult, stepNo) => {

		const options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			showLoading: false,
			data: {
				transOrderId, //步骤号
				cmd,
				cmdResult,
				stepNo
			}, //请求参数
			method: "POST", //提交方式(默认POST)
		};
		console.log("options2222", options)
		//BDS-二发指令回传 
		requestNew(readAndWriteRenewalInst, options)
			.then((res) => {
				console.log("BDS-二发指令回传 ",res);
				const datas = res;
				console.log("在线续期请求", datas);
				if (datas.stepNo == 100) {
					state.disabled = true
					
					renewalOver(100)
					
				} else {
					console.log("datas.stepNo", datas.stepNo)
					bluetoothUtil.transCmd(datas.cmd.split(','), datas.cmdType == 'CARD' ? '10' : '20', function(res) {
						implementCmdSH(transOrderId, datas.cmd, res.toString(), datas.stepNo)
					}, () => {
						confirm('续期异常', () => {
							uni.navigateBack()
						})
					});
				}
			})
			.catch((err) => {
				console.log(err);
				tools.hideLoadingAlert();
				state.flag = false
			});
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 560rpx;
		margin: 0 auto;
		padding: 25rpx 20rpx 55rpx;
		text-align: center;
		.top{
			text-align: right;
			.icon-close{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.icon-success{
			height: 320rpx;
			margin-top: 22rpx;
		}
		.title{
			color: #333333;
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
			margin-top: 55rpx;
		}
	}
	
	.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;
		}
	}
	
	.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;
		}
	
		.vehiclePlate {
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
		}
		.is-warning{
			color: #FF9900;
		}
	}
</style>