252 lines
11 KiB
JavaScript
252 lines
11 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Card, Tag, List, Button, Modal, Form, Selector, Input, Popup, DatePicker } from 'antd-mobile';
|
|
import { QRCode, Alert } from 'antd';
|
|
import Styles from './web.mobile.module.less';
|
|
import dayJs from 'dayjs';
|
|
import duration from 'dayjs/plugin/duration';
|
|
dayJs.extend(duration);
|
|
import { CentToString } from 'oak-domain/lib/utils/money';
|
|
import { PayCircleOutline, GlobalOutline, InformationCircleOutline, CheckCircleOutline } from 'antd-mobile-icons';
|
|
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
|
|
export function RenderOffline(props) {
|
|
const { pay, t, offline, offlines, updateOfflineId, updateExternalId, mode } = props;
|
|
const { meta, iState, phantom3, externalId } = pay;
|
|
const { type, channel, name, qrCode, color } = offline || {};
|
|
const [show, setShow] = useState(false);
|
|
const items2 = [
|
|
<Form.Item key="type" label={<span className={Styles.bold}>{`${t('channel.prefix')}`}</span>}>
|
|
{iState === 'paying' && offlines.length > 1 ?
|
|
<Button onClick={() => setShow(true)}>{t(`offlineAccount:v.type.${type}`)}</Button> :
|
|
<span className={Styles.value}>{t(`offlineAccount:v.type.${type}`)}</span>}
|
|
</Form.Item>
|
|
];
|
|
if (type === 'bank') {
|
|
items2.push(<Form.Item key="channel" label={t('offlineAccount::label.channel.bank')}>
|
|
<span className={Styles.value}>{channel}</span>
|
|
</Form.Item>, <Form.Item key="name" label={t('offlineAccount::label.name.bank')}>
|
|
<span className={Styles.value}>{name}</span>
|
|
</Form.Item>, <Form.Item key="qrCode" label={t('offlineAccount::label.qrCode.bank')}>
|
|
<span className={Styles.value}>{qrCode}</span>
|
|
</Form.Item>);
|
|
}
|
|
else {
|
|
if (type === 'others') {
|
|
items2.push(<Form.Item key="channel" label={t('offlineAccount::label.channel.others')}>
|
|
<span className={Styles.value}>{channel}</span>
|
|
</Form.Item>);
|
|
}
|
|
if (name) {
|
|
items2.push(<Form.Item key="name" label={t(`offlineAccount::label.name.${type}`)}>
|
|
<span className={Styles.value}>{name}</span>
|
|
</Form.Item>);
|
|
}
|
|
if (qrCode) {
|
|
items2.push(<Form.Item key="qrCode" label={t(`offlineAccount::label.qrCode.${type}`)}>
|
|
<span className={Styles.qrCode} onClick={() => Modal.show({
|
|
content: <QRCode style={{ width: '70vw', height: '70vw' }} value={qrCode} color={color}/>,
|
|
closeOnMaskClick: true,
|
|
})}>
|
|
<QRCode value={qrCode} size={110} color={color}/>
|
|
</span>
|
|
</Form.Item>);
|
|
}
|
|
}
|
|
items2.push(<Form.Item key="code" label={<span className={Styles.bold}>{t('code.label')}</span>}>
|
|
<Tag color="red">
|
|
<span style={{ fontSize: 'large' }}>{phantom3}</span>
|
|
</Tag>
|
|
</Form.Item>, <Form.Item key="externalId" label={<span className={Styles.bold}>{t('externalId.label')}</span>} help={iState === 'paying' && t('externalId.help')}>
|
|
<Input autoFocus value={externalId || ''} onChange={(value) => {
|
|
updateExternalId(value);
|
|
}} placeholder={t('externalId.placeholder')} disabled={iState !== 'paying' && mode === 'frontend'}/>
|
|
</Form.Item>);
|
|
return (<>
|
|
<Popup visible={show} onMaskClick={() => {
|
|
setShow(false);
|
|
}} onClose={() => {
|
|
setShow(false);
|
|
}} position='bottom' bodyStyle={{ padding: 18 }}>
|
|
<Selector options={offlines.map(ele => ({
|
|
label: t(`offlineAccount:v.type.${ele.type}`),
|
|
value: ele.id,
|
|
}))} value={offline ? [offline.id] : []} onChange={(arr) => {
|
|
updateOfflineId(arr[0]);
|
|
setShow(false);
|
|
}}/>
|
|
</Popup>
|
|
<Form layout="horizontal" style={{ width: '100%', marginTop: 10 }}>
|
|
{items2}
|
|
</Form>
|
|
</>);
|
|
}
|
|
function Counter(props) {
|
|
const { deadline } = props;
|
|
const [counter, setCounter] = useState('');
|
|
const timerFn = () => {
|
|
const now = Date.now();
|
|
if (now < deadline) {
|
|
const duration = dayJs.duration(deadline - now);
|
|
setCounter(duration.format('HH:mm:ss'));
|
|
setTimeout(timerFn, 1000);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
timerFn();
|
|
}, []);
|
|
return (<div className={Styles.counter}>{counter}</div>);
|
|
}
|
|
function RenderWechatPay(props) {
|
|
const { pay, t } = props;
|
|
const { externalId, wpProduct, timeoutAt, iState } = pay;
|
|
if (iState === 'paid') {
|
|
return (<div className={Styles.paid}>
|
|
<CheckCircleOutline fontSize={72} fontWeight="bold" color="green"/>
|
|
<div className={Styles.text}>
|
|
{t('success')}
|
|
</div>
|
|
</div>);
|
|
}
|
|
switch (wpProduct.type) {
|
|
case 'native': {
|
|
if (iState === 'paying') {
|
|
return (<>
|
|
<Counter deadline={timeoutAt}/>
|
|
<QRCode value={externalId} size={280} color="#04BE02"/>
|
|
<div className={Styles.qrCodeTips}>
|
|
{process.env.NODE_ENV === 'production' ?
|
|
<Alert type="info" message={t('wechat.native.tips')}/> :
|
|
<Alert type="warning" message={t('wechat.native.tips2')}/>}
|
|
</div>
|
|
</>);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
function RenderPayMeta(props) {
|
|
const { pay, notSameApp, t, offlines, offline, updateOfflineId, updateExternalId, mode } = props;
|
|
const { iState, entity } = pay;
|
|
if (entity !== 'offlineAccount' && notSameApp) {
|
|
return <Alert type='warning' message={t('notSameApp')}/>;
|
|
}
|
|
switch (entity) {
|
|
case 'offlineAccount': {
|
|
if (offline && offlines) {
|
|
return (<>
|
|
{iState === 'paying' && mode === 'frontend' ? <Alert type='info' message={t('code.help.frontend')}/> : null}
|
|
{['unpaid', 'paying'].includes(iState) && mode === 'backend' ? <Alert type='info' message={t('code.help.backend')}/> : null}
|
|
<RenderOffline t={t} pay={pay} mode={mode} offline={offline} offlines={offlines} updateOfflineId={updateOfflineId} updateExternalId={updateExternalId}/>
|
|
</>);
|
|
}
|
|
return null;
|
|
}
|
|
case 'wpProduct': {
|
|
return <RenderWechatPay pay={pay} t={t}/>;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
export default function Render(props) {
|
|
const { pay, iStateColor, notSameApp, type, startPayable, autoSuccessAt, succeedable, goBackable, oakExecutable, onClose, closable, offline, offlines, mode } = props.data;
|
|
const { t, update, execute, clean, goBack, startPay, succeed } = props.methods;
|
|
const [showSa, setShowSa] = useState(false);
|
|
if (pay) {
|
|
const { iState, price, entity } = pay;
|
|
const BtnPart2 = [];
|
|
if (succeedable) {
|
|
BtnPart2.push(<Button block color="primary" onClick={() => {
|
|
if (autoSuccessAt) {
|
|
succeed(Date.now());
|
|
}
|
|
else {
|
|
setShowSa(true);
|
|
}
|
|
}}>
|
|
{t('pay:action.succeedPaying')}
|
|
</Button>);
|
|
}
|
|
else if (startPayable) {
|
|
BtnPart2.push(<Button block style={{ backgroundColor: '#04BE02' }} className={Styles.btnWechatPay} onClick={() => startPay()}>
|
|
{t('pay')}
|
|
</Button>);
|
|
}
|
|
else if (oakExecutable === true) {
|
|
BtnPart2.push(<div className={Styles.btnItem}>
|
|
<Button block color='primary' onClick={() => execute()}>
|
|
{t('common::action.update')}
|
|
</Button>
|
|
</div>, <div className={Styles.btnItem}>
|
|
<Button block onClick={() => clean()}>
|
|
{t('common::reset')}
|
|
</Button>
|
|
</div>);
|
|
}
|
|
if (closable && BtnPart2.length < 2) {
|
|
BtnPart2.push(<Button block color="danger" onClick={() => {
|
|
Modal.confirm({
|
|
title: t('cc.title'),
|
|
content: t('cc.content'),
|
|
onConfirm: async () => {
|
|
await execute('close');
|
|
onClose();
|
|
}
|
|
});
|
|
}}>
|
|
{t('pay:action.close')}
|
|
</Button>);
|
|
}
|
|
if (goBackable && BtnPart2.length < 2) {
|
|
BtnPart2.push(<Button block onClick={goBack}>
|
|
{t('common::back')}
|
|
</Button>);
|
|
}
|
|
// @oak-ignore
|
|
return (<div className={Styles.container}>
|
|
<Card title={t('title')} extra={<Tag color={iStateColor}>{t(`pay:v.iState.${iState}`)}</Tag>}>
|
|
<div>
|
|
<List>
|
|
<List.Item prefix={<InformationCircleOutline />} extra={t(`type.${type}`)}>
|
|
{t('type.label')}
|
|
</List.Item>
|
|
<List.Item prefix={<PayCircleOutline />} extra={CentToString(price, 2)}>
|
|
{t('pay:attr.price')}
|
|
</List.Item>
|
|
<List.Item prefix={<GlobalOutline />} extra={t(`payChannel::${entity}`)}>
|
|
{t('pay:attr.entity')}
|
|
</List.Item>
|
|
</List>
|
|
</div>
|
|
</Card>
|
|
<div className={Styles.meta}>
|
|
<RenderPayMeta pay={pay} t={t} mode={mode} notSameApp={notSameApp} offline={offline} offlines={offlines} updateOfflineId={async (entityId) => {
|
|
execute(undefined, undefined, undefined, [
|
|
{
|
|
entity: 'pay',
|
|
operation: {
|
|
id: await generateNewIdAsync(),
|
|
action: 'update',
|
|
data: {
|
|
entity: 'offlineAccount',
|
|
entityId,
|
|
},
|
|
filter: {
|
|
id: props.data.oakId,
|
|
},
|
|
}
|
|
}
|
|
]);
|
|
}} updateExternalId={(externalId) => {
|
|
update({ externalId });
|
|
}}/>
|
|
</div>
|
|
<div className={Styles.padding}/>
|
|
<div className={Styles.btn}>
|
|
{BtnPart2}
|
|
</div>
|
|
<DatePicker title={t('successAt.title')} visible={showSa} onClose={() => setShowSa(false)} max={new Date()} onConfirm={val => succeed(val.valueOf())}/>
|
|
</div>);
|
|
}
|
|
return null;
|
|
}
|