ykz-wx/pages/login/index.vue

<template>
	<view class="login">
		<view class="login-content">
			<view class="login-title">账号登录</view>
			<uni-forms ref="formRef" :modelValue="formData" :rules="formRules" style="margin-top: 10px;">
				<uni-forms-item name="hzxm">
					<uni-easyinput class="pub-input" trim="all" v-model="formData.hzxm" placeholder="请输入姓名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="hzsfzh">
					<uni-easyinput class="pub-input" trim="all" v-model="formData.hzsfzh" placeholder="请输入身份证号"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view class=" pub-button is-bg large" @click="submit">登录</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import dlg from '@/lib/dlg'
	import { aesEncrypt, aesDecrypt } from "@/lib/encryption"
	import * as link from '@/lib/link'

	const formData = ref({
		hzxm: '',
		hzsfzh: '',
	})
	const formRef = ref()
	const formRules = reactive({
		hzxm: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		hzsfzh: {
			rules: [{
				required: true,
				errorMessage: '身份证号不能为空',
			}, {
				validateFunction: function (rule, value, data, callback) {
					let CardNoReg = (
						/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
					); //身份证
					if (!CardNoReg.test(value)) {
						callback('身份证格式不正确，请重新填写')
					}
				}
			}]
		},
	})


	const submit = async () => {
		// 校验表单
		formRef.value.validate().then(async res => {
			// 提交请求
			try {
				link.goBJList(aesEncrypt(formData.value.hzsfzh),aesEncrypt(formData.value.hzxm))
			} catch (e) {
				dlg.error(e)
			}
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100%;
		width: 100%;
		background-image: url("~@/static/image/logo_bg.png");
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		background-size: cover;
		position: relative;
		text-align: center;

		.login-content {
			top: 360rpx;
			left: 96rpx;
			position: absolute;
			background: #FFFFFF;
			border-radius: $uni-border-radius-r1;
			width: calc(100% - 194rpx);
			padding: 40rpx $page-row-spacing 16rpx;
			box-sizing: border-box;

			.login-title {
				font-size: $uni-font-size-xl;
				line-height: $uni-line-height-xl;
			}

			.pub-input {
				:deep(.uni-easyinput__content) {
					border-color: $uni-border-color !important;
					border-radius: 4rpx;

					.uni-easyinput__content-input {
						height: 88rpx;
						font-size: $uni-font-size-lg;
						line-height: $uni-line-height-lg;
						color: $uni-text-color;

						.uni-input-placeholder {
							color: $uni-text-color-light;
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;
						}
					}
				}


			}

			.pub-button {
				margin-top: 40rpx;
			}
		}
	}
</style>