97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// ONE-OS 小程序 - 还车应结款审批办理（参照 web 端还车应结款-查看，适配移动端）
|
||
|
||
// 独立预览页：完整审批能力已内嵌于「审批中心.jsx」，本页供 Axhub 单独打开预览。
|
||
|
||
const { useState, useMemo, useRef, useEffect } = React;
|
||
const moment = window.moment || window.dayjs;
|
||
|
||
const COLOR_PRIMARY = '#16D1A1';
|
||
const COLOR_PRIMARY_DEEP = '#00BFA5';
|
||
const COLOR_PRIMARY_SOFT = 'rgba(22, 209, 161, 0.12)';
|
||
const COLOR_TEXT = '#1D2129';
|
||
const COLOR_TEXT_SEC = '#4E5969';
|
||
const COLOR_MUTED = '#86909C';
|
||
const COLOR_LINE = '#E5E6EB';
|
||
const COLOR_BG = '#FFFFFF';
|
||
const COLOR_PAGE = '#F2F3F5';
|
||
const COLOR_SUCCESS = '#00B42A';
|
||
const COLOR_DANGER = '#F53F3F';
|
||
const COLOR_WARN = '#FF7D00';
|
||
const FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif';
|
||
|
||
const antd = (() => {
|
||
const raw = window.antd;
|
||
if (!raw) return {};
|
||
return raw.default && typeof raw.default === 'object' ? { ...raw, ...raw.default } : raw;
|
||
})();
|
||
const message = antd.message || { info: () => {}, success: () => {}, warning: () => {} };
|
||
const Drawer = antd.Drawer;
|
||
|
||
const formatMoney = (val) => {
|
||
const n = parseFloat(val);
|
||
if (Number.isNaN(n)) return val || '—';
|
||
return `¥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||
};
|
||
const formatYuan = (val) => {
|
||
const n = parseFloat(val);
|
||
if (Number.isNaN(n)) return '—';
|
||
return `${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} 元`;
|
||
};
|
||
|
||
const DEFAULT_TASK = {
|
||
bizNo: 'HC-2026-0418',
|
||
plateNo: '粤B58888F',
|
||
customerName: '嘉兴某某物流有限公司',
|
||
projectName: '嘉兴腾4.5T租赁',
|
||
pendingSettle: '927.50',
|
||
depositAmount: '5000.00',
|
||
refundTotal: '4072.50',
|
||
payTotal: '0.00',
|
||
actualRent: '0.00',
|
||
};
|
||
|
||
const Component = function ReturnSettlementApproveStandalone() {
|
||
const task = window.__returnSettlementTask || DEFAULT_TASK;
|
||
|
||
const handleBack = () => {
|
||
if (window.__returnSettlementBack) window.__returnSettlementBack();
|
||
else message.info('返回审批中心（原型）');
|
||
};
|
||
|
||
return (
|
||
<div className="hc-mini-root">
|
||
<style>{`
|
||
.hc-mini-root { min-height:100dvh; background:linear-gradient(165deg,#e8ebef 0%,${COLOR_PAGE} 40%); display:flex; justify-content:center; padding:16px 12px 32px; font-family:${FONT_FAMILY}; }
|
||
.hc-phone { width:100%; max-width:390px; min-height:844px; background:${COLOR_PAGE}; border-radius:28px; overflow:hidden; box-shadow:0 24px 48px rgba(15,23,42,.14); display:flex; flex-direction:column; position:relative; }
|
||
.hc-chrome { background:${COLOR_BG}; border-bottom:1px solid rgba(0,0,0,.05); padding:44px 8px 0; }
|
||
.hc-nav { height:48px; display:flex; align-items:center; position:relative; }
|
||
.hc-nav-title { flex:1; text-align:center; font-size:17px; font-weight:700; }
|
||
.hc-back { width:40px; height:40px; border:none; background:transparent; cursor:pointer; }
|
||
.hc-tip { padding:24px; text-align:center; color:${COLOR_MUTED}; font-size:14px; line-height:1.6; }
|
||
`}</style>
|
||
<div className="hc-phone">
|
||
<div className="hc-chrome">
|
||
<div className="hc-nav">
|
||
<button type="button" className="hc-back" onClick={handleBack} aria-label="返回">←</button>
|
||
<div className="hc-nav-title">还车应结款审批</div>
|
||
<span style={{ width: 40 }} />
|
||
</div>
|
||
</div>
|
||
<div className="hc-tip">
|
||
完整还车应结款审批页（含结算明细、费用分组、审批操作）已内嵌于
|
||
<strong> 审批中心.jsx </strong>
|
||
，请从「我的待办 → 还车应结款 HC-2026-0418 → 去审批」进入体验。
|
||
<br /><br />
|
||
待结算总额：<strong style={{ color: '#8B5CF6' }}>{formatMoney(task.pendingSettle)}</strong>
|
||
<br />
|
||
{task.plateNo} · {task.customerName}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
if (typeof window !== 'undefined') window.Component = Component;
|
||
export default Component;
|