java-mall-app/components/loginPopup.vue

<template>
  <view class="loginPopup-container">
    <uni-popup ref="popup" type="bottom" :mask-click="false" :safe-area="true" :borderRadius="'10px 10x 10px 10px'">
      <view class="popup-box">
        <view class="head-img"></view>
        <view class="uni-icon uni-icon-closeempty" color="#888" @click="close"></view>
        <view class="popup-content">
          <view class="title"> 微信账号登录小发同城小程序 </view>
          <button class="btn-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            <view class="iconfontAili icon-weixin"></view>
            <view>微信一键登录</view>
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "loginPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["showLoginPopup", "Config"]),
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.open();
          // this.getWXLoginCode();
        }
      },
      // deep: true,
      // immediate: true,
    },
  },
  onUnload() { },
  onHide() {
    this.close();
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    open() {
      this.$refs["popup"].open("bottom");
    },
    close() {
      this.$refs["popup"].close();
      this.$emit("close");
    },
    getWXLoginCode() {
      let that = this;

      wx.login({
        success: (res) => {
          // 登录注册接口
          if (res.code) {
            // 调用服务端登录接口，发送 res.code 到服务器端换取 openId, sessionKey, unionId并存入数据库中
            let params = { code: res.code };

            that.$.request({
              url: that.cf.URL.get_miniapp_open_id,
              data: params,
              success: (data, status, msg, code) => { },
              fail: (err, status) => { },
            });
          } else {
            that.$.showModal({
              content: that.__("授权失败"),
              showCancel: false,
            });
          }
        },
      });
    },

    // code 换 openid sessionkey uid
    async getWxOpenId() {
      return new Promise((resolve, reject) => {
        var that = this;
        wx.login({
          success: (res) => {
            if (res.code) {
              that.$.request({
                url: this.Config.URL.wx.get_wx_openid,
                data: {
                  code: res.code,
                },
                dataType: "json",
                success: function (res) {
                  resolve(res.openid)
                },
              });
            }
          },
        });
      })
    },

    // 授权用户信息
    async getUserprofile() {
      return new Promise((resolve, reject) => {
        wx.getUserInfo({
          success: (res) => {
            resolve(res)
          }
        })
      })
    },

    // 授权手机信息 服务端解析返回手机号 并回调一键登录注册
    async getPhoneNumber(e) {
      var that = this;
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        that.$.request({
          url: this.Config.URL.wx.get_wx_phone_number,
          data: {
            code: e.detail.code,
          },
          success: function (res) {
            that.doWxUserRegisterAndLogin(res.phoneNumber)
          },
        });
      } else {
        that.$.confirm(that.__("授权失败"));
      }
    },

    // 一键登录注册
    async doWxUserRegisterAndLogin(phoneNumber) {
      this.close()
      const openId = await this.getWxOpenId()
      const user = await this.getUserprofile()
      const that = this

      this.$.request({
        url: this.Config.URL.wx.doWxUserRegisterAndLogin,
        data: {
          nickName: user.userInfo.nickName,
          avatarUrl: user.userInfo.avatarUrl,
          phoneNumber,
          openId
        },
        method: "POST",
        header: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        dataType: "json",
        success: function (res) {
          if (res.status != 200) {
            that.$.confirm(that.__(res.msg || '登录失败，请重试！'));
            return
          }

        },
      });
      // that.$.request({
      //   url: that.Config.URL.user.overview,
      //   success: function (data, status, msg, code) {
      //     userInfo = Object.assign(userInfo, data.member_info);

      //     that.login(userInfo);

      //     that.close();
      //   },
      // });
    },
  },
};
</script>
<style lang="scss">
.loginPopup-container {
  background: #fff;

  .popup-box {
    // padding: 40rpx;
    position: relative;
    width: 100%;

    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;

    .head-img {
      width: 100%;
      height: 190px;
      background-image: url("../static/images/login-bg.png");
      background-size: 100% 100%;
    }

    .uni-icon-closeempty {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .popup-content {
      padding: 40rpx;
      width: 90%;
      height: 400rpx;
      background: #fff;
    }

    .title {
      font-size: 18px;
      text-align: center;
      font-weight: 700;
      color: #000;
    }

    .btn-login {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 40rpx;
      margin-top: 80rpx;
      height: 100rpx;
      font-size: 32rpx;
      background: #0787f4;
      border-radius: 40px;
      color: #fff;

      .icon-weixin {
        font-size: 48rpx;
        margin-right: 16rpx;
      }
    }
  }
}
</style>