buySuccess.vue

<template>
  <div class="buy-success">
    <div v-if="subscribe==0">
      <div class="topTop">
        <div>
          step1. {{money/100}}元解锁课程
          <img :src="img.gou" />
        </div>
        <div>
          <img :src="img.jiantou" />
        </div>
      </div>
      <div class="step2Box">
        <div class="text">
          <p class="p1">step2. 扫码进入公众号，查看课程</p>
          <p class="p2">（请务必扫码关注，否则无法上课）</p>
        </div>
        <div>
          <img :src="img.qr4" alt />
        </div>
      </div>
      <div class="topTop">
        <div>
          <img :src="img.jiantou" />
        </div>
        <div>step3. 进入系统等待课程开始</div>
      </div>
    </div>
    <!-- <div class="banner">
      <img :src="img.weChat">
    </div>-->
    <div v-if="subscribe==1">
      <div>
        <div class="shop-block" v-if="goodsDetail">
          <div class="shop">
            <div class="img-block">
              <img :src="goodsDetail.goods_desc.img[0].url" />
            </div>
            <div>
              <div class="title">{{goodsDetail.name}}</div>
              <div class="content">{{goodsDetail.goods_desc.desc}}</div>
              <div class="price">价格 ￥{{money/100}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="button-block" v-if="goodsDetail && goodsDetail.goods_type !== 5">
        <mt-button type="danger" size="large" @click="goIndex();buttonClick('进入课程')">进入课程</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import { shopSuccess } from "../../util/imgUrl";
import {
  getOrderDetailApi,
  getGoodsDetailApi,
  getUserDetailApi
} from "../../service/api";
import { Toast } from "vant";
import { Button } from "mint-ui";
export default {
  name: "buySuccess",
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      img: shopSuccess,
      orderNo: this.$route.query.out_trade_no,
      goods_id: 0,
      money: 0,
      invite_code: "",
      goodsDetail: null,
      subscribe: 2
    };
  },
  mounted() {
    this.initPage();
    document.title = "购买成功！";
  },
  methods: {
    buttonClick(buttonName) {
      this.$sa.track("buttonClick", {
        tabTitle: "商品",
        moduleTitle: "购买成功页",
        buttonType: "功能",
        buttonName: buttonName
      });
    },
    initPage() {
      Toast.loading({
        mask: true,
        message: ""
      });
      if (sessionStorage.getItem("buyindex") == 1) {
        getUserDetailApi().then(res => {
          localStorage.setItem("userDesc", JSON.stringify(res));
          this.userDesc = res;
          this.subscribe = this.userDesc.open_info.is_subscribe;
          getOrderDetailApi(this.orderNo).then(res => {
            this.goods_id = res.goods_id;
            this.invite_code = `CC-${res.invite_type}-${res.invite_id}`;
            this.money = res.money;
            getGoodsDetailApi(this.goods_id).then(data => {
              Toast.clear();
              data.desc = JSON.parse(data.desc);
              data.goods_desc = JSON.parse(data.goods_desc);
              data.share_desc = JSON.parse(data.share_desc);
              this.goodsDetail = data;
            });
          });
        });
      } else {
        this.userDesc = JSON.parse(localStorage.getItem("userDesc"));
        this.subscribe = this.userDesc.open_info.is_subscribe;
        getOrderDetailApi(this.orderNo).then(res => {
          this.goods_id = res.goods_id;
          this.invite_code = `CC-${res.invite_type}-${res.invite_id}`;
          this.money = res.money;
          getGoodsDetailApi(this.goods_id).then(data => {
            Toast.clear();
            data.desc = JSON.parse(data.desc);
            data.goods_desc = JSON.parse(data.goods_desc);
            data.share_desc = JSON.parse(data.share_desc);
            this.goodsDetail = data;
          });
        });
      }
    },
    goIndex() {
      this.$router.push({ name: "index" });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.topTop {
  line-height: 17 * @toVw;
  color: #bab9b5;
  font-size: 12px;
  text-align: center;
  padding: 10px 0 8px;
  img {
    width: 12px;
    height: 12px;
  }
}
.step2Box {
  width: 343 * @toVw;
  height: 360 * @toVw;
  background: #f3e8d2;
  border: 2px dashed #d8c0a6;
  text-align: center;
  .text {
    .p1 {
      color: #cf1322;
      font-size: 16px;
      line-height: 22px;
      margin-top: 10px;
    }
    .p2 {
      color: #cf1322;
      font-size: 14px;
      line-height: 20px;
    }
  }
  img {
    width: 264 * @toVw;
    margin-top: 10 * @toVw;
  }
}
.buy-success {
  background: #fffef9;
  padding-top: 20 * @toVw;
  .banner {
    padding: 20 * @toVw;
    background: white;
    text-align: center;
    margin-bottom: 10 * @toVw;
    img {
      width: 100%;
    }
  }
  .shop-block {
    background: white;
    margin-top: 20 * @toVw;
    .shop {
      padding: 20/7.5vw;
      border-bottom: 1px solid #d8d8d8;
      position: relative;
      &:after {
        content: "";
        display: block;
        clear: both;
      }
      .img-block {
        float: left;
        margin-right: 20/7.5vw;
        img {
          width: 250/7.5vw;
        }
        min-height: 120px;
      }

      .title {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        margin-bottom: 5/7.5vw;
      }
      .content {
        font-size: 12px;
        line-height: 1.4em;
        color: #cccccc;
        height: 4.2em;
        overflow: hidden;
      }
      .price {
        font-size: 18px;
        color: #ff001f;
        position: absolute;
        right: 20/7.5vw;
        bottom: 20/7.5vw;
      }
    }
  }
  .button-block {
    margin-top: 60 * @toVw;
    width: 315 * @toVw;
    padding: 0 30 * @toVw;
    border-radius: 100px;
    overflow: hidden;
    button {
      border-radius: 1000px;
    }
  }
}
</style>