traffic-eff-app/pasb/pages/login/index.vue

<template>
  <view
      class="login-container"
      :style="{
         background: `url(${getImageUrl(ICON_CFG.login_bg)}) no-repeat `,
         backgroundSize: '100%',
       }"
  >
    <button class="login-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
      <u-icon name="weixin-fill" color="#fefefe" size="28"></u-icon>
      一键微信登录
    </button>
  </view>
</template>

<script>

import { ICON_CFG } from '@/common/EnumConst';
import { getImageUrl, setStorageObj } from '@/util';

export default {
  name: 'login',
  props: {},
  data() {
    return {
      ICON_CFG,
    };
  },
  created() {
  },
  onLoad() {
  },
  methods: {
    getImageUrl,
    // 获取用户信息
    getUserInfo(e) {
      if (e.mp.detail.userInfo) {
        this.userInfo = e.mp.detail.userInfo;
        this.hasUserInfo = true;
        this.login();
      } else {
        uni.showModal({
          title: '警告',
          content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
          showCancel: false,
          confirmText: '返回授权',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击了“返回授权”');
            }
          },
        });
      }
    },
    // 登录并获取用户信息
    login() {
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 登录成功，获取用户code
          const { code } = loginRes;
          // 发送code到后台换取openId, sessionKey, unionId
          uni.request({
            url: `${process.env.UNI_API_PREFIX}/cp/usr/wx/login`, // 你的登录API地址
            method: 'POST',
            data: {
              code,
              ...this.userInfo,
            },
            success: (res) => {
              if (res.data && res.data.code === 200) {
                // 将用户信息和session存储到本地
                setStorageObj('userInfo', res.data);
              } else {
                uni.showToast({
                  title: '登录失败',
                  icon: 'none',
                });
              }
            },
            fail: () => {
              uni.showToast({
                title: '请求失败',
                icon: 'none',
              });
            },
          });
        },
        fail: (err) => {
          console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err);
          uni.showToast({
            title: '登录失败',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;