menduner-uniapp/layout/components/authModal/login/index.vue

<template>
  <view class="ss-p-30 head-box">
    <template v-if="changeType === 'login'">
      <view class="head-title ss-m-b-30">欢迎来到门墩儿</view>

      <view class="ss-m-t-30">
        <!-- 企业邮箱+密码登录 -->
        <uni-forms
          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>

        <view class="quickLogon">
          <view class="color-666" style="font-size: .85em;" @tap.stop="handleForgotPassword">忘记密码</view>
          <view class="register" @tap="handleChangeRegister">还没有登录账户？去注册</view>
        </view>
        <button class="send-button" @tap="handleLogin"> 登 录  </button>
        <view class="agreement-box ss-flex ss-row-center" style="margin-bottom: 30px;">
          <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00B760' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
          <view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
            我已阅读并遵守
            <view class="color-primary" @tap.stop="handleToDetail('user')">
              《用户协议》
            </view>
            <view class="agreement-text">和</view>
            <view class="color-primary" @tap.stop="handleToDetail('privacy')">
              《隐私协议》
            </view>
          </view>
        </view>
      </view>
    </template>

    <template v-if="changeType === 'register'">
      <view class="head-title pb-20">手机号验证</view>

      <uni-forms
        ref="registerForm"
        v-model="state.register"
        :rules="state.smsRules"
        validateTrigger="bind"
        labelWidth="140"
        labelAlign="center"
      >

        <uni-forms-item name="phone" label="手机号">
          <uni-easyinput placeholder="请输入手机号" v-model="state.register.phone" :inputBorder="false" type="number">
          </uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="code" label="验证码">
          <uni-easyinput
            placeholder="请输入验证码"
            v-model="state.register.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="handleRegisterCode"
              >
                {{ getSmsTimer('smsRegister') }}
              </button>
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <view class="register login" style="text-align: end;" @tap="handleChangeLogin">已有账户？去登陆</view>
      <view>
        <button class="send-button" @tap="handleRegister"> 注 册 </button>
      </view>
      <view class="color-999 ss-flex ss-col-center ss-row-center ss-m-l-8 font-size-13" style="margin-bottom: 30px;">
        点击注册即代表您同意
        <view class="color-primary" @tap.stop="handleToDetail('user')">
          《用户协议》
        </view>
        <view class="agreement-text">和</view>
        <view class="color-primary" @tap.stop="handleToDetail('privacy')">
          《隐私协议》
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { mobile, password, code, emailRequired } from '@/utils/validate'
import { getSmsCode, getSmsTimer } from '@/utils/code'
import { userStore } from '@/store/user'
import { closeAuthModal } from '@/hooks/useModal'
import { getUserRegisterEnterpriseApply, getEnterpriseRegisterApply } from '@/api/enterprise'

const useUserStore = userStore()
const accountLoginRef = ref()
const registerForm = ref()
const protocol = ref(false)
const state = ref({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  sms: {
    phone: '',
    code: ''
  },
  register: {
    phone: '',
    code: ''
  },
  account: {
    phone: '1687284007@qq.com', // 1687284007 18406571584 
    password: 'Citu123456'
  },
  rules: {
    phone: emailRequired,
    password,
  },
  smsRules: {
    code,
    phone: mobile
  }
})


// 设置默认账号密码便于开发快捷登录
if (window && window.location && window.location.hostname && window.location.hostname === 'localhost') {
  state.value.account.phone = '1687284007@qq.com'
  state.value.account.password = 'Citu123456'
}

// 忘记密码
const handleForgotPassword = () => {
  uni.navigateTo({
    url: '/pagesA/forgotPassword/index'
  })
}

const changeType = ref('login')

// 获取验证码
const handleRegisterCode = () => {
  if (!state.value.register.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    })
    return
  }
  getSmsCode('smsRegister', state.value.register.phone)
}
// 查看协议详情
const handleToDetail = (type) => {
  const url = type === 'user' ? '/pagesB/agreement/user' : '/pagesB/agreement/privacy'
  uni.navigateTo({
    url
  })
}

// 注册
function handleChangeRegister () {
  changeType.value = 'register'
}

// 登录
function handleChangeLogin () {
  changeType.value = 'login'
}

async function handleRegister () {
  const validate = await unref(registerForm).validate()
  if (!validate) return
  const query = state.value.register
  Object.assign(query, {
    account: query.phone,
    autoRegister: true
  })
  try {
    await useUserStore.handleRegister(query)
    uni.showToast({
      title: '手机号验证成功',
      icon: 'none',
      duration: 2000
    })

    const { data } = await getUserRegisterEnterpriseApply()

    changeType.value = 'login'
    const hasData = data && Object.keys(data).length > 0 && data.status !== '1'
    console.log(data, '查看用户是否有在申请中的数据')

    uni.navigateTo({
      url: hasData ? '/pages/register/review' : '/pages/register/index'
    })
  } finally {

  }
}

const handleCheckEnterprise = async () => {
  const { data } = await getEnterpriseRegisterApply(state.value.account.phone)
  if (data && Object.keys(data).length) {
    // 查看申请状态
    uni.setStorageSync('entRegisterData', JSON.stringify(data))
    uni.navigateTo({
      url: '/pages/register/review?hasData=true'
    })
  }
  closeAuthModal()
}

// 登录
const handleLogin = async () => {
  if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
  const validate = await unref(accountLoginRef).validate()
  if (!validate) return
  const query = state.value.account
  Object.assign(query, {
    account: query.phone
  })
  console.log(query, '登录参数')
  try {
    await useUserStore.handleSmsLogin(query, 1)
    closeAuthModal()
  } catch (err) {
    console.log(err, '登录失败')
    if (!err.code || (err?.message && err.message.includes('timeout'))) return closeAuthModal()
    if (err.code === 1100017022) {
      // 密码不安全
      uni.showToast({ title: '您的密码不安全，请重置密码', icon: 'none', duration: 2000 })
      closeAuthModal()
      return
    }
    if (err.code === 1100021016) {
      // 企业注册申请中
      handleCheckEnterprise()
      return
    }
    if (err.code === 1100017019) {
      uni.showToast({ title: '您的邮箱还未注册过，请先注册', icon: 'none', duration: 2000 })
      changeType.value = 'register'
    }
  }
}
</script>

<style scoped lang="scss">
.login-code {
  width: 73px;
  min-width: 73px;
  color: #00B760;
  text-align: center; 
  font-size: 12px; 
  cursor: pointer;
  // border: 1px dashed #00B760;
  // border-radius: 26px;
  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>