guide.vue

<template>
  <div class="ybPaySuccess">
    <div class="h2">
      <img :src="icon_yes" alt /> 恭喜您，成功抢购课程!
    </div>
    <div class="top">
      <img class="qr" :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 logo from "../../assets/yb/logo@2x.png";
import {
  getCourseInfoApi,
  getwechatParam,
  getUserDetailApi,
  getGoodsDetailApi
} from "../../service/api";
export default {
  name: "guide",
  components: {},
  data() {
    return {
      icon_yes: icon_yes,
      logo: logo,
      groupDetail: {},
      userCourse: {},
      imgguide: imgguide
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      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;
      this.shopId = this.$route.query.shopId;
      getGoodsDetailApi(this.shopId).then(data=>{
          // debugger
          data.desc = JSON.parse(data.desc);
          data.goods_desc = JSON.parse(data.goods_desc);
          data.share_desc = JSON.parse(data.share_desc);
          this.groupDetail = data;
          this.invite_code = this.$route.query.invite_code;
          if(this.type && this.type === 0){
            this.price=data.single_price/100
          }else{
            this.price = data.group_price/100
          }
          this.$nextTick(()=>{
            this.orderFlag = true
          })
          this.onShare();
        });

      let invite = this.invite_code;
      getUserDetailApi().then(res => {
          this.userDesc = Object.assign({}, res);
          // console.log(this.userDesc)
          this.subscribe = this.userDesc.open_info.is_subscribe;
          localStorage.setItem("userDesc", JSON.stringify(res));
        }).catch(res => {
          if (localStorage.getItem("userDesc")) {
          }
        });
    },
    handleInviteCode() {
      if (!this.invite_code) {
        this.this_code = "CC-USER-" + this.user_id;
      } else {
        let invite_code = this.invite_code.split("-");
        if (
          invite_code.length > 2 &&
          (invite_code[1] === "TEACHER" || invite_code[1] === "XXMM")
        ) {
          invite_code[1] = "USER";
        }
        let code = `${invite_code[0]}-${invite_code[1]}`;
        this.this_code = `${code}-${this.user_id}`;
      }
    },
    onShare: function(type) {
      this.handleInviteCode();
      let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${this.this_code}`;
      console.log(this.groupDetail.share_desc)
      this.enableShare({
        product_title: this.groupDetail.share_desc.title,
        desc: this.groupDetail.share_desc.content,
        shareIcon: this.groupDetail.share_desc.img.length !== 0 ? this.groupDetail.share_desc.img[0].url : '',
        shareUrl: URL
      });
    },
    enableShare: function(option) {
      let that = this;
      getwechatParam({
        api_list: "onMenuShareAppMessage,onMenuShareTimeline",
        url: window.location.href.split("#")[0]
      }).then(wechatRes => {
        wx.config({
          debug: false,
          appId: wechatRes.appId,
          timestamp: parseInt(wechatRes.timestamp),
          nonceStr: wechatRes.nonceStr,
          signature: wechatRes.signature,
          jsApiList: wechatRes.jsApiList
        });
        wx.ready(function() {
          wx.onMenuShareTimeline({
            title: option.product_title, // 分享标题
            desc: option.desc, // 分享描述
            link: option.shareUrl, // 分享链接
            imgUrl:
              option.shareIcon ||
              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
            success: function() {
              console.log("分享成功");
            },
            cancel: function() {
              // alert("失败")
              console.log("分享失败");
            }
          });
          wx.onMenuShareAppMessage({
            title: option.product_title, // 分享标题
            desc: option.desc, // 分享描述
            link: option.shareUrl, // 分享链接
            imgUrl:
              option.shareIcon ||
              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
            success: function() {},
            cancel: function() {}
          });
        });
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.ybPaySuccess {
  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>