mirror of
https://github.com/linux-do/new-api.git
synced 2025-09-21 17:56:38 +08:00
完善兑换码界面
This commit is contained in:
CaIon
parent
f569ca270e
commit
44d9eb9d05
@ -39,7 +39,8 @@ func GetAllTokens(c *gin.Context) {
|
||||
func SearchTokens(c *gin.Context) {
|
||||
userId := c.GetInt("id")
|
||||
keyword := c.Query("keyword")
|
||||
tokens, err := model.SearchUserTokens(userId, keyword)
|
||||
token := c.Query("token")
|
||||
tokens, err := model.SearchUserTokens(userId, keyword, token)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"success": false,
|
||||
|
||||
@ -5,6 +5,7 @@ import (
|
||||
"fmt"
|
||||
"gorm.io/gorm"
|
||||
"one-api/common"
|
||||
"strings"
|
||||
)
|
||||
|
||||
type Token struct {
|
||||
@ -28,8 +29,11 @@ func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
|
||||
return tokens, err
|
||||
}
|
||||
|
||||
func SearchUserTokens(userId int, keyword string) (tokens []*Token, err error) {
|
||||
err = DB.Where("user_id = ?", userId).Where("name LIKE ?", keyword+"%").Find(&tokens).Error
|
||||
func SearchUserTokens(userId int, keyword string, token string) (tokens []*Token, err error) {
|
||||
if token != "" {
|
||||
token = strings.Trim(token, "sk-")
|
||||
}
|
||||
err = DB.Where("user_id = ?", userId).Where("name LIKE ? or key LIKE ?", keyword+"%", token+"%").Find(&tokens).Error
|
||||
return tokens, err
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Form, Label, Popup, Pagination } from 'semantic-ui-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string } from '../helpers';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers';
|
||||
|
||||
import { ITEMS_PER_PAGE } from '../constants';
|
||||
import { renderQuota } from '../helpers/render';
|
||||
import {Button, Modal, Popconfirm, Popover, Table, Tag} from "@douyinfe/semi-ui";
|
||||
import {ITEMS_PER_PAGE} from '../constants';
|
||||
import {renderQuota} from '../helpers/render';
|
||||
import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui";
|
||||
import EditRedemption from "../pages/Redemption/EditRedemption";
|
||||
import editRedemption from "../pages/Redemption/EditRedemption";
|
||||
|
||||
function renderTimestamp(timestamp) {
|
||||
return (
|
||||
@ -72,6 +73,17 @@ const RedemptionsTable = () => {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '兑换人ID',
|
||||
dataIndex: 'used_user_id',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<div>
|
||||
{text === 0 ? '无' : text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'operate',
|
||||
@ -125,14 +137,14 @@ const RedemptionsTable = () => {
|
||||
record
|
||||
);
|
||||
}
|
||||
} disabled={record.status===3}>启用</Button>
|
||||
} disabled={record.status === 3}>启用</Button>
|
||||
}
|
||||
{/*<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={*/}
|
||||
{/* () => {*/}
|
||||
{/* setEditingToken(record);*/}
|
||||
{/* setShowEdit(true);*/}
|
||||
{/* }*/}
|
||||
{/*}>编辑</Button>*/}
|
||||
<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
|
||||
() => {
|
||||
setEditingRedemption(record);
|
||||
setShowEdit(true);
|
||||
}
|
||||
} disabled={record.status !== 1}>编辑</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
@ -145,10 +157,18 @@ const RedemptionsTable = () => {
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
|
||||
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||
const [editingRedemption, setEditingRedemption] = useState({
|
||||
id: undefined,
|
||||
});
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
|
||||
const closeEdit = () => {
|
||||
setShowEdit(false);
|
||||
}
|
||||
|
||||
const loadRedemptions = async (startIdx) => {
|
||||
const res = await API.get(`/api/redemption/?p=${startIdx}`);
|
||||
const { success, message, data } = res.data;
|
||||
const {success, message, data} = res.data;
|
||||
if (success) {
|
||||
if (startIdx === 0) {
|
||||
setRedemptions(data);
|
||||
@ -180,11 +200,11 @@ const RedemptionsTable = () => {
|
||||
showSuccess('已复制到剪贴板！');
|
||||
} else {
|
||||
// setSearchKeyword(text);
|
||||
Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
|
||||
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
|
||||
}
|
||||
}
|
||||
|
||||
const onPaginationChange = (e, { activePage }) => {
|
||||
const onPaginationChange = (e, {activePage}) => {
|
||||
(async () => {
|
||||
if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
|
||||
// In this case we have to load more data and then append them.
|
||||
@ -202,8 +222,12 @@ const RedemptionsTable = () => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
const refresh = async () => {
|
||||
await loadRedemptions(activePage - 1);
|
||||
};
|
||||
|
||||
const manageRedemption = async (id, action, record) => {
|
||||
let data = { id };
|
||||
let data = {id};
|
||||
let res;
|
||||
switch (action) {
|
||||
case 'delete':
|
||||
@ -218,7 +242,7 @@ const RedemptionsTable = () => {
|
||||
res = await API.put('/api/redemption/?status_only=true', data);
|
||||
break;
|
||||
}
|
||||
const { success, message } = res.data;
|
||||
const {success, message} = res.data;
|
||||
if (success) {
|
||||
showSuccess('操作成功完成！');
|
||||
let redemption = res.data.data;
|
||||
@ -244,7 +268,7 @@ const RedemptionsTable = () => {
|
||||
}
|
||||
setSearching(true);
|
||||
const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
|
||||
const { success, message, data } = res.data;
|
||||
const {success, message, data} = res.data;
|
||||
if (success) {
|
||||
setRedemptions(data);
|
||||
setActivePage(1);
|
||||
@ -254,7 +278,7 @@ const RedemptionsTable = () => {
|
||||
setSearching(false);
|
||||
};
|
||||
|
||||
const handleKeywordChange = async (e, { value }) => {
|
||||
const handleKeywordChange = async (value) => {
|
||||
setSearchKeyword(value.trim());
|
||||
};
|
||||
|
||||
@ -276,7 +300,8 @@ const RedemptionsTable = () => {
|
||||
setActivePage(page);
|
||||
if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
|
||||
// In this case we have to load more data and then append them.
|
||||
loadRedemptions(page - 1).then(r => {});
|
||||
loadRedemptions(page - 1).then(r => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -293,12 +318,15 @@ const RedemptionsTable = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit}
|
||||
handleClose={closeEdit}></EditRedemption>
|
||||
<Form onSubmit={searchRedemptions}>
|
||||
<Form.Input
|
||||
label='搜索关键字'
|
||||
field='keyword'
|
||||
icon='search'
|
||||
fluid
|
||||
iconPosition='left'
|
||||
placeholder='搜索兑换码的 ID 和名称 ...'
|
||||
placeholder='关键字(id或者名称)'
|
||||
value={searchKeyword}
|
||||
loading={searching}
|
||||
onChange={handleKeywordChange}
|
||||
@ -319,6 +347,27 @@ const RedemptionsTable = () => {
|
||||
onPageChange: handlePageChange,
|
||||
}} loading={loading} rowSelection={rowSelection}>
|
||||
</Table>
|
||||
<Button theme='light' type='primary' style={{marginRight: 8}} onClick={
|
||||
() => {
|
||||
setEditingRedemption({
|
||||
id: undefined,
|
||||
});
|
||||
setShowEdit(true);
|
||||
}
|
||||
}>添加兑换码</Button>
|
||||
<Button label='复制所选兑换码' type="warning" onClick={
|
||||
async () => {
|
||||
if (selectedKeys.length === 0) {
|
||||
showError('请至少选择一个兑换码！');
|
||||
return;
|
||||
}
|
||||
let keys = "";
|
||||
for (let i = 0; i < selectedKeys.length; i++) {
|
||||
keys += selectedKeys[i].name + " sk-" + selectedKeys[i].key + "\n";
|
||||
}
|
||||
await copyText(keys);
|
||||
}
|
||||
}>复制所选兑换码到剪贴板</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -179,6 +179,7 @@ const TokensTable = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [searchToken, setSearchToken] = useState('');
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [showTopUpModal, setShowTopUpModal] = useState(false);
|
||||
const [targetTokenIdx, setTargetTokenIdx] = useState(0);
|
||||
@ -188,9 +189,6 @@ const TokensTable = () => {
|
||||
|
||||
const closeEdit = () => {
|
||||
setShowEdit(false);
|
||||
// setEditingToken({
|
||||
// id: undefined,
|
||||
// });
|
||||
}
|
||||
|
||||
const setTokensFormat = (tokens) => {
|
||||
@ -401,6 +399,10 @@ const TokensTable = () => {
|
||||
setSearchKeyword(value.trim());
|
||||
};
|
||||
|
||||
const handleSearchTokenChange = async (value) => {
|
||||
setSearchToken(value.trim());
|
||||
};
|
||||
|
||||
const sortToken = (key) => {
|
||||
if (tokens.length === 0) return;
|
||||
setLoading(true);
|
||||
@ -447,6 +449,14 @@ const TokensTable = () => {
|
||||
loading={searching}
|
||||
onChange={handleKeywordChange}
|
||||
/>
|
||||
<Form.Input
|
||||
field="token"
|
||||
label='Key'
|
||||
placeholder='密钥'
|
||||
value={searchToken}
|
||||
loading={searching}
|
||||
onChange={handleSearchTokenChange}
|
||||
/>
|
||||
<Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
|
||||
onClick={searchTokens} style={{marginRight: 8}}>查询</Button>
|
||||
</Form>
|
||||
|
||||
@ -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`);
|
||||
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'
|
||||
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$'},
|
||||
]}
|
||||
/>
|
||||
</Form.Field>
|
||||
{
|
||||
!isEdit && <>
|
||||
<Form.Field>
|
||||
<Form.Input
|
||||
<Divider/>
|
||||
<Typography.Text>生成数量</Typography.Text>
|
||||
<Input
|
||||
style={{ marginTop: 8 }}
|
||||
label='生成数量'
|
||||
name='count'
|
||||
placeholder={'请输入生成数量'}
|
||||
onChange={handleInputChange}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
<Layout>
|
||||
<Layout.Header>
|
||||
<h3>管理兑换码</h3>
|
||||
</Layout.Header>
|
||||
<Layout.Content>
|
||||
<RedemptionsTable/>
|
||||
</Segment>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ const EditToken = (props) => {
|
||||
if (isEdit) {
|
||||
loadToken().then(
|
||||
() => {
|
||||
console.log(inputs);
|
||||
// console.log(inputs);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
@ -72,8 +72,8 @@ const EditToken = (props) => {
|
||||
}, [props.editingToken.id]);
|
||||
|
||||
const submit = async () => {
|
||||
setLoading(true);
|
||||
if (!isEdit && inputs.name === '') return;
|
||||
setLoading(true);
|
||||
let localInputs = inputs;
|
||||
localInputs.remain_quota = parseInt(localInputs.remain_quota);
|
||||
if (localInputs.expired_time !== -1) {
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
import React from 'react';
|
||||
import TokensTable from '../../components/TokensTable';
|
||||
import {Layout} from "@douyinfe/semi-ui";
|
||||
const {Content, Header} = Layout;
|
||||
const Token = () => (
|
||||
<>
|
||||
<Layout>
|
||||
<Header>
|
||||
<Layout.Header>
|
||||
<h3>我的令牌</h3>
|
||||
</Header>
|
||||
<Content>
|
||||
</Layout.Header>
|
||||
<Layout.Content>
|
||||
<TokensTable/>
|
||||
</Content>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user