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

<template>
	<view class="upload-box">
		<u-form :model="form" ref="myForm" :error-type="errorType">
			<view class="from">
				<view class="title"> 请填写注销原因 </view>
				<u-form-item prop="remark">
					<view class="from_item">
						<text><text style="color: red"></text>注销原因:</text>
						<view style="display: flex">
							<u-input v-model="form.ReasonCancellation" @click="showPicker()" class="input" disabled
								placeholder="请选择" />
							<u-icon name="arrow-right" style="margin-left: 10px;display: flex;"></u-icon>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>

		<button class="submit" @click="toPage()">注销</button>
		<!-- 选择弹窗 -->
		<view>
			<!-- 原因 -->
			<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload,
		onReady,
	} from "@dcloudio/uni-app";
	import {
		navTo,
		checkStr
	} from "@/utils/utils";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		writeCardBack,
		CardSignCancellation,
		confirmSignCancellation
	} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption.js";
	const bluetoothUtil = require("../../../static/etcUtil/index.js");
	// 表单数据
	const form = reactive({
		obuId: '',
		cardId: '',
		orderId: '',
		ReasonCancellation: "",
		equipmentState: ''
	});
	const list = reactive([{
		//原因
		value: "原因1",
		label: "原因1",
	},
	{
		value: "原因1",
		label: "原因1",
	},
	{
		value: "原因1",
		label: "原因1",
	},
	]);

	// 验证提示类型(toast要版本为1.3.5才支持)
	const errorType = ["border-bottom", "toast"];

	// 设置验证规则
	const myForm = ref(null);

	onReady(() => {

	});

	onLoad((option) => {
		form.obuId = option.obuId;
		form.cardId = option.cardId;
		form.orderId = option.orderId
		form.equipmentState = option.equipmentState
		console.log("option.orderId", option)
		/*监听蓝牙回调*/
		uni.$on('bluetoothLink', function (status) {
			queryCardSignCancellation(1, 1, 1).then((item : any) => {
				instructAction(item).then(value => {
					if (value.orderStatus === 1) {
						instructAction(item)
					} else {
						queryConfirmSignCancellation(0).then((val : any) => {
							console.log(val)
							navTo("/subpackage/after-sale/ETC-log-off/log-off-result");
						})
					}
				})
			})
		})
	});
	onUnload(() => {
		/*移除监听*/
		uni.$off('bluetoothLink')


	});
	const show = ref(false);

	const showPicker = function () {
		show.value = true;

	};
	// 选择物流
	const confirm = (e) => {
		console.log(e);
		form.ReasonCancellation = e[0].value;
	};

	const toPage = () => {
		//参数说明
		let options = {};
		if (form.equipmentState === '1') {
			navTo("/pages/bluetooth/bluetooth?routeType=5");

		} else {
			queryCardSignCancellation(2, 2, 0).then((item : any) => {
				queryConfirmSignCancellation(0).then((val : any) => {
					console.log(val)
					navTo("/subpackage/after-sale/ETC-log-off/log-off-result");
				})
			})
		}
	};

	/*指令返回*/
	const instructAction = (data) => {

		let cmdArr = data.command.split(",");
		console.log(cmdArr);
		bluetoothUtil.transCmd(cmdArr, "10", function (res) {
			console.log("透传");
			console.log(res);
			var arraylenth = res.length;
			var status = res[arraylenth - 1].substring(
				res[arraylenth - 1].length - 4,
				res[arraylenth - 1].length
			);
			console.log("打印指令状态");
			console.log(status);
			if (status === "9000") {
				var form = {
					command: data.command,
					response: res.toString(),
					cosRecordId: data.cosRecordId,
					cardId: form.cardId,
					cosType: 9 //1- 开卡. 2- 修改卡内信息  4- 卡签绑定  9- 销卡
				};
				const options = {
					type: 2,
					data: form,
					method: "POST",
					showLoading: true,
				};
				return new Promise(async (resolve, reject) => {
					const res = await request(writeCardBack, options);
					const data = stringToJson(res.bizContent);
					resolve(data);
				}).catch((error) => {
					reject(error);
				});
			}
		});
	};

	//注销申请
	const queryCardSignCancellation = (hasCard, hasObu, cosProvider) => {
		if (form.orderId) {
			var options = {
				type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
				data: {
					hasCard: hasCard,
					hasObu: hasObu,
					cosProvider: cosProvider,
					cardId: form.cardId, //卡号
					obuId: form.obuId, //签号
					serviceType: 3, //注销类型 1-卡注销，2-签注销，3-卡签注销
					orderId: form.orderId, //订单编号
					ReasonCancellation: form.ReasonCancellation
				}, //请求参数
				method: "POST", //提交方式(默认POST)
				showLoading: true, //是否显示加载中(默认显示)
			};
		} else {
			var options = {
				type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
				data: {
					hasCard: hasCard,
					hasObu: hasObu,
					cosProvider: cosProvider,
					cardId: form.cardId, //卡号
					obuId: form.obuId, //签号
					serviceType: 3, //注销类型 1-卡注销，2-签注销，3-卡签注销
					// orderId: form.orderId, //订单编号
					ReasonCancellation: form.ReasonCancellation
				}, //请求参数
				method: "POST", //提交方式(默认POST)
				showLoading: true, //是否显示加载中(默认显示)
			};
		}

		return new Promise(async (resolve, reject) => {
			const res = await request(CardSignCancellation, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	//注销确认
	const queryConfirmSignCancellation = (hasCard : any) => {
		return new Promise(async (resolve, reject) => {
			const res = await request(confirmSignCancellation, {
				type: 2,
				data: {
					hasCard: hasCard,
					orderId: form.orderId,
					cardId: form.cardId
				},
				method: "POST",
				showLoading: true,
			});

			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.upload-box {
		// width: 100%;
		padding: 30rpx;

		.head-tips {
			text-indent: 2rem;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 50rpx;
			margin-bottom: 45rpx;

			text {
				color: #ff8000;
			}
		}

		.upload-card {
			margin-bottom: 70rpx;
			height: 260rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			.card-left {
				.item1 {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					margin-bottom: 30rpx;
				}

				.item2 {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					margin-bottom: 30rpx;
				}

				.item3 {
					width: 110rpx;
					height: 40rpx;
					background: #ecfbf8;
					/* opacity: 0.2; */
					border-radius: 6rpx;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					text-align: center;
					line-height: 40rpx;
					color: #0a8f8a;
				}
			}

			image {
				width: 295rpx;
				height: 188rpx;
			}
		}

		.from {
			background-color: #fff;
			margin-top: 30rpx;
			// padding: 0 30rpx;

			::v-deep .u-form-item {
				padding: 0;
				line-height: normal;

				.u-form-item__message {
					margin-bottom: 12rpx;
				}
			}

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				margin: 38rpx 0;
			}

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-bottom: 1rpx solid #dcdcdc;

				::v-deep .input {
					text-align: right;
					flex: 1;

					input {
						text-align: right;
					}
				}
			}

			.from_item1 {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: #dcdcdc 1px solid;

				input {
					text-align: right;
				}

				.textarea {
					background-color: #f1f1f1;
					width: 100%;
					border-radius: 20rpx;
					margin-top: 10rpx;
					text-indent: 1rem;
					height: 180rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.submit {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			margin: 60rpx auto;
		}
	}
</style>