tuition/pages/Pay/pay.vue

<template>
  <view class="container">
    <button class="order" @click="toOrder()">订单查询</button>
    <!-- 遮罩层 -->
    <view
      class="mark"
      v-show="showSearch || showLeaveMess"
      @click="markClose()"
    ></view>
    <view class="messageBg1"></view>
    <view class="messageBg2"></view>
    <view class="messageCard">
      <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">¥{{ realPayAmount }}</text>
        </view>
      </view>
      <!-- 支付成功显示 -->
      <button
        @click="getPay()"
        hover-class="button-hover"
        :disabled="btDisabled"
        :style="bgColor"
        v-if="payStatu1"
      >
        支付
      </button>
      <!-- 支付失败显示 -->
      <text class="okPay" v-if="payStatu2">已支付</text>
      <view class="bottom-a">
        <navigator
          url="#"
          open-type="navigate"
          hover-class="navigator-hover"
          @click="toSearch"
        >
          帮人代缴
        </navigator>
        <navigator
          url="#"
          open-type="navigate"
          hover-class="navigator-hover"
          @click="toLeaveMess"
        >
          信息有误？点击反馈
        </navigator>
      </view>
    </view>
    <!-- 代缴查询学生信息弹窗 -->
    <view class="pop-up" v-show="showSearch">
      <view class="top">
        <text>代缴人信息</text>
        <view class="close" @click="close1">
          <view class="image"></view>
        </view>
      </view>
      <view class="name">
        <text>姓 名</text>
        <input
          v-model="SeaStudentName"
          type="text"
          placeholder="请输入姓名"
          placeholder-style="color:rgba(0, 0, 0, 0.29);"
        />
      </view>
      <view class="studentNo">
        <text>学 号</text>
        <input
          v-model="SeaStudentNo"
          type="text"
          placeholder="请输入学号"
          placeholder-style="color:rgba(0, 0, 0, 0.29);"
        />
      </view>
      <view class="remark"> 备注：新生输入身份证号代替学号，老生输入学号 </view>
      <view class="confirm">
        <button hover-class="button-hover" @click="close1">取消</button>
        <button hover-class="button-hover" @click="searchDetailMess">
          确认
        </button>
      </view>
    </view>
    <!-- 信息有误反馈弹窗 -->
    <view class="leaveMess" v-show="showLeaveMess">
      <view class="top">
        <text>信息反馈</text>
        <view class="close" @click="close2">
          <view class="image"></view>
        </view>
      </view>
      <view class="name">
        <text>姓&#12288;名 :</text>
        <input
          type="text"
          placeholder="请输入姓名"
          v-model="feedbackPersonName"
          placeholder-style="color: #B3B3B3;"
        />
      </view>
      <view class="tel">
        <text>联系人 :</text>
        <input
          type="text"
          placeholder="请输入联系人手机号码"
          v-model="feedbackPersonPhone"
          placeholder-style="color: #B3B3B3;"
        />
      </view>
      <text class="title">反馈信息 ：</text>
      <textarea
        placeholder=""
        placeholder-class="textarea-placeholder"
        maxlength="512"
        v-model="feedbackInfo"
      />
      <button hover-class="button-hover" @click="putMess">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLeaveMess: false, //显示信息有误反馈弹窗
      showSearch: false, //显示帮人代缴查询弹窗
      studentName: "", //姓名
      studentNo: "", //学号
      SeaStudentNo: "", //代缴查询学号
      SeaStudentName: "", //代缴查询姓名
      majorName: "", //专业
      className: "", //班级
      years: "", //缴费学年
      realPayAmount: "", //总金额
      Arr: [], //缴费明细数组
      payStatu1: true, //未支付
      payStatu2: false, //已支付
      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: "", //订单号
      //信息有误反馈
      feedbackPersonName: "",
      feedbackPersonPhone: "",
      feedbackInfo: "",
      //微信支付参数
      appId: "",
      timeStamp: "",
      nonceStr: "",
      package: "",
      signType: "",
      paySign: "",
    };
  },
  onLoad(options) {
    this.getDetailMess(); //获取用户详细信息
  },
  methods: {
    //显示代缴查询弹窗
    toSearch() {
      this.showSearch = true;
    },
    //关闭代缴查询弹窗
    close1() {
      this.showSearch = false;
    },
    //关闭信息有误反馈弹窗
    close2() {
      this.showLeaveMess = false;
    },
    //信息有误反馈弹窗
    toLeaveMess() {
      this.showLeaveMess = true;
    },
    //关闭遮罩层
    markClose() {
      this.showLeaveMess = false;
      this.showSearch = false;
    },
    //换取详情信息
    getDetailMess() {
      let that = this;

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

      let url = that.homeUrl + "/tuitionpayment/payableinfo/payableInfo";

      uni.showToast({
        title: "信息加载中",
        icon: "loading",
        mask: true,
        duration: 1000,
      });
      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 }) => {
          let res = data.data;
          that.studentName = res.studentName;
          that.studentNo = res.studentNo;
          that.majorName = res.majorName;
          that.className = res.className;
          that.years = res.years;
          that.realPayAmount = res.realPayAmount;
          that.getPayDetail(res.payItemDetail);
          if (res.pay) {
            that.payStatu1 = false;
            that.payStatu2 = true;
          } else {
            that.payStatu1 = true;
            that.payStatu2 = false;
          }
          that.getOpenId();
        },
        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;
    },

    //获取openId
    getOpenId() {
      let openId = localStorage.getItem("openId");

      if (!openId) {
        let openId = this.getQueryString("openId");
        let error = this.getQueryString("error");
        let errorMsg = this.getQueryString("errorMsg");
        let homeWeb = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd87cbe1db0437303&redirect_uri=${this.homeUrl}/wechat/pub/auth&response_type=code&scope=snsapi_base&state=pages/Pay/pay#wechat_redire`;
        if (error) {
          uni.showToast({
            title: errorMsg,
            icon: "error",
            mask: true,
            duration: 1000,
          });
        } else if (!openId) {
          window.location.href = homeWeb;
        } else {
          localStorage.setItem("openId", openId);
        }
      }
    },

    //支付
    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/x-www-form-urlencoded;charset=utf-8",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          let res = data.data;

          that.orderNo = res.orderNo;

          if (!data.success) {
            //接口错误提示框
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 2000,
            });
          } else {
            that.getPayMethod();
          }
        },
        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) => {},
      });
    },

    //获取微信支付参数
    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/x-www-form-urlencoded;charset=utf-8",
          "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();
      }
    },

    //拉起农商行支付
    nsPay() {
      let O = "5494ec3310685daa218382619dd20e27";

      let out_no = this.orderNo;

      let amount = this.realPayAmount;

      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;
    },

    //获取当前URL指定参数
    getQueryString(name) {
      let url = window.location.href; // 获取URL

      let pattern = new RegExp("[\?\&]" + name + "=([^\&]+)", "i"); // 正则匹配URL

      let matcher = pattern.exec(url);

      if (matcher == null || matcher.length < 1) {
        return false;
      }
      return decodeURIComponent(matcher[1]); // 输出指定的参数值 中文也可以
    },

    //代缴费
    searchDetailMess() {
      if (!this.SeaStudentNo || !this.SeaStudentName) {
        uni.showToast({
          title: "学号或姓名不能为空",
          icon: "error",
          mask: true,
          duration: 1000,
        });
      } else {
        let that = this;
        let cardNumber = localStorage.getItem("cardNumber");
        let url =
          that.homeUrl +
          `/tuitionpayment/payableinfo/payableInfo/${that.SeaStudentNo}/${that.SeaStudentName}`;
        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 }) => {
            if (!data.success) {
              //接口返回错误提示框
              uni.showToast({
                title: data.message,
                icon: "error",
                mask: true,
                duration: 1000,
              });
            } else {
              uni.showToast({
                title: "信息加载中",
                icon: "loading",
                mask: true,
                duration: 500,
              });
              that.showSearch = !that.showSearch;
              let res = data.data;
              that.studentName = res.studentName;
              that.studentNo = res.studentNo;
              that.years = res.years;
              that.majorName = res.majorName;
              that.className = res.className;
              that.realPayAmount = res.realPayAmount;
              that.getPayDetail(res.payItemDetail);
              that.SeaStudentNo = "";
              that.SeaStudentName = "";
              if (res.pay) {
                that.payStatu1 = false;
                that.payStatu2 = true;
              } else {
                that.payStatu1 = true;
                that.payStatu2 = false;
              }
            }
          },
          fail: (error) => {},
        });
      }
    },

    //提交反馈信息
    putMess() {
      let that = this;

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

      let url = that.homeUrl + "/tuitionpayment/feedbackmsg/save";

      uni.request({
        url: url,
        data: {
          feedbackPersonName: that.feedbackPersonName,
          feedbackPersonPhone: that.feedbackPersonPhone,
          feedbackInfo: that.feedbackInfo,
        },
        header: {
          card_number: cardNumber,
          Accept: "application/json",
          "Content-Type": "application/json; charset=utf-8",
          "X-Requested-With": "XMLHttpRequest",
        },
        method: "POST",
        sslVerify: true,
        success: ({ data, statusCode, header }) => {
          if (data.success) {
            uni.showToast({
              title: "提交成功，静待处理",
              icon: "success",
              mask: true,
              duration: 1000,
            });
            that.close2();
            that.feedbackPersonName = "";
            that.feedbackPersonPhone = "";
            that.feedbackInfo = "";
          } else {
            uni.showToast({
              title: data.message,
              icon: "error",
              mask: true,
              duration: 1000,
            });
          }
        },
        fail: (error) => {},
      });
    },

    //跳转订单页面
    toOrder() {
      uni.navigateTo({ url: "/pages/order/order" });
    },
    //跳转空白页面重新授权拿cardNumber
    toBlank() {
      uni.navigateTo({ url: "/pages/blankIndex/blankIndex" });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("./css/pay.min.css");
</style>