zhywpt-sp/subpackage/after-sale/account-recharge/go-account.vue

<template>
	<view class='content'>
		<view class='content_all'>
			<view class="change" @click='change()' v-if='state.isChangeBtn'>切换</view>
			<view v-if="state.inputCarNumber">
				<view class="car-input">
					<view class="title">车牌号</view>
					<car-number-input @numberInputResult="carNumber"></car-number-input>
				</view>
				<u-form :model="form" ref="form1" label-width=180>
					<u-form-item label="车牌颜色">
							<picker mode="selector"  @change="regionConfirmColor" :value="state.indexColor" :range="state.colorList">
									<view class="uni-input">{{state.indexColor>=0?state.form.carColor:"请选择"}}</view>
							</picker>
						</u-form-item>
				</u-form>
			</view>
			<u-form :model="form" ref="form1" label-width=180 v-else>
				<u-form-item label="请选择车辆">
						<picker mode="selector" @change="regionConfirm" :value="state.index" :range="state.carData">
								<view class="uni-input" >{{state.index>=0?state.form.choiceCarVal:"请选择"}}</view>
						</picker>
						</u-form-item>
				<u-form-item label="车牌颜色"><u-input v-model="state.form.carColor" disabled
						placeholder='车牌颜色' /></u-form-item>
			</u-form>
		</view>
		
		<button type="success" class='search' @click='goOpen'>开户</button>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { request } from "@/utils/network/request.js";
	import { orderList } from "@/utils/network/api.js";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { navTo, msg, hasLogin } from "@/utils/utils";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { stringToJson } from "@/utils/network/encryption";
	import { vehiclePlateColor } from "@/datas/vehiclePlateColor";
	const state = reactive({
		indexColor:-1,
		index: -1,
		carData: [],//车辆数据
		colorList: [],  //没有注册时车辆颜色
		form: {
			choiceCarVal: '',
			carColor: '',
			tel: '',
			code: ''
		},
		vehiclePlate: '',  //车牌号
		inputCarNumber: false,  //是否需要输入车牌号
		isChangeBtn: true,  //切换按钮是否展示
	});
	let waitTime = ref(0);
	onLoad((option : any) => {
		if (!hasLogin()) {
			state.isChangeBtn = false;
			state.inputCarNumber = true;
		}
		quanCheckActionTrue();
	});
	// 选择车牌回调
	const regionConfirm = (e : any) => {
		// 切割车牌号，获取颜色
		console.log("e", e.detail.value,state.carData[e.detail.value].split(' '))
		state.index=e.detail.value
		state.form.choiceCarVal = state.carData[e.detail.value].split(' ')[0];
		state.form.carColor = state.carData[e.detail.value].split(' ')[1]
	};
	// 选择颜色的回调
	const regionConfirmColor = (e : any) => {
		console.log(e,state.colorList[e.detail.value])
		state.indexColor=e.detail.value
		state.form.carColor = state.colorList[e.detail.value]
	}
	const change = () => {
		console.log("11")
		state.inputCarNumber = !state.inputCarNumber
		state.index=-1
		state.indexColor=-1
		state.form.choiceCarVal = '';
		state.form.carColor = '';
	}
	const carNumber = (val : any) => {
		state.form.choiceCarVal = val;
	};
	// 去开户页面
	const goOpen = () => {
		console.log("as", state.form)
		if (!state.form.choiceCarVal) {
			msg('请选择车辆');
			return;
		}
		navTo(`/subpackage/after-sale/account-recharge/open-account`);
	}
	const quanCheckActionTrue = () => {
		var data = {
			opId: getItem(StorageKeys.OpenId),
			source: 'WECHAT', //渠道为小程序
			tabIndex: '0', //0全部
			orderStep: '11', //11 为已完成”
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(orderList, options).then((res) => {
			let data = stringToJson(res.bizContent).data
			// 深拷贝获取全部车牌颜色
			let colorArr = JSON.parse(JSON.stringify(vehiclePlateColor))
			for (var k = 0; k < colorArr.length; k++) {
				state.colorList.push(colorArr[k].color)
			}
			console.log("state.colorList", state.colorList);
			for (var i = 0; i < data.length; i++) {
				let strData = '';
				strData += data[i].vehiclePlate + " " + getVehiclePlateColor(data[i].vehiclePlateColor);
				state.carData.push(strData);
			}
			console.log("state.carData", state.carData);

		})
			.catch((err) => {
				console.log(err);
			});
	}
	//获取车牌颜色文字
	const getVehiclePlateColor = (id : number) => {
		const colors = vehiclePlateColor.filter(item => item.id == id);
		return colors[0].color
	}
</script>

<style scoped>
	.content {
		background-color: #EEF7F7;
		min-height: 100vh;
	}

	.content_all {
		background-color: white;
	}

	.change {
		text-align: right;
		padding-right: 20rpx;
		font-size: 32rpx;
	}

	.item {
		display: flex;
		border-bottom: 2rpx solid rgb(239, 239, 239);
		padding: 18rpx 36rpx;
		font-size: 32rpx;
		align-items: center;
	}

	/deep/.u-form {
		padding: 0 40rpx !important;
	}

	.btn {
		flex: 1;
		background: rgb(25, 190, 107);
		font-size: 30rpx;
		color: white;
		z-index: 999;
		text-align: center;
		border-radius: 10rpx;
	}

	::v-deep .u-form-item--right__content__slot {
		display: flex;
		justify-content: space-between;
	}

	.title {
		margin-top: -32rpx;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		margin-left: 30rpx;
	}

	.search {
		height: 80rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
		margin: 0 30rpx;
		margin-top: 70rpx;
	}
</style>