Skip to content

phsl / new-api

Go to a project
Commit 63c4b162 by CaIon
Options

钱包页面完善

parent 767c7e3e
Showing with 115 additions and 155 deletions
web/src/components/HeaderBar.js
import React, {useContext, useState} from 'react'; import React, {useContext, useEffect, useState} from 'react';
import {Link, useNavigate} from 'react-router-dom'; import {Link, useNavigate} from 'react-router-dom';
import {UserContext} from '../context/User'; import {UserContext} from '../context/User';
...@@ -45,8 +45,10 @@ const HeaderBar = () => { ...@@ -45,8 +45,10 @@ const HeaderBar = () => {
let navigate = useNavigate(); let navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false); const [showSidebar, setShowSidebar] = useState(false);
const [dark, setDark] = useState(false);
const systemName = getSystemName(); const systemName = getSystemName();
const logo = getLogo(); const logo = getLogo();
var themeMode = localStorage.getItem('theme-mode');
async function logout() { async function logout() {
setShowSidebar(false); setShowSidebar(false);
...@@ -57,37 +59,22 @@ const HeaderBar = () => { ...@@ -57,37 +59,22 @@ const HeaderBar = () => {
navigate('/login'); navigate('/login');
} }
useEffect(() => {
const renderButtons = (isMobile) => { if (themeMode === 'dark') {
return headerButtons.map((button) => { switchMode(true);
if (button.admin && !isAdmin()) return <></>;
if (isMobile) {
return (
<Menu.Item
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
>
{button.name}
</Menu.Item>
);
} }
return ( }, []);
<Menu.Item key={button.name} as={Link} to={button.to}>
<Icon name={button.icon}/>
{button.name}
</Menu.Item>
);
});
};
const switchMode = (model) => { const switchMode = (model) => {
const body = document.body; const body = document.body;
if (!model) { if (!model) {
body.removeAttribute('theme-mode'); body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else { } else {
body.setAttribute('theme-mode', 'dark'); body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
} }
setDark(model);
}; };
return ( return (
<> <>
...@@ -119,7 +106,7 @@ const HeaderBar = () => { ...@@ -119,7 +106,7 @@ const HeaderBar = () => {
footer={ footer={
<> <>
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} /> <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
<Switch checkedText="🌞" size={'large'} uncheckedText="🌙" onChange={switchMode} /> <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
{userState.user ? {userState.user ?
<> <>
<Dropdown <Dropdown
......
web/src/components/LoginForm.js
...@@ -163,55 +163,55 @@ const LoginForm = () => { ...@@ -163,55 +163,55 @@ const LoginForm = () => {
) : ( ) : (
<></> <></>
)} )}
{status.wechat_login ? ( {/*{status.wechat_login ? (*/}
<Button {/* <Button*/}
circular {/* circular*/}
color='green' {/* color='green'*/}
icon='wechat' {/* icon='wechat'*/}
onClick={onWeChatLoginClicked} {/* onClick={onWeChatLoginClicked}*/}
/> {/* />*/}
) : ( {/*) : (*/}
<></> {/* <></>*/}
)} {/*)}*/}
</div> </div>
</> </>
) : ( ) : (
<></> <></>
)} )}
<Modal {/*<Modal*/}
onClose={() => setShowWeChatLoginModal(false)} {/* onClose={() => setShowWeChatLoginModal(false)}*/}
onOpen={() => setShowWeChatLoginModal(true)} {/* onOpen={() => setShowWeChatLoginModal(true)}*/}
open={showWeChatLoginModal} {/* open={showWeChatLoginModal}*/}
size={'mini'} {/* size={'mini'}*/}
> {/*>*/}
<Modal.Content> {/* <Modal.Content>*/}
<Modal.Description> {/* <Modal.Description>*/}
<Image src={status.wechat_qrcode} fluid/> {/* <Image src={status.wechat_qrcode} fluid/>*/}
<div style={{textAlign: 'center'}}> {/* <div style={{textAlign: 'center'}}>*/}
<p> {/* <p>*/}
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） {/* 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）*/}
</p> {/* </p>*/}
</div> {/* </div>*/}
<Form size='large'> {/* <Form size='large'>*/}
<Form.Input {/* <Form.Input*/}
field={'wechat_verification_code'} {/* field={'wechat_verification_code'}*/}
placeholder='验证码' {/* placeholder='验证码'*/}
name='wechat_verification_code' {/* name='wechat_verification_code'*/}
value={inputs.wechat_verification_code} {/* value={inputs.wechat_verification_code}*/}
onChange={handleChange} {/* onChange={handleChange}*/}
/> {/* />*/}
<Button {/* <Button*/}
color='' {/* color=''*/}
fluid {/* fluid*/}
size='large' {/* size='large'*/}
onClick={onSubmitWeChatVerificationCode} {/* onClick={onSubmitWeChatVerificationCode}*/}
> {/* >*/}
登录 {/* 登录*/}
</Button> {/* </Button>*/}
</Form> {/* </Form>*/}
</Modal.Description> {/* </Modal.Description>*/}
</Modal.Content> {/* </Modal.Content>*/}
</Modal> {/*</Modal>*/}
</Card> </Card>
{turnstileEnabled ? ( {turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}> <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
......
web/src/components/SiderBar.js
...@@ -114,34 +114,6 @@ const HeaderBar = () => { ...@@ -114,34 +114,6 @@ const HeaderBar = () => {
navigate('/login'); navigate('/login');
} }
const toggleSidebar = () => {
setShowSidebar(!showSidebar);
};
const renderButtons = (isMobile) => {
return headerButtons.map((button) => {
if (button.admin && !isAdmin()) return <></>;
if (isMobile) {
return (
<Menu.Item
onClick={() => {
navigate(button.to);
setShowSidebar(false);
}}
>
{button.name}
</Menu.Item>
);
}
return (
<Menu.Item key={button.name} as={Link} to={button.to}>
<Icon name={button.icon}/>
{button.name}
</Menu.Item>
);
});
};
return ( return (
<> <>
<Layout> <Layout>
......
web/src/pages/TopUp/index.js
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {Button, Card, Confirm, Form, Grid, Header, Segment, Statistic} from 'semantic-ui-react'; import {Confirm} from 'semantic-ui-react';
import {API, isMobile, showError, showInfo, showSuccess} from '../../helpers'; import {API, isMobile, showError, showInfo, showSuccess} from '../../helpers';
import {renderNumber, renderQuota} from '../../helpers/render'; import {renderNumber, renderQuota} from '../../helpers/render';
import {Col, Layout, Row, Typography} from "@douyinfe/semi-ui"; import {Col, Layout, Row, Typography, Card, Button, Form, Divider, Space, Modal} from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
const TopUp = () => { const TopUp = () => {
const [redemptionCode, setRedemptionCode] = useState(''); const [redemptionCode, setRedemptionCode] = useState('');
const [topUpCode, setTopUpCode] = useState(''); const [topUpCode, setTopUpCode] = useState('');
const [topUpCount, setTopUpCount] = useState(10); const [topUpCount, setTopUpCount] = useState(10);
const [amount, setAmount] = useState(0); const [amount, setAmount] = useState(0.0);
const [topUpLink, setTopUpLink] = useState(''); const [topUpLink, setTopUpLink] = useState('');
const [userQuota, setUserQuota] = useState(0); const [userQuota, setUserQuota] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
...@@ -17,7 +18,7 @@ const TopUp = () => { ...@@ -17,7 +18,7 @@ const TopUp = () => {
const topUp = async () => { const topUp = async () => {
if (redemptionCode === '') { if (redemptionCode === '') {
showInfo('请输入充值码！') showInfo('请输入兑换码！')
return; return;
} }
setIsSubmitting(true); setIsSubmitting(true);
...@@ -27,7 +28,8 @@ const TopUp = () => { ...@@ -27,7 +28,8 @@ const TopUp = () => {
}); });
const {success, message, data} = res.data; const {success, message, data} = res.data;
if (success) { if (success) {
showSuccess('充值成功！'); showSuccess('兑换成功！');
Modal.success({title: '兑换成功！', content: '成功兑换额度：' + renderQuota(data), centered: true});
setUserQuota((quota) => { setUserQuota((quota) => {
return quota + data; return quota + data;
}); });
...@@ -142,7 +144,7 @@ const TopUp = () => { ...@@ -142,7 +144,7 @@ const TopUp = () => {
const {message, data} = res.data; const {message, data} = res.data;
// showInfo(message); // showInfo(message);
if (message === 'success') { if (message === 'success') {
setAmount(parseInt(data)); setAmount(parseFloat(data));
} else { } else {
showError(data); showError(data);
// setTopUpCount(parseInt(res.data.count)); // setTopUpCount(parseInt(res.data.count));
...@@ -168,91 +170,90 @@ const TopUp = () => { ...@@ -168,91 +170,90 @@ const TopUp = () => {
<h3>我的钱包</h3> <h3>我的钱包</h3>
</Layout.Header> </Layout.Header>
<Layout.Content> <Layout.Content>
<div style={{marginTop: 20, paddingLeft: isMobile()?0:200, paddingRight: isMobile()?0:200}}> <Modal
title="确定要充值吗"
visible={open}
onOk={onlineTopUp}
onCancel={handleCancel}
maskClosable={false}
size={'small'}
centered={true}
>
<p>充值数量：{topUpCount}</p>
<p>充值金额：{renderAmount()}</p>
<p>是否确认充值？</p>
</Modal>
<div style={{marginTop: 20, display: 'flex', justifyContent: 'center'}}>
<Card <Card
style={{width: '100%', padding: '20px'}} style={{width: '500px', padding: '20px'}}
> >
<Confirm <Title level={3} style={{textAlign: 'center'}}>余额 {renderQuota(userQuota)}</Title>
open={open} <div style={{marginTop: 20}}>
content={'充值数量：' + topUpCount + '，充值金额：' + renderAmount() + '，是否确认充值？'} <Divider>
cancelButton='取消充值' 兑换余额
confirmButton="确定" </Divider>
onCancel={handleCancel}
onConfirm={onlineTopUp}
/>
<h3>兑换</h3>
<Grid columns={2} stackable>
<Grid.Column>
<Form> <Form>
<Form.Input <Form.Input
field={'redemptionCode'}
label={'兑换码'}
placeholder='兑换码' placeholder='兑换码'
name='redemptionCode' name='redemptionCode'
value={redemptionCode} value={redemptionCode}
onChange={(e) => { onChange={(value) => {
setRedemptionCode(e.target.value); setRedemptionCode(value);
}} }}
/> />
<Button color='green' onClick={openTopUpLink}> <Space>
{
topUpLink ?
<Button type={'primary'} theme={'solid'} onClick={openTopUpLink}>
获取兑换码 获取兑换码
</Button> </Button> : null
<Button color='yellow' onClick={topUp} disabled={isSubmitting}> }
<Button type={"warning"} theme={'solid'} onClick={topUp}
disabled={isSubmitting}>
{isSubmitting ? '兑换中...' : '兑换'} {isSubmitting ? '兑换中...' : '兑换'}
</Button> </Button>
</Space>
</Form> </Form>
</Grid.Column> </div>
<Grid.Column> <div style={{marginTop: 20}}>
<Statistic.Group widths='one'> <Divider>
<Statistic> 在线充值
<Statistic.Value>{renderQuota(userQuota)}</Statistic.Value> </Divider>
<Statistic.Label>剩余额度</Statistic.Label>
</Statistic>
</Statistic.Group>
</Grid.Column>
</Grid>
</Card>
<Card
style={{width: '100%', padding: '20px'}}
>
<Header as='h3'>在线充值，最低1</Header>
<Grid columns={2} stackable>
<Grid.Column>
<Form> <Form>
<Form.Input <Form.Input
placeholder='充值金额，最低1' field={'redemptionCount'}
label={'充值金额：' + renderAmount()}
placeholder='充值数量'
name='redemptionCount' name='redemptionCount'
type={'number'} type={'number'}
value={topUpCount} value={topUpCount}
autoComplete={'off'} onChange={async (value) => {
onChange={async (e) => { setTopUpCount(value);
setTopUpCount(e.target.value); await getAmount(value);
await getAmount(e.target.value);
}} }}
/> />
<Button color='blue' onClick={ <Space>
<Button type={'primary'} theme={'solid'} onClick={
async () => { async () => {
preTopUp('zfb') preTopUp('zfb')
} }
}> }>
支付宝 支付宝
</Button> </Button>
<Button color='green' onClick={ <Button style={{backgroundColor: 'rgba(var(--semi-green-5), 1)'}}
type={'primary'}
theme={'solid'} onClick={
async () => { async () => {
preTopUp('wx') preTopUp('wx')
} }
}> }>
微信 微信
</Button> </Button>
</Space>
</Form> </Form>
</Grid.Column> </div>
<Grid.Column>
<Statistic.Group widths='one'>
<Statistic>
<Statistic.Value>{renderAmount()}</Statistic.Value>
<Statistic.Label>支付金额</Statistic.Label>
</Statistic>
</Statistic.Group>
</Grid.Column>
</Grid>
</Card> </Card>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment