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></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'

const useUserStore = userStore()
const current = ref(0)
const accountLoginRef = ref()
const smsLoginRef = 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',
    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 changeType = ref('login')

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 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
  try {
    await useUserStore.handleRegister(state.value.register)
    changeType.value = 'login'
  } finally {

  }
}

// 登录
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, '登录参数')
  await useUserStore.handleSmsLogin(query, 1)
}
</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>