zhywpt-sp/after-sale/card-loss-reporting/cardloss.vue

<template>
	<view class="formBox">
		<view class="from_item">
			<text class="label">账号验证</text>
		</view>
		<view class="from_item">
			<text class="label">手机号码</text>
			<input type="text" placeholder="" v-model="model.mobile" placeholder-style="color:#000" disabled="true">
		</view>
		<view class="from_item">
			<text class="label">验证码</text>
			<input type="text" placeholder="请输入验证码" v-model="model.code" placeholder-style="color:#000">
			<text class="btn" @click="getCode">获取验证码</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,
		checkCode
	} from "@/utils/network/api.js";
	const type = ref('')

	let model = reactive({
		code: '',
		mobile: '',
	})

	const getCode = () => {
		const options = {
			type: 2,
			data: {
				mobile: model.mobile
			},
			method: "POST",
			showLoading: true,
		};
		request(sendCode, options)
			.then((res) => {
				msg("验证码发送成功！");
			})
			.catch((err) => {
				console.log(err);
			});

	}

	onLoad((options: any) => {
		type.value = options.type
	})


	const submit = () => {

		const options = {
			type: 2,
			data: {
				mobile: model.mobile,
				code: model.code
			},
			method: "POST",
			showLoading: true,
		};
		request(checkCode, options)
			.then((res) => {
				uni.$emit('queryCardlossStatus', {
					type: type.value
				})
			})
			.catch((err) => {
				console.log(err);
			});

	}
</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: #333333;
				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>