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 MiSans-Semibold">欢迎来到门墩儿</view>
      <uni-segmented-control
        class="ss-m-t-30 MiSans-Medium"
        :current="current"
        :values="items"
        style-type="text" 
        active-color="#00B760" 
        @clickItem="onClickItem"
      />
      <!-- <view class="head-subtitle ss-m-t-10">未注册的手机号，验证后自动注册账号</view> -->

      <view class="ss-m-t-30">
        <!-- 手机号快捷登录 -->
        <view v-if="current === 0">
          <button v-if="!protocol" class="send-button MiSans-Medium" @click="showProtocolToast">手机号快捷登录</button>
          <button v-else class="send-button MiSans-Medium" :loading="phoneNumberLoading" :disabled="phoneNumberLoading" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
        </view>

        <!-- 短信验证码登录 -->
        <uni-forms
          v-if="current === 1"
          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 MiSans-Normal" :disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }" @tap="handleCode">
                  {{ getSmsTimer('smsLogin') }}
                </button>
              </template>
            </uni-easyinput>
          </uni-forms-item>
        </uni-forms>

        <!-- 账号密码登录 -->
        <uni-forms
          v-if="current === 2"
          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 v-if="current !== 0" class="send-button MiSans-Medium" :loading="smsLoginLoading" :disabled="smsLoginLoading" @tap="handleLogin"> 登 录  </button>
        <view class="exit-mini-text MiSans-Normal color-error" @tap="handleExitMiniProgram">取消登录并退出</view>
        <view class="agreement-box ss-flex ss-row-center">
          <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">
            <span class="MiSans-Normal">我已阅读并遵守</span>
            <view class="color-primary MiSans-Medium" @tap.stop="handleToDetail('user')">
              《用户协议》
            </view>
            <view class="agreement-text MiSans-Normal">和</view>
            <view class="color-primary MiSans-Medium" @tap.stop="handleToDetail('privacy')">
              《隐私协议》
            </view>
          </view>
        </view>
        <view class="register MiSans-Normal ss-m-t-30" style="margin-bottom: 30px;" @tap="handleChangeRegister">还没有登录账户？去注册</view>
      </view>
    </template>
    <template v-if="changeType === 'register'">
      <view class="head-title pb-20 MiSans-Semibold">手机号注册</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 MiSans-Normal"
                :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 color-primary ss-p-b-5 MiSans-Normal" style="text-align: end;" @tap="handleChangeLogin">已有账户？去登陆</view>
      <view>
        <button class="send-button" :loading="registerLoading" :disabled="registerLoading" @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;">
        <span class="MiSans-Normal">点击注册即代表您同意</span>
        <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 } from '@/utils/validate'
import { getSmsCode, getSmsTimer } from '@/utils/code'
import { userStore } from '@/store/user'

const useUserStore = userStore()
const items = ['手机号快捷登录', '短信登录', '账号登录']
const current = ref(0)
const accountLoginRef = ref()
const smsLoginRef = ref()
const registerForm = ref()
const phoneNumberLoading = ref(false)
const smsLoginLoading = ref(false)
const registerLoading = ref(false)
const protocol = ref(false)
const state = ref({
  isMobileEnd: false, // 手机号输入完毕
  codeText: '获取验证码',
  sms: {
    phone: '',
    code: ''
  },
  register: {
    phone: '',
    code: ''
  },
  account: {
    phone: '',
    password: ''
  },
  rules: {
    phone: mobile,
    password,
  },
  smsRules: {
    code,
    phone: mobile
  }
})


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

const changeType = ref('login')

// 登录成功后的返回页面
// const backUrl = getCurrentPages().length ? getCurrentPages()[getCurrentPages().length - 2].route : ''

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

const showProtocolToast = () => {
  uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
}

// 微信登录
const getPhoneNumber = async (e) => {
  if (e?.detail?.errMsg !== 'getPhoneNumber:ok') {
    uni.showToast({ title: '微信登录失败', icon: 'none' })
    return
  }
  changeType.value = 'login'
  phoneNumberLoading.value = true

  wx.login({
    success: async (result) => {
      const wxLoginCode = result?.code || ''
      const query = {
        loginCode: wxLoginCode,
        phoneCode: e.detail.code,
        state: e.detail.encryptedData,
      }
      await useUserStore.handleSmsLogin(query, current.value)
      phoneNumberLoading.value = false
    },
    fail:(res)=> { 
      phoneNumberLoading.value = false
      console.log("获取登录凭证code失败！", res)
    }
  })
}

async function handleRegister () {
  const validate = await unref(registerForm).validate()
  if (!validate) return
  try {
    registerLoading.value = true
    await useUserStore.handleRegister(state.value.register)
    changeType.value = 'login'
  } finally {
    registerLoading.value = false
  }
}

// 登录
const handleLogin = async () => {
  if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
  const validate = await unref(current.value === 1 ? smsLoginRef : accountLoginRef).validate()
  if (!validate) return

  try {
    smsLoginLoading.value = true
    const query = current.value === 1 ? state.value.sms : state.value.account
    Object.assign(query, {
      account: query.phone
    })
    await useUserStore.handleSmsLogin(query, current.value)
    
  } finally {
    smsLoginLoading.value = false
  }
}

// 取消登录并退出小程序
const handleExitMiniProgram = () => {
  // #ifdef MP-WEIXIN
  try {
    wx.exitMiniProgram()
  } catch (e) {
    // 非微信环境忽略
  }
  // #endif
}
</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;
  text-align: center;
  color: #00B760;
  padding-bottom: 2px;
  text-decoration: underline;
  &.login {
    color: #00B760;
  }
}
.pb-20 {
  padding-bottom: 40rpx;
}

.exit-mini-text {
  margin-bottom: 12px;
  text-align: center;
  font-size: 14px;
  text-decoration: underline;
}

</style>