program/src/components/index/login.vue

<template>
  <div
    id="index_login_container"
    class="animation-slide-right"
  >
    <view class=" text-xl padding text-center">
      <text class=" text-bold title_color">欢迎来到水母星球！</text>
    </view>
    <view class="text-df text-center slogen">在此将会体验到操控专注力的神奇感觉</view>
    <div class="sub_slogen text-center">
      现在，开始您的专注力旅程吧!
    </div>

    <div class="text-center padding-lr padding-top">
      <button
        class="cu-btn lg cu-btn-primary text-white text-center"
        @click="to_regist(0)"
        v-if="is_scan"
      >注册</button>
      <button
        class="cu-btn lg cu-btn-primary text-white text-center"
        @click="to_scan"
        v-else
      >扫码注册</button>
    </div>
    <view class="text-center slogen_title">
      <text class="text-gray">如果您在我们实体店，请在店员的指导下连接水母智脑环</text>
    </view>
    <view
      class="text-center text-lg padding-lr"
      @click="to_regist(1)"
    >
      <text class="text-gray under_line">账号登录</text>
    </view>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />

  </div>
</template>
<script>
import Toast from "../../../static/vant/toast/toast";
import Dialog from "../../../static/vant/dialog/dialog";
import user_store from "@/store/index";
import { userCheckInvite, userCheckUnionid } from "../../requests/user";

var $this;
export default {
  name: "login_container",
  data() {
    return {
      is_scan: false,
      official_show: false,
    };
  },
  methods: {
    to_regist($status) {
      this.$emit("changeStatus", "regist");
      this.$emit("changeTitle", $status);
    },
    to_scan() {
      wx.scanCode({
        onlyFromCamera: true,
        success(res) {
          let $data = res;
          if ($data.result) {
            let url = decodeURIComponent($data.result);
            let $code = url.match(/\?code=(.*)/);
            // 邀请码
            if (url.indexOf("jellyfish") != -1) {
              Toast.fail("请先登录");
              return false;
            } else {
              // 邀请码
              let $invite_code = $code[1];
              $this.do_invite_code($invite_code);
            }
          }
        },
      });
    },
    //统一处理邀请码的方法
    do_invite_code($code) {
      $this.is_scan = true;
      wx.login({
        success(res1) {
          let $js_code = res1.code;
          console.log($js_code);
          userCheckInvite($code, $js_code).then((res) => {
            let $res = res.data;
            if ($res.code != 0) {
              Toast.fail($res.errmsg);
            }
          });
        },
      });
      user_store.setters.set_invite_code($code);
    },
    official_success($e) {
      console.log("关注组件加载成功", $e);
    },
    onClickHide() {
      $this.official_show = false;
    },
  },
  mounted() {
    mpvue.login({
      success($res) {
        let $js_code = $res.code;
        user_store.setters.setJsCode($js_code);
        //检验js_code
        userCheckUnionid($js_code).then((res) => {
          let $res = res.data;
          let $data = $res.data;
          $this.official_show = $data["have_unionid"] == 2;
        });
      },
    });
  },
  onLoad(options) {
    let $this = this;
    // 原有的code
    let $_code = wx.getStorageSync("code");

    if (options.q) {
      let url = decodeURIComponent(options.q);
      let $code = url.match(/\?code=(.*)/)[1];
      $this.do_invite_code($code);
      console.log("1---" + $_code, "2---" + $code);
      //判断新的code 和 旧的code 是否一致 不一致则重新登录
      if ($_code && $_code != $code) {
        Toast.fail("该用户已绑定邀请码");
      }
    }
    // 测试注释
    else {
      // 跳转到关于水母页面
      //设置是否扫码
      $this.is_scan = false;
      Dialog.alert({
        transition: "fade",
        message:
          "如需体验水母星球产品，请使用微信扫一扫水母星球邀请卡，注册水母星球会员",
        theme: "round-button",
      });
    }
  },
  created() {
    $this = this;
  },
};
</script>
<style>
.sub_slogen {
  font-size: 22px;
  margin-top: 110px;
  color: #4c4c4c;
}

/*扫码页*/
.sub_slogen_sm {
  font-size: 15px;
  margin: 120px auto 0px;
  color: #4c4c4c;
}

.slogen_title {
  font-size: 11px;
  padding: 8px 0px;
}

.official_container {
  width: 300px;
  margin: auto;
  margin-top: 300px;
}
</style>