yizhizan-h5/pages/public/login.vue

<template>
  <view class="container">
    <!-- <image @click="navBack" src="../../static/images/index/close.png" style="width: 32upx;height: 32upx;margin-left: 46upx;"></image> -->
    <!-- 小程序状态下登录 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="login-box">
      <view class="mp_wxBox">
        <view>
          <view class="logo-box">
            <image src="@/static/images/jobApplicant/logo.svg" mode="scaleToFill" />
          </view>
          <view class="content">
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像、地区等)</text>
          </view>
          <view
            v-if="weixinPhone == true || weixinPhone == 'true'"
            class="login-btn wechat"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            <image src="@/static/images/jobApplicant/phone.svg" mode="scaleToFill" />
            授权手机号
          </view>
          <button
            v-else
            style="background: rgba(13, 39, 247, 1); color: #ffffff"
            class="bottom"
            bindtap="getUserProfile"
            @tap="login()"
          >
            授权登录
          </button>
        </view>
      </view>
      <view style="text-align: center">
        <view class="footer">
          <view class="check-box" @click="checked = !checked">
            <image
              src="@/static/images/jobApplicant/check.svg"
              v-if="checked"
              mode="scaleToFill"
            />
            <image
              src="@/static/images/jobApplicant/border.svg"
              v-else
              mode="scaleToFill"
            />
          </view>
          已阅读并同意<navigator url="/my/setting/xieyi">《亿职赞用户协议》</navigator>
          和<navigator url="/my/setting/mimi">《隐私协议》</navigator
          >，允许亿职赞统一管理本人账号信息
        </view>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view style="text-align: center" class="login-box">
      <view class="logo-box">
        <image src="@/static/images/jobApplicant/logo.svg" mode="scaleToFill" />
      </view>
      <!-- <button class="confirm-btn" style="margin-top: 100rpx" @click="register">
        手机号登录
      </button> -->
      <view class="login-btn wechat" @click="register"
        ><image
          src="@/static/images/jobApplicant/phone.svg"
          mode="scaleToFill"
        />手机账号密码登录</view
      >
      <view
        class=""
        v-if="isopen"
        @click="weixinLo"
        style="width: 100%; padding-top: 100rpx"
      >
        <view class="">
          <u-icon name="weixin-circle-fill" color="#5fcd73" size="100"></u-icon>
        </view>
        <view class="login-btn wechat"> 公众号快捷登录 </view>
      </view>

      <!-- 底部信息 -->
      <view class="footer">
        <view class="check-box" @click="checked = !checked">
          <image
            src="@/static/images/jobApplicant/check.svg"
            v-if="checked"
            mode="scaleToFill"
          />
          <image
            src="@/static/images/jobApplicant/border.svg"
            v-else
            mode="scaleToFill"
          />
        </view>
        已阅读并同意<navigator url="/my/setting/xieyi">《亿职赞用户协议》</navigator>
        和<navigator url="/my/setting/mimi">《隐私协议》</navigator
        >，允许亿职赞统一管理本人账号信息
      </view>
      <!-- <view class="footer">
        <u-checkbox shape="circle" v-model="checked"> </u-checkbox>
        <text>同意</text>
        协议地址
        <navigator url="/my/setting/mimi" open-type="navigate">《隐私政策》</navigator>
        和
        <navigator url="/my/setting/xieyi" open-type="navigate">《用户协议》</navigator>
      </view> -->
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      mobile: "",
      code: "",
      weixinLogin: false,
      sending: false,
      sendTime: "获取验证码",
      count: 60,
      weixinPhone: false,
      sendDataList: {},
      sessionkey: "",
      phoneNum: false,
      isopen: false,
    };
  },
  onLoad(e) {
    if (e.inviterCode) {
      this.$queue.setData("inviterCode", e.inviterCode);
    }
    this.sessionkey = uni.getStorageSync("sessionkey");
    this.weixinPhone = uni.getStorageSync("weixinPhone");
    console.log(this.weixinPhone);
    if (uni.getStorageSync("sendDataList")) {
      this.sendDataList = uni.getStorageSync("sendDataList");
    }
    // //微信登录开启
    // this.$Request.getT('/app/common/type/53').then(res => {
    // 	if (res.code == 0) {
    // 		if (res.data && res.data.value && res.data.value == '是') {
    // 			// this.weixinLogin = true;
    // 		}
    // 	}
    // });
    this.$Request.getT("/app/common/type/188").then((res) => {
      if (res.code == 0) {
        if (res.data && res.data.value && res.data.value == "是") {
          this.phoneNum = true;
        }
      }
    });
    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") !== -1) {
      //公众号是否自动登录  108
      this.$Request.getT("/app/common/type/108").then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.value && res.data.value == "是") {
            this.isopen = true;
          } else {
            this.isopen = false;
          }
        }
      });
    } else {
      this.isopen = false;
    }
    this.selbindwx();
    // #endif
  },
  methods: {
    selbindwx() {
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("micromessenger") !== -1) {
        let openid = uni.getStorageSync("openid");
        let userId = uni.getStorageSync("userId");
        // let that = this;
        if (
          window.location.href.indexOf("?code=") !== -1 ||
          window.location.href.indexOf("&code=") !== -1
        ) {
          let code;
          if (window.location.href.indexOf("?code=") !== -1) {
            code = window.location.href.split("?code=")[1].split("&")[0];
          } else {
            code = window.location.href.split("&code=")[1].split("&")[0];
          }
          let data = {
            code: code,
          };
          this.$Request.getT("/app/Login/getOpenId", data).then((ret) => {
            if (ret.code == 0) {
              uni.setStorageSync("openid", ret.data);
              this.$Request
                .getT("/app/Login/openid/login", {
                  openId: ret.data,
                })
                .then((res) => {
                  if (res.code == 0) {
                    uni.setStorageSync("token", res.token);
                    uni.setStorageSync("userName", res.user.userName);
                    uni.setStorageSync("avatar", res.user.avatar);
                    uni.setStorageSync("phone", res.user.phone);
                    uni.setStorageSync("invitationCode", res.user.invitationCode);
                    this.$queue.setData("inviterCode", res.user.inviterCode);
                    uni.setStorageSync("sex", res.user.sex);
                    uni.setStorageSync("userId", res.user.userId);
                    uni.setStorageSync("openId", res.user.openId);
                    uni.setStorageSync("userType", res.user.userType);
                    this.$Request.get("/app/UserVip/isUserVip").then((res) => {
                      if (res.code == 0 && res.data && res.data.isVip == 2) {
                        uni.setStorageSync("isVIP", true);
                      } else {
                        uni.setStorageSync("isVIP", false);
                      }
                    });
                    //判断是否开启身份选择 是/否
                    this.$Request.get("/app/common/type/339").then((rest) => {
                      if (rest.code == 0) {
                        if (rest.data.value == "是") {
                          uni.reLaunch({
                            url: "/pages/public/selectIdentity/selectIdentity",
                          });
                        } else {
                          uni.navigateBack();
                        }
                      } else {
                        uni.navigateBack();
                      }
                    });
                  } else {
                    uni.navigateTo({
                      url: "/pages/public/bind",
                    });
                  }
                });
            }
          });
        }
      }
    },
    //微信公众号登录
    weixinLo() {
      if (this.checked == false) {
        uni.showToast({
          title: "请先同意《隐私政策》和《用户服务协议》",
          icon: "none",
        });
        return;
      }
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("micromessenger") !== -1) {
        let openid = uni.getStorageSync("openid");
        let userId = uni.getStorageSync("userId");

        if (!openid) {
          if (
            window.location.href.indexOf("?code=") !== -1 ||
            window.location.href.indexOf("&code=") !== -1
          ) {
            let code;
            if (window.location.href.indexOf("?code=") !== -1) {
              code = window.location.href.split("?code=")[1].split("&")[0];
            } else {
              code = window.location.href.split("&code=")[1].split("&")[0];
            }
            let data = {
              code: code,
            };
            this.$Request.getT("/app/Login/getOpenId", data).then((res) => {
              if (ret.code == 0) {
                uni.setStorageSync("openid", ret.data);
                let datas = {
                  openId: ret.data,
                };
                this.$Request.getT("/app/Login/openid/login", datas).then((res) => {
                  if (res.code == 0) {
                    uni.setStorageSync("token", res.token);
                    uni.setStorageSync("userName", res.user.userName);
                    uni.setStorageSync("avatar", res.user.avatar);
                    uni.setStorageSync("phone", res.user.phone);
                    uni.setStorageSync("invitationCode", res.user.invitationCode);
                    this.$queue.setData("inviterCode", res.user.inviterCode);
                    uni.setStorageSync("sex", res.user.sex);
                    uni.setStorageSync("userId", res.user.userId);
                    uni.setStorageSync("openId", res.user.openId);
                    uni.setStorageSync("userType", res.user.userType);
                    this.$Request.get("/app/UserVip/isUserVip").then((res) => {
                      if (res.code == 0 && res.data && res.data.isVip == 2) {
                        uni.setStorageSync("isVIP", true);
                      } else {
                        uni.setStorageSync("isVIP", false);
                      }
                    });
                    //判断是否开启身份选择 是/否
                    this.$Request.get("/app/common/type/339").then((rest) => {
                      if (rest.code == 0) {
                        if (rest.data.value == "是") {
                          uni.reLaunch({
                            url: "/pages/public/selectIdentity/selectIdentity",
                          });
                        } else {
                          uni.navigateBack();
                        }
                      } else {
                        uni.navigateBack();
                      }
                    });
                  } else {
                    uni.navigateTo({
                      url: "/pages/public/bind",
                    });
                  }
                });
              }
            });
          } else {
            let that = this;
            window.location.href =
              "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
              that.$queue.getWxAppid() +
              "&redirect_uri=" +
              window.location.href.split("#")[0] +
              "&response_type=code&scope=snsapi_userinfo#wechat_redirect";
          }
        } else {
          this.$Request
            .getT("/app/Login/openid/login", {
              openId: openid,
            })
            .then((res) => {
              if (res.code == 0) {
                uni.setStorageSync("token", res.token);
                uni.setStorageSync("userName", res.user.userName);
                uni.setStorageSync("avatar", res.user.avatar);
                uni.setStorageSync("phone", res.user.phone);
                uni.setStorageSync("invitationCode", res.user.invitationCode);
                this.$queue.setData("inviterCode", res.user.inviterCode);
                uni.setStorageSync("sex", res.user.sex);
                uni.setStorageSync("userId", res.user.userId);
                uni.setStorageSync("openId", res.user.openId);
                uni.setStorageSync("userType", res.user.userType);
                this.$Request.get("/app/UserVip/isUserVip").then((res) => {
                  if (res.code == 0 && res.data && res.data.isVip == 2) {
                    uni.setStorageSync("isVIP", true);
                  } else {
                    uni.setStorageSync("isVIP", false);
                  }
                });
                //判断是否开启身份选择 是/否
                this.$Request.get("/app/common/type/339").then((rest) => {
                  if (rest.code == 0) {
                    if (rest.data.value == "是") {
                      uni.reLaunch({
                        url: "/pages/public/selectIdentity/selectIdentity",
                      });
                    } else {
                      uni.navigateBack();
                    }
                  } else {
                    uni.navigateBack();
                  }
                });
              } else {
                uni.navigateTo({
                  url: "/pages/public/bind",
                });
              }
            });
        }
      }
    },
    wxGetUserInfo(e) {
      if (this.checked) {
        wx.getUserProfile({
          desc: "业务需要",
          success: (infoRes) => {
            console.log(
              "infoRes.encryptedData__________:" + JSON.stringify(infoRes.userInfo)
            );
            let nickName = infoRes.userInfo.nickName; //昵称
            let avatarUrl = infoRes.userInfo.avatarUrl; //头像
            let sex = infoRes.userInfo.gender; //头像
            try {
              this.$queue.showLoading("正在登录中...");
              this.login(nickName, avatarUrl, sex);
            } catch (e) {}
          },
        });
      } else {
        uni.showToast({
          title: "请阅读并同意《隐私协议》和《用户服务协议》",
          icon: "none",
        });
      }
    },
    //登录
    login(nickName, avatarUrl, sex) {
      if (!this.checked) {
        uni.showToast({
          title: "请阅读并同意《隐私协议》和《用户服务协议》",
          icon: "none",
        });
        return;
      }
      let that = this;
      // 1.wx获取登录用户code
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          console.log(loginRes, "************");
          let data = {
            code: loginRes.code,
          };
          that.$Request.get("/app/Login/wxLogin", data).then((res) => {
            if (res.code == 0) {
              uni.hideLoading();
              uni.setStorageSync("openId", res.data.open_id);
              uni.setStorageSync("unionId", res.data.unionId);
              that.sessionkey = res.data.session_key;
              let sendData = {
                openId: uni.getStorageSync("openId"),
                unionId: uni.getStorageSync("unionId"),
                userName: "游客",
                avatar: "",
                sex: "1", //性别
                inviterCode: that.$queue.getData("inviterCode"), //别人登录进来携带你的邀请码
              };
              that.sendDataList = sendData;
              that.flag = res.data.flag;
              // 第一次登录获取手机号
              // console.log(that.phoneNum,'**********************1')
              // console.log(that.flag,'**********************2')
              if (that.flag == "2" && that.phoneNum) {
                that.weixinPhone = true;
              } else {
                that.getWeixinInfo(sendData);
              }
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg,
                duration: 2000,
              });
              console.log(res, "失败");
            }
          });
        },
      });
    },
    //小程序微信登录后获取手机号
    getPhoneNumber: function (e) {
      if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
        console.log("用户拒绝提供手机号");
      } else {
        console.log("用户同意提供手机号");
        console.log(e);
        this.setPhoneByInsert(e.detail.encryptedData, e.detail.iv);
      }
    },
    //小程序微信登录后获取手机号
    setPhoneByInsert(decryptData, iv) {
      let data = {
        decryptData: decryptData,
        key: this.sessionkey,
        iv: iv,
      };

      this.$Request.postJson("/app/Login/selectPhone", data).then((res) => {
        if (res.code == 0) {
          this.phone = res.data.phoneNumber;
          this.getWeixinInfo(this.sendDataList);
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    //获取个人信息
    getWeixinInfo(sendData) {
      let that = this;
      uni.showLoading({
        title: "登录中...",
      });
      let postData = {
        openId: sendData.openId, //小程序openId
        unionId: sendData.unionId, //unionId
        userName: sendData.userName, //微信名称
        avatar: sendData.avatar, //头像
        sex: sendData.sex, //性别
        phone: that.phone,
        inviterCode: sendData.inviterCode,
      };
      that.$Request.postJson("/app/Login/insertWxUser", postData).then((res) => {
        uni.hideLoading();
        if (res.code == 0) {
          uni.setStorageSync("token", res.token);
          uni.setStorageSync("userName", res.user.userName);
          uni.setStorageSync("avatar", res.user.avatar);
          uni.setStorageSync("phone", res.user.phone);
          uni.setStorageSync("invitationCode", res.user.invitationCode);
          this.$queue.setData("inviterCode", res.user.inviterCode);
          uni.setStorageSync("sex", res.user.sex);
          uni.setStorageSync("userId", res.user.userId);
          uni.setStorageSync("openId", res.user.openId);
          uni.setStorageSync("userType", res.user.userType);
          this.$Request.get("/app/UserVip/isUserVip").then((res) => {
            if (res.code == 0 && res.data && res.data.isVip == 2) {
              uni.setStorageSync("isVIP", true);
            } else {
              uni.setStorageSync("isVIP", false);
            }
          });
          //判断是否开启身份选择 是/否
          this.$Request.get("/app/common/type/339").then((rest) => {
            if (rest.code == 0) {
              if (rest.data.value == "是") {
                uni.reLaunch({
                  url: "/pages/public/selectIdentity/selectIdentity",
                });
              } else {
                uni.navigateBack();
              }
            } else {
              uni.navigateBack();
            }
          });
        } else {
          uni.showModal({
            showCancel: false,
            title: "登录失败",
            content: res.msg,
          });
        }
      });
    },

    forget() {
      uni.navigateTo({
        url: "/pages/public/pwd",
      });
    },
    register() {
      if (!this.checked) {
        uni.showToast({
          title: "请阅读并同意《隐私协议》和《用户服务协议》",
          icon: "none",
        });
      } else {
        uni.navigateTo({
          url: "/pages/public/loginphone",
        });
      }
    },
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
    },
    navBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 0 32rpx;
  padding-bottom: 180rpx;
  box-sizing: border-box;
}
.logo-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 160rpx;
    height: 160rpx;
  }
}
page {
  height: 100%;
  background: #ffffff !important;
}

