fs-uni-template/modules/common/login/login1.vue

<template>
	<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><fs-field type="number" placeholder="请输入手机号" v-model="phone"></fs-field></fs-form-item>
		</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 { useUserStore } from '@/stores/user'

const user = useUserStore()

let pageIndex = ref(0)
let phone = ref('')
const handleNext = () => {
	pageIndex.value = 1
}

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) {
		user
			.login({
				phone,
				code: captchaNo
			})
			.then(res => {
				uni.navigateBack()
			})
	}
}
const handleInput = index => {
	curIndex.value = index
}
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.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>