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,
            });
          }
        },
      });
    },
    getPhoneNumber(e) {
      var that = this;
      console.log(e);
      console.log(e.detail.code); // 动态令牌
      console.log(e.detail.errMsg); // 回调信息（成功失败都会返回）
      console.log(e.detail.errno); // 错误码（失败时返回）
      // 允许授权
      if (typeof e.detail.code !== "undefined") {
        console.log(e.detail.code);
        //调用接口利用 e.detail.encryptedData, e.detail.iv 信息来解密手机号
        that.$.request({
          url: this.Config.URL.wx.get_user_phone_number,
          data: {
            code: e.detail.code,
          },
          dataType: "json",
          success: function (userInfo, status, msg, code) {
            if (status == 200) {
              debugger;
              // 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();
              //   },
              // });
            } else {
              that.$.confirm(msg);
            }
          },
        });
      } else {
        that.$.confirm(that.__("请允许手机授权！"));
      }
    },
  },
};
</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>