【金秋打卡】第14天 全新升级，基于Vue3新标准，打造后台综合解决方案 第十四讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： 数据可视化解决方案（ECharts + AntV）

主讲老师： Sunday

课程内容：

今天学习的内容包括：

如何实现数据可视化

课程收获：

14.1 心得：

// pages/login/login.js
var app = getApp();
var islogin = true;

Page({
  data: {
    disabled: true,
    //新的授权登录方式（手机号）
    openid: "",
    loginstate: "0",
    userEntity: null,
    phoneNumber: "",
    sessionkey: "",
    userunionid:"",
    userInfo: null,
    showModal: false, //定义登录弹窗
  },
  onLoad: function (options) {
    var that = this;
    wx.login({
      success: res => {
        wx.request({
          url: app.getUrl('api/BiddLogin/GetOpenId'),
          data: {
            appid: app.globalData.appId,
            secret: app.globalData.secret,
            js_code: res.code
          },
          success(result) {
            //console.log(result)
            result = result.data;
            if (result.result) {
              wx.setStorage({
                key: "openid",
                data: result.data.openid
              });
              wx.setStorage({
                key: "sessionkey",
                data: result.data.session_key
              });
              wx.setStorage({
                key: "openId",
                data: result.data.openid
              });

              that.setData({
                openid: result.data.openid,
                sessionkey: result.data.session_key
              });
            }
          }
        })
      }
    });
  },
  onGotUserInfo: function (e) {
    var that = this;
    if (e.detail.errMsg == "getUserInfo:ok") {
      var params = {
        encryptedData: e.detail.encryptedData,
        session_key: that.data.sessionkey,
        iv: e.detail.iv
      };
      wx.request({
        url: app.getUrl("api/BiddLogin/GetWxUserInfo"),
        data: params,
        success: function (result) {
          result = result.data;
          wx.hideLoading();
          if (result.result) {
            wx.setStorage({
              key: "userunionid",
              data: result.data
            });
            
            that.setData({
              userunionid: result.data
            });
          }
        }
      })

      wx.setStorage({
        key: "userinfo",
        data: e.detail.userInfo
      });
      this.setData({
        userInfo: e.detail.userInfo
      });

      that.showDialogBtn(); //调用一键获取手机号弹窗（自己写的）
    }
  },

  // 显示一键获取手机号弹窗
  showDialogBtn: function () {
    this.setData({
      showModal: true //修改弹窗状态为true，即显示
    })
  },
  // 隐藏一键获取手机号弹窗
  hideModal: function () {
    this.setData({
      showModal: false //修改弹窗状态为false,即隐藏
    });
  },
  onquick: function (openid, userInfo, phoneNumber) {
    var that = this;
    console.log(userInfo);
    wx.request({
      url: app.getUrl("api/BiddLogin/GetQuickLoginByPhone"),
      data: {
        phoneNumber: phoneNumber,
        sex: userInfo.gender,
        wximg: userInfo.avatarUrl,
        nickname: userInfo.nickName,
        openid: that.data.openid,
        unionid: that.data.userunionid
      },
      success: function (result) {
        result = result.data;
        if (result.result) {
          wx.setStorage({
            key: "wxOpenId",
            data: result.data.MemberOpenId.OpenId
          });
          app.globalData.wxUserInfo = result.data;
          app.globalData.openId = result.data.MemberOpenId.OpenId;
          that.setData({
            userEntity: result.data
          });
          wx.setStorage({
            key: "userEntity",
            data: result.data
          });

          that.setData({
            loginstate: "1"
          });

          wx.setStorage({
            key: "loginstate",
            data: "1"
          });

          app.getUserCenterInfo();
          wx.navigateBack();
        } else {
          return;
        }
      },
      fail(res) {
        console.log(res);
      }
    })
  },
  //绑定手机
  getPhoneNumber: function (e) {
    var that = this;
    that.hideModal();
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
      wx.checkSession({
        success: function () {

          var params = {
            encryptedData: e.detail.encryptedData,
            session_key: that.data.sessionkey,
            iv: e.detail.iv
          };
          wx.request({
            url: app.getUrl('api/BiddMemberCenter/DecryptPhone'), //自己的解密地址
            data: params,
            success: function (result) {
              //console.log(result)
              result = result.data;
              if (result.result) {
                that.onquick(that.data.openid, that.data.userInfo, result.data.phoneNumber); //调用onquick方法，并传递三个参数
              } else {
                console.log(result);
              }
            }
          })
        },
        fail: function () {
          wx.login({
            success: res => {
              wx.request({
                url: app.getUrl('api/BiddLogin/GetOpenId'),
                data: {
                  appid: app.globalData.appId,
                  secret: app.globalData.secret,
                  js_code: res.code
                },
                success(result) {
                  console.log(result)
                  result = result.data;
                  if (result.result) {
                    wx.setStorage({
                      key: "openid",
                      data: result.data.openid
                    });

                    wx.setStorage({
                      key: "openId",
                      data: result.data.openid
                    });

                    wx.setStorage({
                      key: "sessionkey",
                      data: result.data.sessionkey
                    });

                    that.setData({
                      openid: result.data.openid,
                      sessionkey: result.data.session_key
                    });

                    var params = {
                      encryptedData: e.detail.encryptedData,
                      session_key: result.data.sessionkey,
                      iv: e.detail.iv
                    };
                    wx.request({
                      url: app.getUrl('api/BiddMemberCenter/DecryptPhone'), //自己的解密地址
                      data: params,
                      success: function (result) {
                        console.log(result)
                        result = result.data;
                        if (result.result) {
                          that.onquick(that.data.openid, that.data.userInfo, result.data.phoneNumber); 
                        } else {
                          console.log(result);
                        }
                      }
                    })
                  }
                }
              })
            }
          })
        }
      })


    } else {

      wx.showToast({
        title: "用户拒绝微信手机号授权，请重新授权",
        icon: 'none',
        mask: true,
      });

    }

  },
  //暂不登录返回上一级
  back: function () {
    wx.navigateBack();
  }
})

