mirror of
https://github.com/linux-do/new-api.git
synced 2025-09-18 00:16:37 +08:00
钱包页面完善
This commit is contained in:
CaIon
parent
83050646f9
commit
4c7384411d
@ -1,4 +1,4 @@
|
||||
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');
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
);
|
||||
useEffect(() => {
|
||||
if (themeMode === 'dark') {
|
||||
switchMode(true);
|
||||
}
|
||||
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
|
||||
|
||||
@ -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}}>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
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}}>
|
||||
<Card
|
||||
style={{width: '100%', padding: '20px'}}
|
||||
>
|
||||
<Confirm
|
||||
open={open}
|
||||
content={'充值数量：' + topUpCount + '，充值金额：' + renderAmount() + '，是否确认充值？'}
|
||||
cancelButton='取消充值'
|
||||
confirmButton="确定"
|
||||
<Modal
|
||||
title="确定要充值吗"
|
||||
visible={open}
|
||||
onOk={onlineTopUp}
|
||||
onCancel={handleCancel}
|
||||
onConfirm={onlineTopUp}
|
||||
/>
|
||||
<h3>兑换</h3>
|
||||
<Grid columns={2} stackable>
|
||||
<Grid.Column>
|
||||
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: '500px', padding: '20px'}}
|
||||
>
|
||||
<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={(e) => {
|
||||
setRedemptionCode(e.target.value);
|
||||
onChange={(value) => {
|
||||
setRedemptionCode(value);
|
||||
}}
|
||||
/>
|
||||
<Button color='green' onClick={openTopUpLink}>
|
||||
<Space>
|
||||
{
|
||||
topUpLink ?
|
||||
<Button type={'primary'} theme={'solid'} onClick={openTopUpLink}>
|
||||
获取兑换码
|
||||
</Button>
|
||||
<Button color='yellow' onClick={topUp} disabled={isSubmitting}>
|
||||
</Button> : null
|
||||
}
|
||||
<Button type={"warning"} theme={'solid'} onClick={topUp}
|
||||
disabled={isSubmitting}>
|
||||
{isSubmitting ? '兑换中...' : '兑换'}
|
||||
</Button>
|
||||
</Space>
|
||||
</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>
|
||||
</div>
|
||||
<div style={{marginTop: 20}}>
|
||||
<Divider>
|
||||
在线充值
|
||||
</Divider>
|
||||
<Form>
|
||||
<Form.Input
|
||||
placeholder='充值金额，最低1'
|
||||
field={'redemptionCount'}
|
||||
label={'充值金额：' + renderAmount()}
|
||||
placeholder='充值数量'
|
||||
name='redemptionCount'
|
||||
type={'number'}
|
||||
value={topUpCount}
|
||||
autoComplete={'off'}
|
||||
onChange={async (e) => {
|
||||
setTopUpCount(e.target.value);
|
||||
await getAmount(e.target.value);
|
||||
onChange={async (value) => {
|
||||
setTopUpCount(value);
|
||||
await getAmount(value);
|
||||
}}
|
||||
/>
|
||||
<Button color='blue' onClick={
|
||||
<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>
|
||||
</Space>
|
||||
</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>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user