zhywpt-sp/subpackage/personal-center/vehicle-information.vue

<template>
	<view >
		<view class="car-item">
			<image :src="`${$imgUrl}user/icon-car.png`" class="car-pic"></image>
			<view class="car-info">
				<view class="car-no"><text class="no">贵ZSC122</text><text class="color">蓝色</text></view>
				<view class="card-no">卡号：52011328220202006876</view>
				<view class="card-no">签号：5202192509222195</view>
			</view>
			<view class="btn-unbind">解除绑定</view>
		</view>
		<view class="car-item">
			<image :src="`${$imgUrl}user/icon-car.png`" class="car-pic"></image>
			<view class="car-info">
				<view class="car-no"><text class="no">贵ZSC122</text><text class="color">蓝色</text></view>
				<view class="card-no">卡号：52011328220202006876</view>
				<view class="card-no">签号：5202192509222195</view>
			</view>
			<view class="btn-unbind">解除绑定</view>
		</view>
		<view class="car-item">
			<image :src="`${$imgUrl}user/icon-car.png`" class="car-pic"></image>
			<view class="car-info">
				<view class="car-no"><text class="no">贵ZSC122</text><text class="color">蓝色</text></view>
				<view class="card-no">卡号：52011328220202006876</view>
				<view class="card-no">签号：5202192509222195</view>
			</view>
			<view class="btn-unbind">解除绑定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import {request} from "@/utils/network/request.js";
	import {stringToJson} from "@/utils/network/encryption.js";
	import { onLoad} from "@dcloudio/uni-app";
	import {getCarMsg} from "@/utils/network/api.js";
	import {getItem} from "@/utils/storage";
	const state = reactive({
		
	})
	onLoad((option : any) => {
		queryCarMsg();
	})
	const queryCarMsg = () => {
		const options = {
			type: 2,
			data: {
				// "openId":getItem('openId')
			},
			method: "POST",
			showLoading: true,
		};
		//调用方式
		request(getCarMsg, options).then((res) => {
				const data = stringToJson(res.bizContent)
				console.log("车辆管理信息查询",data);
				
			})
			.catch((err) => {
			});
	}
</script>

<style scoped>

.car-item {
	display: flex;
	align-items: center;
	padding: 36rpx 0;
	width: 95%;
	margin:0 auto;
	background:#f6f6f6;
	border-radius: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin-top:30rpx;
}

.car-item .btn-unbind {
	border: 1px solid #00B38B;
	border-radius: 30rpx;
	height: 60rpx;
	box-sizing: border-box;
	line-height: 60rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
	background: rgba(0, 179, 139, .1);
	color: #00B38B;
}
.car-pic {
	width: 120rpx;
	height: 120rpx;
	margin-right: 12rpx;
}
.car-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: #999;
	font-size: 22rpx;
}
.car-no {
	font-size: 30rpx;
	color: #333;
}

.card-no {
	margin-top: 14rpx;
}
</style>