menduner-uniapp/components/AuthModal/index.vue

<template>
  <view>
    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="head-box ss-p-30">
        <view class="ss-flex ss-m-b-20">
          <view class="head-title head-title-line head-title-animation" :class="{ 'head-title-active': type === 'account' }" @tap="type = 'code'">短信登录</view>
          <view class="head-title  ss-m-r-40" :class="{ 'head-title-active': type === 'code' }" @tap="type = 'account'">账号登录</view>
        </view>
        <view v-if="type === 'code'" class="head-subtitle">未注册的手机号，验证后自动注册账号</view>
      </view>

      <view class="ss-p-30 ss-m-b-60">
        <!-- 短信验证码登录 -->
        <uni-forms
          v-if="type === 'code'"
          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="ss-reset-button code-btn code-btn-start"
                  :disabled="state.isMobileEnd"
                  :class="{ 'code-btn-end': state.isMobileEnd }"
                  @tap="handleSendCode"
                >
                  <!-- {{ 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"
            >
              <template v-slot:right>
                <button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit"> 登录 </button>
              </template>
            </uni-easyinput>
          </uni-forms-item>
        </uni-forms>
        <!-- 账号密码登录 -->
        <uni-forms
          v-if="type === 'account'"
          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"
            >
              <template v-slot:right>
                <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
              </template>
            </uni-easyinput>
          </uni-forms-item>
        </uni-forms>
      </view>
		</uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { mobile, password, code } from '@/utils/validate'
// import { getSmsTimer } from '@/hooks/useModal'

const popup = ref()
const type = ref('code')
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 open = () => {
  popup.value.open()
}

const accountLoginSubmit = () => {}
const smsLoginSubmit = () => {}

defineExpose({
  open,
  popup
})
</script>

<style scoped lang="scss">

</style>