add epay

web/src/pages/TopUp/index.js

@@ -1,103 +1,236 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Segment, Statistic } from 'semantic-ui-react';
-import { API, showError, showInfo, showSuccess } from '../../helpers';
-import { renderQuota } from '../../helpers/render';
+import React, {useEffect, useState} from 'react';
+import {Button, Form, Grid, Header, Segment, Statistic} from 'semantic-ui-react';
+import {API, showError, showInfo, showSuccess} from '../../helpers';
+import {renderNumber, renderQuota} from '../../helpers/render';
 
 const TopUp = () => {
-  const [redemptionCode, setRedemptionCode] = useState('');
-  const [topUpLink, setTopUpLink] = useState('');
-  const [userQuota, setUserQuota] = useState(0);
-  const [isSubmitting, setIsSubmitting] = useState(false);
+    const [redemptionCode, setRedemptionCode] = useState('');
+    const [topUpCode, setTopUpCode] = useState('');
+    const [topUpCount, setTopUpCount] = useState(10);
+    const [amount, setAmount] = useState(0);
+    const [topUpLink, setTopUpLink] = useState('');
+    const [userQuota, setUserQuota] = useState(0);
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const topUp = async () => {
-    if (redemptionCode === '') {
-      showInfo('请输入充值码！')
-      return;
-    }
-    setIsSubmitting(true);
-    try {
-      const res = await API.post('/api/user/topup', {
-        key: redemptionCode
-      });
-      const { success, message, data } = res.data;
-      if (success) {
-        showSuccess('充值成功！');
-        setUserQuota((quota) => {
-          return quota + data;
-        });
-        setRedemptionCode('');
-      } else {
-        showError(message);
-      }
-    } catch (err) {
-      showError('请求失败');
-    } finally {
-      setIsSubmitting(false); 
-    }
-  };
+    const topUp = async () => {
+        if (redemptionCode === '') {
+            showInfo('请输入充值码！')
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const res = await API.post('/api/user/topup', {
+                key: redemptionCode
+            });
+            const {success, message, data} = res.data;
+            if (success) {
+                showSuccess('充值成功！');
+                setUserQuota((quota) => {
+                    return quota + data;
+                });
+                setRedemptionCode('');
+            } else {
+                showError(message);
+            }
+        } catch (err) {
+            showError('请求失败');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
 
-  const openTopUpLink = () => {
-    if (!topUpLink) {
-      showError('超级管理员未设置充值链接！');
-      return;
-    }
-    window.open(topUpLink, '_blank');
-  };
+    const openTopUpLink = () => {
+        if (!topUpLink) {
+            showError('超级管理员未设置充值链接！');
+            return;
+        }
+        window.open(topUpLink, '_blank');
+    };
 
-  const getUserQuota = async ()=>{
-    let res  = await API.get(`/api/user/self`);
-    const {success, message, data} = res.data;
-    if (success) {
-      setUserQuota(data.quota);
-    } else {
-      showError(message);
+    const onlineTopUp = async (payment) => {
+        if (amount === 0) {
+            await getAmount();
+        }
+        try {
+            const res = await API.post('/api/user/pay', {
+                amount: parseInt(topUpCount),
+                top_up_code: topUpCode,
+                PaymentMethod: payment
+            });
+            if (res !== undefined) {
+                const {message, data} = res.data;
+                // showInfo(message);
+                if (message === 'success') {
+                    let params = data
+                    let url = res.data.url
+                    let form = document.createElement('form')
+                    form.action = url
+                    form.method = 'POST'
+                    form.target = '_blank'
+                    for (let key in params) {
+                        let input = document.createElement('input')
+                        input.type = 'hidden'
+                        input.name = key
+                        input.value = params[key]
+                        form.appendChild(input)
+                    }
+                    document.body.appendChild(form)
+                    form.submit()
+                    document.body.removeChild(form)
+                } else {
+                    showError(message);
+                    // setTopUpCount(parseInt(res.data.count));
+                    setAmount(parseInt(data));
+                }
+            } else {
+                showError(res);
+            }
+        } catch (err) {
+            console.log(err);
+        } finally {
+        }
     }
-  }
 
-  useEffect(() => {
-    let status = localStorage.getItem('status');
-    if (status) {
-      status = JSON.parse(status);
-      if (status.top_up_link) {
-        setTopUpLink(status.top_up_link);
-      }
+    const getUserQuota = async () => {
+        let res = await API.get(`/api/user/self`);
+        const {success, message, data} = res.data;
+        if (success) {
+            setUserQuota(data.quota);
+        } else {
+            showError(message);
+        }
     }
-    getUserQuota().then();
-  }, []);
 
-  return (
-    <Segment>
-      <Header as='h3'>充值额度</Header>
-      <Grid columns={2} stackable>
-        <Grid.Column>
-          <Form>
-            <Form.Input
-              placeholder='兑换码'
-              name='redemptionCode'
-              value={redemptionCode}
-              onChange={(e) => {
-                setRedemptionCode(e.target.value);
-              }}
-            />
-            <Button color='green' onClick={openTopUpLink}>
-              获取兑换码
-            </Button>
-            <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
-                {isSubmitting ? '兑换中...' : '兑换'}
-            </Button>
-          </Form>
-        </Grid.Column>
-        <Grid.Column>
-          <Statistic.Group widths='one'>
-            <Statistic>
-              <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
-              <Statistic.Label>剩余额度</Statistic.Label>
-            </Statistic>
-          </Statistic.Group>
-        </Grid.Column>
-      </Grid>
-    </Segment>
-  );
+    useEffect(() => {
+        let status = localStorage.getItem('status');
+        if (status) {
+            status = JSON.parse(status);
+            if (status.top_up_link) {
+                setTopUpLink(status.top_up_link);
+            }
+        }
+        getUserQuota().then();
+    }, []);
+
+    const renderAmount = () => {
+        console.log(amount);
+        return amount + '元';
+    }
+
+    const getAmount = async (value) => {
+        if (value === undefined) {
+            value = topUpCount;
+        }
+        try {
+            const res = await API.post('/api/user/amount', {
+                amount: parseFloat(value),
+                top_up_code: topUpCode
+            });
+            if (res !== undefined) {
+                const {message, data} = res.data;
+                // showInfo(message);
+                if (message === 'success') {
+                    setAmount(parseInt(data));
+                } else {
+                    showError(message);
+                    // setTopUpCount(parseInt(res.data.count));
+                    setAmount(parseInt(data));
+                }
+            } else {
+                showError(res);
+            }
+        } catch (err) {
+            console.log(err);
+        } finally {
+        }
+    }
+
+    return (
+        <div>
+            <Segment>
+                <Header as='h3'>充值额度</Header>
+                <Grid columns={2} stackable>
+                    <Grid.Column>
+                        <Form>
+                            <Form.Input
+                                placeholder='兑换码'
+                                name='redemptionCode'
+                                value={redemptionCode}
+                                onChange={(e) => {
+                                    setRedemptionCode(e.target.value);
+                                }}
+                            />
+                            {/*<Button color='green' onClick={openTopUpLink}>*/}
+                            {/*  获取兑换码*/}
+                            {/*</Button>*/}
+                            <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
+                                {isSubmitting ? '兑换中...' : '兑换'}
+                            </Button>
+                        </Form>
+                    </Grid.Column>
+                    <Grid.Column>
+                        <Statistic.Group widths='one'>
+                            <Statistic>
+                                <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
+                                <Statistic.Label>剩余额度</Statistic.Label>
+                            </Statistic>
+                        </Statistic.Group>
+                    </Grid.Column>
+                </Grid>
+            </Segment>
+            <Segment>
+                <Header as='h3'>在线充值（最小10刀）</Header>
+                <Grid columns={2} stackable>
+                    <Grid.Column>
+                        <Form>
+                            <Form.Input
+                                placeholder='充值金额，最低10,最高400'
+                                name='redemptionCount'
+                                type={'number'}
+                                value={topUpCount}
+                                autoComplete={'off'}
+                                onChange={async (e) => {
+                                    setTopUpCount(e.target.value);
+                                    await getAmount(e.target.value);
+                                }}
+                            />
+                            <Form.Input
+                                placeholder='充值码，如果你没有充值码，可不填写'
+                                name='redemptionCount'
+                                value={topUpCode}
+                                onChange={(e) => {
+                                    setTopUpCode(e.target.value);
+                                }}
+                            />
+                            <Button color='blue' onClick={
+                                async () => {
+                                    onlineTopUp('zfb')
+                                }
+                            }>
+                                支付宝（最大400元）
+                            </Button>
+                            <Button color='green' onClick={
+                                async () => {
+                                    onlineTopUp('wx')
+                                }
+                            }>
+                                微信（最大600元）
+                            </Button>
+                        </Form>
+                    </Grid.Column>
+                    <Grid.Column>
+                        <Statistic.Group widths='one'>
+                            <Statistic>
+                                <Statistic.Value>{renderAmount()}</Statistic.Value>
+                                <Statistic.Label>支付金额</Statistic.Label>
+                            </Statistic>
+                        </Statistic.Group>
+                    </Grid.Column>
+                </Grid>
+            </Segment>
+        </div>
+
+    );
 };
 
 export default TopUp;