[需求]
业主小程序车辆缴费页不能再默认把所有欠费账单合并支付。因为长租车过期后可能同时存在:
1. 月租补缴账单
2. 长租过期期间产生的临停账单
3. 普通临停账单
其中第 2 类“长租过期临停”在月租账单支付成功后,后端会自动作废,不需要用户重复缴纳。
[结果]

[对接方案]
主要改业主小程序车辆缴费页:
src/subPackages/parking/parking/placePay.vue
车辆详情页只负责跳转:
src/subPackages/parking/parking/car.vue
一般不用改。
数据来源接口
车辆详情接口:
GET /miniapp/parking/vehicle/detail/{vehicleId}
前端从返回值里取未付账单,优先级:
detail.outstandingBills
detail.arrearsDetail
建议仍然优先用 outstandingBills,没有再兜底 arrearsDetail。
每笔账单重点字段:
{
billId: number; // 支付时传这个
amount: number; // 金额
feeTemplateType: number; // 0=月租/租赁,1=临停
billType?: number; // 兼容字段,部分接口可能返回
tempBillSource?: number; // 临停来源:0=普通临停,1=长租过期临停
validFrom: string; // 账单开始时间
validTo: string; // 账单结束时间
feeTemplateTypeName?: string;
billTypeName?: string;
}
字段判断规则
前端不要自己根据时间推断是不是长租过期临停,必须以后端字段为准。
const LEASE = 0;
const TEMP = 1;
const LEASE_EXPIRED_TEMP = 1;
function getBillType(item) {
return Number(item.feeTemplateType ?? item.billType);
}
function isLeaseBill(item) {
return getBillType(item) === LEASE;
}
function isTempBill(item) {
return getBillType(item) === TEMP;
}
function isLeaseExpiredTempBill(item) {
return isTempBill(item) && Number(item.tempBillSource) === LEASE_EXPIRED_TEMP;
}
function isNormalTempBill(item) {
return isTempBill(item) && !isLeaseExpiredTempBill(item);
}
页面展示规则
账单要展示成可勾选卡片,不要再直接全量合并支付。
每张卡片展示:
账单类型
金额
欠费天数
开始时间
结束时间
类型文案建议:
月租账单:显示“月租账单”或收费标准名称
长租过期临停:显示“临停收费” + 标签“长租过期临停”
普通临停:显示“临停收费” + 标签“普通临停”
默认勾选规则
进入页面后:
如果存在月租账单:默认只勾选月租账单
如果不存在月租账单:默认勾选所有可支付临停账单
不要默认选中“月租 + 临停”。
示例:
月租账单:300.00
长租过期临停:0.06
默认应付金额应该是:
300.00
不是:
300.06
勾选限制
后端现在支持多笔账单一起支付,但前端必须限制:
同类型账单可以多选
月租账单和临停账单不能混选
用户当前选了月租,再点临停时:
取消原来的月租选择,只选当前临停账单
toast:月租和临停不能合并支付,已切换为当前账单
用户当前选了临停,再点月租时同理。
顶部提示文案
当页面同时有月租和临停时显示提示。
如果同时有“长租过期临停”和“普通临停”:
临停账单分两类:长租过期临停会在月租支付成功后自动作废;普通临停不会作废,需要单独勾选缴纳。
如果只有“长租过期临停”:
已默认选择月租账单。当前临停账单属于长租过期期间产生的费用,月租支付成功后会自动作废,无需重复缴纳。
如果只有“普通临停”:
当前临停账单属于普通临停费用,不会随月租缴费作废;如需处理请单独勾选缴纳。
支付接口
欠费缴纳接口:
POST /miniapp/parking/bill/payArrears
请求体:
{
"billIds": [10824],
"paymentChannel": "WECHAT"
}
注意:只传用户当前勾选的账单 ID。
不要传全部账单 ID。
错误示例:
{
"billIds": [10824, 10828],
"paymentChannel": "WECHAT"
}
如果 10824 是月租,10828 是临停,这种不能传。
支付后流程
用户支付月租账单成功后:
1. 微信支付成功
2. 后端收到支付回调
3. 月租账单改为已支付
4. 车辆有效期更新
5. 后端自动作废 tempBillSource=1 的长租过期临停账单
6. 前端返回停车首页或刷新车辆详情
前端支付成功后建议:
uni.showToast({ title: '支付成功', icon: 'success' });
setTimeout(() => {
// 返回停车首页,或者重新拉详情刷新
}, 1500);
关键示例
场景 1:只有月租补缴 + 长租过期临停
月租账单:300.00
长租过期临停:0.06
页面效果:
默认选中:月租账单
应付金额:300.00
临停账单显示标签:长租过期临停
用户支付 300 成功后,0.06 后端自动作废。
场景 2:月租补缴 + 普通临停
月租账单:300.00
普通临停:12.00
页面效果:
默认选中:月租账单
应付金额:300.00
普通临停显示标签:普通临停
用户支付 300 成功后,12 元普通临停不会作废。如果用户要处理 12 元,需要单独勾选支付。
场景 3:只有多笔普通临停
普通临停:6.00
普通临停:12.00
页面效果:
可以多选
应付金额 = 已勾选临停账单金额合计
可以传:
{
"billIds": [1001, 1002],
"paymentChannel": "WECHAT"
}
前端注意事项
1. 不要根据 validFrom/validTo 自己判断“长租过期临停”,只认 tempBillSource=1。
2. tempBillSource 缺失时,按普通临停处理,不要显示“长租过期临停”。
3. 支付金额必须用已勾选账单金额合计,不要用 detail.arrearsAmount。
4. 支付按钮禁用条件:没有勾选账单、正在支付中。
5. 微信开发者工具测试时,后端重启后要重新编译或清缓存,否则可能还看到旧页面或旧接口结果。