tuition/pages/order/order.vue

<template>
  <view class="container">
    <view class="hint" v-if="showHint">暂无订单记录</view>
    <view class="mark" v-show="showDetail" @click="toShowDetail()"></view>
    <view class="list">
      <template v-if="orderList.length !== 0">
        <view class="messCard" v-for="item in orderList">
          <view class="field">
            <view class="header">
              <text>订单号：{{ item.orderNo }}</text>
              <text v-if="item.status == 2">缴费成功</text>
              <text v-if="item.status == 1" style="color: #ff8b02"
                >缴费失败</text
              >
            </view>
            <view class="content">
              <view class="mess-itm">
                <text>姓名：</text>
                <text>{{ item.studentName }}</text>
              </view>
              <view class="mess-itm">
                <text>学号：</text>
                <text>{{ item.payForIdentify }}</text>
              </view>
              <view class="mess-itm">
                <text>班级：</text>
                <text>{{ item.className }}</text>
              </view>
              <view class="mess-itm">
                <text class="time">{{ item.createTime }}</text>
                <text class="amount">实付款￥{{ item.orderAmount }}</text>
              </view>
            </view>
            <view class="footer">
              <view class="bt-item">
                <view
                  class="button"
                  @click="putMess(item.orderNo)"
                  v-if="item.status == 1"
                >
                  订单反馈
                </view>

                <view class="button" @click="toPay()" v-if="item.status == 1">
                  继续支付
                </view>
                <view
                  class="button"
                  @click="detailMess(item.payForIdentify, item.studentName)"
                  >查看详情</view
                >
              </view>
            </view>
          </view>
          <view class="fieldBg"></view>
        </view>
      </template>
    </view>
    <view class="detail" v-show="showDetail">
      <view class="top">
        <text>订单详情</text>
        <view class="close" @click="toShowDetail()">
          <view class="image"></view>
        </view>
      </view>
      <view class="content">
        <view class="mess-itm">
          <text>收费单位：</text>
          <text>南昌交通学院</text>
        </view>
        <view class="mess-itm">
          <text>姓名：</text>
          <text>{{ studentName }}</text>
        </view>
        <view class="mess-itm">
          <text>学号：</text>
          <text>{{ studentNo }}</text>
        </view>
        <view class="mess-itm">
          <text>专业：</text>
          <text>{{ majorName }}</text>
        </view>
        <view class="mess-itm">
          <text>班级：</text>
          <text>{{ className }}</text>
        </view>
        <view class="mess-itm">
          <text>缴费学年：</text>
          <text>{{ years }}</text>
        </view>
        <view class="mess-itm-pay" v-for="item in Arr">
          <text>{{ item.id }}：</text>
          <text>￥{{ item.money }}</text>
        </view>
        <view class="mess-itm">
          <text>总金额：</text>
          <text>￥{{ orderAmount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showHint: true,
      showDetail: false, //订单详情弹窗
      paySuccess: true, //缴费成功隐藏按钮
      orderList: [],
      studentName: "",
      studentNo: "",
      majorName: "",
      className: "",
      years: "",
      Arr: [],
      orderAmount: "",
      status: "",
      // homeUrl: "http://3mb8i8.natappfree.cc ",
      homeUrl: "https://jtishfw.ncjti.edu.cn/jiaofei/backendApi",
    };
  },
  onLoad(options) {
    this.getOrderList();
  },
  created() {},
  methods: {
    toShowDetail() {
      this.showDetail = !this.showDetail;
    },
    //获取订单列表
    getOrderList() {
      let cardNumber = sessionStorage.getItem("cardNumber");

      let url = this.homeUrl + "/tuitionpayment/payorder/currentUserList";

      uni.request({
        url: url,
        data: {},
        header: {
          card_number: cardNumber,
          Accept: "application/json",
          "Content-Type": " application/x-www-form-urlencoded;charset=utf-8",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "GET",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          // console.log(data.data.list);
          this.orderList = data.data.list;
          if (data.data.list.length !== 0) {
            this.showHint = false;
          }
        },
        fail: (error) => {},
      });
    },

    //查看详情
    detailMess(payForIdentify, studentName) {
      this.showDetail = !this.showDetail;

      let cardNumber = sessionStorage.getItem("cardNumber");

      let url =
        this.homeUrl +
        `/tuitionpayment/payableinfo/payableInfo/${payForIdentify}/${studentName}`;

      uni.request({
        url: url,
        header: {
          card_number: cardNumber,
          Accept: "application/json",
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "GET",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          let res = data.data;
          this.studentName = res.studentName;
          this.studentNo = res.studentNo;
          this.years = res.years;
          this.majorName = res.majorName;
          this.className = res.className;
          this.orderAmount = res.realPayAmount;
          this.getPayDetail(res.payItemDetail);
        },
        fail: (error) => {},
      });
    },

    //跳转支付页面
    toPay() {
      uni.navigateTo({ url: "/pages/blankIndex/blankIndex" });
    },

    //获取学费明细
    getPayDetail(len) {
      //获取明细款项名称数组
      var arr = len.match(/[^\\u4e00-\\u9fa5]+/g);
      //过滤
      var itemIdArr = arr.filter(function (value) {
        return value !== ".";
      });
      //获取明细金额数组
      var itemMoneyArr = len.match(/([0-9]+\.[0-9]+)+/g);
      //拼接成对象数组
      var item = [];
      for (var i in (itemIdArr, itemMoneyArr)) {
        var c = {
          id: itemIdArr[i],
          money: itemMoneyArr[i],
        };
        item.push(c);
      }
      this.Arr = item;
    },

    //订单反馈
    putMess(orderNo) {
      let cardNumber = sessionStorage.getItem("cardNumber");

      let url = this.homeUrl + `/tuitionpayment/payorder/${orderNo}/orderStatu`;

      uni.request({
        url: url,
        data: {},
        header: {
          card_number: cardNumber,
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "GET",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          if (data.data.status == 1) {
            uni.showToast({
              title: "支付失败",
              icon: "error",
              mask: true,
            });
          }
        },
        fail: (error) => {},
      });
    },
  },
};
</script>

<style lang="less">
@import url("./css/order.min.css");
</style>