emis-oms-frontend/src/views/openpage/onlinePay.vue

<template>
  <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 v-else>
        <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',
  // components: {OnlinePayQr,OnlinePayJsApi },
  components: {},
  data() {
    return {
      shortLogo: shortLogoImg,
      settleBillItem:null,
      billNo:null,
      wxPayQrImageUrl:null,

      isWx:false,

      loadingVisible: false,
      resultVisible: false,
      paymentSuccess: false,

      errorMessage: '',
      wechatPaymentParams: null,
      // 表单参数
      form: {},

    };
  },
  created() {
    this.reset();
    const ua = window.navigator.userAgent.toLowerCase();
    if (!ua.match(/MicroMessenger/i)) {
        this.isWx=false;
    }
    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 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获取微信支付参数
      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.data;
          this.invokeWechatPayment();
        } else {
          this.showPaymentResult(false, response.data.message || '获取支付参数失败');
        }
      })
      .catch(error => {
        this.loadingVisible = false;
        this.showPaymentResult(false, '网络错误，请稍后重试');
        console.error('获取微信支付参数失败:', error);
      });
    },
    invokeWechatPayment() {
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },
    onBridgeReady() {
      const params = this.wechatPaymentParams;
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": params.appId,         // 公众号ID，由商户传入
          "timeStamp": params.timeStamp, // 时间戳，自1970年以来的秒数
          "nonceStr": params.nonceStr,   // 随机串
          "package": params.package,     // 预支付交易会话ID
          "signType": params.signType,   // 微信签名方式
          "paySign": params.paySign      // 微信签名
        },
        (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // 用户支付成功，这里可以调用后端接口确认支付状态
            this.verifyPaymentStatus();
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            this.showPaymentResult(false, '用户取消支付');
          } else {
            this.showPaymentResult(false, `支付失败: ${res.err_msg}`);
          }
        }
      );
    },
    verifyPaymentStatus() {
      this.loadingVisible = true;
      
      // 调用后端API验证支付状态
      setTimeout(() => {
        // 实际项目中应该调用后端API验证支付状态
        // 这里使用模拟数据
        this.loadingVisible = false;
        this.showPaymentResult(true);
      }, 1500);
    },
    showPaymentResult(success, message = '') {
      this.paymentSuccess = success;
      this.errorMessage = message;
      this.resultVisible = true;
    },
    handleResultAction() {
      this.resultVisible = false;
      if (this.paymentSuccess) {
        this.$router.push({ name: 'OrderSuccess', params: { orderId: this.orderInfo.orderId } });
      }
    },
    
     /**
     * 生成微信授权URL
     * @param {string} redirectUri - 授权后重定向的URL
     * @param {string} scope - 授权作用域，snsapi_base或snsapi_userinfo
     * @param {string} state - 自定义参数
     */
    generateAuthUrl(redirectUri, scope = 'snsapi_base', state = 'STATE') {
      const appId = process.env.VUE_APP_WECHAT_APPID;
      const encodedRedirectUri = encodeURIComponent(redirectUri);
      return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodedRedirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
    },
    
    
    // /**
    //  * 将code发送到后端换取openid
    //  * @param {string} code - 微信授权码
    //  */
    // async exchangeCodeForOpenid(code) {
    //   try {
    //     const response = await this.$axios.post('/api/wechat/auth/openid', { code });
    //     return response.data;
    //   } catch (error) {
    //     console.error('换取OpenID失败:', error);
    //     throw error;
    //   }
    // }
  }
};
</script>

<style scoped>
.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>