menduner-uniapp/pages/login/index.vue

<template>
  <view class="ss-p-30 head-box">
    <view>欢迎来到门墩儿招聘</view>
    <uni-segmented-control class="ss-m-t-60" :current="current" :values="items" style-type="text" active-color="#00897B" @clickItem="onClickItem" />
    <view class="head-subtitle ss-m-t-10">未注册的手机号，验证后自动注册账号</view>

    <view class="ss-m-t-30">
      <!-- 短信验证码登录 -->
      <uni-forms
        v-if="current === 0"
        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">
            <template v-slot:right>
              <button class="login-code" :disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }" @tap="handleCode">
                {{ getSmsTimer('smsLogin') }}
              </button>
            </template>
          </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"></uni-easyinput>
        </uni-forms-item>
      </uni-forms>

      <!-- 账号密码登录 -->
      <uni-forms
        v-else
        ref="accountLoginRef"
        v-model="state.account"
        :rules="state.rules"
        validateTrigger="bind"
        labelWidth="140"
        labelAlign="center"
      >
        <uni-forms-item name="phone" label="账号">
          <uni-easyinput placeholder="请输入账号" v-model="state.account.phone" :inputBorder="false"></uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="password" label="密码">
          <uni-easyinput type="password" placeholder="请输入密码" v-model="state.account.password" :inputBorder="false"></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, password, code } from '@/utils/validate'
import { getSmsCode, getSmsTimer } from '@/utils/code'
import { userStore } from '@/store/user'

const useUserStore = userStore()
const items = ['短信登录', '账号登录']
const current = ref(1)
const accountLoginRef = ref()
const smsLoginRef = ref()
const state = ref({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  sms: {
    phone: '13229740092',
    code: ''
  },
  account: {
    phone: '13229740091',
    password: 'Citu123'
  },
  rules: {
    phone: mobile,
    password,
  },
  smsRules: {
    code,
    phone: mobile
  }
})

const onClickItem = (e) => {
  current.value = e.currentIndex
}

// 获取验证码
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(current.value === 0 ? smsLoginRef : accountLoginRef).validate()
  if (!validate) return
  await useUserStore.handleSmsLogin(current.value === 0 ? state.value.sms : state.value.account, current.value === 0 ? true : false)
}
</script>

<style scoped lang="scss">
.login-code {
  width: 73px;
  min-width: 73px;
  color: var(--v-primary-base);
  text-align: center; 
  font-size: 12px; 
  cursor: pointer;
  border: 1px dashed var(--v-primary-base);
  border-radius: 26px;
  padding: 0;
}
</style>