Skip to content

phsl / new-api

Go to a project
Commit 63c4b162 by CaIon
Options

钱包页面完善

parent 767c7e3e
Showing with 132 additions and 172 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 {UserContext} from '../context/User';
......@@ -45,8 +45,10 @@ const HeaderBar = () => {
let navigate = useNavigate();
const [showSidebar, setShowSidebar] = useState(false);
const [dark, setDark] = useState(false);
const systemName = getSystemName();
const logo = getLogo();
var themeMode = localStorage.getItem('theme-mode');
async function logout() {
setShowSidebar(false);
......@@ -57,37 +59,22 @@ const HeaderBar = () => {
navigate('/login');
}
useEffect(() => {
if (themeMode === 'dark') {
switchMode(true);
}
}, []);
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>
);
});
};
const switchMode = (model) => {
const body = document.body;
if (!model) {
body.removeAttribute('theme-mode');
localStorage.setItem('theme-mode', 'light');
} else {
body.setAttribute('theme-mode', 'dark');
localStorage.setItem('theme-mode', 'dark');
}
setDark(model);
};
return (
<>
......@@ -119,7 +106,7 @@ const HeaderBar = () => {
footer={
<>
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
<Switch checkedText="🌞" size={'large'} uncheckedText="🌙" onChange={switchMode} />
<Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
{userState.user ?
<>
<Dropdown
......
web/src/components/LoginForm.js
......@@ -163,55 +163,55 @@ const LoginForm = () => {
) : (
<></>
)}
{status.wechat_login ? (
<Button
circular
color='green'
icon='wechat'
onClick={onWeChatLoginClicked}
/>
) : (
<></>
)}
{/*{status.wechat_login ? (*/}
{/* <Button*/}
{/* circular*/}
{/* color='green'*/}
{/* icon='wechat'*/}
{/* onClick={onWeChatLoginClicked}*/}
{/* />*/}
{/*) : (*/}
{/* <></>*/}
{/*)}*/}
</div>
</>
) : (
<></>
)}
<Modal
onClose={() => setShowWeChatLoginModal(false)}
onOpen={() => setShowWeChatLoginModal(true)}
open={showWeChatLoginModal}
size={'mini'}
>
<Modal.Content>
<Modal.Description>
<Image src={status.wechat_qrcode} fluid/>
<div style={{textAlign: 'center'}}>
<p>
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
</p>
</div>
<Form size='large'>
<Form.Input
field={'wechat_verification_code'}
placeholder='验证码'
name='wechat_verification_code'
value={inputs.wechat_verification_code}
onChange={handleChange}
/>
<Button
color=''
fluid
size='large'
onClick={onSubmitWeChatVerificationCode}
>
登录
</Button>
</Form>
</Modal.Description>
</Modal.Content>
</Modal>
{/*<Modal*/}
{/* onClose={() => setShowWeChatLoginModal(false)}*/}
{/* onOpen={() => setShowWeChatLoginModal(true)}*/}
{/* open={showWeChatLoginModal}*/}
{/* size={'mini'}*/}
{/*>*/}
{/* <Modal.Content>*/}
{/* <Modal.Description>*/}
{/* <Image src={status.wechat_qrcode} fluid/>*/}
{/* <div style={{textAlign: 'center'}}>*/}
{/* <p>*/}
{/* 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）*/}
{/* </p>*/}
{/* </div>*/}
{/* <Form size='large'>*/}
{/* <Form.Input*/}
{/* field={'wechat_verification_code'}*/}
{/* placeholder='验证码'*/}
{/* name='wechat_verification_code'*/}
{/* value={inputs.wechat_verification_code}*/}
{/* onChange={handleChange}*/}
{/* />*/}
{/* <Button*/}
{/* color=''*/}
{/* fluid*/}
{/* size='large'*/}
{/* onClick={onSubmitWeChatVerificationCode}*/}
{/* >*/}
{/* 登录*/}
{/* </Button>*/}
{/* </Form>*/}
{/* </Modal.Description>*/}
{/* </Modal.Content>*/}
{/*</Modal>*/}
</Card>
{turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
......
web/src/components/SiderBar.js
......@@ -114,34 +114,6 @@ const HeaderBar = () => {
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 (
<>
<Layout>
......
web/src/pages/TopUp/index.js
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 {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 [redemptionCode, setRedemptionCode] = useState('');
const [topUpCode, setTopUpCode] = useState('');
const [topUpCount, setTopUpCount] = useState(10);
const [amount, setAmount] = useState(0);
const [amount, setAmount] = useState(0.0);
const [topUpLink, setTopUpLink] = useState('');
const [userQuota, setUserQuota] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
......@@ -17,7 +18,7 @@ const TopUp = () => {
const topUp = async () => {
if (redemptionCode === '') {
showInfo('请输入充值码！')
showInfo('请输入兑换码！')
return;
}
setIsSubmitting(true);
......@@ -27,7 +28,8 @@ const TopUp = () => {
});
const {success, message, data} = res.data;
if (success) {
showSuccess('充值成功！');
showSuccess('兑换成功！');
Modal.success({title: '兑换成功！', content: '成功兑换额度：' + renderQuota(data), centered: true});
setUserQuota((quota) => {
return quota + data;
});
......@@ -142,7 +144,7 @@ const TopUp = () => {
const {message, data} = res.data;
// showInfo(message);
if (message === 'success') {
setAmount(parseInt(data));
setAmount(parseFloat(data));
} else {
showError(data);
// setTopUpCount(parseInt(res.data.count));
......@@ -168,91 +170,90 @@ const TopUp = () => {
<h3>我的钱包</h3>
</Layout.Header>
<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
style={{width: '100%', padding: '20px'}}
style={{width: '500px', padding: '20px'}}
>
<Confirm
open={open}
content={'充值数量：' + topUpCount + '，充值金额：' + renderAmount() + '，是否确认充值？'}
cancelButton='取消充值'
confirmButton="确定"
onCancel={handleCancel}
onConfirm={onlineTopUp}
/>
<h3>兑换</h3>
<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}>
<Title level={3} style={{textAlign: 'center'}}>余额 {renderQuota(userQuota)}</Title>
<div style={{marginTop: 20}}>
<Divider>
兑换余额
</Divider>
<Form>
<Form.Input
field={'redemptionCode'}
label={'兑换码'}
placeholder='兑换码'
name='redemptionCode'
value={redemptionCode}
onChange={(value) => {
setRedemptionCode(value);
}}
/>
<Space>
{
topUpLink ?
<Button type={'primary'} theme={'solid'} onClick={openTopUpLink}>
获取兑换码
</Button> : null
}
<Button type={"warning"} theme={'solid'} 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>
</Card>
<Card
style={{width: '100%', padding: '20px'}}
>
<Header as='h3'>在线充值，最低1</Header>
<Grid columns={2} stackable>
<Grid.Column>
<Form>
<Form.Input
placeholder='充值金额，最低1'
name='redemptionCount'
type={'number'}
value={topUpCount}
autoComplete={'off'}
onChange={async (e) => {
setTopUpCount(e.target.value);
await getAmount(e.target.value);
}}
/>
<Button color='blue' onClick={
</Space>
</Form>
</div>
<div style={{marginTop: 20}}>
<Divider>
在线充值
</Divider>
<Form>
<Form.Input
field={'redemptionCount'}
label={'充值金额：' + renderAmount()}
placeholder='充值数量'
name='redemptionCount'
type={'number'}
value={topUpCount}
onChange={async (value) => {
setTopUpCount(value);
await getAmount(value);
}}
/>
<Space>
<Button type={'primary'} theme={'solid'} onClick={
async () => {
preTopUp('zfb')
}
}>
支付宝
</Button>
<Button color='green' onClick={
<Button style={{backgroundColor: 'rgba(var(--semi-green-5), 1)'}}
type={'primary'}
theme={'solid'} onClick={
async () => {
preTopUp('wx')
}
}>
微信
</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>
</Space>
</Form>
</div>
</Card>
</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