xlcs/xlcs-user/pages/login/login.vue

<template>
  <view class="wrap">
    <view class="content">
      <view class="title">欢迎登陆小鹿超市</view>
    </view>
    <view class="buttom">
      <view class="loginType">
        <!-- 对于按钮需要进行禁用判断，以防止多次点击 -->
        <button :disabled="isLogin" class="loginBtn" @click="getUserMsg">
          <view class="wechat item">
            <view class="icon">
              <u-icon color="rgb(83,194,64)" name="weixin-fill" size="200"></u-icon>
            </view>
            微信登陆
          </view>
        </button>
      </view>
      <view class="hint">
        登录代表同意
        <text class="link">小鹿超市用户协议、隐私政策，</text>
        并授权使用您的小鹿超市账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 防止按钮多次点击的布尔值
      isLogin: false,
    };
  },
  methods: {
    // 获取用户信息
    getUserMsg() {
      // 不允许按钮点击
      this.isLogin = true;
      // 获取用户信息
      uni.getUserProfile({
        desc: '获取用户信息',
        success: res => {
          // 获取到用户头像、昵称、性别等内容，并将它们进行本地缓存的存储
          const photoUrl = res.userInfo.avatarUrl;
          const nickName = res.userInfo.nickName;
          const sex = res.userInfo.gender;
          uni.setStorageSync('userInfo', {photoUrl, nickName, sex});
          // 进行微信登陆操作（具体查看小程序登陆wx.login流程图）
          // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
          uni.login({
            success: async res => {
              // 利用小程序登陆，配合code码进行用户登陆操作，并返回用户的token值
              const result = await this.$u.api.getWxLogin({code: res.code});
              console.log(result, result.token, "<<<")
              // 将token值进行本地缓存存储
              uni.setStorage({
                key: 'token',
                data: result.token,
                success: async () => {
                  // 更新用户信息
                  // await this.$u.api.postUpdateUser({
                  //   sex,
                  //   photoUrl,
                  //   nickName
                  // });
                  // 路由跳转至首页
                  uni.reLaunch({
                    url: '/pages/index/index',
                  });
                }
              });
            }
          });
        },
        fail: err => {
          console.log(err);
        },
        complete: () => {
          // 恢复按钮可用性
          this.isLogin = false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;

  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }
  }

  .buttom {
    .loginType {
      display: flex;
      justify-content: center;
      padding: 100rpx;

      .loginBtn {
        background: transparent;
      }

      .loginBtn::after {
        border: none;
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 24rpx;
      color: $u-tips-color;

      .link {
        color: $u-type-warning;
      }
    }
  }
}
</style>