zhywpt-sp/subpackage/after-sale/blacklist-query/addCar.vue

<template>
	<view class="bg">
		<!-- 车牌输入 -->
		<view class="car-input">
			<view class="title" style="margin-top: 10rpx;">车牌号</view>
			<car-number-input @numberInputResult="carNumber" inputColor='#ECF1F4'></car-number-input>
		</view>
		<!-- 车牌颜色 -->
		<view class="chepai-lane">
			<view class="title">车牌颜色</view>
			<numberplate-color :numberplate="state.vehiclePlate" 
				:numberplateCor='state.vehiclePlateColor' @numberplateResult="checkNumberplateColor">
			</numberplate-color>
		</view>
		<view class="chepai-lane" v-if="state.isBand">
			<view class="title">选择卡号</view>
			<picker mode="selector" :value="state.index" :range="state.array" @change="choiceCard" class="picker">
				<view>{{state.index<0?'请选择':state.array[state.index]}} </view>
			</picker>
		</view>
		
	</view>
	
	<view class="action">
		<button type="default" class="ui-btn" @click="add()" v-if="state.isBand">
			绑定
		</button>
		<button type="default" class="ui-btn" @click="search()" v-else>
			查询
		</button>
	</view>
</template>
<script setup lang="ts">
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import {vehicleBind,queryCardInfo } from "@/utils/network/api.js";
	import {requestNew } from "@/utils/network/request.js";
	import {getItem,StorageKeys } from "@/utils/storage";
	import carNumberInput from "../components/car-number-input.vue";
	import numberplateColor from "../components/layout-numberplate-color";
	import {msg} from "@/utils/utils";
	const state = reactive({
		vehiclePlate: "",
		vehiclePlateColor: "",
		index:-1,
		array:[],
		arrayAll:[],
		isBand:false
	});
	onLoad((option : any) => {
		
	})
	const carNumber = (val : any) => {
		state.vehiclePlate = val.trim();
	};
	/* 选择车牌颜色 */
	const checkNumberplateColor = (item : any) => {
		state.vehiclePlateColor = item;
	};
	const search=()=>{
		cardList()
	}
	const add = () => {
		if(state.index<0){
			msg('请选择卡号');
			return;
		}
		const options = {
			type: 2,
			data: {
				"vehiclePlate": state.vehiclePlate,
				"vehiclePlateColor": state.vehiclePlateColor,
				"operaterId":getItem(StorageKeys.OpenId),
				"cardId": state.arrayAll[state.index]['cardId'],
				"cardStatus": state.arrayAll[state.index]['cardStatus'],
				"cardType": state.arrayAll[state.index]['cardType'],
			},
			method: 'POST',
			showLoading: true,
		}
		requestNew(vehicleBind, options).then((res) => {
			console.log("res==",res)
			msg("新增成功")
			setTimeout(()=>{
				uni.navigateBack()
			},1500)
			
		})
	}
	const cardList = () => {
		if(!state.vehiclePlate){
			msg('请输入车牌号');
			return;
		}
		const options = {
			type: 2,
			data: {
				"vehiclePlate": state.vehiclePlate,
				"vehiclePlateColor": state.vehiclePlateColor,
			},
			method: 'POST',
			showLoading: true,
		}
		requestNew(queryCardInfo, options).then((res) => {
			console.log("卡信息",res)
			if(res.length>0){
				state.isBand=true
				state.arrayAll=res
				for(var i=0;i<res.length;i++){
					state.array.push(res[i]['cardId'])
				}
			}
		})
	}
	const choiceCard=(e)=>{
		console.log("e",e.detail.value)
		state.index=e.detail.value
	}
</script>

<style scoped lang="scss">
	.bg {
		background-color: white;
		width: 88%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
		.title{
			font-weight: 400;
			font-size: 30rpx;
			color: #01243A;
			margin: 30rpx 0;
		}
	}
	
	.action {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 160rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.picker{
		border: 1rpx solid #E9EDF0;
		padding:10rpx;
	}
</style>