diff --git a/package.json b/package.json index 200016c..e025c81 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.0.0", "antd": "^5.18.1", "axios": "^1.7.2", + "browser-image-compression": "^2.0.2", "echarts": "^5.5.0", "echarts-for-react": "^3.0.2", "i18next": "^23.11.5", diff --git a/src/http/api.ts b/src/http/api.ts index c595049..447674a 100644 --- a/src/http/api.ts +++ b/src/http/api.ts @@ -49,3 +49,12 @@ export const http_submit = (data: HttpRequestPs.Submit) => request({ url: '/v1/s export const http_notify = () => request({ url: '/v1/message' }) +export const http_upload = (data:File) => { + const body = new FormData() + body.append('file',data) + + return request({ + url: '/v1/uploadImg', + data: body, + }); +}; \ No newline at end of file diff --git a/src/http/service.ts b/src/http/service.ts index 4e315ff..d2fee97 100644 --- a/src/http/service.ts +++ b/src/http/service.ts @@ -23,6 +23,9 @@ service.interceptors.request.use( (config.headers as any).sign = sign; (config.headers as any).timestamp = timestamp; (config.headers as any).Token = store.state.token; + + if (config.data instanceof FormData) return config; + if (config.data) { config.data = JSON.stringify(config.data); } diff --git a/src/pages/deposit/index.tsx b/src/pages/deposit/index.tsx index c2ab664..3550e5e 100644 --- a/src/pages/deposit/index.tsx +++ b/src/pages/deposit/index.tsx @@ -1,32 +1,40 @@ -import { Button, Form, Input, QRCode, Select, Tag, Upload, notification } from 'antd' +import { Button, Divider, Form, Image, Input, Modal, QRCode, Select, Tag, Upload, notification } from 'antd' import '../../styles/home.scss' -import { http_depositAddress, http_transferDeposit } from '../../http/api' +import { http_depositAddress, http_transferDeposit, http_upload } from '../../http/api' import { useEffect, useRef, useState } from 'react' import { observer } from 'mobx-react' import store from '../../store' import { copy } from '../../utils' -import signGenerator from '../../http/sign' +import imageCompression from 'browser-image-compression'; + const Deposit = () => { const { userInfo, token } = store.state const [form] = Form.useForm() - const [receiveAdds, setReceiveAdds] = useState([] as any) - const [visibles, setVisibles] = useState(false) - const [urls, setUrls] = useState([] as any) - const amount = useRef('0') + const [receiveAdds, setReceiveAdds] = useState([]) + const [visibles, setVisibles] = useState([] as boolean[]) + const [urls, setUrls] = useState([] as (File | null)[]) + const amount = useRef([] as string[]) + const [imgUrl, setImgUrl] = useState([] as string[]) + const fileRef = useRef(null) + let [loading, setLoading] = useState([] as any) const getData = async () => { const res: any = await http_depositAddress() if (res.code === 0) { setReceiveAdds(res.data) + setLoading(res.data.map((_: any) => false)) + setVisibles(res.data.map((_: any) => false)) + amount.current = res.data.map((_: any) => '0') } } - const onFinish = (values: any) => { - amount.current = values.amount; + const onFinish = (values: any, index: number) => { + amount.current[index] = values.amount; + visibles[index] = true + setVisibles([...visibles]) form.resetFields() - setVisibles(true) } const validateAmount = (_: any, value: string) => { @@ -39,79 +47,85 @@ const Deposit = () => { return Promise.resolve(); } - const uploadProps = { - name: 'file', - action: `${process.env.REACT_APP_BASEURL}/api/v1/uploadImg`, - headers: { - sign: signGenerator({ - uri: '/api/v1/uploadImg', - timestamp: Date.now(), - args: '', - }), - Token: token, - timestamp: Date.now() as any - }, + const fileToBase64 = (file: File) => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); } - const onChange = (info: any, index: number) => { - if (info.file.status === 'removed') { - urls[index] && urls.splice(index, 1) - } + const submit = async (index: number) => { + const file = urls[index] + if (!file) return notification.warning({ message: '请上传付款凭证' }); + try { + loading[index] = true + setLoading([...loading]) + const compressedFile = await imageCompression(file, { + maxSizeMB: 0.5, + maxWidthOrHeight: 1080, + useWebWorker: true, + initialQuality: 1 + }); - if (info.file.status === 'done') { - if (info.file.response && info.file.response.code === 0) { - urls[index] = info.file.response.data.url - setUrls([...urls]) + const result: any = await http_upload(compressedFile) + if (result.code === 0) { + const res: any = await http_transferDeposit({ + url: result.data.url, + amount: amount.current[index] + }) + loading[index] = false + setLoading([...loading]) + if (res.code === 0) { + store.getUserInfo() + urls[index] = null + imgUrl[index] = '' + visibles[index] = false + setVisibles([...visibles]) + notification.success({ + message: '提交成功' + }) + } } - notification.success({ - message: `凭证上传成功` - }); - } else if (info.file.status === 'error') { - notification.error({ - message: `凭证上传失败` - }); - } - } - const submit = async (index: number) => { - const url = urls[index] - if (!url) return notification.warning({ message: '请上传付款凭证' }); - const res: any = await http_transferDeposit({ - url, - amount: amount.current - }) - if (res.code === 0) { - resetData() - setVisibles(false) - notification.success({ - message: '提交成功' - }) + } catch (error) { + loading[index] = false + setLoading([...loading]) } } - const resetData = () => { - setUrls([]) - amount.current = '0' + const onChange = async (fileList: FileList | null, index: number) => { + try { + if (fileList && fileList.length > 0) { + urls[index] = fileList[0] + console.log('当前文件大小', fileList[0].size / 1024 / 1024); + setUrls([...urls]) + fileToBase64(fileList[0]).then((res: any) => { + if (res) { + imgUrl[index] = res + setImgUrl([...imgUrl]) + } + }) + } + } catch (error) { + + } } useEffect(() => { getData() }, []) - useEffect(() => { - if (!visibles) { - resetData() - } - }, [visibles]) return (
-
setVisibles(false)}>办理存款
+
setVisibles(receiveAdds.map(v => false))}>办理存款
{ - !visibles && ( -
+ receiveAdds.map((item, index) => !visibles[index] && ( +
策略量化存款-存款注意事项
尊敬的客户,请您转账时务必仔细检查钱包地址全部一致。转账完毕后,请及时上传转账凭证。
@@ -120,7 +134,7 @@ const Deposit = () => {
onFinish(val, index)} form={form} > 存款到}> @@ -137,11 +151,11 @@ const Deposit = () => {
- ) + )) } { - visibles && receiveAdds.map((item: any, index: number) => ( + receiveAdds.map((item: any, index: number) => visibles[index] && (
策略量化存款-存款注意事项
@@ -162,16 +176,35 @@ const Deposit = () => {
上传付款凭证
- onChange(file, index)} - > - - + onChange(e.target.files, index)} style={{ display: 'none' }} /> +
+ { + imgUrl[index] ? ( + <> + + + + ) : ( +
fileRef.current!.click()}> +
+
+
上传付款凭证
+
+ ) + } + +
+
- +
diff --git a/src/styles/home.scss b/src/styles/home.scss index 89a9ee1..f33ccd1 100644 --- a/src/styles/home.scss +++ b/src/styles/home.scss @@ -61,6 +61,29 @@ box-shadow: 0 .05rem 0.04rem rgba(8, 5, 3, .03); border-radius: 5px; } + + .upload{ + width: 100px; + height: 100px; + border-style: dashed; + border-width: 1px; + border-color: #d2d6dd; + border-radius: 10px; + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + .delete{ + position: absolute; + top: 0; + right: 0; + z-index: 1; + } + + &:active{ + opacity: 0.6; + } + } } diff --git a/yarn.lock b/yarn.lock index d95772f..b3f33f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3308,6 +3308,13 @@ braces@^3.0.3, braces@~3.0.2: dependencies: fill-range "^7.1.1" +browser-image-compression@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/browser-image-compression/-/browser-image-compression-2.0.2.tgz#4d5ef8882e9e471d6d923715ceb9034499d14eaa" + integrity sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw== + dependencies: + uzip "0.20201231.0" + browser-process-hrtime@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" @@ -10167,6 +10174,11 @@ uuid@^8.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +uzip@0.20201231.0: + version "0.20201231.0" + resolved "https://registry.yarnpkg.com/uzip/-/uzip-0.20201231.0.tgz#9e64b065b9a8ebf26eb7583fe8e77e1d9a15ed14" + integrity sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng== + v8-to-istanbul@^8.1.0: version "8.1.1" resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"