zhywpt-sp/subpackage/personal-center/payment.vue

<template>
	<view class="container">
		<view class="text">信息确认</view>
		<view class="input-card" v-if="!state.isShow">
			<view class="input-box">
				<label class="label">车牌号</label>
				<input placeholder="车牌号" v-model="state.chepai" :disabled="state.disabled" />
			</view>
			<view class="input-box">
				<label class="label">车牌颜色</label>
				<input placeholder="车牌号" v-model="state.yanse" :disabled="state.disabled" />
			</view>
			<view class="input-enter-btn">
				<label class="label">手机号</label>
				<input class="left" placeholder="请输入手机号" type="number" maxlength="11" />
				<view class="right" @click="sendCodeToNewPhone">{{state.newCodeStatus}}</view>
			</view>
			<view class="input-box">
				<label class="label">验证码</label>
				<input placeholder="请输入验证码" @change="getPhoneCode" type="number" maxlength="10" />
			</view>
		</view>
		<view class="comfirm_btn" @click="verificationCode">提交</view>
	</view>
</template>
<script setup>
	import {
		reactive
	} from "vue";

	const state = reactive({
		list: [],
		chepai: "贵Z12345",
		yanse: "蓝色",
		colorArr: [],
		obj: "",
		phone: "",
		newCodeStatus: '获取验证码',
		code: "",
		tel: "",
		newCodeBtnDisabled: false,
		codeInterval: 60,
		isShow: false,
		num: "",
		disabled: true
	})

	/**
	 * 点击了获取手机验证码
	 */
	const sendCodeToNewPhone = () => {}

	const verificationCode = () => {

	}

	const getPhoneCode = () => {

	}
</script>



<style scoped>
	.mainView {
		position: relative;
	}

	.input-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx;
		height: 90rpx;
		border-bottom: 1px solid #ddd;
		color: #495060;
	}

	.input-box input {
		flex: 1;
	}

	.input-card {
		font-size: 28rpx;
		left: 0;
		top: 100rpx;
		padding: 30rpx 0;
		z-index: 999;
		background: #fff;
	}

	.input-card .input {
		width: calc(100% - 120rpx);
		height: 90rpx;
		margin: 30rpx 30rpx;
		padding: 0rpx 30rpx;
		border-radius: 8rpx;
		background: transparent;
	}

	.input-card .input-enter-btn {
		display: flex;
		flex-direction: row;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #ddd;
		padding: 0px 15px;
		color: #495060;

	}

	.input-enter-btn .left {
		height: 100%;
		width: 60%;
		border: none;
		/* padding-left: 30rpx; */
	}

	.input-enter-btn .right {
		/* width: calc(40% - 30rpx); */
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 15rpx 30rpx;
		background: linear-gradient(to right, #13E7C1, #43A1E0);
		color: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.input-enter-btn .right:active {
		background: #0acc24;
	}

	.comfirm_btn {
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		margin-top: 50rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(to right, #13E7C1, #43A1E0);
	}

	.comfirm_btn:active {
		background: #0acc24;
	}

	.text {
		font-size: 36rpx;
		padding-left: 30rpx;
		padding-bottom: 20rpx;
	}

	.label {
		width: 160rpx;
	}
</style>