zhywpt-sp/after-sale/refund-order-balance/refund-order-balance.vue

<template>
	<view class="oderPage">
		<view v-if="state.list&&state.list.length>0" v-for="(item,index) in state.list" class="details">
			<view class="header">
				<image :src="`${$imgUrl}order/no1.png`" mode=""></image>
				<text>{{item.orderId}}</text>
			</view>
			<view class="hr">

			</view>
			<view class="row">
				<view class="">
					订单车牌号：
				</view>
				<text>{{item.vehiclePlate}}</text>
			</view>
			<view class="row">
				<view class="">
					旧卡号：
				</view>
				<text>{{item.cardId}}</text>
			</view>
			<view class="row">
				<view class="">
					旧卡金额：
				</view>
				<text>{{item.cardBalance}}</text>
			</view>
			<view class="line">
			</view>

			<button v-if="item.refundType === 'GLYQR'" @click="refundTypeAction(item)"> 补领申请</button>
			<button v-if="item.refundType === 'BALSUP'" @click="refundTypeAction(item)"> 圈层</button>
		</view>
		<view v-else>
			<empty title='暂无找到该车牌相关余额补领信息' />
		</view>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from "vue"
	import {
		navTo
	} from "@/utils/utils"
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		queryRefund,
		queryRefundApply
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		msg
	} from "@/utils/utils";

	import {
		stringToJson
	} from "@/utils/network/encryption";

	//-----蓝牙模块
	const bluetoothUtil = require("../../static/etcUtil/index.js");
	const cmd = require("../../static/etcUtil/cmdConfig.js");
	const tools = require("../../static/etcUtil/tools.js");
	const card = reactive({
		/*卡相关信息*/
		cardId: "",
		netId: "",
		cardType: "",
		startTime: "",
		endTime: "",
		userName: "",
		idNum: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		color: "",
		version: "",
		type: "",
		favourable: "",
		money: undefined,
		v_userType: "",
	});
	const state = reactive({
		vehicleId: '',
		list: [],
		id: ''
	});

	/*视图进入后操作*/
	onLoad((option) => {
		state.vehicleId = option.vehicleId
		//根据车牌查询信息
		queryRefundAction().then(val => {
			state.list = val.data
		})
		/*监听蓝牙回调*/
		uni.$on('bluetoothLink', function(status) {
			getCardId()
		})
	});

	onUnload(() => {
		/*移除监听*/
		uni.$off('bluetoothLink')


	});
	//功能跳转入口
	const refundTypeAction = (val: any) => {

		if (val.refundType === 'GLYQR') {
			/*余额补领申请*/
			queryRefundApplyAction(val.id).then((value: any) => {
				state.id = value.id
				/*查询完刷新状态*/
				queryRefundAction().then((result: any) => {
					state.list = result.data
				})
			})

		} else if (val.refundType === 'BALSUP') {
			/*圈层*/
			//链接蓝牙
			uni.navigateTo({
				url: `/pages/bluetooth/bluetooth?routeType=5`,
			});
		}
	}


	//储值卡注销退费查询接口
	const queryRefundAction = () => {

		var data = {
			vehicleId: state.vehicleId
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

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

	//储值卡注销余额补领申请接口
	const queryRefundApplyAction = (id) => {
		var data = {
			id: id
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

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

	/*读卡*/
	const getCardId = () => {
		console.log("======获取卡信息======");
		let cmdArr = [
			cmd.HOME_DIRECTORY,
			//选择主目
			cmd.APPLICATION_DIRECTORY,
			//选择文件1001--DF01联网收费应用目录
			cmd.CMD_READBINARY,
			//15文件--卡片发行基本数据文件
			cmd.CMD_GETBALANCE,
			//钱包
		];
		tools.showLoadingAlert("正在执行指令");
		//10：写卡   20：写OBU
		bluetoothUtil.transCmd(cmdArr, "10", function(res) {
			tools.hideLoadingAlert();
			let str = res[2].substring(res[2].length - 4, res[2].length);
			let str3 = res[3].substring(res[3].length - 4, res[3].length);
			if (str == "9000" || str3 == "9000") {
				if (res[2].length > 86 || res[3] >= 12) {
					card.cardId = res[2].substring(20, 40); //卡号
					card.startTime = res[2].substring(40, 48);
					card.endTime = res[2].substring(48, 56);
					card.version = res[2].substring(18, 19) >= 4 ? "4x" : "2x";
					card.netId = res[2].substring(20, 24);
					card.cardType = res[2].substring(28, 29) == 23 ? 1 : 2;
					card.vehiclePlateColor = parseInt(res[2].substring(82, 84), 16);
					(card.money = parseInt(parseInt(res[3].substring(0, 8), 16), 10)),
					console.log("======卡信息======", card);

					if (card.cardId !== state.cardId) {
						msg("设备卡信息与当前充值卡号不匹配，请核对卡号");
						return;
					}
					quanCheckActionTrue().then((val) => {
						checkQuanCengEvent(val);
					});
				} else {
					console.error("CMD_READBINARY指令长度不符" + res[2]);
					tools.hideLoadingAlert();
				}
			}
			console.error("CMD_READBINARY指令长度不符" + res[2]);
			tools.hideLoadingAlert();
		});
	};
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #EEF7F7;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.oderPage {

		.details {
			margin: 30rpx;
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;

			.header {
				align-items: center;
				display: flex;
				padding-bottom: 30rpx;
				// border-bottom: 1px solid #DCDCDC;

				image {
					width: 51rpx;
					height: 31rpx;
				}

				text {
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.hr {
				height: 1rpx;
				background: #DCDCDC;
				width: 100%;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}

			.row {
				display: flex;
				margin: 34rpx 0;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;

				view {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;

				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background: #DCDCDC;

			}

			button {
				width: 141rpx;
				height: 61rpx;
				background: #FFFFFF;
				border: 1px solid #00B38B;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #00B38B;
				line-height: 61rpx;
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				padding: 0;
			}
		}

	}
</style>