new-greemall-wxapp/pages/login/index.vue

<template>
  <view class="app-container">
    <view class="main-container">
      <view class="header">
        <image :src="configInfo.minLogo1"></image>
        <view>{{ configInfo.minAppName }}</view>
      </view>
      <view class="bottom">
        <view class="content">
          <view>申请获取以下权限</view>
          <text>获取你的公开信息(昵称，头像、地区等)</text>
        </view>
        <button class="button" type="primary" @tap="wxLogin">授权登录</button>
        <!-- <view class="tips">登录即代表同意<text @tap="toAgreement(1)">《用户协议》</text>和<text @tap="toAgreement(2)">《隐私声明》</text></view> -->
      </view>
    </view>

    <u-popup :round="10" :show="isShowPhoneDialog">
      <view class="phone-dialog">
        <view class="content">
          <view>申请获取以下权限</view>
          <text>获得你的公开信息(手机号码)</text>
        </view>
        <view class="btn">
          <button @tap="isShowPhoneDialog = false">取消</button>
          <button
            type="primary"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            确定授权
          </button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      configInfo: uni.getStorageSync('configInfo'),
      userId: null,
      isNotOpenid: false, // 是否因为 支付前没有openid 进入的登录页

      isShowPhoneDialog: false, // 是否显示获取手机号授权弹窗
    };
  },
  onLoad({ isNotOpenid }) {
    this.isNotOpenid = isNotOpenid ? true : false;

    if (
      uni.getStorageSync('is_qywx') !== true &&
      uni.getStorageSync('is_qywx') !== false
    ) {
      console.log('重新获取系统信息');
      uni.getSystemInfo({
        success: function (e) {
          console.log(e);
          if (e.environment == 'wxwork') {
            uni.setStorageSync('is_qywx', true);
          } else {
            uni.setStorageSync('is_qywx', false);
          }
        },
      });
    }
  },
  methods: {
    wxLogin() {
      console.log('是否从企业微信端进入：' + uni.getStorageSync('is_qywx'));
      // 没有openid
      if (this.isNotOpenid == true) {
        console.log('没有openid');

        wx.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log(loginRes);
            this.$axios({
              url: '/user/auth',
              params: {
                code: loginRes.code,
                work: uni.getStorageSync('is_qywx'),
                serviceId: uni.getStorageSync('is_qywx')
                  ? this.$store.state.userId
                  : '',
              },
            }).then((res) => {
              this.userId = res.data.userId;
              this.mobile = res.data.mobile;
              uni.setStorageSync('token', res.data.token);

              // if(!this.mobile) {
              // 	return this.isShowPhoneDialog = true;
              // }

              this.loginSuccess();
            });
          },
        });
      }

      // 企业微信端
      else if (uni.getStorageSync('is_qywx') == true) {
        console.log('从企业微信端进入');
        wx.qy.login({
          success: (loginRes) => {
            console.log(loginRes);
            if (loginRes.code) {
              this.$axios({
                url: '/user/auth',
                params: {
                  code: loginRes.code,
                  work: true,
                },
              }).then((res) => {
                this.userId = res.data.userId;
                this.mobile = res.data.mobile;
                uni.setStorageSync('token', res.data.token);

                // if(!this.mobile || uni.getStorageSync('isActiveLogout')) {
                // 	return this.isShowPhoneDialog = true;
                // }

                this.loginSuccess();
              });
            } else {
              console.log('登录失败！' + loginRes.errMsg);
            }
          },
        });
      }

      // 微信端
      else if (uni.getStorageSync('is_qywx') == false) {
        console.log('从微信端进入');
        wx.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log(loginRes);
            this.$axios({
              url: '/user/auth',
              params: {
                code: loginRes.code,
                work: false,
              },
            }).then((res) => {
              this.userId = res.data.userId;
              this.mobile = res.data.mobile;
              uni.setStorageSync('token', res.data.token);

              // if (!this.mobile || uni.getStorageSync('isActiveLogout')) {
              //   return (this.isShowPhoneDialog = true);
              // }

              this.loginSuccess();
            });
          },
        });
      }
      return false;
    },

    // 获取配置信息
    async getConfigInfo() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/common/config/get',
          method: 'get',
        }).then((res) => {
          resolve(res.data);
        });
      });
    },

    // 保存用户信息
    async saveUserInfo(userInfo) {
      const configInfo = await this.getConfigInfo();

      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/user/userinfo/save',
          params: {
            userId: this.userId,
            avatarUrl: configInfo.minLogo3,
            nickName: `微信用户_${userInfo.mobile.slice(7, 11)}`,
          },
        }).then((res) => {
          resolve(res.data);
        });
      });
    },

    // 获取手机号
    getPhoneNumber(e) {
      this.$axios({
        url: '/user/mobile/grant',
        params: {
          userId: this.userId,
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData,
        },
      }).then((res) => {
        uni.setStorageSync('token', res.data.token);
        uni.setStorageSync('isActiveLogout', false);
        this.isShowPhoneDialog = false;

        this.loginSuccess();
      });
    },

    // 登录成功
    async loginSuccess() {
      const userInfo = await this.$getUserInfo(this.userId);

      if (!userInfo.avatar || !userInfo.nickName) {
        await this.saveUserInfo(userInfo);
      }

      this.$store.commit('changeIsLogin', true);
      uni.setStorageSync('isLogin', true);
      this.$successToast('登录成功');
      this.$isResolve();
      this.$backPage(1, 1000);
    },

    toAgreement(type) {
      uni.navigateTo({
        url: '/pages/login/agreement?type=' + type,
      });
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background: #ffffff;
  box-sizing: border-box;
}
.main-container {
  .header {
    border-bottom: 1px solid #ccc;
    text-align: center;
    height: 400rpx;
    margin-bottom: 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    view {
      font-size: 38rpx;
      margin-top: 30rpx;
    }
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .bottom {
    padding: 0 50rpx;
    .content {
      font-size: 28rpx;
      margin-bottom: 90rpx;
      text {
        display: block;
        color: #9d9d9d;
        margin-top: 30rpx;
      }
    }
    .button {
      border-radius: 80rpx;
      margin: 70rpx 0 30rpx;
      font-size: 35rpx;
    }
    .tips {
      font-size: 26rpx;
      color: #666666;
      text {
        color: #ff3f42;
      }
    }
  }
}

.phone-dialog {
  padding: 40rpx;
  box-sizing: border-box;
  .content {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    line-height: 50rpx;
    text {
      color: #9d9d9d;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
    button::after {
      border: none;
    }
    button {
      width: 180rpx;
      height: 70rpx;
      line-height: 70rpx;
      margin: 0;
      font-size: 28rpx;
      margin: 0 30rpx;
      &:first-child {
        background: #f5f5f5;
        color: #00ba5c;
      }
    }
  }
}
</style>