tuition/pages/order/order.vue

<template>
  <view class="container">
    <!-- 空列表提示 -->
    <view class="hint" v-if="showHint">暂无订单记录</view>
    <!-- 遮罩层 -->
    <view
      class="mark"
      v-show="showDetail || showPay"
      @click="markClose()"
    ></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="feedBack(item.orderNo)"
                  v-if="item.status == 1"
                >
                  订单反馈
                </view>

                <view
                  class="button"
                  @click="toPay(item.payForIdentify, item.studentName)"
                  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="messageCard" v-show="showPay">
      <view class="item-form">
        <view class="item">
          <text class="ite">收费单位 </text>
          <text class="content">南昌交通学院</text>
        </view>
        <view class="item">
          <text class="ite">姓名 </text>
          <text class="content">{{ studentName }}</text>
        </view>
        <view class="item">
          <text class="ite">学号 </text>
          <text class="content">{{ studentNo }}</text>
        </view>
        <view class="item">
          <text class="ite">专业 </text>
          <text class="content">{{ majorName }}</text>
        </view>
        <view class="item">
          <text class="ite">班级 </text>
          <text class="content">{{ className }}</text>
        </view>
        <view class="item">
          <text class="ite">缴费学年 </text>
          <text class="content">{{ years }}</text>
        </view>
        <view class="item-pay" v-for="item in Arr">
          <text class="ite">{{ item.id }} </text>
          <text class="content">¥{{ item.money }}</text>
        </view>
        <view class="item">
          <text class="ite">总金额 </text>
          <text class="content">¥{{ orderAmount }}</text>
        </view>
      </view>
      <button
        @click="getPay()"
        :disabled="btDisabled"
        :style="bgColor"
        hover-class="button-hover"
      >
        支付
      </button>
      <button @click="closePay()" hover-class="button-hover">取消</button>
    </view>
    <!-- 查看详情弹窗 -->
    <view class="detail" v-show="showDetail">
      <view class="top">
        <text>订单详情</text>
        <view class="close" @click="closeDetail()">
          <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 {
      showPay: false, //继续支付弹窗
      showHint: true, //无订单列表提示
      showDetail: false, //查看详情弹窗
      orderList: [], //接口获取的订单列表数组
      studentName: "", //学生姓名
      studentNo: "", //学生学号
      majorName: "", //专业
      className: "", //班级
      years: "", //缴费学年
      Arr: [], //缴费明细数组
      orderAmount: "", //总金额
      btDisabled: false,
      bgColor: "background: #298def;",
      homeUrl: "https://jtishfw.ncjti.edu.cn/jiaofei/backendApi", //线上域名地址
      notifyUrl:
        "https://jtishfw.ncjti.edu.cn/jiaofei/backendApi/pay/jxnxs/notify/", //农商行回跳地址
      orderNo: "", //订单号
      //以下为微信支付参数
      appId: "",
      timeStamp: "",
      nonceStr: "",
      package: "",
      signType: "",
      paySign: "",
    };
  },
  onLoad(options) {
    let cardNumber = localStorage.getItem("cardNumber");

    if (cardNumber === null) {
      uni.showToast({
        title: "cardNumber为空，请重新授权",
        icon: "error",
        mask: true,
        duration: 2000,
      });
    } else {
      this.getOrderList(); //获取订单列表
    }
  },
  methods: {
    //点击遮罩层
    markClose() {
      this.showPay = false;
      this.showDetail = false;
    },
    //关闭查看详情弹窗
    closeDetail() {
      this.showDetail = false;
    },
    //关闭继续支付弹窗
    closePay() {
      this.showPay = false;
    },
    //获取订单列表
    getOrderList() {
      let cardNumber = localStorage.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 }) => {
          if (data.success) {
            if (data.data.list.length !== 0) {
              this.showHint = false; //关闭“暂无订单列表”提示
              this.orderList = data.data.list; //获取订单列表
            }
          } else {
            //接口error提示框
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 2000,
            });
          }
        },
        fail: (error) => {},
      });
    },

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

      let cardNumber = localStorage.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.getPayDetail(res.payItemDetail); //分割缴费明细数组
          this.orderAmount = res.realPayAmount;
        },
        fail: (error) => {},
      });
    },

    //继续支付
    toPay(payForIdentify, studentName) {
      this.showPay = !this.showPay; //打开继续支付弹窗

      let cardNumber = localStorage.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.getPayDetail(res.payItemDetail); //分割缴费明细数组
          this.orderAmount = res.realPayAmount;
        },
        fail: (error) => {},
      });
    },

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

    //订单反馈
    feedBack(orderNo) {
      let cardNumber = localStorage.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) => {},
      });
    },
    //支付
    getPay() {
      this.btDisabled = !this.btDisabled;

      this.bgColor = " background: #b3b3b3;";

      setTimeout(() => {
        this.btDisabled = !this.btDisabled;
        this.bgColor = " background: #298def;";
      }, 4000);

      uni.showToast({
        title: "支付中，请稍等",
        icon: "loading",
        mask: true,
        duration: 2000,
      });

      this.getOrderNo(); //获取订单号
    },
    //获取订单号
    getOrderNo() {
      let that = this;

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

      if (cardNumber == null) {
        uni.showToast({
          title: "cardNumber为空，请重新授权",
          icon: "error",
          mask: true,
          duration: 1500,
        });
        setTimeout(() => this.toBlank, 2000);
      }

      let url =
        that.homeUrl + `/tuitionpayment/payorder/${that.studentNo}/create`;

      uni.request({
        url: url,
        data: {},
        header: {
          card_number: cardNumber,
          Accept: "application/json",
          "Content-Type": "application/json",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          let res = data.data;
          that.orderNo = res.orderNo;
          if (data.success) {
            that.getPayMethod(); //获取后端支付方式
          } else {
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 2000,
            });
          }
        },
        fail: (error) => {},
      });
    },
    //获取支付方式
    getPayMethod() {
      let url = this.homeUrl + "/payMethodSetting/currentPay";

      uni.request({
        url: url,
        data: {},
        header: {
          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;
          if (data.success) {
            if (res.currentPayMethod === "1") {
              this.getwxParam(); //建行支付
            } else {
              this.nsPay(); //农商行支付
            }
          } else {
            //接口错误提示框
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 1000,
            });
          }
        },
        fail: (error) => {},
      });
    },
    //拉起农商行支付
    nsPay() {
      let O = "5494ec3310685daa218382619dd20e27";

      let out_no = this.orderNo;

      let amount = this.orderAmount;

      let appoint_notify = this.notifyUrl;

      let mainUrl = `https://q.jxnxs.com/newpay?O=${O}&out_no=${out_no}&amount=${amount}&appoint_notify=${appoint_notify}`;

      window.location.href = mainUrl;
    },
    //获取微信支付参数
    getwxParam() {
      let that = this;

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

      let openId = localStorage.getItem("openId");

      let url = that.homeUrl + "/pay/ccb/getJsApiParam";

      uni.request({
        url: url,
        data: {
          orderNo: that.orderNo,
          openId: openId,
        },
        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.success) {
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 2000,
            });
          } else {
            let res = data.data;
            that.appId = res.appId;
            that.timeStamp = res.timeStamp;
            that.nonceStr = res.nonceStr;
            that.package = res.package;
            that.signType = res.signType;
            that.paySign = res.paySign;
            that.wxPay(); //吊起微信支付
          }
        },
        fail: (error) => {},
      });
    },
    //吊起微信支付
    wxPay() {
      let that = this;

      function onBridgeReady() {
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: that.appId, //公众号ID，由商户传入
            timeStamp: that.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: that.nonceStr, //随机串
            package: that.package,
            signType: that.signType, //微信签名方式：
            paySign: that.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            }
          }
        );
      }
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    //跳转空白页面重新授权拿cardNumber
    toBlank() {
      uni.navigateTo({ url: "/pages/blankIndex/blankIndex" });
    },
  },
};
</script>

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