zhywpt-sp/subpackage/after-sale/rescind-carId/verification.vue

<template>
	<view class="formBox">
		<view class="from_item">
			<text class="label">手机号码</text>
			<input type="number" placeholder="请输入手机号码" v-model="model1.mobile" placeholder-style="color:#9a9a9a"
				maxlength="11">
		</view>
		<view class="from_item">
			<text class="label">验证码</text>
			<input type="text" placeholder="请输入验证码" v-model="model1.code" placeholder-style="color:#9a9a9a">
			<text class="btn" @click="getCode" v-if="waitTime==0">获取验证码</text>
			<text class="btn" v-else>{{waitTime}}</text>
		</view>
		<button class="submit" @click="submit">验证</button>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		stringToJson
	} from "@/utils/network/encryption.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		sendCode,
		relieveCarId
	} from "@/utils/network/api.js"

	const model1 = reactive({
		vehiclePlate: '',
		vehiclePlatecolor: '',
		openid: '',
		idcardFrontImgUrl: '',
		idcardBacktImgUrl: '',
		vehPosImgUrl: '',
		vehNegImgUrl: '',
		peopleVehicleImgUrl: '',
		commitmentUrl: '',
		mobile: '',
		code: '',
		proxyUrl: "", //委托书
	})
	let waitTime = ref(0)
	const getCode = () => {
		console.log(123);
		if (model1.mobile) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}

	}

	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}

	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: model1.mobile
			}, //请求参数
			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 submit = () => {
		console.log("111");
		console.log(model1);

		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: model1,
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(relieveCarId, options)
			.then((res) => {
				stringToJson(res.bizContent)
				const data = stringToJson(res.bizContent);
				console.log(data, "数据");
				if (data.info == "成功.") {
					navTo(`/subpackage/after-sale/rescind-carId/result?carid=${model1.vehiclePlate}`)
				}
			})
			.catch((err) => {
				console.log(err);
			});

	}

	onLoad((option) => {
		console.log(option, "这是传过来的参数");
		console.log(JSON.parse(option.fromData), "这是传过来的参数");
		let data = JSON.parse(option.fromData)
		model1.vehiclePlate = data.vehiclePlate
		model1.vehiclePlatecolor = data.vehiclePlatecolor
		model1.openid = data.openid
		model1.idcardFrontImgUrl = data.idcardFrontImgUrl
		model1.idcardBacktImgUrl = data.idcardBacktImgUrl
		model1.vehPosImgUrl = data.vehPosImgUrl
		model1.vehNegImgUrl = data.vehNegImgUrl
		model1.peopleVehicleImgUrl = data.peopleVehicleImgUrl
		model1.commitmentUrl = data.commitmentUrl
		model1.proxyUrl = data.proxyUrl

	})
</script>


<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.formBox {
		height: 90%;
		width: 100%;

		// background-color: red;
		.from_item {
			padding: 30rpx;
			padding-top: 60rpx;
			position: relative;

			.label {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #777777;
			}

			input {
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #9a9a9a;
				line-height: 58rpx;
				border-bottom: 1rpx solid #DCDCDC;
				margin-top: 50rpx;
				padding-bottom: 10rpx;

			}

			.btn {
				position: absolute;
				right: 45rpx;
				bottom: 48rpx;
				background: transparent;
				font-size: 30rpx;
				color: #15E5C1;
				z-index: 999;

			}

		}

		.submit {
			background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 100rpx;
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translate(-50%);
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>