component-sanzhizhou 1.3.6 → 1.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/pay/quick-pay.d.ts +17 -0
- package/dist/pay/quick-pay.js +241 -0
- package/dist/pay/quick-pay.less +79 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export { default as PayRecharge } from './pay/recharge';
|
|
|
18
18
|
export { default as PayVip } from './pay/vip';
|
|
19
19
|
export { default as PayQr } from './pay/qr';
|
|
20
20
|
export { default as PayChannel } from './pay/pay-channel';
|
|
21
|
+
export { default as QuickPay } from './pay/quick-pay';
|
|
21
22
|
export { default as IdTag } from './UI/id-tag';
|
|
22
23
|
export { default as CollectConfigPrice } from './collect-price';
|
|
23
24
|
export { CommercePlatform, default as ProductDetailLink, getProductDetailUrl, } from './lib/product-detail-link';
|
package/dist/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export { default as PayRecharge } from "./pay/recharge";
|
|
|
18
18
|
export { default as PayVip } from "./pay/vip";
|
|
19
19
|
export { default as PayQr } from "./pay/qr";
|
|
20
20
|
export { default as PayChannel } from "./pay/pay-channel";
|
|
21
|
+
export { default as QuickPay } from "./pay/quick-pay";
|
|
21
22
|
export { default as IdTag } from "./UI/id-tag";
|
|
22
23
|
export { default as CollectConfigPrice } from "./collect-price";
|
|
23
24
|
export { CommercePlatform, default as ProductDetailLink, getProductDetailUrl } from "./lib/product-detail-link";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './quick-pay.less';
|
|
3
|
+
export interface QuickPayProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
title?: React.ReactNode;
|
|
6
|
+
money?: number;
|
|
7
|
+
loadQr: () => Promise<string>;
|
|
8
|
+
checkPay: () => Promise<boolean>;
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
onSuccess?: () => void;
|
|
11
|
+
pollInterval?: number;
|
|
12
|
+
successDelay?: number;
|
|
13
|
+
size?: number;
|
|
14
|
+
extra?: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
declare const QuickPay: React.FC<QuickPayProps>;
|
|
17
|
+
export default QuickPay;
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
|
+
import { Button, Drawer, QRCode, Spin, Tag } from 'antd';
|
|
6
|
+
import { CheckCircleOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
7
|
+
import "./quick-pay.less";
|
|
8
|
+
// 快捷支付：抽屉 + 二维码 + 轮询支付状态。
|
|
9
|
+
// 参数都已默认配置好，调用方只需提供 loadQr / checkPay / 金额即可直接扫码支付。
|
|
10
|
+
var QuickPay = function QuickPay(_ref) {
|
|
11
|
+
var open = _ref.open,
|
|
12
|
+
_ref$title = _ref.title,
|
|
13
|
+
title = _ref$title === void 0 ? '扫码支付' : _ref$title,
|
|
14
|
+
money = _ref.money,
|
|
15
|
+
loadQr = _ref.loadQr,
|
|
16
|
+
checkPay = _ref.checkPay,
|
|
17
|
+
onClose = _ref.onClose,
|
|
18
|
+
onSuccess = _ref.onSuccess,
|
|
19
|
+
_ref$pollInterval = _ref.pollInterval,
|
|
20
|
+
pollInterval = _ref$pollInterval === void 0 ? 1500 : _ref$pollInterval,
|
|
21
|
+
_ref$successDelay = _ref.successDelay,
|
|
22
|
+
successDelay = _ref$successDelay === void 0 ? 1200 : _ref$successDelay,
|
|
23
|
+
_ref$size = _ref.size,
|
|
24
|
+
size = _ref$size === void 0 ? 240 : _ref$size,
|
|
25
|
+
extra = _ref.extra;
|
|
26
|
+
var _useState = useState(''),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
qrUrl = _useState2[0],
|
|
29
|
+
setQrUrl = _useState2[1];
|
|
30
|
+
var _useState3 = useState('loading'),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
qrStatus = _useState4[0],
|
|
33
|
+
setQrStatus = _useState4[1];
|
|
34
|
+
var _useState5 = useState(false),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
loadingQr = _useState6[0],
|
|
37
|
+
setLoadingQr = _useState6[1];
|
|
38
|
+
var _useState7 = useState(false),
|
|
39
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
40
|
+
payed = _useState8[0],
|
|
41
|
+
setPayed = _useState8[1];
|
|
42
|
+
var payedRef = useRef(false);
|
|
43
|
+
var loadIdRef = useRef(0);
|
|
44
|
+
var timerRef = useRef(null);
|
|
45
|
+
var closeTimerRef = useRef(null);
|
|
46
|
+
var onSuccessRef = useRef(onSuccess);
|
|
47
|
+
var onCloseRef = useRef(onClose);
|
|
48
|
+
var checkPayRef = useRef(checkPay);
|
|
49
|
+
onSuccessRef.current = onSuccess;
|
|
50
|
+
onCloseRef.current = onClose;
|
|
51
|
+
checkPayRef.current = checkPay;
|
|
52
|
+
var stopPoll = function stopPoll() {
|
|
53
|
+
if (timerRef.current) {
|
|
54
|
+
clearInterval(timerRef.current);
|
|
55
|
+
timerRef.current = null;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
var load = /*#__PURE__*/function () {
|
|
59
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
60
|
+
var loadId, url;
|
|
61
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
62
|
+
while (1) switch (_context.prev = _context.next) {
|
|
63
|
+
case 0:
|
|
64
|
+
loadId = ++loadIdRef.current;
|
|
65
|
+
setLoadingQr(true);
|
|
66
|
+
setQrStatus('loading');
|
|
67
|
+
setQrUrl('');
|
|
68
|
+
_context.prev = 4;
|
|
69
|
+
_context.next = 7;
|
|
70
|
+
return loadQr();
|
|
71
|
+
case 7:
|
|
72
|
+
url = _context.sent;
|
|
73
|
+
if (!(loadId !== loadIdRef.current)) {
|
|
74
|
+
_context.next = 10;
|
|
75
|
+
break;
|
|
76
|
+
}
|
|
77
|
+
return _context.abrupt("return");
|
|
78
|
+
case 10:
|
|
79
|
+
setQrUrl(url || '');
|
|
80
|
+
setQrStatus('active');
|
|
81
|
+
_context.next = 19;
|
|
82
|
+
break;
|
|
83
|
+
case 14:
|
|
84
|
+
_context.prev = 14;
|
|
85
|
+
_context.t0 = _context["catch"](4);
|
|
86
|
+
if (!(loadId !== loadIdRef.current)) {
|
|
87
|
+
_context.next = 18;
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
return _context.abrupt("return");
|
|
91
|
+
case 18:
|
|
92
|
+
setQrStatus('expired');
|
|
93
|
+
case 19:
|
|
94
|
+
_context.prev = 19;
|
|
95
|
+
if (loadId === loadIdRef.current) {
|
|
96
|
+
setLoadingQr(false);
|
|
97
|
+
}
|
|
98
|
+
return _context.finish(19);
|
|
99
|
+
case 22:
|
|
100
|
+
case "end":
|
|
101
|
+
return _context.stop();
|
|
102
|
+
}
|
|
103
|
+
}, _callee, null, [[4, 14, 19, 22]]);
|
|
104
|
+
}));
|
|
105
|
+
return function load() {
|
|
106
|
+
return _ref2.apply(this, arguments);
|
|
107
|
+
};
|
|
108
|
+
}();
|
|
109
|
+
useEffect(function () {
|
|
110
|
+
if (!open) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// 每次打开都重新拉码、重新轮询
|
|
115
|
+
payedRef.current = false;
|
|
116
|
+
setPayed(false);
|
|
117
|
+
stopPoll();
|
|
118
|
+
load();
|
|
119
|
+
timerRef.current = setInterval( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
120
|
+
var _onSuccessRef$current, ok;
|
|
121
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
122
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
123
|
+
case 0:
|
|
124
|
+
if (!payedRef.current) {
|
|
125
|
+
_context2.next = 2;
|
|
126
|
+
break;
|
|
127
|
+
}
|
|
128
|
+
return _context2.abrupt("return");
|
|
129
|
+
case 2:
|
|
130
|
+
_context2.prev = 2;
|
|
131
|
+
_context2.next = 5;
|
|
132
|
+
return checkPayRef.current();
|
|
133
|
+
case 5:
|
|
134
|
+
ok = _context2.sent;
|
|
135
|
+
if (ok) {
|
|
136
|
+
_context2.next = 8;
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
return _context2.abrupt("return");
|
|
140
|
+
case 8:
|
|
141
|
+
payedRef.current = true;
|
|
142
|
+
stopPoll();
|
|
143
|
+
setPayed(true);
|
|
144
|
+
(_onSuccessRef$current = onSuccessRef.current) === null || _onSuccessRef$current === void 0 || _onSuccessRef$current.call(onSuccessRef);
|
|
145
|
+
if (closeTimerRef.current) {
|
|
146
|
+
clearTimeout(closeTimerRef.current);
|
|
147
|
+
}
|
|
148
|
+
closeTimerRef.current = setTimeout(function () {
|
|
149
|
+
var _onCloseRef$current;
|
|
150
|
+
(_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
|
|
151
|
+
}, successDelay);
|
|
152
|
+
_context2.next = 18;
|
|
153
|
+
break;
|
|
154
|
+
case 16:
|
|
155
|
+
_context2.prev = 16;
|
|
156
|
+
_context2.t0 = _context2["catch"](2);
|
|
157
|
+
case 18:
|
|
158
|
+
case "end":
|
|
159
|
+
return _context2.stop();
|
|
160
|
+
}
|
|
161
|
+
}, _callee2, null, [[2, 16]]);
|
|
162
|
+
})), pollInterval);
|
|
163
|
+
return function () {
|
|
164
|
+
stopPoll();
|
|
165
|
+
};
|
|
166
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
167
|
+
}, [open]);
|
|
168
|
+
useEffect(function () {
|
|
169
|
+
return function () {
|
|
170
|
+
stopPoll();
|
|
171
|
+
if (closeTimerRef.current) {
|
|
172
|
+
clearTimeout(closeTimerRef.current);
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
}, []);
|
|
176
|
+
return /*#__PURE__*/React.createElement(Drawer, {
|
|
177
|
+
className: "ssz-quick-pay",
|
|
178
|
+
title: title,
|
|
179
|
+
open: open,
|
|
180
|
+
onClose: onClose,
|
|
181
|
+
width: 420,
|
|
182
|
+
destroyOnHidden: true
|
|
183
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
184
|
+
className: "ssz-quick-pay-body"
|
|
185
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
186
|
+
className: "ssz-quick-pay-money"
|
|
187
|
+
}, /*#__PURE__*/React.createElement("small", null, "\xA5"), /*#__PURE__*/React.createElement("span", {
|
|
188
|
+
className: "ssz-quick-pay-money-value"
|
|
189
|
+
}, loadingQr ? '...' : money !== null && money !== void 0 ? money : 0), /*#__PURE__*/React.createElement("small", null, "\u5143")), payed ? /*#__PURE__*/React.createElement("div", {
|
|
190
|
+
className: "ssz-quick-pay-success"
|
|
191
|
+
}, /*#__PURE__*/React.createElement(CheckCircleOutlined, {
|
|
192
|
+
className: "ssz-quick-pay-success-icon"
|
|
193
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
194
|
+
className: "ssz-quick-pay-success-text"
|
|
195
|
+
}, "\u652F\u4ED8\u6210\u529F"), /*#__PURE__*/React.createElement("div", {
|
|
196
|
+
className: "ssz-quick-pay-success-alt"
|
|
197
|
+
}, "\u6B63\u5728\u5904\u7406\uFF0C\u8BF7\u7A0D\u5019\u2026")) : /*#__PURE__*/React.createElement("div", {
|
|
198
|
+
className: "ssz-quick-pay-qr"
|
|
199
|
+
}, /*#__PURE__*/React.createElement(QRCode, {
|
|
200
|
+
type: "svg",
|
|
201
|
+
color: "#1990ff",
|
|
202
|
+
bgColor: "#FFF",
|
|
203
|
+
size: size,
|
|
204
|
+
value: qrUrl || '加载中',
|
|
205
|
+
status: qrStatus,
|
|
206
|
+
errorLevel: "L",
|
|
207
|
+
statusRender: function statusRender(info) {
|
|
208
|
+
if (info.status === 'loading') {
|
|
209
|
+
return /*#__PURE__*/React.createElement(Spin, {
|
|
210
|
+
size: "large"
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
if (info.status === 'scanned') {
|
|
214
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
215
|
+
className: "ssz-quick-pay-scanned"
|
|
216
|
+
}, /*#__PURE__*/React.createElement(CheckCircleOutlined, null), " \u5DF2\u626B\u7801");
|
|
217
|
+
}
|
|
218
|
+
if (info.status === 'expired') {
|
|
219
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
220
|
+
className: "ssz-quick-pay-expired"
|
|
221
|
+
}, /*#__PURE__*/React.createElement("div", null, "\u4E8C\u7EF4\u7801\u5DF2\u8FC7\u671F"), /*#__PURE__*/React.createElement("div", {
|
|
222
|
+
style: {
|
|
223
|
+
paddingTop: 18
|
|
224
|
+
}
|
|
225
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
226
|
+
type: "link",
|
|
227
|
+
icon: /*#__PURE__*/React.createElement(ReloadOutlined, null),
|
|
228
|
+
onClick: load
|
|
229
|
+
}, "\u5237\u65B0")));
|
|
230
|
+
}
|
|
231
|
+
return null;
|
|
232
|
+
}
|
|
233
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
234
|
+
className: "ssz-quick-pay-alt"
|
|
235
|
+
}, "\u8BF7\u4F7F\u7528\u652F\u4ED8\u5B9D\u626B\u7801\u652F\u4ED8")), extra ? /*#__PURE__*/React.createElement("div", {
|
|
236
|
+
className: "ssz-quick-pay-extra"
|
|
237
|
+
}, extra) : null, !payed && !loadingQr && /*#__PURE__*/React.createElement("div", {
|
|
238
|
+
className: "ssz-quick-pay-hint"
|
|
239
|
+
}, /*#__PURE__*/React.createElement(Tag, null, "\u652F\u4ED8\u6210\u529F\u540E\u81EA\u52A8\u5B8C\u6210"))));
|
|
240
|
+
};
|
|
241
|
+
export default QuickPay;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.ssz-quick-pay {
|
|
2
|
+
.ssz-quick-pay-body {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
align-items: center;
|
|
6
|
+
padding-top: 8px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ssz-quick-pay-money {
|
|
10
|
+
margin-bottom: 16px;
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
color: rgba(0, 0, 0, 0.85);
|
|
13
|
+
|
|
14
|
+
small {
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ssz-quick-pay-money-value {
|
|
19
|
+
font-size: 30px;
|
|
20
|
+
margin: 0 4px;
|
|
21
|
+
color: #ff4d4f;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ssz-quick-pay-qr {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ssz-quick-pay-alt {
|
|
32
|
+
margin-top: 14px;
|
|
33
|
+
font-size: 13px;
|
|
34
|
+
color: rgba(0, 0, 0, 0.45);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ssz-quick-pay-scanned,
|
|
38
|
+
.ssz-quick-pay-expired {
|
|
39
|
+
font-size: 13px;
|
|
40
|
+
color: rgba(0, 0, 0, 0.65);
|
|
41
|
+
text-align: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.ssz-quick-pay-success {
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
align-items: center;
|
|
48
|
+
padding: 40px 0;
|
|
49
|
+
|
|
50
|
+
.ssz-quick-pay-success-icon {
|
|
51
|
+
font-size: 48px;
|
|
52
|
+
color: #52c41a;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ssz-quick-pay-success-text {
|
|
56
|
+
margin-top: 12px;
|
|
57
|
+
font-size: 16px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ssz-quick-pay-success-alt {
|
|
62
|
+
margin-top: 6px;
|
|
63
|
+
font-size: 12px;
|
|
64
|
+
color: rgba(0, 0, 0, 0.45);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ssz-quick-pay-extra {
|
|
69
|
+
width: 100%;
|
|
70
|
+
margin-top: 20px;
|
|
71
|
+
text-align: center;
|
|
72
|
+
font-size: 12px;
|
|
73
|
+
color: rgba(0, 0, 0, 0.45);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ssz-quick-pay-hint {
|
|
77
|
+
margin-top: 20px;
|
|
78
|
+
}
|
|
79
|
+
}
|