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="车牌颜色"><u-input v-model="state.form.carColor" type="select" :select-open="state.showColor" @click="state.showColor = true"  placeholder='车牌颜色'/></u-form-item>
				</u-form>
			</view>
			<u-form :model="form" ref="form1" label-width=180 v-else>
				<u-form-item label="请选择车辆"><u-input  v-model="state.form.choiceCarVal"  type="select" :select-open="state.show" @click="state.show = true" placeholder='请选择车辆'/></u-form-item>
			    <u-form-item label="车牌颜色"><u-input v-model="state.form.carColor" disabled placeholder='车牌颜色'/></u-form-item>
			</u-form>
			<!-- <u-form :model="form" ref="form1" label-width=180>
			    <u-form-item label="手机号" class="phoneBox" v-if='state.showPhone'>
			    	<u-input placeholder='手机号' type="number" v-model="state.form.tel" />
			    	<u-button  type="success" size="mini" @click="getCode" v-if="waitTime==0">获取验证码</u-button>
			    	<text class="btn" v-else>{{waitTime}}后重试</text>
			    </u-form-item>
				<u-form-item v-if='state.showPhone' label="验证码"><u-input v-model="state.form.code" placeholder='请输入短信验证码'/></u-form-item>
			</u-form> -->
		</view>
		<u-picker mode="selector" :range="state.carData" v-model="state.show" @confirm="regionConfirm"></u-picker>
		<u-picker mode="selector" :range="state.colorList" v-model="state.showColor" @confirm="regionConfirmColor"></u-picker>
	    <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 {sendCode,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({
		index: 0,
		carData: [],//车辆数据
		colorList:[],  //没有注册时车辆颜色
		form:{
			choiceCarVal:'',
			carColor:'',
			tel:'',
			code:''
		},
		show:false,
		vehiclePlate:'',  //车牌号
		showPhone:false,  //是否展示车牌号
		inputCarNumber:false,  //是否需要输入车牌号
		showColor:false,  //选择车牌颜色
		isChangeBtn:true,  //切换按钮是否展示
	});
	let waitTime = ref(0);
	onLoad((option : any) => {
		if(!hasLogin()){
			state.isChangeBtn=false;
		state.inputCarNumber=true;
		}
		quanCheckActionTrue();
	});
	const getCode = () => {
		console.log(123);
		if (state.form.tel) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}
	}
	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.tel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
	
		//调用方式
		request(sendCode, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log(data, "#################");
				if (data.info == "成功.") {
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	const bindPickerChange=(e)=>{
		state.index = e.detail.value
	}
	// 选择车牌回调
	const regionConfirm = (e : any) => {
		state.form.choiceCarVal = state.carData[e];
		// 切割车牌号，获取颜色
		console.log("e",state.carData[e].substring(8,10))
		state.form.carColor=state.carData[e].substring(8,10)
		state.showPhone=true;
	};
	// 选择颜色的回调
	const regionConfirmColor=(e : any)=>{
		state.form.carColor=state.colorList[e]
	}
	const change=()=>{
		console.log("11")
		state.inputCarNumber=!state.inputCarNumber
		state.form.choiceCarVal='';
		state.form.carColor='';
	}
	const carNumber = (val: any) => {
	  // state.vehiclePlate = val;
	  state.form.choiceCarVal = val;
	};
	// 去开户页面
	const goOpen=()=>{
		console.log("as",state.form)
		if(!state.form.choiceCarVal){
			msg('请选择车辆');
			return;
		}
		// if(!state.form.tel){
		// 	msg('请输入手机号');
		// 	return;
		// }
		// if(!state.form.code){
		// 	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);
			}
			
		})
		.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>