492 lines
12 KiB
Vue
492 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<view class="title-back">
|
|||
|
|
<view class="left-father" @click="goBack">
|
|||
|
|
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
|
|||
|
|
<view style="font-size: 30rpx;">缴费账单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bgc">
|
|||
|
|
<image class="bgc-img" src="https://www.focusnu.com/media/directive/index/account.png" />
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container" style="margin-top: 550rpx;">
|
|||
|
|
<view class="white-container-top">
|
|||
|
|
<image style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"
|
|||
|
|
src="https://www.focusnu.com/media/directive/index/account/0.png" />
|
|||
|
|
<view style="color: #999999;">
|
|||
|
|
机构名称
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container-bottom">
|
|||
|
|
{{ item.departName }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container">
|
|||
|
|
<view class="white-container-top">
|
|||
|
|
<image style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"
|
|||
|
|
src="https://www.focusnu.com/media/directive/index/account/1.png" />
|
|||
|
|
<view style="color: #999999;">
|
|||
|
|
护理单元
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container-bottom">
|
|||
|
|
{{ item.nuName }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container">
|
|||
|
|
<view class="white-container-top">
|
|||
|
|
<image style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"
|
|||
|
|
src="https://www.focusnu.com/media/directive/index/account/2.png" />
|
|||
|
|
<view style="color: #999999;">
|
|||
|
|
账单金额
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="white-container-bottom">
|
|||
|
|
￥ {{ item.payableAmount }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
style="display: flex;width: 100%;padding: 0 10%;justify-content: space-between;margin-top: 50rpx;z-index: 1;">
|
|||
|
|
<view class="back-button" @click="goBack">
|
|||
|
|
返回上一步
|
|||
|
|
</view>
|
|||
|
|
<view class="finish-button" @click="initiatePayment">
|
|||
|
|
微信支付
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="white-content">
|
|||
|
|
<view class="white-title">
|
|||
|
|
NUID:{{ item.nuId }}
|
|||
|
|
</view>
|
|||
|
|
<view class="white-second">
|
|||
|
|
{{ item.departName }}
|
|||
|
|
</view>
|
|||
|
|
<view class="white-center">
|
|||
|
|
{{ item.nuName }}
|
|||
|
|
<image class="center-img" src="https://www.focusnu.com/media/directive/index/sheying.png" />
|
|||
|
|
</view>
|
|||
|
|
<view style="display: flex;width: 85%;position: absolute;bottom: 0rpx;">
|
|||
|
|
<view class="finish-button" v-if="item.nuCanUse==0" @click="goToPay">
|
|||
|
|
绑定护理单元
|
|||
|
|
</view>
|
|||
|
|
<view class="white-button" v-else>
|
|||
|
|
护理单元使用中
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 100%;display: flex;justify-content: flex-end;" >
|
|||
|
|
<view class="back-right" @click="goBack">
|
|||
|
|
重新扫码
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view> -->
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive
|
|||
|
|
} from 'vue'
|
|||
|
|
import {
|
|||
|
|
onLoad,
|
|||
|
|
onShow
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
import {
|
|||
|
|
getOrgNuId,getAccount
|
|||
|
|
} from './api.js'
|
|||
|
|
|
|||
|
|
const goBack = () => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
const item = ref({});
|
|||
|
|
const payurl = ref("")
|
|||
|
|
onLoad(() => {
|
|||
|
|
item.value = uni.getStorageSync('payaccount')
|
|||
|
|
getAccount(item.value.orgCode).then(res=>{
|
|||
|
|
payurl.value = res.result.url
|
|||
|
|
// console.log("res",res.result.url)
|
|||
|
|
})
|
|||
|
|
// console.log("?????",item.value)
|
|||
|
|
})
|
|||
|
|
// 发起支付入口（async）
|
|||
|
|
const initiatePayment = async () => {
|
|||
|
|
try {
|
|||
|
|
const urlpost = `${payurl.value}/weiXinPay/nuBindPay`;
|
|||
|
|
|
|||
|
|
const payload = {
|
|||
|
|
title: '护理单元绑定',
|
|||
|
|
openId: uni.getStorageSync('openid') || '',
|
|||
|
|
amountPrice: item.value.payableAmount ,
|
|||
|
|
orgCode: item.value.nuId.substring(4, 7),
|
|||
|
|
nursingUnit: item.value.nuId ,
|
|||
|
|
orderDesc:`用户绑定护理单元${item.value?.nuId}，充值${item.value?.payableAmount}元`,
|
|||
|
|
// customerId: '顾客id',
|
|||
|
|
orderType: 'binding_nu',
|
|||
|
|
price: item.value.payableAmount,
|
|||
|
|
count: 1,
|
|||
|
|
unit: '间',
|
|||
|
|
customerId:uni.getStorageSync('allinfo').id
|
|||
|
|
};
|
|||
|
|
console.log("AAAAAAA",payload)
|
|||
|
|
// 显示 loading
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '正在请求支付...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 使用 uni.request 代替 fetch
|
|||
|
|
const res = await new Promise((resolve, reject) => {
|
|||
|
|
uni.request({
|
|||
|
|
url: urlpost,
|
|||
|
|
method: 'POST',
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
data: payload,
|
|||
|
|
success: (r) => resolve(r),
|
|||
|
|
fail: (e) => reject(e)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
uni.hideLoading();
|
|||
|
|
|
|||
|
|
// uni.request 返回的结构通常是 { statusCode, data, ... }
|
|||
|
|
const data = res && res.data ? res.data : res;
|
|||
|
|
|
|||
|
|
|
|||
|
|
console.log("data",data)
|
|||
|
|
|
|||
|
|
if(data.nuFailType=="ORG_PAYMENT_DISABLED"){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '机构已经关闭微信支付功能',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/oldmanindex/index'
|
|||
|
|
})
|
|||
|
|
},1000)
|
|||
|
|
}else if(data.nuFailType=="NU_HAS_BEEN_BOUND"){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '护理单元已被其他用户绑定',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/oldmanindex/index'
|
|||
|
|
})
|
|||
|
|
},1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// return
|
|||
|
|
|
|||
|
|
if (!data) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '服务器无响应',
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 后端返回包含 appId 等支付所需字段
|
|||
|
|
if (data.appId || data.timeStamp || data.package || data.paySign) {
|
|||
|
|
await callWeixinPay(data);
|
|||
|
|
} else {
|
|||
|
|
// 如果后端使用另一种返回结构，请按实际字段判断
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付信息获取失败',
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
console.error('支付返回:', data);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.error('请求失败:', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请求失败',
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 支付调用封装（支持公众号 H5 和微信小程序）
|
|||
|
|
function callWeixinPay(data) {
|
|||
|
|
console.log("????",data)
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
// 判断运行平台（H5 / 小程序 / 其它）
|
|||
|
|
const isH5 = (typeof window !== 'undefined') && (typeof navigator !== 'undefined');
|
|||
|
|
const ua = isH5 ? navigator.userAgent || '' : '';
|
|||
|
|
const isWeixinBrowser = /MicroMessenger/i.test(ua);
|
|||
|
|
// const isMpWeixin = (process && process.env && process.env.UNI_PLATFORM === 'mp-weixin');
|
|||
|
|
|
|||
|
|
// --- 微信公众号 H5（WeixinJSBridge） ---
|
|||
|
|
if (isH5 && isWeixinBrowser) {
|
|||
|
|
const invokePay = () => {
|
|||
|
|
// 注意：传递对象字段名必须与后端一致（package 字段名通常是 'package'）
|
|||
|
|
try {
|
|||
|
|
window.WeixinJSBridge.invoke(
|
|||
|
|
'getBrandWCPayRequest', {
|
|||
|
|
appId: data.appId,
|
|||
|
|
timeStamp: String(data.timeStamp), // 字符串
|
|||
|
|
nonceStr: data.nonceStr,
|
|||
|
|
package: data.package, // 注意字段名：package
|
|||
|
|
signType: data.signType || 'MD5',
|
|||
|
|
paySign: data.paySign
|
|||
|
|
},
|
|||
|
|
function(res) {
|
|||
|
|
// 微信返回结果
|
|||
|
|
// 成功: "get_brand_wcpay_request:ok"
|
|||
|
|
// 取消/失败: 其他值
|
|||
|
|
if (res && (res.err_msg === 'get_brand_wcpay_request:ok' || res.err_msg ===
|
|||
|
|
'get_brand_wcpay_request:ok')) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付成功'
|
|||
|
|
});
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/oldmanindex/paysuccess'
|
|||
|
|
})
|
|||
|
|
// resolve(res);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付失败或取消',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
// reject(res);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('WeixinJSBridge 调用异常', e);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付调用失败',
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (typeof window.WeixinJSBridge === 'undefined') {
|
|||
|
|
document.addEventListener('WeixinJSBridgeReady', invokePay, false);
|
|||
|
|
} else {
|
|||
|
|
invokePay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- 微信小程序（mp-weixin）: 使用 uni.requestPayment（需后端返回小程序支付签名字段） ---
|
|||
|
|
// if (isMpWeixin) {
|
|||
|
|
// data 里应该包含 timeStamp, nonceStr, package, signType, paySign, 或者后端直接给出 prepayId 等
|
|||
|
|
try {
|
|||
|
|
uni.requestPayment({
|
|||
|
|
provider: 'wxpay',
|
|||
|
|
timeStamp: String(data.timeStamp || data.timeStampStr || ''), // 小程序需要字符串
|
|||
|
|
nonceStr: data.nonceStr || '',
|
|||
|
|
package: data.package || data.packageStr || '', // e.g. 'prepay_id=xxx'
|
|||
|
|
signType: data.signType || 'MD5',
|
|||
|
|
paySign: data.paySign || '',
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付成功'
|
|||
|
|
});
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/oldmanindex/paysuccess'
|
|||
|
|
})
|
|||
|
|
resolve(res);
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('小程序支付失败或取消', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付失败或取消',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
reject(err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('uni.requestPayment 调用异常', e);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付调用失败',
|
|||
|
|
icon: 'error'
|
|||
|
|
});
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// --- 其它平台或 H5 非微信 浏览器 ---
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '无法发起支付',
|
|||
|
|
content: isH5 ?
|
|||
|
|
'当前在浏览器环境中无法直接发起微信支付，请在微信公众号内打开或使用小程序。' :
|
|||
|
|
'当前平台不支持微信支付，请使用微信小程序或公众号 H5 页面支付。',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
reject(new Error('unsupported platform for Weixin pay'));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #F7F7F7;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.title-back {
|
|||
|
|
margin-top: 100rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-father {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.back-img {
|
|||
|
|
width: 45rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-content {
|
|||
|
|
width: 94%;
|
|||
|
|
margin-left: 3%;
|
|||
|
|
height: 450rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 50rpx;
|
|||
|
|
|
|||
|
|
.white-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-second {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-center {
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
|
|||
|
|
.center-img {
|
|||
|
|
width: 45rpx;
|
|||
|
|
height: 35rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-right {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 25%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
margin-right: 50rpx;
|
|||
|
|
// margin: 0rpx auto;
|
|||
|
|
// margin-bottom: 50rpx;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-button {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 60%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
margin: 0rpx auto;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
|
|||
|
|
border-radius: 35rpx;
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bgc {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bgc-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-container {
|
|||
|
|
width: 90%;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
margin-left: 5%;
|
|||
|
|
height: 200rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding-left: 50rpx;
|
|||
|
|
border-radius: 35rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.white-container-top {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.white-container-bottom {
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.finish-button {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 44%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
// margin: 0rpx auto;
|
|||
|
|
margin-bottom: 80rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
background: linear-gradient(to right, #00C9FF, #0076FF);
|
|||
|
|
border-radius: 37rpx;
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-button {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 44%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
margin-bottom: 80rpx;
|
|||
|
|
border: 2rpx solid #c3cacd;
|
|||
|
|
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
|
|||
|
|
border-radius: 37rpx;
|
|||
|
|
font-size: 33rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|