zhywpt-sp/subpackage/after-sale/activation-once-again/select-car.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="as-layout-horizontal as-gravity-center-start search-layout">
			<view class="search-box">
				<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill" @click="search()"></image>
				<input class="search" placeholder="请输入车牌号" v-model="state.vehiclePlate" />
			</view>
		</view>
		<view class="title">车辆列表</view>
		<scroll-view class="selectCar-box" scroll-y="true" style="height: 60vh;" @scrolltolower="list">
			<template v-if="state.list.length > 0">
				<view class="list" @click="choose(i, item)" v-for="(item, i) in state.list" :key="i">
					<view style="height: 134rpx;">
						<image class="car" :src='`${$imgUrl}issuance/car.png`' mode=""></image>
						<text class="yanse" :style="{ background: item.showColor}">{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
					</view>
				  <view class="content">
				  	<view class="content-top">
						<text class="vehiclePlate">{{item.vehiclePlate}}</text>
					</view>
				  </view>
				  <image class="arrow" :src='`${$imgUrl}issuance/arrow.png`' mode=""></image>
				</view>
			</template>
			<view v-else class="flex"> 暂无车辆订单信息 </view>
			<view v-if="state.loading" class="flex">加载中...</view>
			<view v-if="state.finished && state.list.length > 0" class="flex">没有更多了</view>
		</scroll-view>
		<<!-- view class="action">
			<button type="default" class="ui-btn" @click="add()">
				新增车辆
			</button>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import { navTo} from "@/utils/utils";
	import { onLoad,onShow} from "@dcloudio/uni-app";
	import { queryVehicleBind,rePage } from "@/utils/network/api.js";
	import { requestNew } from "@/utils/network/request.js";
	import { getItem, StorageKeys} from "@/utils/storage";
	import { jump } from "@/datas/9901Jump.js";
import { deviceType } from "@/utils/network/difference";
import {getVehiclePlateColor,vehiclePlateColorPai} from "@/datas/vehiclePlateColor";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import useOrderListItem from "@/composables/order/useOrderListItem";
	const props = defineProps({
		index: {
			type: Number,
			default() {
				return 0
			}
		},
		refresh: { //是否刷新列表
			type: Boolean,
			default: true
		}
	})
	const state = reactive({
		vehiclePlate: "",
		list: [],
		type: "",
		pageNo: 1,
		pageSize: 10,
		total: 0,
		loading: false,
		finished: false,
	});
	onLoad((options) => {
		console.log("options", options)
		state.type = options.type
		if (options.type == "2") {
			uni.setNavigationBarTitle({
				title: 'ETC注销-选择车辆'
			});
		} else if (options.type == "3") {
			uni.setNavigationBarTitle({
				title: '更换ETC设备-选择车辆'
			});
		} else if (options.type == "4") {
			uni.setNavigationBarTitle({
				title: '卡签续期-选择车辆'
			});
		}else if (options.type == "5") {
			uni.setNavigationBarTitle({
				title: '卡签挂失/解除挂失-选择车辆'
			});
		}else if (options.type == "6") {
			uni.setNavigationBarTitle({
				title: '增补设备-选择车辆'
			});
		}else if (options.type == "7") {
			uni.setNavigationBarTitle({
				title: '补卡补签-选择车辆'
			});
		}else if (options.type == "8") {
			uni.setNavigationBarTitle({
				title: '解除挂起-选择车辆'
			});
		}else if (options.type == "30") {
			uni.setNavigationBarTitle({
				title: '储值卡转记账卡-选择车辆'
			});
		}else if (options.type == "31") {
			uni.setNavigationBarTitle({
				title: '卡pin码解锁-选择车辆'
			});
		}else if (options.type == "32") {
			uni.setNavigationBarTitle({
				title: 'ETC车牌过户-选择车辆'
			});
		}else if (options.type == "33") {
			uni.setNavigationBarTitle({
				title: '卡签停用/卡签启用-选择车辆'
			});
		}else if (options.type == "34") {
			uni.setNavigationBarTitle({
				title: '月结单查询-选择车辆'
			});
		}else if (options.type == "35") {
			uni.setNavigationBarTitle({
				title: 'ETC通行流水-选择车辆'
			});
		}else if (options.type == "36") {
			uni.setNavigationBarTitle({
				title: '黑名单查询'
			});
		}else if (options.type == "37") {
			uni.setNavigationBarTitle({
				title: '恢复签约-选择车辆'
			});
		}else if (options.type == "38") {
			uni.setNavigationBarTitle({
				title: '车辆信息变更-选择车辆'
			});
		}
		
	});
	onShow(() => {
		if (state.type == '37') {
			list(true);
		} else {
			quanCheckActionTrue(state.vehiclePlate);
		}
	});
	const list = (reset = false) => {
		if (state.loading || state.finished) return;
		state.loading = true;
		if (reset) {
			state.pageNo = 1;
			state.list = [];
			state.finished = false;
		}
		// const customerId = getItem('customerObj');
		const options = {
			type: 2,
			data: {
				pageNo: state.pageNo,
				pageSize: state.pageSize,
				// customerId,
				// vehiclePlate: state.vehiclePlate,
			},
			method: "POST",
			showLoading: true,
		};
		return requestNew(rePage, options).then((res) => {
			const data = res?.result || res?.data || [];
			state.total = res.total || 0;
			if (reset) {
				state.list = data;
			} else {
				state.list = state.list.concat(data);
			}
			if (state.list.length >= state.total || data.length < state.pageSize) {
				state.finished = true;
			} else {
				state.pageNo += 1;
			}
			state.loading = false;
		}).catch(() => {
			state.loading = false;
		});
	};
	const quanCheckActionTrue = (vehiclePlate) => {
		const options = {
			type: 2,
			data: {
				vehiclePlate
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(queryVehicleBind, options).then((res) => {
				const data = res.result;
				for(var i=0;i<data.length;i++){
					for (var j = 0; j < vehiclePlateColorPai.length; j++) {
						if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]['id']) {
							data[i].color = vehiclePlateColorPai[j]['color']
							data[i].showColor = vehiclePlateColorPai[j]['showColor']
						}
					}
				}
				 console.log("车辆列表",data)
				 if (state.type == "32") {
				 	for (var k = 0; k < data.length; k++) {
				 		if (data[k]['orderStatus'] != "99999") {
				 			state.list.push(data[k])
				 		}
				 	}
				 }else{
				 	state.list = data;
				 }
			})
			.catch((err) => {
				console.log(err);
			});
	};
	const flag = ref("0");

	const choose = (i, item) => {
		console.log(item.id);
		// 跳转到车辆详情页面，携带item.id参数
		uni.navigateTo({
			url: `/subpackage/after-sale/activation-once-again/vehicle-details?id=${item.id}`
		});
	}
	const add=()=>{
		navTo(`/subpackage/after-sale/blacklist-query/addCar`)
	}
	const search = () => {
		list(true);
	};
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: center;
	}

	.selectCar-box {
		height: 100%;
		padding: 30rpx;
		padding-top: 0;
		padding-bottom: 200rpx;
	}
	.message{
		font-size: 26rpx;
		margin-left: 6rpx;
	}
	.search-layout {
		.search-box {
			margin: 30rpx 30rpx 0rpx 30rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			flex: 1;
		}
	
		.search-box .icon {
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx;
		}
	
		.search-box .search {
			flex: 1;
			margin-right: 20rpx;
			height: 100%;
			padding: 0 10rpx;
			font-size: 28rpx;
		}
	
		.search-btn {
			color: white;
			background-color: #00B38B;
			width: 140rpx;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 32rpx;
			border-radius: 40rpx;
			text-align: center;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}
	}
	.title{
		font-weight: 400;
		font-size: 34rpx;
		color: #01243A;
		margin: 30rpx 30rpx 0rpx 30rpx;
	}
	.list{
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 1px solid #FFFFFF;
		width: 98%;
		margin: 30rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.content{
			font-weight: 400;
			width: 76%;
			margin-left: 20rpx;
			.content-top{
				margin-bottom: 20rpx;
				.vehiclePlate{
					font-size: 30rpx;
					color: #01243A;
				}
			}
			.content-time{
				font-size: 26rpx;
				color: #999999;
			}
		}
		.yanse{
			display: inline-block;
			position: relative;
			width: 64rpx;
			height: 30rpx;
			background: red;
			color: white;
			border-radius: 15rpx 0 15rpx 0;
			text-align: center;
			line-height: 30rpx;
			font-size: 24rpx;
			top: -147rpx;
		}
		.car{
			width: 134rpx;
			height: 134rpx;
		}
		.arrow{
			width: 18rpx;
			height: 34rpx;
		}
	}
	.action {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		height: 188rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>