volunteer-secondary/src/pages-fg/login/login.vue

<script lang="ts" setup>

import {
  getSessionKey,
  getWxUserInfo,
  setWxInfo,
} from '@/service/'
import Checkbox from '../components/check-group/Checkbox.vue'
import CheckboxGroup from '../components/check-group/CheckboxGroup.vue'
import { useLogin } from '@/pages-fg/hooks/useUserInfo'
import { useTokenStore, useUserStore } from '@/store'

const checked = ref([]) // 是否同意条款
const getPhoneInfo = ref(null)

const tokenStore = useTokenStore()
const userStore = useUserStore()

const getPhoneNumber = async (e: any) => {
  if (e.detail.errMsg == 'getPhoneNumber:ok') {
    const detail = e.detail
    const _getPhoneInfo = {
      iv: detail.iv,
      encryptedData: detail.encryptedData,
      code: detail.code,
    }
    getPhoneInfo.value = _getPhoneInfo
    await getUserInfo(detail.code)
  } else if (e.detail.errMsg == 'getPhoneNumber:fail not login') {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
    })
  } else {
    uni.showToast({
      title: '获取手机号失败',
      icon: 'none',
    })
  }
}

const handleClick = () => {
  if (!checked.value) {
    uni.showToast({
      title: '您需先同意《服务条款》和《隐私条款》',
      icon: 'none',
    })
  }
  // #ifdef MP-ALIPAY
  // dd.getAuthCode({
  //   corpId: '3912995586',
  //   success: (res) => {
  //     const { authCode } = res
  //     console.log(res)
  //   },
  //   fail: () => {},
  //   complete: () => {},
  // })
  // #endif
}

// 授权完成之后返回到上一个目录去
const handleAuthReady = () => {
  uni.navigateBack()
}



const handleClickUserAgreement = () => {
  uni.navigateTo({
    url: '/pages-fg/login/userAgreement',
  })
}

const handleClickPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages-fg/login/privacyPolicy',
  })
}



const getUserInfo = async (_code: string) => {
  const userInfo = (await useLogin()) as { code: string; errMsg: string }

  if (userInfo.errMsg == 'login:ok') {
    const resp = await getSessionKey({ query: { JsCode: userInfo.code } })
    if(resp.code !== 200){
      uni.showModal({title:'登陆失败',content:resp.message})
      uni.navigateBack();
    }
    
    tokenStore.setTokenInfo({ token: resp.result.accessToken, expiresIn: 7 * 24 * 60 * 60 })
    userStore.setUserOpenId(resp.result.openId)
    setWxInfo({options:{query:{code:_code, openId:resp.result.openId}}})
    getWxUserInfo().then(resp => {
      if(resp.code == 200){
        userStore.setUserExtend(resp.result.userExtend)
        userStore.setUserInfo({nickName:resp.result.nickName,mobile:resp.result.mobile})
        userStore.setSex(resp.result.sex)
        userStore.setUserAvatar(resp.result.avatar)
      }
    })
    uni.navigateBack()
  } else {
    uni.showToast({
      title: '您需先授权',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="h-screen flex flex-col bg-white">
    <view class="flex flex-col justify-center items-center flex-1 pb-safe mt-[-100px]">
      <view class="w-[424rpx] h-[424rpx]">
        <image class="w-[424rpx] h-[424rpx]" src="https://lwzk.ycymedu.com/img/home/logo.png" mode="aspectFit">
        </image>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <button
        class="w-[493rpx]! mb-[40rpx] h-[88rpx]! rounded-[44rpx] text-[32rpx] text-white flex items-center justify-center "
        :class="checked.length > 0 ? 'bg-[#1580FF]' : 'bg-[#BFBFBF]'" @click.stop="handleClick"
        open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :disabled="checked.length === 0">
        一键登录
      </button>
      <!-- #endif -->

      <!-- #ifdef MP-ALIPAY -->
      <button
        class="w-[493rpx]! mb-[40rpx] h-[88rpx]! rounded-[44rpx] text-[32rpx] text-white flex items-center justify-center "
        :class="checked.length > 0 ? 'bg-[#1580FF]' : 'bg-[#BFBFBF]'" @click.stop="handleClick">
        一键登录
      </button>
      <!-- #endif -->

      <view class="flex items-center flex-nowrap">
        <CheckboxGroup v-model="checked" class="check-class mr-[10rpx]">
          <Checkbox name="1" cell shape="button" class="custom-checkbox"></Checkbox>
        </CheckboxGroup>

        <view class="flex items-center">
          <text class="text-[24rpx] whitespace-nowrap">
            已阅读并同意
            <text class="text-[#1580FF]" @click.stop="handleClickUserAgreement">
              <text>《用户协议》</text>
            </text>
            和
            <text class="text-[#1580FF]" @click.stop="handleClickPrivacyPolicy">
              <text>《隐私条款》</text>
            </text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
:deep(.custom-checkbox) {
  display: flex;
  align-items: center;
  justify-content: center;

  .checkbox__icon {
    border-radius: 50%;
    height: 32rpx;
    width: 32rpx;
    margin: 0;
  }

  .custom-box {
    width: 32rpx;
    height: 32rpx;
    border: 1px solid #ddd;
    border-radius: 50%;
  }
}

:deep(.checkbox-active) {
  border-color: #fff !important;
  background-color: #fff !important;
}
</style>