zhywpt-sp/pages/bluetooth/info.vue

<template>
	<view class="wrapper">
		<view class="info-card">
			<view class="title">卡信息</view>
			<view class="cell">
				<view class="cell-left">卡号</view>
				<view class="cell-right">{{ card.cardNo }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">用户姓名</view>
				<view class="cell-right">{{ card.userName }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">身份证号</view>
				<view class="cell-right">{{ card.idNum }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车辆类型</view>
				<view class="cell-right">{{ card.type }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车辆用户类型</view>
				<view class="cell-right">{{ card.v_userType }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车牌号</view>
				<view class="cell-right">{{ card.vehiclePlate }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车牌颜色</view>
				<view class="cell-right">{{ card.color }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">启用时间</view>
				<view class="cell-right">{{ card.startTime }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">结束时间</view>
				<view class="cell-right">{{ card.endTime }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">卡签绑定</view>
				<view class="cell-right">{{ card.favourable }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">校验值</view>
				<view class="cell-right">{{ card.money }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">版本号</view>
				<view class="cell-right">{{ card.version }}</view>
			</view>
		</view>
		<view class="info-card">
			<view class="title">OBU信息</view>
			<view class="cell">
				<view class="cell-left">序列号</view>
				<view class="cell-right">{{ obu.num }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车辆类型</view>
				<view class="cell-right">{{ obu.type }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车辆用户类型</view>
				<view class="cell-right">{{ obu.userType }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车牌号</view>
				<view class="cell-right">{{ obu.vehiclePlate }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车牌颜色</view>
				<view class="cell-right">{{ obu.vehiclePlateColor }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">核定载人数</view>
				<view class="cell-right">{{ obu.approvedCount }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车辆识别代号</view>
				<view class="cell-right">{{ obu.vin }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车牌发动机号</view>
				<view class="cell-right">{{ obu.engineNum }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车轴数</view>
				<view class="cell-right">{{ obu.axleCount }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">车轮数</view>
				<view class="cell-right">{{ obu.wheelCount }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">轴距</view>
				<view class="cell-right">{{ obu.axleDistance }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">启用时间</view>
				<view class="cell-right">{{ obu.startTime }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">结束时间</view>
				<view class="cell-right">{{ obu.endTime }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">是否激活</view>
				<view class="cell-right">{{ obu.isJH }}</view>
			</view>
			<view class="cell">
				<view class="cell-left">版本号</view>
				<view class="cell-right">{{ obu.version }}</view>
			</view>
		</view>
		<view class="btn" @click="back">返回订单列表</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from "vue";
	import {onLoad,onUnload} from "@dcloudio/uni-app";
	import {request} from "@/utils/network/request";
	import {orderDetail} from "@/utils/network/api";
	import {stringToJson} from "@/utils/network/encryption";
	const cmd = require("../../static/etcUtil/cmdConfig.js");
	const tools = require("../../static/etcUtil/tools.js");
	const datas = require("../../static/etcUtil/datas.js");
	const bluetoothUtil = require("../../static/etcUtil/index.js");
	const card = reactive({
		cardNo: "",
		startTime: "",
		endTime: "",
		userName: "",
		idNum: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		color: "",
		version: "",
		type: "",
		favourable: "",
		money: "",
		v_userType: "",
	})
	const obu = reactive({
		num: "",
		startTime: "",
		endTime: "",
		version: "",
		approvedCount: "",
		axleCount: "",
		axleDistance: "",
		engineNum: "",
		type: "",
		userType: "",
		vehiclePlate: "",
		vehiclePlateColor: "",
		vin: "",
		wheelCount: "",
		isJH: "",
	})
	onLoad((option)=>{
		getOrderDetails("f04b28632a2b4dd5959752d0eb2cdb6e")
	})
	//获取订单详情
	const getOrderDetails = (id:string) => {
		const options = {
			type: 2,
			data: {"id": id},
			method: 'POST',
			showLoading: true,
		}
		request(orderDetail, options).then((res) => {
			console.log(res.bizContent);
			const result = stringToJson(res.bizContent);
			card.cardNo = result.cardId;
			card.userName = result.ownerName;
			card.idNum = result.ownerIdnum;
			card.v_userType = result.vehicleClass;
			card.vehiclePlate = result.vehiclePlate,
			card.vehiclePlateColor =result.vehiclePlateColor;
			card.startTime = result.cardEnableTime;
			card.endTime = "";
			
			
			obu.num = result.obuId;
			obu.startTime = result.obuEnableTime;
			obu.approvedCount= result.vehicleApprovedCount;
			obu.axleCount= result.vehicleAxleCount;
			obu.engineNum= result.vehicleEngineNum;
			obu.vehiclePlate= result.vehiclePlate;
			obu.vehiclePlateColor= result.vehiclePlateColor;
			
			//测试 
			// state.orderInfo.orderStep = OrderStatus.待激活;
		})
	};
	const back = ()=>{
		uni.$emit("refreshOrder");
		uni.switchTab({
			url:"/pages/order/order"
		})
	}
</script>

<style scoped>
	.wrapper{
		padding-bottom: 50rpx;
	}
	.info-card {
		margin: 30rpx;
		border-radius: 16rpx;
		padding-bottom: 40rpx;
		box-shadow: 0rpx 6rpx 25rpx 0rpx rgba(0, 0, 0, 0.3);
	}

	.info-card .title {
		padding: 30rpx 0;
		font-size: 36rpx;
		text-align: center;
		color: #4cd95f;
	}

	.info-card .cell {
		display: flex;
		flex-direction: row;
		padding: 15rpx 40rpx;
		font-size:30rpx;
	}

	.cell-left {
		flex: 1;
		text-align: left;
		color: #666;
	}

	.cell-right {
		margin-left: 30rpx;
		text-align: right;
		color: #333;
		overflow: hidden;
	}
	.btn{
		background: linear-gradient(to right,#13E7C1,#43A1E0);
		opacity: 1;
		border-radius: 100rpx;
		color: #fff;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223,223,223,0.5);
		width: 670rpx;
		margin:40rpx;
		text-align: center;
	}
</style>