menduner-uniapp/pages/register/phoneValidate.vue

<template>
  <view class="ss-p-30">
      <view class="head-title ss-m-b-30">请输入您申请企业账号时填入的手机号进行效验</view>

      <view class="ss-m-t-50">
        <uni-forms
					ref="smsLoginRef"
					v-model="state.sms"
					:rules="state.smsRules"
					validateTrigger="bind"
					labelWidth="140"
					labelAlign="center"
				>
					<uni-forms-item name="phone" label="手机号">
						<uni-easyinput placeholder="请输入手机号" v-model="state.sms.phone" :inputBorder="false" type="number">
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="code" label="验证码">
						<uni-easyinput
							placeholder="请输入验证码"
							v-model="state.sms.code"
							:inputBorder="false"
							type="number"
							maxlength="6"
						>
							<template v-slot:right>
								<button
									class="login-code"
									:disabled="state.isMobileEnd"
									:class="{ 'code-btn-end': state.isMobileEnd }"
									@tap="handleCode"
								>
									{{ getSmsTimer('smsRegister') }}
								</button>
							</template>
						</uni-easyinput>
					</uni-forms-item>
				</uni-forms>

        <button class="send-button" @tap="handleLogin"> 验 证  </button>
      </view>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { mobile, code } from '@/utils/validate'
import { getSmsCode, getSmsTimer } from '@/utils/code'
import { userStore } from '@/store/user'
import { onLoad } from '@dcloudio/uni-app'
import { closeAuthModal } from '@/hooks/useModal'

const useUserStore = userStore()
const smsLoginRef = ref()
const state = ref({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  sms: {
    phone: '',
    code: ''
  },
  smsRules: {
    code,
    phone: mobile
  }
})

onLoad((options) => {
	if (options.phone) state.value.sms.phone = options.phone
})

// 获取验证码
const handleCode = () => {
  if (!state.value.sms.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  getSmsCode('smsLogin', state.value.sms.phone)
}

// 验证
const handleLogin = async () => {
  const validate = await unref(smsLoginRef).validate()
  if (!validate) return
  const query = state.value.sms
  Object.assign(query, {
    sms: query.phone
  })
  console.log(query, '手机号效验参数')
	try {
		await useUserStore.handleSmsLogin(query, 0, false)
		uni.showToast({
			title: '手机号效验成功',
			icon: 'none',
			duration: 2000
		})
		closeAuthModal()
		uni.navigateTo({
			url: '/pages/register/index'
		})
	} catch (err) {
		closeAuthModal()
		console.log(err, '手机号效验')
	}
}
</script>

<style scoped lang="scss">
.login-code {
  width: 73px;
  min-width: 73px;
  color: #00B760;
  text-align: center; 
  font-size: 12px; 
  cursor: pointer;
  padding: 0;
}
.head-title {
  font-size: 40rpx;
  text-align: center;
  color: #00B760;
  margin-top: 30rpx;
}
.quickLogon {
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
  align-items: center;
}
.wxLogon {
  font-size: .85em;
  color: #00B760;
  border: none;
  margin: 0;
  padding: 0;
}
.register {
  widows: 100%;
  font-size: .85em;
  color: red;
  // text-align: right;
  &.login {
    color: #00B760;
  }
}
.pb-20 {
  padding-bottom: 40rpx;
}

</style>