cloud_admin_app/pagesCenter/motorCadeMy/motorCadeMy.vue

<template>
	<view class="section">
		<view class="cu-card " v-for="item in listData.listAdd" :key="item.id">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex padding-tb-sm justify-between">
					<view class="flex">
						<view class="padding-right-xs">
							<image class="addCar" src="../../static/user/vehicle.png" mode="scaleToFill"></image>
						</view>
						<view class="padding-left-xs">
							<view class="num">车牌号码：{{item.vehicleNo}}</view>
							<view class="vinNum margin-top-xs">
								VIN码：{{item.vehicleVin}}
							</view>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="flex align-center">
						<view class="passState"
							v-if="item.vehicleProperty == null || item.vehicleProperty == '' || item.vehicleProperty == 1">
							私人车辆
						</view>
						<view class="reState" v-else>
							车队车辆
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onHide,
		onUnload,
		onPullDownRefresh
	} from "@dcloudio/uni-app";

	const pageSize = ref(1)
	const userLocal = reactive([])
	const totalPage = ref()
	const listData = reactive({
		listAdd: [],
		listLoad: []
	})
	const show = ref(false)
	const vinUnlock = ref()
	// onReachBottom(async () => {
	// 	if (pageSize.value < totalPage.value) {
	// 		pageSize.value += 1
	// 		await getList(1)
	// 		listData.listAdd = listData.listAdd.concat(listData.listLoad)
	// 	} else {
	// 		uni.$u.toast('没有更多啦');
	// 	}
	// })
	onLoad(() => {
		const userLocal = uni.getStorageSync("userInfo");

	})
	onPullDownRefresh(async () => {
		pageSize.value = 1
		getList()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 2000);
	})
	onShow(() => {
		pageSize.value = 1
		getList()
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	})
	onHide(() => {
		// console.log('hide');
	})
	onUnload(() => {
		// console.log('none');
	})
	const getList = async (type) => {
		let config_url = ''
		if (uni.getStorageSync("version") == '个人版') {
			config_url = 'app-api/cloud/personal/personalVel'
		} else {
			config_url = `app-api/cloud/teamVehicle/list-vehicle?teamId=${ uni.getStorageSync("teamId") }`
		}
		let customerVehiclePageUrl = config.baseUrl + config_url;

		await uni.$request({
			url: customerVehiclePageUrl,
			method: 'GET',
		}).then((res) => {
			// console.log(res,'res名下车辆');

			listData.listAdd = res.data.data

		})
	}
	const unLock = (data) => {
		show.value = true
		vinUnlock.value = data
	}
	const goAdd = () => {
		uni.navigateTo({
			url: '../vehicleCertification/vehicleCertification'
		})
	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		background: #F7F8FA;
		padding-top: 20rpx;
	}

	.add {
		width: 40rpx;
		height: 40rpx;
	}

	.moreBox {
		justify-content: center;
		align-items: center;
	}

	.stateFont {
		color: #4C91FF;
		padding: 8rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 6px;
		background-color: rgba(76, 145, 255, 0.1);
		font-size: 28rpx;
	}

	.passState {
		color: #2ECB53;
		padding: 8rpx 16rpx;
		border: 1px solid #2ECB53;
		border-radius: 6px;
		background-color: rgba(46, 203, 83, 0.1);
		font-size: 22rpx;
	}

	.reState {
		color: #F23E2C;
		padding: 8rpx 16rpx;
		border: 1px solid #F23E2C;
		border-radius: 6px;
		background-color: rgba(242, 62, 44, 0.1);
		font-size: 22rpx;
	}

	.num {
		font-size: 28rpx;
		color: #333;
	}

	.vinNum {
		color: #808080;
		font-size: 20rpx;
	}

	.addCar {
		width: 80rpx;
		height: 80rpx;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.unLock {
		// border: 1px solid #4C91FF;
		// border-radius: 6px;
		// padding: 8rpx 16rpx;
		font-size: 23rpx;
		// margin-left: ;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>