tuition/pages/order/order.vue

<template>
  <view class="container">
    <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
                  ><button
                    @click="putMess(item.orderNo)"
                    v-if="item.status == 1"
                  >
                    订单反馈
                  </button>
                </view>
                <view
                  ><button @click="toPay()" v-if="item.status == 1">
                    继续支付
                  </button></view
                >
                <view><button @click="searchDetail()">查看详情</button></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>{{ payForIdentify }}</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 {
      showDetail: false, //订单详情弹窗
      paySuccess: true, //缴费成功隐藏按钮
      orderList: [],
      studentName: "",
      payForIdentify: "",
      majorName: "",
      className: "",
      years: "",
      Arr: [],
      orderAmount: "",
      status: "",
      homeUrl: "https://jtishfw.ncjti.edu.cn/jiaofei/backendApi",
    };
  },

  created() {
    this.getOrderList();
  },
  methods: {
    toShowDetail() {
      this.showDetail = !this.showDetail;
    },
    searchDetail() {
      this.detailMess();
      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;
          let res = data.data.list[0];
          this.studentName = res.studentName;
          this.payForIdentify = res.payForIdentify;
        },
        fail: (error) => {},
      });
    },

    //查看详情
    detailMess() {
      let cardNumber = sessionStorage.getItem("cardNumber");

      let url =
        this.homeUrl +
        `/tuitionpayment/payableinfo/payableInfo/${this.payForIdentify}/${this.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.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/Pay/pay" });
    },

    //获取学费明细
    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;
    },
  },
};
</script>

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