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

<template>
  <view class="ss-p-50 head-box" style="width: 75vw;">
    <template v-if="changeType === 'login'">
      <view class="head-title">温馨提示</view>

      <view class="ss-m-t-50">
        <view>
          <!-- <button
            class="send-button MiSans-Medium"
            @click="handleLogin"
            >
            一键授权注册/登录
          </button> -->
          <!-- <button 
            v-else
            class="send-button MiSans-Medium"
            :loading="phoneNumberLoading"
            :disabled="phoneNumberLoading"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
            >
            微信授权注册/登录
          </button> -->
          <view class="text-center ss-p-x-30 font-size-15 color-666">为了给您提供完整服务，需要您授权注册/登录，是否同意？</view>
          <view class="ss-flex ss-row-center ss-m-t-50">
            <button class="refuse-button" plain @click="handleRefuse">不同意并退出</button>
            <button class="agree-button" @click="handleLogin">同意并继续</button>
          </view>
        </view>

        <!-- <view class="ss-flex ss-row-center ss-m-y-50">
          <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#007aff' : '#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>
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { weChatRegister } from '@/api/common'
import { closeAuthModal } from '@/hooks/useModal'

const phoneNumberLoading = ref(false)
// const protocol = ref(true)

const changeType = ref('login')

// 查看协议详情
const handleToDetail = (type) => {
  const url = type === 'user' ? '/pagesA/agreement/user' : '/pagesA/agreement/privacy'
  uni.navigateTo({
    url
  })
}

// 不同意并退出
const handleRefuse = () => {
  wx.exitMiniProgram({
    success: () => {},
    fail: () => {
      console.log('退出小程序失败')
    }
  })
}

// 授权
const handleLogin = () => {
  // if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
  phoneNumberLoading.value = true
  wx.login({
    success: async (res) => {
      try {
        const { result } = await weChatRegister({ wechat_code: res?.code })
        console.log(result, '用户注册返回结果')
        if (!result) return uni.showToast({ title: '授权失败，请稍后重试', icon: 'none', duration: 2000 })
        uni.showToast({ title: '授权成功', icon: 'success', duration: 2000 })
        uni.setStorageSync('wechat_user', result)
        uni.$emit && uni.$emit('auth:login', result)
        closeAuthModal()
      } finally {
        phoneNumberLoading.value = false
      }
    },
    fail:(res)=> { 
      phoneNumberLoading.value = false
      console.log("获取登录凭证code失败！", res)
    }
  })
}

// 微信登录/注册
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 (res) => {
      try {
        const { result } = await weChatRegister({ wechat_code: res?.code })
        console.log(result, '用户注册返回结果')
        uni.setStorageSync('wechat_user', result)
        uni.$emit && uni.$emit('auth:login', result)
        closeAuthModal()
      } finally {
        phoneNumberLoading.value = false
      }
    },
    fail:(res)=> { 
      phoneNumberLoading.value = false
      console.log("获取登录凭证code失败！", res)
    }
  })
}
</script>

<style scoped lang="scss">
.head-title {
  font-size: 35rpx;
  text-align: center;
  // color: #007aff;
  // margin-top: 30rpx;
}
.refuse-button {
  width: 126px;
  font-size: 16px;
  color: #666;
  border-radius: 25px;
  border: 1px solid #ccc;
  // padding: 0 10px;
}
.agree-button {
  width: 126px;
  font-size: 16px;
  color: #fff;
  border-radius: 25px;
  background-color: #007aff;
}
</style>