zc_saas_h5/pages4/login/pcLogin.vue

<template>
  <view class="pcLogins">
    <u-navbar
      :is-back="false"
      title="登录"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
    </u-navbar>
    <u-line color="#D6D6DB" />
    <view class="contents">
      <!-- 正文内容 -->
      <image
        class="logo"
        :src="SCAN_LOGO"
        style="width: 360rpx; height: 72rpx"
      ></image>
      <text>登录后您可在网页端继续浏览课程</text>
      <!-- <view class="login_bt" @click="pcLogin()">微信登录</view> -->
      <button
        type="default"
        open-type="getPhoneNumber"
        @getphonenumber="wxLogin"
        class="login_bt"
      >
        微信登录
      </button>
    </view>
  </view>
</template>

<script>
import config from "@/common/config";
export default {
  data() {
    return {
      SCAN_LOGO: config.SCAN_LOGO,
      scanCode: "", // 获取扫码的路径最后面的6位标识码
      code: "",
    };
  },
  onLoad(query) {
    const q = decodeURIComponent(query.q);
    this.scanCode = q.substring(q.length - 6);
    console.log("扫描后得：", q, this.scanCode);
    // 扫描二维码后调用，小程序已扫码
    if (this.scanCode) {
      this.$api.scanhasCode({ scanCode: this.scanCode }).then((res) => {
        console.log("调用扫码接口返回的:", res);
        if (res.data.code == 200) {
          console.log();
        }
      });
    }
  },
  onShow() {
    // 获取code
    this.getwxCode();
  },
  methods: {
    getwxCode() {
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          this.code = loginRes.code;
          console.log("获取的code:", this.code);
        },
      });
    },
    wxLogin(e) {
      this.$api
        .wxLogin({
          code: this.code,
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.loginCallback(res);
          } else {
            if (res.data.code == 666) {
              this.$u.toast(res.data.msg); 
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages2/register/register" ,
                });
              }, 500);
              return;
            }
            this.getwxCode(); // code用完一次就会过期，防止用户点击取消后再点微信登录后code过期
          }
        });
    },
    // 微信登录成功的回调
    loginCallback(res) {
      // console.log('登录后的回调',res)
      // if(res.data.data && res.data.data.full_info){
      //信息完善，直接进入页面
      uni.setStorageSync("user_account", res.data.data.user_account);
      uni.setStorageSync("token", res.data.data.token);
      // /app/user/getInfo 登录用户信息// fromPlat来源平台 1小程序 2PC网站
      this.$api.getInfo({ fromPlat: 1 }).then((resdata) => {
        if (resdata.data.code == 200) {
          this.$store.state.userInfo = resdata.data.data;

          this.submitCode();
        }
      });
      // } else {
      // 	//未完善信息,存为临时信息
      // 	uni.setStorageSync('user_account_temp', res.data.data.user_account);
      // 	uni.setStorageSync('token_temp', res.data.data.token);
      //     this.$navTo.togo('/pages2/register/bind', {scanCode: this.scanCode})
      // }
    },
    // scanLoginCheck小程序校验PC登录二维码,执行登录获取到令牌，然后把扫码的路径最后面的6位标识码提交给后台就行
    submitCode() {
      this.$api
        .scanLoginCheck({
          scanCode: this.scanCode,
        })
        .then((res) => {
          if (res.data.code == 200) {
            uni.navigateTo({
              url: "/pages4/login/pcLoginSuccess",
            });
          } else {
            this.$u.toast(res.data.msg);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.contents {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo {
    margin: 90rpx 0rpx 250rpx;
  }
  > text {
    font-size: 22rpx;
    color: #666;
  }
  .login_bt {
    width: 400rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background: #09ba08;
    color: #fff;
    font-size: 28rpx;
    border-radius: 35rpx;
    margin-top: 20rpx;
  }
}
</style>