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 { useStore } from 'vuex'

const store = useStore()

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) {
		store.dispatch('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>