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

<template>
	<view class='content'>
		<view class='content_all'>
			<view class="change" @click='change()'>切换</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.array" 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} from "@/utils/network/api.js";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { navTo } from "@/utils/utils";
	const state = reactive({
		index: 0,
		array: ['贵ZJSZ21 蓝色', '贵ZJSZ21 红色', '贵ZJSZ21 绿色', '贵ZJSZ21 白色'],
		colorList:['蓝色','白色'],
		form:{
			choiceCarVal:'',
			carColor:'',
			tel:'',
			code:''
		},
		show:false,
		vehiclePlate:'',  //车牌号
		showPhone:false,  //是否展示车牌号
		inputCarNumber:false,  //是否需要输入车牌号
		showColor:false,  //选择车牌颜色
	});
	let waitTime = ref(0);
	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) => {
		console.log("e",e)
		state.form.choiceCarVal = state.array[e];
		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;
	};
	// 去开户页面
	const goOpen=()=>{
		navTo(`/subpackage/after-sale/account-recharge/open-account`);
	}
</script>

<style scoped>
.content{
	background-color:rgb(246,246,246);
	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(75,217,97);
	font-size: 30rpx;
	color: white;
	z-index: 999;
	text-align: center;
}
::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{
	background-color: rgb(25,190,107);
	color: white;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 40rpx;
	margin-top: 70rpx;
}
</style>