805 lines
26 KiB
Vue
805 lines
26 KiB
Vue
<template>
|
||
<div class="home">
|
||
<nav-bar url="/Member_wdzd"></nav-bar>
|
||
<div class="bj"></div>
|
||
<div class="app-container">
|
||
<!-- 缴费信息 -->
|
||
<div class="left-label">
|
||
<div class="label-color"></div>
|
||
<div class="label-text">缴费信息</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="cell">
|
||
<div class="cell_title">缴费金额</div>
|
||
<div class="cell_value">￥{{ parseFloat(params.BillMoney).toFixed(2) }}</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell_title">缴费单号</div>
|
||
<div class="cell_value">{{ params.SerialFlowNo }}</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell_title">开单时间</div>
|
||
<div class="cell_value">{{ params.BillTime }}</div>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="cell_title">执行科室</div>
|
||
<div class="cell_value">{{ params.DoDepartName }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 缴费项目 -->
|
||
<div class="left-label">
|
||
<div class="label-color"></div>
|
||
<div class="label-text">缴费项目</div>
|
||
</div>
|
||
<div class="card">
|
||
<div v-for="item in payDetail" class="cell">
|
||
<div class="cell_title">{{ item.COSTNAME }}</div>
|
||
<div class="cell_value">￥{{ item.AMOUNT }}×{{ item.COSTSUM }} {{ item.UNIT }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择支付方式 -->
|
||
<div class="left-label">
|
||
<div class="label-color"></div>
|
||
<div class="label-text">支付方式</div>
|
||
</div>
|
||
<div class="card">
|
||
<!-- 微信支付选项 -->
|
||
<div v-if="provider == 'wxpay'" class="cell">
|
||
<label class="pay-item-label">
|
||
<div class="pay_type_list">
|
||
<div>
|
||
<img class="medical-insurance-image"
|
||
src="https://hnwjyy.oss-cn-shanghai.aliyuncs.com/%E5%8C%BB%E4%BF%9D%E6%B7%B7%E5%90%88%E6%94%AF%E4%BB%98%402x.png" />
|
||
</div>
|
||
<div>医保支付</div>
|
||
</div>
|
||
<input type="radio" name="payType" value="微信医保支付" v-model="radiovalue1" />
|
||
</label>
|
||
</div>
|
||
<div v-if="provider == 'wxpay'" class="cell">
|
||
<label class="pay-item-label">
|
||
<div class="pay_type_list">
|
||
<div>
|
||
<img class="pay-image"
|
||
src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_appwx_logo.png" />
|
||
</div>
|
||
<div>微信支付</div>
|
||
</div>
|
||
<input type="radio" name="payType" value="微信支付" v-model="radiovalue1" />
|
||
</label>
|
||
</div>
|
||
<!-- 支付宝支付选项 -->
|
||
<!-- <div v-if="provider=='alipay'" class="cell">
|
||
<div class="pay_type_list">
|
||
<div><img class="pay-image" src="../../static/icon/alipay.svg" /></div>
|
||
<div>支付宝支付</div>
|
||
</div>
|
||
<input type="radio" name="payType" value="支付宝支付" v-model="radiovalue1" />
|
||
</div> -->
|
||
</div>
|
||
|
||
<button class="btn" @click="generateOrder" :disabled="isPaying">
|
||
{{ isPaying ? '支付处理中...' : '支付' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
preCheck, apiUnifiedOrder,
|
||
apiopDjcx, apiopLBQuery,
|
||
apiOpWxQuery, getPayAuthCode,
|
||
prePay, getAccessToken
|
||
} from "@/request/api.js";
|
||
import { Dialog, Toast } from "vant";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
PatientId: '',
|
||
SerialFlowNo: '',
|
||
payDetail: [],
|
||
provider: 'wxpay', // 支付方式 wxpay 或 alipay
|
||
radiovalue1: '', // 选择的支付方式
|
||
isPaying: false, // 添加防止重复支付的状态
|
||
returnUrl: 'https://nxwj.btlsoln.com/nxwj-gzh/#/JiaoFei_detail', // 回调地址
|
||
params: {
|
||
FlowNo: '',
|
||
BillMoney: '',
|
||
BillTime: '',
|
||
BillType: '1',
|
||
DiagnosisCode: '',
|
||
DiagnosisName: '',
|
||
DoDepartName: '',
|
||
DoDepartCode: '',
|
||
DoctorName: '',
|
||
SerialFlowNo: '',
|
||
SerialNo: '',
|
||
SetDepartName: '',
|
||
SetDepartCode: '',
|
||
DoctorCode: '',
|
||
BillName: '',
|
||
PatientId: '',
|
||
},
|
||
globalData: {// 医保授权相关
|
||
scene: 0,
|
||
ghid: '', // 单据id
|
||
jzrid: '',//病人id，就诊卡Id
|
||
authCode: '',
|
||
payAuthCode: '',
|
||
userCardNo: '',
|
||
userName: '',
|
||
cityId: '',
|
||
hosp_out_trade_no: '',
|
||
userLongitudeLatitude: {},
|
||
// 医保授权支付相关
|
||
orderInfo: {},
|
||
// 医保支付金额相关
|
||
ybPayInfo: {},
|
||
},
|
||
accessToken: '',
|
||
};
|
||
},
|
||
|
||
// 修改后的 mounted
|
||
mounted() {
|
||
// 优先从路由query获取（授权回调后参数在query中）
|
||
this.PatientId = this.$route.query.PatientId || this.$route.params.PatientId || sessionStorage.getItem('cachedPatientId') || '';
|
||
this.SerialFlowNo = this.$route.query.SerialFlowNo || this.$route.params.SerialFlowNo || sessionStorage.getItem('cachedSerialFlowNo') || '';
|
||
|
||
// 重新缓存参数（确保后续使用）
|
||
if (this.PatientId) sessionStorage.setItem('cachedPatientId', this.PatientId);
|
||
if (this.SerialFlowNo) sessionStorage.setItem('cachedSerialFlowNo', this.SerialFlowNo);
|
||
|
||
// 处理授权回调
|
||
let authCode = this.$route.query.authCode;
|
||
let retCode = this.$route.query.retCode;
|
||
if (retCode === '0' && authCode) {
|
||
this.radiovalue1='微信医保支付';
|
||
this.getPayAuth(authCode);
|
||
// 不return，允许后续执行getData()（或在getPayAuth中调用）
|
||
}
|
||
|
||
// 确保数据加载（如果参数存在）
|
||
if (this.PatientId && this.SerialFlowNo) {
|
||
this.getData();
|
||
} else {
|
||
Toast('订单信息丢失，请重新选择订单');
|
||
setTimeout(() => this.$router.push('/Member_wdzd'), 1500);
|
||
}
|
||
},
|
||
|
||
|
||
methods: {
|
||
getToken() {
|
||
getAccessToken().then(res => {
|
||
console.log(res)
|
||
this.accessToken = res.data.accessToken
|
||
}).catch(err => {
|
||
Toast(err.message)
|
||
})
|
||
},
|
||
getData() {
|
||
let formdata = {
|
||
PatientId: this.PatientId,
|
||
QueryType: "0",
|
||
OrderNo: this.SerialFlowNo,
|
||
};
|
||
let queryData = {
|
||
FlowNo: this.SerialFlowNo,
|
||
PatientId: this.PatientId,
|
||
InsuranceType: '0'
|
||
};
|
||
|
||
// 并行执行两个异步请求
|
||
Promise.all([
|
||
apiopDjcx(formdata),
|
||
apiopLBQuery(queryData)
|
||
]).then(([djcxRes, lbQueryRes]) => {
|
||
// 处理 apiopDjcx 的响应
|
||
console.log(djcxRes.data);
|
||
let jsonObj = this.$x2js.xml2js(djcxRes.data);
|
||
console.log(jsonObj);
|
||
let jsonObj2 = jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse.request.request;
|
||
|
||
if (jsonObj2.returnresult.returncode === "1") {
|
||
// 设置参数
|
||
this.params.BillMoney = jsonObj2.data.BillMoney;
|
||
this.params.BillName = jsonObj2.data.BillName;
|
||
this.params.BillTime = jsonObj2.data.BillTime;
|
||
this.params.BillType = jsonObj2.data.BillType;
|
||
this.params.DiagnosisCode = jsonObj2.data.DiagnosisCode;
|
||
this.params.DiagnosisName = jsonObj2.data.DiagnosisName;
|
||
this.params.DoDepartName = jsonObj2.data.DoDepartName;
|
||
this.params.DoDepartCode = jsonObj2.data.DoDepartCode;
|
||
this.params.DoctorName = jsonObj2.data.DoctorName;
|
||
this.params.DoctorCode = jsonObj2.data.DoctorCode;
|
||
this.params.FlowNo = jsonObj2.data.FlowNo;
|
||
this.params.SerialFlowNo = jsonObj2.data.SerialFlowNo;
|
||
this.params.SerialNo = jsonObj2.data.SerialNo;
|
||
this.params.SetDepartName = jsonObj2.data.SetDepartName;
|
||
this.params.SetDepartCode = jsonObj2.data.SetDepartCode;
|
||
this.params.PatientId = this.PatientId;
|
||
} else {
|
||
Toast("获取缴费信息失败");
|
||
}
|
||
|
||
// 处理 apiopLBQuery 的响应
|
||
console.log(lbQueryRes);
|
||
let lbJsonObj = this.$x2js.xml2js(lbQueryRes.data);
|
||
console.log(lbJsonObj);
|
||
let lbJsonObj2 = this.$x2js.xml2js(
|
||
lbJsonObj.Envelope.Body.MOP_OutpBillsDetailQueryResponse.MOP_OutpBillsDetailQueryResult
|
||
);
|
||
console.log(lbJsonObj2);
|
||
|
||
if (Array.isArray(lbJsonObj2.response.data.data_row)) {
|
||
this.payDetail = lbJsonObj2.response.data.data_row;
|
||
} else {
|
||
this.payDetail = lbJsonObj2.response.data;
|
||
}
|
||
}).catch(err => {
|
||
Toast(err.message);
|
||
});
|
||
},
|
||
generateOrder() {
|
||
// 防止重复点击
|
||
if (this.isPaying) {
|
||
return;
|
||
}
|
||
if (!this.radiovalue1) {
|
||
Toast('请选择支付方式');
|
||
return;
|
||
}
|
||
// 设置支付状态为进行中
|
||
this.isPaying = true;
|
||
|
||
// 根据选择的支付方式执行不同逻辑
|
||
if (this.radiovalue1 === '微信医保支付') {
|
||
|
||
//判断单价小数位是否只有2位，不是统一错误
|
||
console.log(this.payDetail);
|
||
if (Array.isArray(this.payDetail)) {
|
||
this.payDetail.forEach(item => {
|
||
const amountStr = item.AMOUNT.toString();
|
||
if (amountStr.includes('.')) {
|
||
const parts = amountStr.split('.');
|
||
const decimalPart = parts[1];
|
||
// 检查小数位数是否超过2位且末尾非0
|
||
if (decimalPart.length > 2 && !decimalPart.endsWith('0')) {
|
||
Toast("单价有误，暂不支持医保结账，请到门诊缴费");
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
// 如果超过2位但末尾是0，需要进一步检查去除末尾0后是否超过2位
|
||
if (decimalPart.length > 2) {
|
||
const trimmedDecimal = decimalPart.replace(/0+$/, ''); // 去除末尾的0
|
||
if (trimmedDecimal.length > 2) {
|
||
Toast("单价有误，暂不支持医保结账，请到门诊缴费");
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// console.log("不是数组");
|
||
const amountStr = this.payDetail.data_row.AMOUNT.toString();
|
||
if (amountStr.includes('.')) {
|
||
const parts = amountStr.split('.');
|
||
const decimalPart = parts[1];
|
||
// 检查小数位数是否超过2位且末尾非0
|
||
if (decimalPart.length > 2 && !decimalPart.endsWith('0')) {
|
||
Toast("单价有误，暂不支持医保结账，请到门诊缴费");
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
// 如果超过2位但末尾是0，需要进一步检查去除末尾0后是否超过2位
|
||
if (decimalPart.length > 2) {
|
||
const trimmedDecimal = decimalPart.replace(/0+$/, ''); // 去除末尾的0
|
||
if (trimmedDecimal.length > 2) {
|
||
Toast("单价有误，暂不支持医保结账，请到门诊缴费");
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 只有特定患者可以使用医保支付
|
||
if (this.PatientId == "90131735" || this.PatientId == "90120780") {
|
||
this.handleMedicalInsurancePay();
|
||
} else {
|
||
Toast("如需医保支付，请携带身份证、医保卡等到线下缴费处操作。");
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
} else if (this.radiovalue1 === '微信支付') {
|
||
this.handleWechatPay();
|
||
}
|
||
},
|
||
handleMedicalInsurancePay() {
|
||
preCheck().then(res => {
|
||
if (res.code === 200) {
|
||
// 生成带参数的returnUrl（关键！）
|
||
const returnUrlWithParams = `${this.returnUrl}?PatientId=${this.PatientId}&SerialFlowNo=${this.SerialFlowNo}`;
|
||
const encodedReturnUrl = encodeURIComponent(returnUrlWithParams);
|
||
|
||
let authUrl = res.data;
|
||
if (authUrl.includes('?')) {
|
||
authUrl += '&redirectUrl=' + encodedReturnUrl;
|
||
} else {
|
||
authUrl += '?redirectUrl=' + encodedReturnUrl;
|
||
}
|
||
|
||
window.location.href = authUrl; // 跳转授权页
|
||
}
|
||
});
|
||
},
|
||
getPayAuth(code) {
|
||
const loadingToast = Toast.loading({
|
||
message: '加载中...',
|
||
forbidClick: true, // 禁止点击背景
|
||
duration: 0 // 不自动关闭
|
||
});
|
||
let params = {
|
||
// openid: localStorage.getItem("openid"),
|
||
qrcode: code,
|
||
}
|
||
console.log(params);
|
||
getPayAuthCode(params).then((res) => {
|
||
console.log("授权流程完毕，授权结果！！！")
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
// 解析 内层 JSON 字符串
|
||
let responseData;
|
||
try {
|
||
responseData = typeof res.data.json === 'string' ? JSON.parse(res.data.json) : res.data.json;
|
||
} catch (e) {
|
||
console.error("JSON解析错误", e);
|
||
Toast.fail("数据解析异常，请稍后重试");
|
||
loadingToast.clear(); // 解析错误时关闭加载
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
if (responseData.user_card_no == res.data.IdNo) {
|
||
|
||
if (responseData.code === 0) {
|
||
// Toast.success("获取payAuthNo用户信息成功，正在发起支付");
|
||
// TODO :发起支付
|
||
// console.log("用户信息:", responseData);
|
||
// {
|
||
// "code": 0,
|
||
// "message": "success",
|
||
// "user_name": "张林",
|
||
// "user_card_no": "370911198701055636",
|
||
// "pay_auth_no": "AUTH640100202510131615020070042",
|
||
// "user_longitude_latitude": {
|
||
// "longitude": "116.993209",
|
||
// "latitude": "35.978569"
|
||
// },
|
||
// "city_id": "640199",
|
||
// "family_pay_auth_no": null
|
||
// }
|
||
this.globalData.payAuthCode = responseData.pay_auth_no
|
||
this.globalData.userCardNo = responseData.user_card_no
|
||
this.globalData.userName = responseData.user_name
|
||
this.globalData.cityId = responseData.city_id
|
||
this.globalData.userLongitudeLatitude = responseData.user_longitude_latitude
|
||
this.globalData.ghid = sessionStorage.getItem('cachedSerialFlowNo') || this.SerialFlowNo;
|
||
this.globalData.jzrid = sessionStorage.getItem('cachedPatientId') || this.PatientId;
|
||
let YbInfo = {
|
||
"payAuthNo": responseData.pay_auth_no,
|
||
"userLongitudeLatitude": responseData.user_longitude_latitude,
|
||
"userCardNo": responseData.user_card_no,
|
||
"userName": responseData.user_name,
|
||
"jlid": "YBJF" + sessionStorage.getItem('cachedSerialFlowNo') || this.SerialFlowNo,
|
||
"kdsj": this.params.BillTime,
|
||
"ysje": this.params.BillMoney,
|
||
"jzrid": sessionStorage.getItem('cachedPatientId') || this.PatientId
|
||
}
|
||
sessionStorage.setItem('YbInfo', JSON.stringify(YbInfo));
|
||
// 授权完毕、开始预结算下单
|
||
let req = {
|
||
"userCardNo": this.globalData.userCardNo,
|
||
"userName": this.globalData.userName,
|
||
"orderTitle": "门诊缴费",
|
||
"openid": res.data.openid,
|
||
"ghid": this.globalData.ghid,
|
||
"FlowNo":this.params.FlowNo,
|
||
"payAuthNo": this.globalData.payAuthCode,
|
||
"jzrid": this.globalData.jzrid,
|
||
"userLongitudeLatitude": this.globalData.userLongitudeLatitude,
|
||
"accessToken": res.data.accessToken
|
||
}
|
||
|
||
this.retryPrePayWithDelay(req, 1) // 1次重试
|
||
.then(res => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
loadingToast.clear();
|
||
let data = encodeURIComponent(JSON.stringify(res.data));
|
||
this.$router.push(`/yborder?data=${data}`);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
Toast.fail('支付请求失败');
|
||
// 错误时也清除loading提示
|
||
loadingToast.clear();
|
||
})
|
||
.finally(() => {
|
||
this.isPaying = false;
|
||
// 移除此行，避免重复清除loadingToast
|
||
});
|
||
|
||
} else if (responseData.code < 0) {
|
||
Toast.fail("系统繁忙，请稍后重试");
|
||
this.getData();
|
||
loadingToast.clear(); // 异常时关闭
|
||
this.isPaying = false;
|
||
} else if (responseData.code > 0) {
|
||
Toast.fail(responseData.message);
|
||
this.radiovalue1 = ''; // 重置支付方式选择
|
||
this.getData();
|
||
loadingToast.clear(); // 异常时关闭
|
||
this.isPaying = false; // 重新启用支付按钮
|
||
}
|
||
|
||
} else {
|
||
Toast.fail("不是本人医保,不予办理");
|
||
this.getData();
|
||
loadingToast.clear(); // 异常时关闭
|
||
this.isPaying = false;
|
||
return;
|
||
}
|
||
|
||
|
||
} else {
|
||
Toast.fail(res.message || "授权失败");
|
||
this.getData();
|
||
loadingToast.clear(); // 异常时关闭
|
||
this.isPaying = false;
|
||
}
|
||
}).catch((err) => {
|
||
console.error("getPayAuthCode error", err);
|
||
Toast.fail("获取用户信息异常，请稍后重试");
|
||
this.getData();
|
||
loadingToast.clear(); // 异常时关闭
|
||
this.isPaying = false;
|
||
});
|
||
|
||
},
|
||
retryPrePayWithDelay(requestData, retries) {
|
||
return new Promise((resolve, reject) => {
|
||
const doRequest = (attempt) => {
|
||
prePay(requestData)
|
||
.then(response => {
|
||
resolve(response);
|
||
})
|
||
.catch(error => {
|
||
if (attempt < retries) {
|
||
console.warn(`prePay请求失败，正在进行第${attempt}次重试`);
|
||
setTimeout(() => doRequest(attempt + 1), 1000); // 1秒后重试
|
||
} else {
|
||
reject(error);
|
||
}
|
||
});
|
||
};
|
||
doRequest(0);
|
||
});
|
||
},
|
||
// 清除 URL 中的 code
|
||
clearCodeFromUrl() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
urlParams.delete('code');
|
||
const newSearch = urlParams.toString() ? '?' + urlParams.toString() : '';
|
||
const cleanUrl = window.location.origin + window.location.pathname + window.location.hash.split('?')[0] + newSearch;
|
||
window.history.replaceState(null, '', cleanUrl);
|
||
},
|
||
handleWechatPay() {
|
||
console.log("this.params", this.params);
|
||
apiUnifiedOrder(this.params).then((ref) => {
|
||
if (ref.code === 200) {
|
||
//调用微信支付
|
||
try {
|
||
|
||
const data = ref.data;
|
||
|
||
// 兼容不同字段名
|
||
let payParams = {
|
||
appId: data.appid || data.appId,
|
||
timeStamp: data.timeStamp || data.timestamp,
|
||
nonceStr: data.nonce_str || data.nonceStr,
|
||
package: data.package || `prepay_id=${data.prepay_id || data.prepayId}`,
|
||
signType: 'MD5',
|
||
paySign: data.paySign
|
||
};
|
||
|
||
console.log('支付参数:', payParams);
|
||
|
||
// 查询参数
|
||
let queryParams = {
|
||
outTradeNo: data.outTradeNo
|
||
};
|
||
console.log('订单号:', queryParams.outTradeNo);
|
||
|
||
// 验证必要参数
|
||
const requiredParams = ['appId', 'timeStamp', 'nonceStr', 'package', 'paySign'];
|
||
for (let param of requiredParams) {
|
||
if (!payParams[param]) {
|
||
Toast(`缺少支付参数: ${param}`);
|
||
this.loading = false;
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
Toast("请在微信中打开页面进行支付");
|
||
this.loading = false;
|
||
return;
|
||
}
|
||
|
||
// 调起微信支付
|
||
WeixinJSBridge.invoke('getBrandWCPayRequest', payParams, (res) => {
|
||
console.log('微信支付返回:', res);
|
||
console.log("订单号：", queryParams.outTradeNo);
|
||
|
||
if (res.err_msg && res.err_msg.indexOf('ok') > -1) {
|
||
// ✅ 支付成功，启动轮询
|
||
this.startPaymentPolling(queryParams); // 调用组件方法
|
||
} else if (res.err_msg && res.err_msg.indexOf('cancel') > -1) {
|
||
Toast("用户取消支付");
|
||
} else {
|
||
Toast("支付失败: " + (res.err_msg || '未知错误'));
|
||
}
|
||
|
||
this.loading = false;
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('支付调用异常:', error);
|
||
Toast("支付调用失败");
|
||
this.loading = false;
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
Toast("通讯异常，请稍后重试");
|
||
});
|
||
},
|
||
// 独立方法：启动轮询查询支付结果
|
||
startPaymentPolling(queryParams) {
|
||
// 防止重复启动
|
||
if (this.pollTimer) {
|
||
clearInterval(this.pollTimer);
|
||
this.pollTimer = null;
|
||
}
|
||
|
||
const toast = Toast.loading({
|
||
forbidClick: true,
|
||
message: '正在查询支付结果...',
|
||
loadingType: 'circular',
|
||
duration: 0
|
||
});
|
||
|
||
let pollCount = 0;
|
||
const maxPollCount = 15; // 最多 30 秒（15次 × 2秒）
|
||
|
||
this.pollTimer = setInterval(() => {
|
||
pollCount++;
|
||
console.log(`第 ${pollCount} 次轮询查询支付状态...`);
|
||
|
||
apiOpWxQuery(queryParams)
|
||
.then((res) => {
|
||
console.log('查询响应:', res);
|
||
|
||
if (res.code === 200) {
|
||
const data = res.data;
|
||
const state = data.trade_state;
|
||
|
||
if (state === 'SUCCESS') {
|
||
// ✅ 支付成功
|
||
clearInterval(this.pollTimer);
|
||
this.pollTimer = null;
|
||
toast.clear();
|
||
Toast.success("支付成功");
|
||
// 设置支付状态为完成
|
||
this.isPaying = false;
|
||
// 清理缓存
|
||
sessionStorage.removeItem('cachedPatientId');
|
||
sessionStorage.removeItem('cachedSerialFlowNo');
|
||
|
||
// 先跳转再刷新
|
||
this.$router.replace({ path: "/Member_wdzd" });
|
||
|
||
// 确保路由跳转完成后刷新页面
|
||
this.$nextTick(() => {
|
||
window.location.reload();
|
||
});
|
||
|
||
sessionStorage.removeItem("yuyue");
|
||
} else if (state === 'NOTPAY') {
|
||
// 继续等待
|
||
console.log('用户尚未支付');
|
||
} else {
|
||
// 其他失败状态
|
||
clearInterval(this.pollTimer);
|
||
this.pollTimer = null;
|
||
toast.clear();
|
||
Toast.fail("支付失败：" + (data.trade_state_desc || state));
|
||
}
|
||
} else {
|
||
console.warn('查询接口异常:', res);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error('查询请求失败:', error);
|
||
})
|
||
.finally(() => {
|
||
if (pollCount >= maxPollCount) {
|
||
if (this.pollTimer) {
|
||
clearInterval(this.pollTimer);
|
||
this.pollTimer = null;
|
||
}
|
||
toast.clear();
|
||
Toast.fail("支付超时，请稍后查看订单状态");
|
||
}
|
||
});
|
||
}, 2000);
|
||
|
||
// 总超时兜底（30秒）
|
||
setTimeout(() => {
|
||
if (this.pollTimer) {
|
||
clearInterval(this.pollTimer);
|
||
this.pollTimer = null;
|
||
}
|
||
if (toast) {
|
||
toast.clear();
|
||
}
|
||
}, maxPollCount * 2000);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
/* 全局样式 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.app-container {
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
/* 背景层 */
|
||
.bj {
|
||
background: #f5f5f5;
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* 标题样式 */
|
||
.left-label {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 15px 10px;
|
||
font-size: 0.45rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.label-color {
|
||
width: 4px;
|
||
height: 16px;
|
||
background-color: #166bcc;
|
||
margin-right: 8px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
margin: 0 12px 15px;
|
||
padding: 12px 15px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* 单元格样式 */
|
||
.cell {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.cell:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.cell_title {
|
||
font-size: 0.35rem;
|
||
color: #666;
|
||
}
|
||
|
||
.cell_value {
|
||
font-size: 0.35rem;
|
||
color: #333;
|
||
text-align: right;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 支付方式样式 */
|
||
.pay_type_list {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 统一图片容器宽度，确保图片和文字都左对齐 */
|
||
.pay_type_list>div:first-child {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 1.8rem;
|
||
/* 调整为适应1.2rem图片的容器宽度 */
|
||
margin-right: 0.3rem;
|
||
}
|
||
|
||
.pay_type_list>div:last-child {
|
||
font-size: 0.4rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 进一步放大图片（扩大0.5倍，即原来的1.5倍） */
|
||
.pay-image {
|
||
width: 0.9rem;
|
||
height: 0.9rem;
|
||
}
|
||
|
||
.medical-insurance-image {
|
||
width: 1.2rem;
|
||
height: 1.2rem;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.pay-item-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.btn {
|
||
position: fixed;
|
||
// bottom: 30px;
|
||
margin-top: 1rem;
|
||
left: 5%;
|
||
width: 90%;
|
||
height: 1rem;
|
||
background-color: #166bcc;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 0.4rem;
|
||
text-align: center;
|
||
}
|
||
</style> |