<template>
  <div class="guide-form-wrap">
    <nav-bar title="Hooli订单支付"/>
    <div class="wrap pr">
      <div class="step">
        <i class="icon icon-Hdenglutishi"></i>
        <p>注册/登录 账号</p>
      </div>
      <div class="line"></div>
      <div class="step">
        <i class="icon icon-Hxinxitishi"></i>
        <p>补充基本信息</p>
      </div>
      <div class="line"></div>
      <div class="step">
        <i class="icon icon-Hfukuantishi"></i>
        <p>绑定成功后查看订单并支付</p>
      </div>
      <van-button type="default" @click="login" v-if="bind">前往绑定</van-button>
      <p class="tips">支持多端口信息同步，您也可以前往App和网页同步查看并支付</p>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "GuideForm",
  components: {
    NavBar
  },
  data() {
    return {
      bind: false
    };
  },
  beforeCreate() {
    const lang = this.$store.state.langStr;
    const { query } = this.$route;
    window.location.replace(`/${lang}/guide-form?orderId=${query.orderId}`);
  },
  created() {
    this.checkOrder();
  },
  methods: {
    // 检查订单是否被绑定
    checkOrder() {
      let params = {};
      params.url = this.$apis.api_check_order;
      params.data = {
        orderId: this.$route.query.orderId
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.data.isBind) === 1) {
            this.$router.push({
              path: `/`
            });
          } else {
            this.bind = true;
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 跳转登录
    login() {
      let lang = this.$store.state.langStr;
      this.$util.sessionStorage.save("guide", true);
      this.$util.sessionStorage.save("orderId", this.$route.query.orderId);
      this.$router.push({
        path: "/" + lang + "/login"
      });
    }
  }
};
</script>

<style scoped lang='less'>
.guide-form-wrap {
  background: #fff;
  height: 100vh;
  .wrap {
    margin: 70px 20px 0;
    display: flex;
    flex-direction: column;
    .step {
      display: flex;
      align-items: center;
      margin-left: 18px;
      i {
        width: 36px;
        height: 36px;
        border: 1px solid #000;
        border-radius: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        font-size: 16px;
        margin-right: 16px;
      }
      p {
        font-size: 18px;
        color: #222;
      }
    }
    .line {
      height: 60px;
      width: 0;
      border-left: 1px dashed #999;
      margin: 10px 36px;
    }
    .tips {
      font-size: 13px;
      color: #ccc;
      margin: 10px 0;
    }
    button {
      margin-top: 20px;
      width: 100%;
      font-size: 18px;
      font-weight: 500;
      height: 45px;
      background: #ff523d;
      border-radius: 25px;
      color: #fff;
    }
  }
}
</style>
