From d60c5f431a7dbed32906d74707195a3424c56235 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Fri, 20 Jun 2025 08:32:18 +0800
Subject: [PATCH] md

---
 src/views/openpage/onlinePay.vue   | 301 ++++++++++++++++++++++++++---
 src/views/openpage/onlinePayQr.vue |   3 +-
 2 files changed, 280 insertions(+), 24 deletions(-)

diff --git a/src/views/openpage/onlinePay.vue b/src/views/openpage/onlinePay.vue
index 330327a..f4b6701 100644
--- a/src/views/openpage/onlinePay.vue
+++ b/src/views/openpage/onlinePay.vue
@@ -1,15 +1,127 @@
 <template>
-  <div class="wechat-payment-container">
+  <div class="wechat-payment-container" style="background: #fff;padding: 1rem;">
     <!-- <OnlinePayJsApi v-if="isWx"></OnlinePayJsApi> -->
     <!-- <OnlinePayQr v-else></OnlinePayQr> -->
      <div v-if="!isWx">请在微信浏览器中打开此页面进行支付</div>
+     <div >
+        <el-form id="payPage" v-if="settleBillItem!=null"  ref="form"  :model="form" size="mini" label-width="80px">
+            <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
+              <el-col :span="24">
+                <div style="text-align:center">
+                    <div style="display: inline-flex;" >
+                      <span><img :src="shortLogo" style="width: 30px;height: 30px;margin-top: 0px;"  /></span>
+                      <span style="font-size: 20px;font-weight: bold;color: black;">探路供应链（江苏）有限公司</span>
+                    </div>
+                    <!-- <div v-if="!isWx" style="width:150px;margin: 0 auto;">
+                      <img :src="wxPayQrImageUrl" width="100%" draggable="false"/>
+                    </div>
+                    <div v-if="!isWx" class="pay-title"><span style="color: black;font-size: 20px;">￥{{ settleBillItem.thisPayMoney }} </span></div>
+                    <div v-if="!isWx"  style="text-align: center;" >
+                      <div>请使用微信[<span style="color:black;font-weight: bold;">24小时</span>]内完成支付</div>
+                    </div> -->
+                </div>
+              </el-col>
+              <el-col :span="24">
+                  <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top:10px">
+                      <el-col :span="24">
+                          <span class="item-label">账单编号:</span>
+                          <span class="item-value" style="font-size:14px;font-weight: bold;">{{ settleBillItem.settleBillNo }}</span>
+                      </el-col>
+
+                      <!-- <el-col :span="12">
+                          <span class="item-label">账单名称:</span><span class="item-value">{{ settleBillItem.settleBillName }}</span>
+                      </el-col> -->
+                      <el-col :span="24">
+                          <span class="item-label">账单日期:</span><span class="item-value">{{ settleBillItem.createTime }}</span>
+                      </el-col>
+                      <el-col :span="12">
+                          <span class="item-label">总票数:</span><span class="item-value">{{ settleBillItem.sendPieceSum }}</span>
+                      </el-col>
+                      <el-col :span="12">
+                          <span class="item-label">总件数:</span><span class="item-value">{{ settleBillItem.pieceNumber }}</span>
+                      </el-col>
+
+                      <el-col :span="12">
+                          <span class="item-label">结算重量:</span><span class="item-value">{{ settleBillItem.feeWeight }}KG</span>
+                      </el-col>
+
+                      <el-col :span="24">
+                          <span class="item-label">应付金额:</span><span class="item-value">￥{{ settleBillItem.recMoney }}</span>
+                      </el-col>
+                      <el-col :span="12">
+                          <span class="item-label">开票状态:</span>
+                          <span class="item-value">
+                              <span type="info" v-if="settleBillItem.openBillStatus==0">未开票</span>
+                              <span type="info" v-if="settleBillItem.openBillStatus==1">已开票</span>
+                              <span type="info" v-if="settleBillItem.openBillStatus==2">部分开票</span>
+                              <span type="info" v-if="settleBillItem.openBillStatus==3">不开票</span>
+                              <span type="info" v-if="settleBillItem.openBillStatus==4">已完成</span>
+                          </span>
+                      </el-col>
+
+                      <!-- <el-col :span="12">
+                      </el-col> -->
+                      <el-col :span="12">
+                          <span class="item-label">已付金额:</span><span class="item-value">￥{{ settleBillItem.recedMoney }}</span>
+                      </el-col>
+                  </el-row>
+              </el-col>
+                <el-col :span="24" v-for="item in settleBillItem.subBillList"  :key="item.id">
+                  <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top:10px">
+                    <el-col :span="12">
+                        <span class="item-label">运单号:</span><span class="item-value" style="font-size:14px;font-weight: bold;">{{ item.billCode }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">寄件日期:</span><span class="item-value">{{ parseTime(item.waybillDetail.sendDate, '{y}-{m}-{d}') }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">发件人:</span><span class="item-value">{{ item.waybillDetail.sendName }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">快件类型:</span><span class="item-value">{{ item.waybillDetail.sendSiteName }}--{{ item.waybillDetail.dispatchUnderlingSiteName }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">总运费:</span><span class="item-value">{{ item.waybillDetail.freight }} CNY</span>
+                    </el-col>
+
+                    <el-col :span="12" v-for="feeItem in item.feeitemList"  :key="feeItem.id">
+                        <span class="item-label">{{ feeItem.feeName }}:</span><span class="item-value">{{ feeItem.billFee }}{{feeItem.currency}}</span>
+                    </el-col>
+
+                    <el-col :span="12">
+                        <span class="item-label">件数:</span><span class="item-value">{{ item.waybillDetail.parcelQty }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">实际重量:</span><span class="item-value">{{ item.waybillDetail.billWeight }}KG</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">产品类型:</span><span class="item-value">{{ item.waybillDetail.productTypeName }}</span>
+                    </el-col>
+                    <el-col :span="12">
+                        <span class="item-label">寄件公司:</span><span class="item-value">{{ item.waybillDetail.sendCompany }}</span>
+                    </el-col>
+                    <el-col :span="24">
+                        <span class="item-label">备注:</span><span class="item-value">{{ item.waybillDetail.remark }} {{ item.waybillDetail.feeRemark }}</span>
+                    </el-col>
+                  </el-row>
+              </el-col>
+            </el-row>
+        </el-form>
+        <div style="margin-bottom: 20px;">
+          <el-button  type="primary" style="width: 100%;" @click="handleWeixinPay" >确认付款</el-button>
+        </div>
+    </div>
   </div>
+
 </template>
 
 <script>
 
 // import OnlinePayQr from '@/views/openpage/onlinePayQr.vue';
 // import OnlinePayJsApi from '@/views/openpage/onlinePayJsApi.vue';
+import axios from 'axios'
+import shortLogoImg from '@/assets/logo/short_logo.png'
+import { parseTime } from "@/utils/custom";
 
 export default {
   name: 'OnlinePay',
@@ -17,47 +129,156 @@ export default {
   components: {},
   data() {
     return {
+      shortLogo: shortLogoImg,
+      settleBillItem:null,
       billNo:null,
+      wxPayQrImageUrl:null,
+
       isWx:false,
+
       loadingVisible: false,
       resultVisible: false,
       paymentSuccess: false,
+
       errorMessage: '',
-      wechatPaymentParams: null
+      wechatPaymentParams: null,
+      // 表单参数
+      form: {},
+
     };
   },
   created() {
-    const ua = window.navigator.userAgent.toLowerCase();
-    if (!ua.match(/MicroMessenger/i)) {
-      this.isWx=false;
-    }else{
-      const params = new URLSearchParams(window.location.search);
-      let code=params.get('code');
-      let state=params.get('code');
-
-      // 如果是微信回调，拉起微信支付
-      if (code) {
-          this.requestPayment(code,state);
-      }
-      else{
-        this.billNo = this.$route.query.bid;
-        const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay","snsapi_base",this.billNo);
-        window.location.href = authUrl;
-      }
-    }
+    this.reset();
+    this.initPayOrder();
   },
   methods: {
+    // 表单重置
+    reset() {
+      this.form = {
+        payScope:null,
+        params:{
+          billCodeStr:null,
+        },
+        payRelList:[],
+
+        id: null,
+        payId: null,
+        payType: null,
+        recType: null,
+        payMan: null,
+        payManCode: null,
+        settleBillNo: this.settleBillNo,
+        blAudit: null,
+        auditDate: null,
+        auditManCode: null,
+        auditSiteCode: null,
+        customerCode: null,
+        customerName: null,
+        payMoney: null,
+        payStatus: null,
+        payStatusDesc: null,
+        breakType: null,
+        breakReason: null,
+        breakEmpCode: null,
+        recManCode: null,
+        settleType: this.settleType,
+        refundDate: null,
+        refundManCode: null,
+        refundSeq: null,
+        refundMode: null,
+        refundMoney: null,
+        refundReason: null,
+        refundRemark: null,
+        refundOpManCode: null,
+        refundRegisterSiteCode: null,
+        refundRegisterManCode: null,
+        satisfyMoney: null,
+        satisfyReason: null,
+        allowanceMoney: null,
+        allowanceReason: null,
+        deductionMoney: null,
+        deductionReason: null,
+        otherMoney: null,
+        otherReason: null,
+        tradeDate: null,
+        remark: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        createSite: null,
+        updateSite: null
+      };
+      this.resetForm("form");
+    },
+    initPayOrder(){
+      this.billNo = this.$route.query.bid;
+      axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
+      .then(response => {
+        this.loadingVisible = false;
+        console.log("===>response==>",response);
+        if (response.data.code === 200) {
+          this.settleBillItem = response.data.data;
+          console.log("===>this.settleBillItem==>",this.settleBillItem);
+          // this.invokeWechatPayment();
+        } else {
+          this.showPaymentResult(false, response.message || '获取账单失败');
+        }
+      })
+      .catch(error => {
+        this.loadingVisible = false;
+        this.showPaymentResult(false, '网络错误，请稍后重试');
+        console.error('获取账单失败:', error);
+      });
+    },
+    initQrUrl(){
+      this.wxPayQrImageUrl = response.data;
+      axios.get(process.env.VUE_APP_BASE_API+'/oms2c/common/getBillPayInfo?settleBillNo='+this.billNo)
+      .then(response => {
+        this.loadingVisible = false;
+        console.log("===>response==>",response);
+        if (response.data.code === 200) {
+          this.settleBillItem = response.data.data;
+        } else {
+          this.showPaymentResult(false, response.message || '获取账单失败');
+        }
+      })
+      .catch(error => {
+        this.loadingVisible = false;
+        console.error('获取QR失败:', error);
+      });
+    },
+    handleWeixinPay(){
+        const ua = window.navigator.userAgent.toLowerCase();
+        if (!ua.match(/MicroMessenger/i)) {
+          this.isWx=false;
+        }else{
+          const params = new URLSearchParams(window.location.search);
+          let code=params.get('code');
+          let state=params.get('code');
+          // 如果是微信回调，拉起微信支付
+          if (code) {
+              this.requestPayment(code,state);
+          }
+          else{
+            this.billNo = this.$route.query.bid;
+            const authUrl = this.generateAuthUrl("https://oms.tanex56.com/onlinePay","snsapi_base",this.billNo);
+            window.location.href = authUrl;
+          }
+        }
+    },
     requestPayment(code,state) {
       this.loadingVisible = true;
       // 调用后端API获取微信支付参数
-      this.$axios.post('/oms2c/common/sumbitWxPayByCode', {
+      axios.post(process.env.VUE_APP_BASE_API+'/oms2c/common/sumbitWxPayByCode', {
         code: code,
         state: state
       })
       .then(response => {
         this.loadingVisible = false;
         if (response.data.code === 200) {
-          this.wechatPaymentParams = response.data;
+          this.wechatPaymentParams = response.data.data;
           this.invokeWechatPayment();
         } else {
           this.showPaymentResult(false, response.data.message || '获取支付参数失败');
@@ -161,4 +382,40 @@ export default {
 .wechat-payment-container {
   padding-bottom: 80px;
 }
+
+
+.pay-dialog-center {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.pay-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #2e2f33;
+    text-align: center;
+}
+
+.pay-count{
+    color: #2962ff;
+}
+
+.item-label{
+    font-size: 12px;
+    color: #2e2f33;
+}
+
+.item-value{
+    font-size: 12px;
+    font-weight: 500;
+    color: #2e2f33;
+}
+
 </style>  
\ No newline at end of file
diff --git a/src/views/openpage/onlinePayQr.vue b/src/views/openpage/onlinePayQr.vue
index 6fe88d5..d047039 100644
--- a/src/views/openpage/onlinePayQr.vue
+++ b/src/views/openpage/onlinePayQr.vue
@@ -1,8 +1,7 @@
 <template>
   <div style="overflow: auto;">
-    123213
     <!-- v-if="settleBillItem!=null" -->
-    <el-form id="payPage" ref="form"  :model="form" size="mini" label-width="80px">
+    <el-form id="payPage" v-if="settleBillItem!=null"  ref="form"  :model="form" size="mini" label-width="80px">
          <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
           <el-col :span="24">
             <div style="text-align:center">