/deep/.u-checkbox__label {
  margin-right: 0rpx !important;
}

/deep/.u-checkbox {
  padding: 0 !important;
}

.footer {
  font-family: DM Sans;
  font-size: 16rpx;
  font-weight: 400;
  letter-spacing: 0%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #605d67;
  margin-top: 16rpx;
  navigator {
    color: #016bf6;
  }
  .check-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16rpx;
    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

.container {
  top: 0;
  padding: 50rpx 32rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.confirm-btn-weixin {
  width: 200px;
  height: 42px;
  line-height: 42px;
  border-radius: 30px;
  margin-top: 40upx;
  background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left right,
    color-stop(0, #f15b6c),
    color-stop(100%, #e10a07)
  );
  background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
  color: #fff;
  font-size: 32upx;

  &:after {
    border-radius: 60px;
  }
}

.confirm-btn {
  width: 200px;
  height: 42px;
  line-height: 42px;
  border-radius: 30px;
  margin-top: 300upx;
  background: -moz-linear-gradient(left, #f15b6c, #e10a07 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left right,
    color-stop(0, #f15b6c),
    color-stop(100%, #e10a07)
  );
  background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
  color: #fff;
  font-size: 32upx;

  &:after {
    border-radius: 60px;
  }
}

.headers {
  text-align: center;
}

.headers > image {
  width: 400upx;
  height: 400upx;
}

// .footer {
// 	padding-left: 100upx;
// 	margin-top: 32upx;
// 	font-size: 24upx;
// 	color: #666666;
// 	text-align: center;
// 	display: flex;
// }
.login-btn {
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 100rpx;
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 20rpx;
  }
}
.wechat {
  background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
}
.password {
  background: rgba(1, 107, 246, 1);
}
.phone {
  background: #99c4fa;
}
page {
  background: #fff;
}

.send-msg {
  border-radius: 30px;
  color: black;
  background: white;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}

.container {
  top: 0;
  padding-top: 32rpx;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  color: #fff;

  .mp_wxBox {
    .headers {
      margin: 35% auto 50rpx;
      text-align: center;
      border-radius: 60rpx;
      width: 650rpx;
      height: 300rpx;
      line-height: 450rpx;

      image {
        width: 300rpx;
        height: 300rpx;
      }
    }

    .content {
      text-align: center;
    }

    text {
      display: block;
      color: #9d9d9d;
      margin-top: 40rpx;
    }

    .bottom {
      line-height: 80upx;
      border-radius: 80upx;
      margin: 70rpx 50rpx;
      height: 80upx;
      font-size: 35rpx;
    }
  }
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #fff;
  padding-bottom: 20px;
}

.input-content {
  padding: 0 20px;
}

.confirm-btn {
  width: 300px;
  height: 42px;
  line-height: 42px;
  border-radius: 30px;
  margin-top: 40px;
  background: #016bf6;
  color: #fff;
  // font-size: $font-lg;

  &:after {
    border-radius: 60px;
  }
}
</style>