mteacher/src/views/app/PaymentResult.vue

<template>
  <div class="paymentresult">
    <m-header :isBack="false" />
    <div class="payon" v-if="pageStatus == 'on'">
      <img src="@/assets/images/pay_success.png" alt />
      <p>支付成功</p>
      <van-button type="info" @click="onAppBack" round>返回</van-button>
    </div>

    <div class="payerror" v-if="pageStatus == 'error'">
      <img src="@/assets/images/pay_error.png" alt />
      <p>支付失败</p>
      <van-button type="info" @click="onAppBack" round>返回</van-button>
    </div>

    <div class="paying" v-if="pageStatus == 'paying'">
      <img src="@/assets/images/pay_ing.png" alt />
      <p>订单处理中</p>
      <van-button type="info" @click="onAppBack" round>返回</van-button>
      <p class="countdown">到计时{{ smsText }}秒刷新</p>
    </div>

    <div class="paysuccess" v-if="pageStatus == 'success'">
      <div class="status">
        <img src="@/assets/images/pay_success.png" alt />
        <p>支付成功</p>
        <p class="money">￥{{ orderInfo.price | moneyFormat }}</p>
      </div>
      <div class="orderinfo">
        <p>
          <span>购买时间：</span>
          {{ orderInfo.createTime }}
        </p>
        <p>
          <span>订单号：</span>
          {{ orderInfo.orderNo }}
        </p>
        <div v-if="goodsInfo.length > 0">
          <span>购买详情：</span>
          <p v-for="(item, index) in goodsInfo" :key="index">{{ item }}</p>
        </div>
        <img class="icon_img" v-if="financeChops" :src="financeChops" />
      </div>
      <van-button type="info" @click="onAppBack" round>返回</van-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import MHeader from "@/components/header";
import { browser, validStudentUrl } from "@/common/common";
import { queryByOrderNoAuth, queryOrderInfo } from "@/api/app";

export default {
  name: "paymentresult",
  components: { MHeader },
  data() {
    let that = this;
    const query = this.$route.query;
    return {
      headerStatus: false,
      isBack: query.isBack == "off" ? false : true, // 是否显示返回按钮
      pageStatus: null,
      orderInfo: {}, // 订单基本信息
      smsText: 60,
      groupType: null, //订单类型
      timer: null,
      financeChops: null,
      goodsInfo: [],
    };
  },
  mounted() {
    this.__init();
    // this.pushHistory();
    window.addEventListener(
      "popstate",
      function (e) {
        if (browser().android) {
          DAYA.postMessage(JSON.stringify({ api: "back" }));
        } else if (browser().iPhone) {
          window.webkit.messageHandlers.DAYA.postMessage(
            JSON.stringify({ api: "back" })
          );
        } else {
          window.location.replace(validStudentUrl() + "/#/teacherDownload");
        }
      },
      false
    );
  },
  methods: {
    pushHistory() {
      var state = {
        title: "title",
        url: "#",
      };
      window.history.pushState(state, "title", "#");
    },
    __init() {
      let params = this.$route.query;
      // 支付成功
      if (params.orderNo) {
        // 是否有订单号
        queryOrderInfo({ orderNo: params.orderNo }).then((res) => {
          let result = res.data;
          if (result.code == 200) {
            let tempResult = result.data ? result.data : {};
            // 判断是否有值
            this.orderInfo = tempResult;
            this.groupType = tempResult.type;
            console.log(tempResult);
            this.financeChops = tempResult.financeChops || null;
            this.showStatus(tempResult.status);
            if (tempResult.type == "GOODS_SELL") {
              // 商品销售
              this.getGoodsInfo(tempResult.detail);
            } else if (tempResult.type == "MALL_BUY") {
              // 订单购买
            }
          } else {
            // 订单处理中
            this.pageStatus = "paying";
            this.CountDown();
          }
        });
      } else {
        if (params.type) {
          this.pageStatus = params.type;
        } else {
          this.pageStatus = "paying";
          this.CountDown();
        }
      }
    },
    getGoodsInfo(item) {
      let goodsJson = item.goodsJson ? JSON.parse(item.goodsJson) : [];
      this.goodsInfo = [];
      goodsJson.forEach((goods) => {
        this.goodsInfo.push(goods.goodsName + " ×" + goods.goodsNum);
      });
    },
    showStatus(status, type) {
      if (status == "ING") {
        this.pageStatus = "paying";
        this.CountDown();
      } else if (status == "SUCCESS") {
        this.pageStatus = "success";
      } else if (status == "FAILED") {
        this.pageStatus = "error";
      }
    },
    onAppBack() {
      // app回调页面
      let courseApply = window.localStorage.getItem("courseApply");
      clearInterval(this.timer);
      let historyLength = window.history.length;
      if (browser().android || browser().iPhone) {
        if (courseApply) {
          window.history.go(-(historyLength - 1));
        } else {
          window.history.go(-(historyLength - 2));
        }
      } else {
        window.location.replace(validStudentUrl() + "/#/teacherDownload");
      }

      // if (browser().android) {
      //     DAYA.postMessage(JSON.stringify({ api: "back" }));
      // } else if (browser().iPhone) {
      //     window.webkit.messageHandlers.DAYA.postMessage(
      //       JSON.stringify({ api: "back" })
      //     );
      // }
    },
    CountDown() {
      let s = 60;
      this.smsText = s;
      this.timer = setInterval(() => {
        if (s <= 0) {
          window.location.reload();
          clearInterval(this.timer);
        } else {
          s--;
          this.smsText = s;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.paymentresult {
  min-height: 100vh;
}
.payerror,
.payon,
.paying {
  padding-top: 1rem;
  img {
    display: block;
    margin: 0 auto;
    width: 1.03rem;
    height: 1.37rem;
  }
  p {
    padding-top: 0.12rem;
    font-size: 0.18rem;
    color: #444444;
    text-align: center;
    margin-bottom: 1.5rem;
    &.countdown {
      font-size: 0.14rem;
    }
  }
}
.van-button {
  width: 90%;
  margin: 0 5% 0;
  line-height: 0.48rem;
  height: 0.5rem;
  font-size: 0.18rem;
}
.paysuccess {
  .status {
    background-color: #fff;
    text-align: center;
    font-size: 0.16rem;
    color: #444;
    padding-bottom: 0.1rem;
    margin-bottom: 0.1rem;
    img {
      margin-top: 0.1rem;
      width: 0.58rem;
      height: 0.71rem;
    }
    .money {
      font-size: 0.14rem;
      color: #f97215;
    }
  }
  .classdetail {
    background: #fff;
    margin-bottom: 0.25rem;
    font-size: 0.14rem;
    color: #444;
    padding: 0.15rem;
    h3 {
      font-size: 0.14rem;
      color: #444444;
    }
    .detailList {
      display: flex;
      flex-wrap: wrap;
      p {
        width: 40%;
      }
      span {
        padding-right: 0.08rem;
      }
    }
  }
  .orderinfo {
    position: relative;
    // margin-bottom: 0.25rem;
    margin-bottom: 0.1rem;
    padding: 0.15rem 0.15rem 0.48rem;
    background-color: #fff;
    font-size: 0.14rem;
    color: #777777;
    span {
      color: #444444;
    }
    .icon_img {
      width: 1.2rem;
      // height: 1.1rem;
      position: absolute;
      bottom: 0.3rem;
      right: 0.2rem;
    }
  }
}
</style>