zhywpt-sp/after-sale/to-bookkeeping-card/verification.vue

<template>
	<view class="formBox">
		<view class="from_item">
			<text class="label">账号验证</text>
			<input type="text" placeholder="输入验证码" v-model="model1.uname" placeholder-style="color:#000">
		</view>
		<view class="from_item">
			<text class="label">手机号码</text>
			<input type="text" placeholder="" v-model="model1.phone" placeholder-style="color:#000" disabled="true">
		</view>
		<view class="from_item">
			<text class="label">验证码</text>
			<input type="text" placeholder="请输入验证码" 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
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	let model1 = reactive({
		uname: '输入验证码',
		phone: '135****9090',
		code: ''
	})

	const getCode = () => {
		console.log(123);
	}
	const submit = () => {
		console.log("111");
		wx.showModal({
			title: '模拟两种情况',
			confirmText: '过期',
			cancelText: '不过期',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					navTo('/after-sale/to-bookkeeping-card/pay-page')
				} else if (res.cancel) {
					console.log('用户点击取消');
					navTo('/after-sale/to-bookkeeping-card/base-change-people')
				}
			}
		});
	}
</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>