<template>
  <div class="guideActivity">
    <div class="h2">
      <img :src="icon_yes" alt /> <span v-if='!exChange'>恭喜您，成功激活课程!</span> <span v-if='exChange'>恭喜您，成功兑换课程!</span>
    </div>
    <div class="top">
      <img class="qr" v-if='!exChange' :src="imgguide2" alt />
      <img class="qr" v-if='exChange' :src="imgguide" alt />
      <img v-if="userCourse.teacher_qr" class="qrcode" :src="userCourse.teacher_qr" />
    </div>
    <!-- <img class='logo' :src="logo" alt=""> -->
  </div>
</template>

<script>
import icon_yes  from "../../assets/yb/icon_yes@2x.png";
import imgguide  from "../../assets/shop/imgguide@2x.png";
import imgguide2 from "../../assets/shop/imgguide2@2x.png";
import logo      from "../../assets/yb/logo@2x.png";
import {
  getCourseInfoApi,
  getwechatParam,
  getUserDetailApi,
  getGoodsDetailApi
} from "../../service/api";
export default {
  name: "guideActivity",
  components: {},
  data() {
    return {
      icon_yes: icon_yes,
      logo: logo,
      groupDetail: {},
      userCourse: {},
      imgguide: imgguide,
      imgguide2:imgguide2,
      exChange:null
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      if(this.$route.query.exChange){
        this.exChange = this.$route.query.exChange
      }
      if (window.location.href.indexOf("invite_code") > -1) {
        this.invite_code = this.$route.query.invite_code;
      }
      this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
      console.log(this.userCourse);
      this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.guideActivity {
  background: #ffffff;
  text-align: center;
  border-top: 1px solid transparent;
  .top {
    margin: 35 * @toVw auto;
    width: 326 * @toVw;
    // background: #FFEAAD;
    border-radius: 24 * @toVw;
    position: relative;
    img {
      max-width: 100%;
    }
    .qr {
      // position: absolute;
      // left: 25 * @toVw;
      width: 326 * @toVw;
      // top: 31*@toVw;
      border-radius: 10 * @toVw;
    }
    .qrcode {
      position: absolute;
      top: 110 * @toVw;
      left: 68 * @toVw;
      width: 189 * @toVw;
      z-index: 1;
    }
    p {
      position: absolute;
      top: 270 * @toVw;
      width: 100%;
      text-align: center;
      color: #6f5c25;
      font-weight: bold;
      font-size: 17 * @toVw;
    }
  }
  .h2 {
    font-size: 17 * @toVw;
    font-weight: bold;
    text-align: center;
    margin-top: 30 * @toVw;
    img {
      width: 24 * @toVw;
      position: relative;
      top: 2 * @toVw;
    }
  }

  .logo {
    position: fixed;
    left: 130 * @toVw;
    bottom: 20 * @toVw;
    width: 125 * @toVw;
  }
}
@media screen and (orientation: landscape) {
}
</style>
