tuition/pages/parentPay/parentPay.vue

<template>
  <view class="container">
    <!-- 家长代缴费与查看订单页面 -->
    <view class="content1" v-if="content1">
      <!-- 遮罩层 -->
      <view class="mark" v-show="showSearch" @click="close1"></view>
      <view class="messageBg1"></view>
      <view class="messageBg2"></view>
      <view class="messageCard">
        <image src="../../static/images/null.png" mode="scaleToFill" />
        <text>暂无缴费信息</text>
        <button hover-class="button-hover" @click="toSearch">帮人代缴</button>
        <button hover-class="button-hover" @click="toOrder">查询订单</button>
      </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>
    <!-- 学生详情信息页面 -->
    <view class="content2" v-if="showMess">
      <!-- 遮罩层 -->
      <view class="mark" v-show="showLeaveMess" @click="toLeaveMess()"></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="toLeaveMess()"
          >
            信息有误？点击反馈
          </navigator>
        </view>
      </view>
      <!-- 信息有误，反馈弹窗 -->
      <view class="leaveMess" v-show="showLeaveMess">
        <view class="top">
          <text>信息反馈</text>
          <view class="close" @click="toLeaveMess()">
            <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>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content1: true, //家长代缴费与查看订单页面
      showMess: false, //代缴查询弹窗
      showSearch: false, //代缴查询弹窗
      showLeaveMess: false, //信息有误反馈弹窗
      studentName: "", //姓名
      studentNo: "", //学号
      SeaStudentName: "", //代缴查询页面姓名
      SeaStudentNo: "", //代缴查询页面学号
      majorName: "", //专业
      className: "", //班级
      years: "", //缴费学年
      realPayAmount: "", //总金额
      Arr: [], //缴费明细数组
      payStatu1: true, //支付按钮
      payStatu2: false, //已支付按钮
      btDisabled: false,
      bgColor: "background: #298def;",
      feedbackPersonName: "", //信息有误反馈提交者姓名
      feedbackPersonPhone: "", //信息有误反馈提交者联系电话
      feedbackInfo: "", //反馈信息
      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: "",
    };
  },
  methods: {
    //显示或关闭信息有误反馈弹窗
    toLeaveMess() {
      this.showLeaveMess = !this.showLeaveMess;
    },
    //代缴查询学生信息弹窗
    toSearch() {
      this.showSearch = !this.showSearch;
    },
    //关闭代缴查询学生信息弹窗
    close1() {
      this.showSearch = !this.showSearch;
    },
    //显示学生详细信息页面关闭代缴与查看订单页面
    toShowMess() {
      this.showMess = !this.showMess;
      this.content1 = false;
    },

    //获取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/parentPay/parentPay#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);
        }
      }
    },

    //代缴费
    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;
              that.toShowMess();
              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;
              }
              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;
    },

    //支付
    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) {
            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.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;
    },

    //获取微信支付参数
    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();
      }
    },

    //获取当前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]); // 输出指定的参数值 中文也可以
    },

    //提交反馈信息
    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",
          "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.toLeaveMess();
            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/parentPay.min.css");
</style>