cloud_admin_app/pages/userCenter/carIdentification/carIdentification.vue

<template>
	<view class="section">
		<view class="cu-card margin-top-sm padding-top-xs" @click="goAdd">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex padding-tb-sm moreBox">
					<view class="flex">
						<view>
							<image class="add" src="../../../static/user/bind.png" mode="scaleToFill"></image>
						</view>
						<view class="padding-left-xs">车辆认证</view>
					</view>
				</view>
			</view>
		</view>
		<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 class="vinNum margin-top-xs" v-if="item.auditState == 2">
								驳回原因：{{item.auditReason}}
							</view>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="flex align-center">
						<view
							:class=" {'passState' : item.auditState== 1 ,'stateFont' : item.auditState== 0,'reState': item.auditState== 2}">
							{{['未审核','通过审核','审核拒绝'][item.auditState === '' ? '--' : item.auditState] }}
						</view>
						<!-- <view v-if="item.auditState !== 1" class="unLock margin-left-xs" @click.stop="unLock(item.vin)">
							<view class="text-blue"> 取消认证</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :showCancelButton="true" @confirm="confirm" @cancel="cancel" confirmText="确认">
			<view>
				<view>请确认是否解绑!</view>
			</view>
		</u-modal>
	</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 customerVehiclePageUrl = config.baseUrl + "app-api/cloud/personal/personalVel/apply/get";
		// let page = {
		// 	size: 10,
		// 	current: pageSize.value
		// };
		// let param;
		// if (userLocal.isTeamManager) {
		// 	param = {
		// 		// teamId: teamId,
		// 		page: page
		// 	};
		// } else {
		// 	param = {
		// 		customerId: userLocal.customerId,
		// 		// teamId: teamId,
		// 		page: page
		// 	};
		// }
		await uni.$request({
			url: customerVehiclePageUrl,
			method: 'GET',
		}).then((res) => {
			// console.log(res,'res名下车辆');
			// if (type == 1) {
			// 	listData.listLoad = res.data.data.records
			// } else {
			listData.listAdd = res.data.data
			// }

			// totalPage.value = res.data.data.pages
		})
	}
	const unLock = (data) => {
		show.value = true
		vinUnlock.value = data
	}
	const goAdd = () => {

		uni.navigateTo({
			url: '../vehicleCertification/vehicleCertification'
		})
	}
	const cancel = () => {
		show.value = false
	}
	const confirm = () => {
		let data = {
			vin: vinUnlock.value
		}
		uni.$request({
			url: config.wxUrl_pay + 'app-rest/customerVehicle/unbind',
			data: data,
			method: 'POST',
		}).then((res) => {
			console.log('cccccc', res);
			pageSize.value = 1
			getList()
		})
		show.value = false
	}
	// const edit = (e) => {
	// 	var auth = null;
	// 	listData.listAdd.some(function(item) {
	// 		if (item.id == e) {
	// 			auth = item
	// 			return true;
	// 		}
	// 	})
	// 	uni.navigateTo({
	// 		url: '../vehicleCertification/vehicleCertification?data=' + JSON.stringify(auth)
	// 	})
	// }
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		// height: 100vh;
		// overflow: hidden;
		// overflow-y: auto;
		background: #F7F8FA;
	}

	.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: 28rpx;
	}

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

	.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>