zc_saas_pc/src/pages/payment-success/index.vue

<template>
  <div class="payment">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <div class="icon">✔</div>
          <div class="title">购买成功</div>
        </div>
        <div class="section__body">
          <div class="order-msg">
            <div class="order-msg__body">
              <div class="goods_item">订单编号：{{ orderSn }}</div>
              <div class="goods_item">
                订单金额：
                <span>{{ total | toFixed }} 元</span>
              </div>

              <div class="links" v-if="isBK">
                <a @click="go('/person-center/my-course')">返回我的网课</a>
                <el-button
                  type="primary"
                  size="small"
                  round
                  @click="
                    go('/person-center/my-classhour/appointment', {
                      goodsId: goodsId,
                      gradeId: gradeId,
                      orderGoodsId: orderGoodsId,
                    })
                  "
                  >继续本次考试预约</el-button
                >
              </div>
              <div class="links" v-else>
                <a @click="go('/person-center/my-order', { state: '2' })"
                  >查看订单详情</a
                >
                <el-button type="primary" size="small" round @click="go('/')"
                  >继续逛逛</el-button
                >
              </div>
            </div>
          </div>
        </div>

        <div
          class="section__footer"
          v-if="recommendList.goodsList && recommendList.goodsList.length"
        >
          <div class="recommend">
            <div class="recommend__header">
              <div class="title">相关推荐</div>
            </div>
            <div class="recommend__body">
              <ul class="list clearfix">
                <li
                  class="recommend-item"
                  v-for="(itemy, index) in compyRecommend(
                    recommendList.goodsList
                  )"
                  :key="index"
                >
                  <GoodsItem :item="itemy"></GoodsItem>
                </li>
              </ul>
            </div>

            <div class="recommend__footer">
              <div class="btn" @click="comeMoreList">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import GoodsItem from "@/components/goodsItem/index";
export default {
  name: "PaymentSuccess",
  components: {
    Footer,
    Header,
    ToolBar,
    GoodsItem,
  },
  data() {
    return {
      isBK: "",
      orderSn: "",
      total: 0,
      goodsId: 0,
      gradeId: 0,
      orderGoodsId: 0,
      recommendList: [],
      goodsDetail: {},
    };
  },
  computed: {
    compyRecommend: function () {
      return function (array) {
        let ary = [];
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (i >= 5) {
              break;
            } else {
              ary.push(array[i]);
            }
          }
        }
        return ary;
      };
    },
  },
  mounted() {
    this.orderSn = this.$route.query.orderSn;
    // this.total = this.$route.params.total;
    this.isBK = this.$route.query.isBK;
    this.goodsId = this.$route.query.goodsId;
    this.gradeId = this.$route.query.gradeId;
    this.orderGoodsId = this.$route.query.orderGoodsId;
    if (this.goodsId) {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        this.goodsDetail = res.data;
        this.getRecommend();
      });
    }

    this.orderDetail();
  },
  methods: {
    orderDetail() {
      this.$request.orderDetail(this.orderSn).then((res) => {
        this.total = res.data.orderPrice;
      });
    },
    addCart(status, goodsId) {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
      this.$request
        .addCart({ goodsId: status ? goodsId : this.goodsId })
        .then((res) => {
          this.getCartCount();
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },
    toGoodsDetail(item) {
      this.$router.push({
        path: "/course-detail/" + item.goodsId,
      });
    },
    /**
     * 查看更多
     */
    comeMoreList() {
      this.$router.push({
        path: "/course-list",
        query: {
          educationId: this.goodsDetail.educationTypeId,
          projectId: this.goodsDetail.projectId,
          businessId: this.goodsDetail.businessId,
        },
      });
    },
    /**
     * 
     获取推荐列表
     */
    getRecommend() {
      this.$request
        .appCommonActivityRecommendList({
          businessId: this.goodsDetail.businessId,
          type: this.goodsDetail.goodsType,
        })
        .then((res) => {
          if (res.rows.length) {
            this.recommendList = res.rows[0];
          }
        });
    },
    go(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.payment {
  .section {
    &__header {
      height: 80px;
      background: #ebf3ff;
      display: flex;
      align-items: center;
      padding: 0 20px;

      .icon {
        width: 40px;
        height: 40px;
        background: rgba(52, 199, 89, 1);
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        text-align: center;
        box-shadow: 0px 0px 9px 1px rgba(63, 141, 253, 0.3);
        border-radius: 50%;
      }

      .title {
        margin-left: 20px;
        flex: 1;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
    }

    &__body {
      .order-msg {
        border-bottom: 2px solid #eee;

        &__body {
          padding-left: 80px;
          .goods_item {
            margin: 16px 0;
          }

          .links {
            padding-top: 8px;
            padding-bottom: 10px;
            a {
              margin-right: 40px;
              color: #3f8dfd;
            }
          }
        }
      }
    }

    &__footer {
      .recommend {
        padding-top: 40px;

        &__header {
          display: flex;
          align-items: center;

          .title {
            font-size: 24px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
          }
        }

        &__body {
          .list {
            width: 100%;

            .recommend-item {
              float: left;
            }
          }
        }

        &__footer {
          overflow: hidden;
          .btn {
            cursor: pointer;
            width: 146px;
            height: 40px;
            background: #e3eaf7;
            border-radius: 8px;
            margin: 20px auto 40px;
            color: #3f8dfd;
            text-align: center;
            line-height: 40px;

            &:hover {
              color: #fff;
              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
              background: #3f8dfd;
            }
          }
        }
      }
    }
  }
}
</style>