/* pages/login/login.wxss */
page {
  background: #fff;
}

.button-hover[type="primary"] {
  background: #4CB202;
  color: #fff;
}

.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  color: #fff;
}

.modal-dialog {
  width: 72%;
  position: absolute;
  top: 20%;
  left: 14%;
  background: #fff;
  border-radius: 12rpx;
}

.modal-content {
  text-align: center;
}

.dialog_text1 {
  margin-top: 50rpx;
  font-size: 36rpx;
  line-height: 1;
  color: #040306;
}

.dialog_text2 {
  margin-top: 30rpx;
  font-size: 30rpx;
  line-height: 1;
  color: #A7A7A7;
}

.dialog_text3{
  margin-bottom: 40rpx;
  font-size: 30rpx;
  line-height: 1;
  color: #040306;
}

.modal-content .show {
  width: 94rpx;
  height: 94rpx;
  display: block;
  margin: 72rpx auto 34rpx auto;
}

.iconWx {
  width: 52rpx;
  height: 41rpx;
  padding-right: 20rpx;
}

.iconPhone {
  width: 56rpx;
  height: 56rpx;
  padding-right: 15rpx;
}


.modal-content view:nth-of-type(3) {
  font-size: 26rpx;
  color: #9c9c9c;
  line-height: 1;
}

.modal-content button:nth-of-type(1)::after {
  border: none;
}

.modal-content .wxLogin {
  font-size: 26rpx;
  color: #424242;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 38rpx 0 80rpx;
}

.top {
  margin: 340rpx auto 10rpx auto;
  width: 100%;
  text-align: center;
}

.logo {
  width: 240rpx;
  height: 240rpx;
  margin: 0 auto;
}

.welcome {
  margin-top: 38rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #433F4A;
}

button::after {
  border: none;
}

.bottom_button {
  position: fixed;
  bottom: 0;
  margin-bottom: 160rpx;
  width: 100%;
}

button[type="primary"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 702rpx;
  height: 92rpx;
  font-size: 36rpx;
  border-radius: 54rpx;
  background: #4CB202;
  color: #fff;
  margin-bottom: 40rpx;
}

button[type="back"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 702rpx;
  height: 92rpx;
  font-size: 36rpx;
  border-radius: 54rpx;
  background: #fff;
  color: #BDBDBD;
  border: 2rpx solid #BDBDBD;
}

.wechat_size {
  font-size: 56rpx;
}


button[type="login"] {
  width: 198rpx;
  height: 72rpx;
  border-radius: 36rpx;
  margin: 48rpx 32rpx;
  font-size: 30rpx;
  color: #fff;
  background: #68ae55;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

button[type="no_login"] {
  width: 198rpx;
  height: 72rpx;
  border-radius: 36rpx;
  margin: 48rpx 32rpx;
  font-size: 30rpx;
  color: #A7A7A7;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  border: 2rpx solid #A7A7A7;
}