完善兑换码界面

web/src/pages/Redemption/EditRedemption.js

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
+import {API, downloadTextAsFile, isMobile, showError, showSuccess} from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+import {SideSheet, Space, Spin, Button, Input, Typography, AutoComplete, Modal} from "@douyinfe/semi-ui";
+import Title from "@douyinfe/semi-ui/lib/es/typography/title";
+import {Divider} from "semantic-ui-react";
 
-const EditRedemption = () => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const redemptionId = params.id;
-  const isEdit = redemptionId !== undefined;
+const EditRedemption = (props) => {
+  const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
+
+  const params = useParams();
+  const navigate = useNavigate()
   const originInputs = {
     name: '',
     quota: 100000,
@@ -19,15 +21,16 @@ const EditRedemption = () => {
   const { name, quota, count } = inputs;
 
   const handleCancel = () => {
-    navigate('/redemption');
-  };
+    props.handleClose();
+  }
   
-  const handleInputChange = (e, { name, value }) => {
+  const handleInputChange = (name, value) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
 
   const loadRedemption = async () => {
-    let res = await API.get(`/api/redemption/${redemptionId}`);
+    setLoading(true);
+    let res = await API.get(`/api/redemption/${props.editingRedemption.id}`);
     const { success, message, data } = res.data;
     if (success) {
       setInputs(data);
@@ -36,20 +39,28 @@ const EditRedemption = () => {
     }
     setLoading(false);
   };
+
   useEffect(() => {
     if (isEdit) {
-      loadRedemption().then();
+      loadRedemption().then(
+          () => {
+            // console.log(inputs);
+          }
+      );
+    } else {
+      setInputs(originInputs);
     }
-  }, []);
+  }, [props.editingRedemption.id]);
 
   const submit = async () => {
     if (!isEdit && inputs.name === '') return;
+    setLoading(true);
     let localInputs = inputs;
     localInputs.count = parseInt(localInputs.count);
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(props.editingRedemption.id) });
     } else {
       res = await API.post(`/api/redemption/`, {
         ...localInputs
@@ -59,9 +70,13 @@ const EditRedemption = () => {
     if (success) {
       if (isEdit) {
         showSuccess('兑换码更新成功！');
+        props.refresh();
+        props.handleClose();
       } else {
         showSuccess('兑换码创建成功！');
         setInputs(originInputs);
+        props.refresh();
+        props.handleClose();
       }
     } else {
       showError(message);
@@ -71,56 +86,94 @@ const EditRedemption = () => {
       for (let i = 0; i < data.length; i++) {
         text += data[i] + "\n";
       }
-      downloadTextAsFile(text, `${inputs.name}.txt`);
+      // downloadTextAsFile(text, `${inputs.name}.txt`);
+      Modal.confirm({
+        title: '兑换码创建成功',
+        content: (
+            <div>
+                <p>兑换码创建成功，是否下载兑换码？</p>
+                <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
+            </div>
+        ),
+        onOk: () => {
+            downloadTextAsFile(text, `${inputs.name}.txt`);
+        }
+      });
     }
+    setLoading(false);
   };
 
   return (
     <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
+      <SideSheet
+          placement={isEdit ? 'right' : 'left'}
+          title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
+          headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+          bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+          visible={props.visiable}
+          footer={
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <Space>
+                <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
+                <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              </Space>
+            </div>
+          }
+          closeIcon={null}
+          onCancel={() => handleCancel()}
+          width={isMobile() ? '100%' : 600}
+      >
+        <Spin spinning={loading}>
+          <Input
+              style={{ marginTop: 20 }}
               label='名称'
               name='name'
               placeholder={'请输入名称'}
-              onChange={handleInputChange}
+              onChange={value => handleInputChange('name', value)}
               value={name}
               autoComplete='new-password'
               required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(quota)}`}
+          />
+          <Divider/>
+          <div style={{ marginTop: 20 }}>
+            <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
+          </div>
+          <AutoComplete
+              style={{ marginTop: 8 }}
               name='quota'
-              placeholder={'请输入单个兑换码中包含的额度'}
-              onChange={handleInputChange}
+              placeholder={'请输入额度'}
+              onChange={(value) => handleInputChange('quota', value)}
               value={quota}
               autoComplete='new-password'
               type='number'
-            />
-          </Form.Field>
+              position={'bottom'}
+              data={[
+                {value: 500000, label: '1$'},
+                {value: 5000000, label: '10$'},
+                {value: 25000000, label: '50$'},
+                {value: 50000000, label: '100$'},
+                {value: 250000000, label: '500$'},
+                {value: 500000000, label: '1000$'},
+              ]}
+          />
           {
-            !isEdit && <>
-              <Form.Field>
-                <Form.Input
-                  label='生成数量'
-                  name='count'
-                  placeholder={'请输入生成数量'}
-                  onChange={handleInputChange}
-                  value={count}
-                  autoComplete='new-password'
-                  type='number'
+              !isEdit && <>
+                <Divider/>
+                <Typography.Text>生成数量</Typography.Text>
+                <Input
+                    style={{ marginTop: 8 }}
+                    label='生成数量'
+                    name='count'
+                    placeholder={'请输入生成数量'}
+                    onChange={value => handleInputChange('count', value)}
+                    value={count}
+                    autoComplete='new-password'
+                    type='number'
                 />
-              </Form.Field>
-            </>
+              </>
           }
-          <Button positive onClick={submit}>提交</Button>
-          <Button onClick={handleCancel}>取消</Button>
-        </Form>
-      </Segment>
+        </Spin>
+      </SideSheet>
     </>
   );
 };

web/src/pages/Redemption/index.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { Segment, Header } from 'semantic-ui-react';
 import RedemptionsTable from '../../components/RedemptionsTable';
+import TokensTable from "../../components/TokensTable";
+import {Layout} from "@douyinfe/semi-ui";
 
 const Redemption = () => (
   <>
-    <Segment>
-      <Header as='h3'>管理兑换码</Header>
-      <RedemptionsTable/>
-    </Segment>
+      <Layout>
+          <Layout.Header>
+              <h3>管理兑换码</h3>
+          </Layout.Header>
+          <Layout.Content>
+              <RedemptionsTable/>
+          </Layout.Content>
+      </Layout>
   </>
 );