修改login1模版

components/fs-captcha/fs-captcha.vue

@@ -2,13 +2,15 @@
 	<fs-button
 		v-if="type === 'button'"
 		size="medium" 
-		plain 
-		round 
-		@click="getCaptcha" 
+		round
+		:plain="plain" 
+		:block="block"
+		@click="getCaptcha"
+		:style="customStyle"
 		:disabled="state.sending">
 		{{state.timerText}}
 	</fs-button>
-	<view v-else class="primary" @click="getCaptcha" >{{state.timerText}}</view>
+	<view v-else class="primary" :style="customStyle" @click="getCaptcha">{{state.timerText}}</view>
 </template>
 
 <script setup>
@@ -26,6 +28,15 @@ const props = defineProps({
 		validator(value) {
 			return ['button','text'].includes(value)
 		}
+	},
+	block: Boolean,
+	plain: {
+		type: Boolean,
+		default: true
+	},
+	customStyle: {
+		type: Object,
+		default: () => {}
 	}
 })
 const emits = defineEmits(['start', 'end'])
@@ -38,7 +49,7 @@ const state = reactive({
 
 const getCaptcha = () => {
 	if (!state.sending) {
-		if (!/^1[3456789]\d{9}$/.test(props.mobile)) {
+		if (!/^1\d{10}$/.test(props.mobile)) {
 			return uni.showToast({
 				icon: 'none',
 				title: '请输入正确的手机号'

pages/login/login1.vue

@@ -1,60 +1,84 @@
 <template>
-	<view class="login-box">
-		<view class="login-top">
-			<view>您好</view>
-			<view>欢迎登录</view>
-		</view>
-		<fs-form ref="loginRef" :model="loginModel">
-			<fs-form-item>
-				<template #before>
-					<fs-icon type="icon-user"></fs-icon>
-				</template>
-				<fs-field placeholder="请输入账号" v-model="loginModel.name"></fs-field>
-			</fs-form-item>
+	<view>
+		<fs-gutter bgColor="#fff" height="100rpx"></fs-gutter>
+		<view class="layout-box" v-if="pageIndex === 0">
+			<view class="title bold" style="font-size: 27px;">验证手机号</view>
+			<view style="color: #999999;font-size: 14px;">请输入园区预留手机号，验证您的园区人员身份</view>
+			<fs-gutter bgColor="#fff" height="100rpx"></fs-gutter>
 			<fs-form-item>
-				<template #before>
-					<fs-icon type="icon-password"></fs-icon>
-				</template>
-				<fs-field placeholder="请输入密码" v-model="loginModel.password"></fs-field>
+				<fs-field type="number" placeholder="请输入手机号" v-model="phone"></fs-field>
 			</fs-form-item>
-			<fs-gutter height="100rpx" bgColor="#fff"></fs-gutter>
-			<fs-button full @click="handleLogin">登录</fs-button>
-		</fs-form>
+		</view>
+		
+		<view class="layout-box" v-else>
+			<view class="title bold" style="font-size: 27px;">输入验证码</view>
+			<view style="color: #999999;">已将验证码发至手机号：{{phone}}</view>
+			<fs-gutter bgColor="#fff" height="100rpx"></fs-gutter>
+			<view class="fs-captcha">
+				<view
+					class="fs-captcha-item"
+					:class="{'fs-captcha-item-active': curIndex === index}"
+					v-for="(item, index) in captchaNo"
+					:key="index"
+					@click="handleInput(index)">
+						{{item}}
+					</view>
+			</view>
+			<fs-keyboard mode="number" v-model="keyboardNum" @change="handleChange"></fs-keyboard>
+		</view>
+		
+		<fs-gutter bgColor="#fff" height="100rpx"></fs-gutter>
+		<fs-captcha
+			block
+			:plain="false"
+			:mobile="phone"
+			@start="handleNext">
+		</fs-captcha>
 	</view>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue'
-import useForm from '@/hooks/useForm'
 import { useStore } from 'vuex'
 
 const store = useStore()
 
-const loginRules = {
-	name: {
-		required: true,
-		message: '请输入账号'
-	},
-	password: {
-		required: true,
-		message: '请输入密码'
-	}
+let pageIndex = ref(0)
+let phone = ref('')
+const handleNext = () => {
+	pageIndex.value = 1
 }
-const loginModel = reactive({
-	name: '',
-	password: ''
-})
-const loginRef = ref(null)
 
-const loginForm = useForm(loginRules, 'loginRef')
-const handleLogin = () => {
-	loginForm.validate().then(() => {
+const captchaNo = ref(new Array(4))
+let keyboardNum = ref(true)
+let curIndex = ref(0)
+const handleChange = (item) => {
+	const length = captchaNo.value.filter(item => item).length
+	
+	if (item === 'del') {
+		if (length >= 1) {
+			curIndex.value--
+			captchaNo.value[curIndex.value] = ''
+		}
+	} else{
+		if (length <= captchaNo.value.length - 1) {
+			captchaNo.value[curIndex.value] = item
+			curIndex.value++
+		}
+	}
+	
+	if (captchaNo.value.filter(item => item).length === 4) {
 		store.dispatch('login', {
-			...loginModel
+			phone,
+			code: captchaNo
 		}).then(res => {
 			uni.navigateBack()
 		})
-	})
+	}
+}
+const handleInput = (index) => {
+	curIndex.value = index
+	
 }
 </script>
 
@@ -64,13 +88,26 @@ page{
 }
 </style>
 <style lang="scss" scoped>
-.login-box{
-	padding: 30rpx;
-}
-.login-top{
-	color: #222222;
-	font-size: 30px;
-	font-weight: bold;
-	margin: 100rpx 0;
+.fs-captcha{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	
+	&-item{
+		width: 120rpx;
+		height: 80rpx;		
+		line-height: 80rpx;		
+		border-bottom: 2rpx solid #CBCBCB;
+		text-align: center;
+		font-size: 18px;
+		
+		& + &{
+			margin-left: 40rpx;
+		}
+		
+		&-active{
+			border-color: var(--primary);
+		}
+	}
 }
 </style>