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 v-if="showCloseIcon" 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>手机号快捷登录</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,
    },
    showCloseIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tmplIds: [
        "kiDj_hSF_ASwD-Dlgxnypi6IJBQZ12a-hEpd3zZ-Uxc",
        // "Lq6_OHOemtmBoWGrd9zvyJ3ultzXB5metmqPtYeV0pc",
      ],
    };
  },
  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",
      "reloadUserResource",
    ]),
    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);

            setTimeout(() => {
              that.$.showModal({
                title: "订阅提示",
                content: "是否订阅活动消息通知？",
                cancelText: "暂不订阅",
                confirmText: "立即订阅",
                success: async function (n) {
                  if (n.confirm) {
                    wx.requestSubscribeMessage({
                      tmplIds: that.tmplIds,
                      success(rsp) {
                        let acceptCount = 0;
                        let rejectCount = 0;

                        console.log("success res====", rsp);

                        for (const templateId in rsp) {
                          if (that.tmplIds.includes(templateId)) {
                            const result = rsp[templateId];
                            if (result === "accept") {
                              acceptCount++;
                            } else if (
                              result === "reject" ||
                              result === "ban"
                            ) {
                              rejectCount++;
                            }
                          }
                        }

                        if (acceptCount > 0 && rejectCount === 0) {
                          uni.showToast({
                            title: "订阅成功",
                          });
                        } else if (acceptCount === 0 && rejectCount > 0) {
                          uni.showToast({
                            title: "已拒绝订阅",
                          });
                        } else {
                          uni.showToast({
                            title: "已订阅或拒绝",
                          });
                        }
                      },
                      fail(res) {
                        that.$.showModal({
                          content: `${res.errCode}:${res.errMsg}`,
                          showCancel: false,
                          confirmText: "好的",
                        })
                      },
                    });
                  }
                },
              });
            }, 500);
          },
        });
      } else {
        that.$.confirm(that.__("授权失败"));
      }
    },

    // 一键登录注册
    async doWxUserRegisterAndLogin(phoneNumber) {
      const openId = await this.getWxOpenId();
      const {
        userInfo: { nickName, avatarUrl },
      } = await this.getUserprofile();
      const that = this;

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

          that.loginSuccess(data);
        },
      });
    },

    // 成功登录回调
    loginSuccess(data) {
      const that = this;

      that.$.setStorageSync("uid", data.user_id);
      that.$.setStorageSync("ukey", data.key);

      // #ifdef H5
      $cookies.set("uid", data.user_id);
      $cookies.set("ukey", data.key);
      // #endif

      that.$.request({
        url: that.Config.URL.user.overview,
        success: function (results, status, msg, code) {
          that.login(data);
          that.reloadUserResource(function (user_info) {
            that.setData({
              UserInfo: user_info,
            });
          });

          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("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/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>