Skip to content

A
admin-trade
Commit c7ebc749 by haojie
Options

1

parent ae9717bb
Showing with 1619 additions and 150 deletions
app/Http/Controllers/Web/DetailController.php deleted 100644 → 0
<?php
namespace App\Http\Controllers\Web;
use Inertia\Inertia;
class DetailController
{
public function index()
{
$title = '详情页';
$content = "测试内容";
return Inertia::render('Detail/index', [
'info' => [
'title' => $title,
'content' => $content
]
]);
}
}
app/Http/Controllers/Web/HomeController.php → app/Http/Controllers/Web/TradeController.php
......@@ -3,14 +3,29 @@
namespace App\Http\Controllers\Web;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Inertia\Inertia;
class HomeController
class TradeController
{
public function index(Request $request)
// 现货
public function spot(Request $request)
{
$title = '首页';
$content = "测试内容";
return Inertia::render('Spot/index', [
'info' => [
'title' => $title,
'content' => $content
]
]);
}
// 合约
public function contract(Request $request)
{
$title = '合约交易';
$content = "合约交易";
return Inertia::render('Home/index', [
'info' => [
'title' => $title,
......
resources/js/Layout/Content/index.less
......@@ -6,9 +6,19 @@
.real-content {
width: 1500px;
height: 100%;
background: white;
margin: 0 auto;
border: 1px solid #EAECEF;
border-top: none;
box-sizing: border-box;
}
}
.custom-layout-content_mobile {
overflow-x: hidden;
.real-content {
width: 100vw;
}
}
resources/js/Layout/Content/index.tsx
import './index.less';
import {isMobile} from '@/js/utils/tool'
export default function ({children}) {
return (
<div className="custom-layout-content narrow-scrollbar">
<div
className={['custom-layout-content', 'narrow-scrollbar', isMobile() ? 'custom-layout-content_mobile' : ''].join(' ')}>
<div className="real-content">
{children}
</div>
......
resources/js/Layout/index.less
......@@ -31,7 +31,7 @@
}
.active {
color: #00f9f9;
color: #C99400;
transition: all 0.2s;
}
}
......
resources/js/Layout/index.tsx
......@@ -2,23 +2,19 @@ import './index.less'
import {Link} from '@inertiajs/react';
import {useState} from 'react';
import {getRoute} from '@/js/utils/tool';
import {ReactComponent as Logo} from '@/assets/svg/header/logo.svg'
import {ReactComponent as Logo} from '@/assets/svg/header/logo.svg';
export default function ({children}) {
const {pathname} = getRoute();
const [currentTab, setCurrentTab] = useState(pathname);
const btns = [
{
label: '用户',
path: '/user',
},
{
label: '现货交易',
path: '/trading',
path: '/',
},
{
label: '合约交易',
path: '/trading2',
path: '/ContractTrade',
}
];
const isActive = (item: any) => {
......
resources/js/Pages/Home/components/ContractAccount/index.less
......@@ -11,3 +11,13 @@
padding: 0 30px;
}
}
.contract-account-table__mobile {
.contract-account-table-box {
padding: 0;
.t-table__body {
max-height: 120px;
}
}
}
resources/js/Pages/Home/components/ContractAccount/index.tsx
import './index.less'
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
class ContractAccount extends Component<any, any> {
constructor(props) {
......@@ -22,18 +22,13 @@ class ContractAccount extends Component<any, any> {
align: 'center'
},
{
colKey: 'd3',
title: '资产',
align: 'center'
},
{
colKey: 'd4',
title: '现货余额',
align: 'center'
},
{
colKey: 'd5',
title: '今日盈亏',
colKey: 'd6',
title: '可用余额',
align: 'center'
},
];
......@@ -74,7 +69,7 @@ class ContractAccount extends Component<any, any> {
render() {
return (
<div className={'contract-account-table'}>
<div className={['contract-account-table', isMobile() ? 'contract-account-table__mobile' : ""].join(' ')}>
<div className='contract-account-label'>合约账户</div>
<div className='contract-account-table-box'>
<CustomTable columns={this.columns} data={this.state.list}></CustomTable>
......
resources/js/Pages/Home/components/ContractTrade/index.less
.contract-trade-table {
flex: 1;
display: flex;
flex-direction: column;
.contract-trade-label {
padding: 24px 12px 6px 12px;
font-weight: 600;
font-size: 14px;
font-size: 16px;
color: #000000;
border-bottom: 1px solid #EAECEF;
}
......@@ -13,6 +14,20 @@
.contract-trade-table-box {
padding: 0 30px;
flex: 1;
.spread-out-table {
display: flex;
flex-direction: column;
& > :first-child {
flex: 1;
}
}
.spread-out-table__mobile {
}
}
.contract-trade-group {
......@@ -41,3 +56,110 @@
}
}
}
.c-table-height {
height: 100%;
}
// 三张表格样式
.contract-trade-table__mobile {
padding: 0 12px !important;
padding-top: 6px !important;
.contract-real-table__mobile {
min-height: 100%;
display: flex;
flex-direction: column;
.table-row {
padding-bottom: 12px;
border-bottom: 1px solid #F0F0F0;
.table-row-line {
margin-top: 6px;
display: flex;
justify-content: space-between;
align-items: center;
.table-pairs {
font-weight: 400;
font-size: 16px;
color: #222222;
span {
color: #C99400;
}
}
.table-time {
font-weight: 400;
font-size: 12px;
color: #848E9C;
}
.table-direction {
font-weight: 400;
font-size: 14px;
color: #0E9D6D;
}
.table-col-left {
width: 44%;
& > :not(:first-child) {
margin-top: 4px;
}
.table-col__line {
display: flex;
justify-content: space-between;
.table-col-label {
font-weight: 400;
font-size: 13px;
color: #848E9C;
}
.table-col-value {
font-weight: 400;
font-size: 14px;
color: #222222;
}
.green {
color: #0E9D6D;
}
}
}
}
}
.reset-t-pagination-box {
margin-top: auto;
}
}
}
.hold-position-extension {
padding: 0 12px;
display: flex;
justify-content: flex-end;
margin-top: 6px;
& > :first-child {
margin-right: 6px;
}
& > :only-child {
margin-right: 0;
}
.custom-reset-t-button {
color: #C99400 !important;
}
}
resources/js/Pages/Home/components/ContractTrade/index.tsx
import './index.less'
import {Component} from 'react';
import CustomTable from '@/js/components/Table/index';
import Pagination from '@/js/components/Pagination/index';
import HoldingPosition from '../HoldingPosition/index';
import CurrentConsignment from '../CurrentConsignment/index';
import HistoryTransaction from '../HistoryTransaction/index';
import {isShow} from "@/js/utils/dom";
import {table_HoldingPosition, table_CurrentConsignment, table_HistoryTransaction} from '@/js/constants/trade';
import store from '@/js/redux/store';
import TradeSelect from '../TradeSelect/index';
import {getDomRect} from '@/js/utils/dom';
import {isMobile} from '@/js/utils/tool';
import CustomButton from '@/js/components/Button';
import CustomDialog from '../TradeDialog/index';
// 定义常量
const dom_id = 'contract-trade';
class ContractTrade extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
list: [],
pageNum: 1,
pageSize: 10,
total: 0,
// 弹窗状态
dialog_visible: false,
minHeight: '',
// 当前委托数量
currentEntrustNum: 0,
// 当前选择的按钮
currentGroupButton: '1',
}
this.columns = [
{
colKey: 'ddd',
title: '用户名',
},
{
colKey: 'd2',
title: '交易所',
},
{
colKey: 'd3',
title: '交易对',
// 三个表格的状态
tableStatus: {
[table_HoldingPosition]: true,
[table_CurrentConsignment]: false,
[table_HistoryTransaction]: false,
},
{
colKey: 'd4',
title: '持仓方向',
align: 'center'
},
{
colKey: 'd5',
title: '策略',
align: 'center'
},
{
colKey: 'd6',
title: '开仓价格',
align: 'center'
},
{
colKey: 'd7',
title: '标记价格',
align: 'center'
},
{
colKey: 'd8',
title: '未实现盈亏',
align: 'center'
},
{
colKey: 'd9',
title: '操作',
align: 'center'
},
];
}
}
......@@ -69,43 +43,111 @@ class ContractTrade extends Component<any, any> {
return [
{
label: '持有仓位',
value: '1'
value: '1',
},
{
label: `当前委托(${this.state.currentEntrustNum})`,
value: '2'
value: '2',
},
{
label: '历史成交',
value: '3'
value: '3',
}
];
}
// 改变表格显示状态
changeTableStatus = (value: string) => {
const tableStatus = Object.keys(this.state.tableStatus);
for (let i = 0; i < tableStatus.length; i++) {
const item = tableStatus[i];
if (item === value) {
if (!this.state.tableStatus[item]) {
this.state.tableStatus[item] = true;
}
break;
}
}
}
// 切换按钮
changeGroupButton = (value: string) => {
this.changeTableStatus(value);
this.setState({
currentGroupButton: value
})
}
// 获取表格最低高度
getTableHeight = () => {
const dom: HTMLElement = document.getElementById(dom_id);
if (dom) {
const rect = getDomRect(dom);
const wid = document.documentElement.clientHeight;
const height = wid - rect.top;
this.setState({
minHeight: height + 'px'
})
}
}
storeChange = () => {
store.dispatch({type: 'count', data: 1,});
}
componentDidMount() {
this.getTableHeight();
// store.subscribe(() => {
// this.setState({
// num: store.getState().count,
// })
// })
}
// 打开弹窗
openDialog = () => {
this.setState({
dialog_visible: true,
})
}
// 请求表格数据
getTableData = async () => {
try {
// const res:any = await ddd();
} catch (e) {
console.log(e)
// 关闭弹窗
closeDialog = () => {
this.setState({
dialog_visible: false,
})
}
// table-class
getTableClass() {
return ['spread-out-table', isMobile() ? "spread-out-table__mobile" : ""].join(' ')
}
pageChange = (value: number) => {
this.getTableData();
// 当前显示的按钮-根据对应的表格显示
currentExtensionButtons() {
switch (this.state.currentGroupButton) {
case table_HoldingPosition:
return (
<div className='hold-position-extension'>
<CustomButton onClick={this.openDialog}>开始交易</CustomButton>
<CustomButton>一键平仓</CustomButton>
</div>
)
case table_CurrentConsignment:
return (
<div className='hold-position-extension'>
<CustomButton>一键撤销</CustomButton>
</div>
)
case table_HistoryTransaction:
return '';
}
}
render() {
const obj = store.getState();
return (
<div className={'contract-trade-table'} id={this.props.id} style={this.props.style}>
<div className='contract-trade-label'>合约账户</div>
<div className='contract-trade-label'>合约交易</div>
<div className='contract-trade-group'>
{
this.ComputedGroupButtons.map((item, index) => (
......@@ -118,11 +160,39 @@ class ContractTrade extends Component<any, any> {
))
}
</div>
<div className='contract-trade-table-box'>
<CustomTable columns={this.columns} data={this.state.list}></CustomTable>
<TradeSelect>
{
this.currentExtensionButtons()
}
</TradeSelect>
<div
className={['contract-trade-table-box', isMobile() ? 'contract-trade-table__mobile' : ''].join(' ')}
id={dom_id} style={{
minHeight: this.state.minHeight
}}>
{/*持有仓位*/}
<HoldingPosition v-if={this.state.tableStatus[table_HoldingPosition]}
className={this.getTableClass()} style={
{
'display': isShow(this.state.currentGroupButton === table_HoldingPosition),
}
}></HoldingPosition>
{/*当前委托*/}
<CurrentConsignment v-if={this.state.tableStatus[table_CurrentConsignment]}
className={this.getTableClass()} style={
{
'display': isShow(this.state.currentGroupButton === table_CurrentConsignment),
}
}></CurrentConsignment>
{/*历史成交*/}
<HistoryTransaction v-if={this.state.tableStatus[table_HistoryTransaction]}
className={this.getTableClass()} style={
{
'display': isShow(this.state.currentGroupButton === table_HistoryTransaction),
}
}></HistoryTransaction>
</div>
<Pagination onChange={this.pageChange} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total}></Pagination>
<CustomDialog visible={this.state.dialog_visible} onClose={this.closeDialog}></CustomDialog>
</div>
)
}
......
resources/js/Pages/Home/components/CurrentConsignment/index.tsx 0 → 100644
import './index.less'
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
import Pagination from '@/js/components/Pagination';
import CustomButton from '@/js/components/Button';
// 当前委托
class CurrentConsignment extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
list: [{}],
pageNum: 1,
pageSize: 10,
total: 0,
}
this.columns = [
{
colKey: 'ddd',
title: '用户名',
},
{
colKey: 'd2',
title: '交易所',
},
{
colKey: 'd3',
title: '交易对',
},
{
colKey: 'd4',
title: '交易类型',
align: 'center'
},
{
colKey: 'd5',
title: '持仓方向',
align: 'center'
},
{
colKey: 'd6',
title: '开仓价格',
align: 'center'
},
{
colKey: 'd7',
title: '数量',
align: 'center'
},
{
colKey: 'd8',
title: '成交数量USDT',
align: 'center'
},
{
colKey: 'd9',
title: '时间',
align: 'center'
},
{
colKey: 'd10',
title: '操作',
align: 'center'
},
];
}
pageChange(value: number) {
this.setState({
pageNum: value
})
// 请求接口
}
// pc表格
pcTable() {
return (
<CustomTable columns={this.columns} data={this.state.list} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total} pagination={true}
className={props.className}
onPageChange={this.pageChange}
></CustomTable>
)
}
// 手机表格
mobileTable() {
return (
<div className='contract-real-table__mobile'>
{
this.state.list.map((item, index) => (
<div key={index} className='table-row'>
<div className='table-row-line'>
<div className={'table-pairs'}>
BTCUSDT
</div>
<div className={'table-time'}>
2022/07/01 08:33:45
</div>
</div>
<div className='table-row-line'>
<div className={['table-direction', true ? 'green' : ''].join(' ')}>
限价/开多
</div>
<CustomButton>撤销</CustomButton>
</div>
<div className='table-row-line'>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
用户
</div>
<div className={'table-col-value'}>
{item.ddd}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
开仓价格
</div>
<div className={'table-col-value'}>
{item.d6}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
成交数量
</div>
<div className={'table-col-value'}>
{item.d5}
</div>
</div>
</div>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
交易所
</div>
<div className={'table-col-value'}>
Binance
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
数量
</div>
<div className={'table-col-value'}>
27120.00
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
状态
</div>
<div className={['table-col-value', 'green'].join(' ')}>
+100 USDT
</div>
</div>
</div>
</div>
</div>
))
}
<Pagination onChange={this.pageChange} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total}></Pagination>
</div>
)
}
// 当前表格
currentTable() {
return (
<div style={this.props.style ?? null} className='c-table-height'>
{
isMobile() ? this.mobileTable() : this.pcTable()
}
</div>
)
}
render() {
const props = this.props;
if (props['v-if']) {
return this.currentTable();
} else {
return <></>;
}
}
}
export default CurrentConsignment;
resources/js/Pages/Home/components/HistoryTransaction/index.tsx 0 → 100644
import './index.less';
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
import Pagination from '@/js/components/Pagination';
class HistoryTransaction extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
list: [{}],
pageNum: 1,
pageSize: 10,
total: 0,
}
this.columns = [
{
colKey: 'ddd',
title: '用户名',
},
{
colKey: 'd2',
title: '交易所',
},
{
colKey: 'd3',
title: '交易对',
},
{
colKey: 'd4',
title: '交易类型',
align: 'center'
},
{
colKey: 'd5',
title: '持仓方向',
align: 'center'
},
{
colKey: 'd6',
title: '开仓价格',
align: 'center'
},
{
colKey: 'd7',
title: '数量',
align: 'center'
},
{
colKey: 'd8',
title: '成交数量USDT',
align: 'center'
},
{
colKey: 'd9',
title: '状态',
align: 'center'
},
{
colKey: 'd10',
title: '交易时间',
align: 'center'
},
{
colKey: 'd11',
title: '更新时间',
align: 'center'
},
{
colKey: 'd12',
title: '返回值',
align: 'center'
},
];
}
pageChange(value: number) {
this.setState({
pageNum: value
})
// 请求接口
}
// pc表格
pcTable() {
return (
<CustomTable columns={this.columns} data={this.state.list} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total} pagination={true}
className={props.className}
onPageChange={this.pageChange}></CustomTable>
)
}
// 手机表格
mobileTable() {
return (
<div className='contract-real-table__mobile'>
{
this.state.list.map((item, index) => (
<div key={index} className='table-row'>
<div className='table-row-line'>
<div className={'table-pairs'}>
BTCUSDT
</div>
<div className={'table-time'}>
2022/07/01 08:33:45
</div>
</div>
<div className='table-row-line'>
<div className={['table-direction', true ? 'green' : ''].join(' ')}>
限价/开多
</div>
<div className={'table-time'}>
<span>更新时间 </span>
2022/07/01 08:33:45
</div>
</div>
<div className='table-row-line'>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
用户
</div>
<div className={'table-col-value'}>
{item.ddd}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
开仓价格
</div>
<div className={'table-col-value'}>
{item.d6}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
成交数量
</div>
<div className={'table-col-value'}>
{item.d5}
</div>
</div>
</div>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
交易所
</div>
<div className={'table-col-value'}>
Binance
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
数量
</div>
<div className={'table-col-value'}>
27120.00
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
状态
</div>
<div className={['table-col-value', 'green'].join(' ')}>
+100 USDT
</div>
</div>
</div>
</div>
</div>
))
}
<Pagination onChange={this.pageChange} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total}></Pagination>
</div>
)
}
// 当前表格
currentTable() {
return (
<div style={this.props.style ?? null} className='c-table-height'>
{
isMobile() ? this.mobileTable() : this.pcTable()
}
</div>
)
}
render() {
const props = this.props;
if (props['v-if']) {
return this.currentTable();
} else {
return <></>;
}
}
}
export default HistoryTransaction;
resources/js/Pages/Home/components/HoldingPosition/index.tsx 0 → 100644
import './index.less';
import {Component} from "react";
import CustomTable from '@/js/components/Table/index';
import {isMobile} from '@/js/utils/tool';
import CustomButton from '@/js/components/Button';
import Pagination from '@/js/components/Pagination';
class HoldingPosition extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
list: [{
ddd: '用户名',
d2: "交易所",
d3: '交易对',
d4: '持仓方向',
d5: '策略',
d6: '开仓价格',
d7: '标记价格',
d8: '未实现盈亏',
d9: '操作',
time: '2022/07/01 08:33:45'
}],
pageNum: 1,
pageSize: 10,
total: 20,
}
this.columns = [
{
colKey: 'ddd',
title: '用户名',
cell: ({rowIndex, row}) => {
return (
<div>{row.d9}</div>
);
},
},
{
colKey: 'd2',
title: '交易所',
},
{
colKey: 'd3',
title: '交易对',
},
{
colKey: 'd4',
title: '持仓方向',
align: 'center'
},
{
colKey: 'd5',
title: '策略',
align: 'center'
},
{
colKey: 'd6',
title: '开仓价格',
align: 'center'
},
{
colKey: 'd7',
title: '标记价格',
align: 'center'
},
{
colKey: 'd8',
title: '未实现盈亏',
align: 'center'
},
{
colKey: 'd9',
title: '操作',
align: 'center'
},
];
}
// 页码改变
pageChange(value: number) {
this.setState({
pageNum: value
})
// 请求接口
}
// pc表格
pcTable() {
return (
<CustomTable columns={this.columns} data={this.state.list} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total} pagination={true}
className={props.className}
onPageChange={this.pageChange}></CustomTable>
)
}
// 手机表格
mobileTable() {
return (
<div className='contract-real-table__mobile'>
{
this.state.list.map((item, index) => (
<div key={index} className='table-row'>
<div className='table-row-line'>
<div className={'table-pairs'}>
{item.d3}
<span>x3</span>
</div>
<div className={'table-time'}>
{item.time}
</div>
</div>
<div className='table-row-line'>
<div className={'table-direction'}>
{item.d4}
</div>
<CustomButton>平仓</CustomButton>
</div>
<div className='table-row-line'>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
用户
</div>
<div className={'table-col-value'}>
{item.ddd}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
开仓价格
</div>
<div className={'table-col-value'}>
{item.d6}
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
策略
</div>
<div className={'table-col-value'}>
{item.d5}
</div>
</div>
</div>
<div className={'table-col-left'}>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
交易所
</div>
<div className={'table-col-value'}>
Binance
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
标记价格
</div>
<div className={'table-col-value'}>
27120.00
</div>
</div>
<div className={'table-col__line'}>
<div className={'table-col-label'}>
盈亏
</div>
<div className={['table-col-value', 'green'].join(' ')}>
+100 USDT
</div>
</div>
</div>
</div>
</div>
))
}
<Pagination onChange={this.pageChange} pageNum={this.state.pageNum}
pageSize={this.state.pageSize} total={this.state.total}></Pagination>
</div>
)
}
// 当前表格
currentTable() {
return (
<div style={this.props.style ?? null} className='c-table-height'>
{
isMobile() ? this.mobileTable() : this.pcTable()
}
</div>
)
}
render() {
const props = this.props;
if (props['v-if']) {
return this.currentTable();
} else {
return <></>;
}
}
}
export default HoldingPosition;
resources/js/Pages/Home/components/TradeDialog/index.less 0 → 100644
.trade-dialog__mobile {
.t-dialog {
width: 90vw;
padding: 20px;
}
.custom-trade-form {
padding-right: 20px;
& > :not(:first-child) {
margin-top: 12px;
}
.trade-form-item {
display: flex;
align-items: center;
.trade-form-item__label {
text-align: right;
width: 60px;
}
.trade-form-item__value {
flex: 1;
box-sizing: border-box;
margin-left: 12px;
.trade-form-input-suffix {
background: #EAECEF;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
margin-right: -8px;
}
.trade-dialog-select {
.t-select {
.t-input__wrap {
width: 100% !important;
.t-input {
&:hover {
border-color: #C99400;
}
}
}
.t-input--focused {
box-shadow: none;
border-color: #C99400;
}
.t-fake-arrow--active {
color: #C99400;
}
.t-input__prefix {
.t-tag {
background-color: #C99400;
color: #fff;
font-weight: 600;
font-size: 11px;
.t-icon {
color: #fff;
}
}
}
}
}
}
}
}
}
.trade-dialog-select__overlay {
.t-select-option {
color: #C99400;
.t-checkbox__input {
border-color: #C99400 !important;
}
}
.t-is-selected {
background-color: white;
.t-checkbox__input {
background-color: #C99400;
border-color: #C99400;
&:hover, &:focus, &:active {
background-color: #C99400;
border-color: #C99400;
}
}
.t-checkbox__label {
color: #C99400;
}
&:hover {
background-color: white;
}
.t-is-checked {
background-color: white;
color: #fff;
}
}
}
resources/js/Pages/Home/components/TradeDialog/index.tsx 0 → 100644
import './index.less'
import {Component} from "react";
import {Dialog} from "tdesign-react";
import {isMobile} from '@/js/utils/tool';
import CustomSelect from "@/js/components/Select";
import CustomInputNumber from '@/js/components/InputNumber';
import CustomInput from '@/js/components/Input';
// 组件名--value的key
const users = 'users'; // 用户
const levers = 'levers'; // 杠杆
export default class TradeDialog extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
[levers]: 1,
}
this.userOptions = [
{
label: '卫总',
value: '1'
},
{
label: '卫总2',
value: '2'
}
]
}
onClose = () => {
const {onClose} = this.props;
if (onClose) {
onClose();
}
}
render() {
const {visible} = this.props;
return (
<Dialog visible={visible} placement={"center"} onClose={this.onClose} footer={false}
className={[isMobile() ? 'trade-dialog__mobile' : ''].join(' ')}>
<div className='custom-trade-form'>
<div className='trade-form-item'>
<div className='trade-form-item__label'>用户</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} multiple={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>交易对</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>策略</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>方向</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>买卖类型</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>交易类型</div>
<div className='trade-form-item__value'>
<CustomSelect options={this.userOptions} className={"trade-dialog-select"}
clearable={true} autoWidth={false}
popupProps={{
overlayClassName: 'trade-dialog-select__overlay'
}}></CustomSelect>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>杠杆</div>
<div className='trade-form-item__value'>
<CustomInputNumber align={'center'} name={levers}></CustomInputNumber>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>买入金额</div>
<div className='trade-form-item__value'>
<CustomInput align={'center'} type={"number"}>
</CustomInput>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>止盈</div>
<div className='trade-form-item__value'>
<CustomInput align={'center'} type={"number"} suffixIcon={
(
<div className='trade-form-input-suffix'>
%
</div>
)
}>
</CustomInput>
</div>
</div>
<div className='trade-form-item'>
<div className='trade-form-item__label'>止损</div>
<div className='trade-form-item__value'>
<CustomInput align={'center'} type={"number"} suffixIcon={
(
<div className='trade-form-input-suffix'>
%
</div>
)
}>
</CustomInput>
</div>
</div>
</div>
</Dialog>
);
}
}
resources/js/Pages/Home/components/TradeSelect/index.less 0 → 100644
.custom-trade-select-box {
display: flex;
flex-wrap: wrap;
row-gap: 6px;
align-items: center;
padding: 0 12px;
margin-left: -12px;
& > :not(:first-child) {
margin-left: 12px;
}
& > * {
margin-left: 12px;
}
.custom-trade-select {
display: flex;
align-items: center;
white-space: nowrap;
font-size: 12px;
.label {
}
.real-trade-select {
.t-input__wrap {
.t-input {
font-size: 12px;
border: none;
}
.t-input--focused {
box-shadow: none;
}
}
}
}
}
.custom-trade-select-box__mobile {
border-bottom: 1px solid #EAECEF;
padding-bottom: 6px;
}
resources/js/Pages/Home/components/TradeSelect/index.tsx 0 → 100644
import './index.less'
import {Component} from "react";
import CustomSelect from "@/js/components/Select";
import CustomButton from '@/js/components/Button';
import {isMobile} from '@/js/utils/tool'
class TradeSelect extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
userSelect: {
label: '全部',
value: '',
options: [
{
label: '全部',
value: 'all'
},
{
label: '公司账户',
value: '1'
},
{
label: '卫总',
value: '2'
}
],
},
pairsSelect: {
label: '交易对',
value: '',
options: [
{
label: '全部',
value: 'all'
},
{
label: 'usdt/bsc',
value: '1'
},
{
label: 'usdt/eth',
value: '2'
}
]
},
direction: {
label: '方向',
value: '',
options: [
{
label: '全部',
value: 'all'
},
{
label: 'usdt/bsc',
value: '1'
},
{
label: 'usdt/eth',
value: '2'
}
]
},
exchange: {
label: '交易所',
value: '',
options: [
{
label: '全部',
value: 'all'
},
{
label: 'usdt/bsc',
value: '1'
},
{
label: 'usdt/eth',
value: '2'
}
]
},
}
}
onFilter(value: string) {
console.log(value)
}
render() {
const {userSelect, pairsSelect, direction, exchange} = this.state;
return (
<div className={[isMobile() ? 'custom-trade-select-box__mobile' : ''].join(' ')}>
<div
className={['custom-trade-select-box'].join(' ')}>
<div className='custom-trade-select'>
<span className='label'>{userSelect.label}</span>
<CustomSelect className='real-trade-select' options={userSelect.options}></CustomSelect>
</div>
<div className='custom-trade-select'>
<span className='label'>{pairsSelect.label}</span>
<CustomSelect className='real-trade-select' options={pairsSelect.options}></CustomSelect>
</div>
<div className='custom-trade-select'>
<span className='label'>{direction.label}</span>
<CustomSelect className='real-trade-select' options={direction.options}></CustomSelect>
</div>
<div className='custom-trade-select'>
<span className='label'>{exchange.label}</span>
<CustomSelect className='real-trade-select' options={exchange.options}></CustomSelect>
</div>
<CustomButton onClick={this.onFilter.bind(this, 'test')}>查询</CustomButton>
<CustomButton>刷新</CustomButton>
</div>
{this.props.children}
</div>
);
}
}
export default TradeSelect;
resources/js/Pages/Home/index.less 0 → 100644
.contract-trade-page {
display: flex;
flex-direction: column;
height: 100%;
}
resources/js/Pages/Home/index.tsx
import './index.less'
import {Head} from '@inertiajs/react';
import {Component} from 'react';
import Layout from '@/js/Layout';
......@@ -5,7 +6,6 @@ import {isMobile} from '@/js/utils/tool';
import Content from "../../Layout/Content";
import ContractAccount from "./components/ContractAccount";
import ContractTrade from './components/ContractTrade';
import {getDomRect} from '@/js/utils/dom'
interface MyProps {
info: any
......@@ -14,31 +14,13 @@ interface MyProps {
interface MyState {
}
// 定义常量
const dom_id = 'contract-trade';
class Index extends Component<MyProps, MyState> {
constructor(props) {
super(props);
this.state = {
minHeight: 0,
}
}
// 获取表格最低高度
getTableHeight = () => {
const dom: HTMLElement = document.getElementById(dom_id);
const rect = getDomRect(dom);
const height = document.documentElement.clientHeight - rect.top;
this.setState({
minHeight: height
})
}
componentDidMount() {
console.log(isMobile())
this.getTableHeight();
// 请求接口
}
......@@ -51,12 +33,10 @@ class Index extends Component<MyProps, MyState> {
<Layout>
<Head title={this.props.info.title}></Head>
<Content>
<div className='contract-trade-page'>
<ContractAccount></ContractAccount>
<ContractTrade id={dom_id} style={
{
minHeight: this.state.minHeight
}
}></ContractTrade>
<ContractTrade></ContractTrade>
</div>
</Content>
</Layout>
)
......
resources/js/components/Button/index.less 0 → 100644
.custom-reset-t-button {
background-color: #EFF1F4 !important;
border-radius: 1px !important;
font-weight: 600 !important;
font-size: 12px !important;
color: #1E2329 !important;
border: none;
height: 24px;
--ripple-color: #C99400 !important;
}
resources/js/components/Button/index.tsx 0 → 100644
import './index.less'
import {Button as TButton} from 'tdesign-react'
export default function (props) {
const {onClick, className} = props;
const btnClick = () => {
if (onClick) {
onClick()
}
}
return (
<TButton onClick={btnClick}
className={['custom-reset-t-button', className ?? ''].join(' ')}>{props.children}</TButton>
)
}
resources/js/components/Input/index.less 0 → 100644
.c-reset-input {
.t-is-focused {
&:hover {
border-color: #C99400;
box-shadow: none;
}
}
}
resources/js/components/Input/index.tsx 0 → 100644
import './index.less';
import {useState} from 'react';
import {Input} from 'tdesign-react';
export default function (props) {
const {align, className, type, suffixIcon} = props;
const realAlign = align ?? 'left';
const realType = type ?? 'text';
const realSuffixIcon = suffixIcon ?? '';
const [value, setValue] = useState('');
// 通知父组件
const inputChange = (value: number) => {
if (props.onChange) {
props.onChange(value);
}
}
return (
<Input
className={['c-reset-input', className].join('')}
placeholder=''
value={value}
type={realType}
align={realAlign}
suffixIcon={realSuffixIcon}
clearable
onChange={(value) => {
setValue(value);
inputChange(value);
}}
onClear={() => {
console.log('onClear');
}}
/>
);
}
resources/js/components/InputNumber/index.less 0 → 100644
.c-reset-input-number-box {
display: flex;
align-items: center;
white-space: nowrap;
.c-reset-input-number {
width: 100%;
.t-input {
}
.t-is-focused {
&:hover {
border-color: #C99400;
box-shadow: none;
}
}
}
}
.c-reset-input-number-add {
.c-reset-input-number {
width: 144px;
flex: 1;
}
.reduce, .add {
background: #EAECEF;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 14px;
color: #1D2129;
}
.add {
}
}
resources/js/components/InputNumber/index.tsx 0 → 100644
import './index.less'
import {InputNumber as TInputNumber} from 'tdesign-react';
import {useState, Component} from "react";
class InputNumber extends Component<any, any> {
constructor(props) {
super(props);
this.state = {
value: 0,
}
}
onSet = (value: number) => {
this.setState({
value: value
})
}
onReduce = () => {
this.onSet(this.state.value - 1);
this.inputChange(this.state.value - 1);
}
onAdd = () => {
this.onSet(this.state.value + 1);
this.inputChange(this.state.value + 1);
}
inputChange = (value: number) => {
if (typeof value === 'number') {
// 提交输入框的值
if (this.props.onChange) {
this.props.onChange(value);
}
}
}
render() {
const {align, addAndSubtract, onChange} = this.props;
const realAlign = align ?? 'left';
// 是否显示加减按钮
const realAddAndSubtract = addAndSubtract ?? true;
return (
<div
className={['c-reset-input-number-box', realAddAndSubtract ? 'c-reset-input-number-add' : ''].join(' ')}>
{
realAddAndSubtract && (
<div className='reduce' onClick={this.onReduce}>-</div>
)
}
<TInputNumber className={'c-reset-input-number'} align={realAlign}
onChange={this.inputChange}
theme="normal"
defaultValue={1}
value={this.state.value}
max={1000} min={0}/>
{
realAddAndSubtract && (
<div className='add' onClick={this.onAdd}>+</div>
)
}
</div>
);
}
}
export default InputNumber;
resources/js/components/Select/index.tsx 0 → 100644
import './index.less';
import React, {useState} from 'react';
import {Select as TSelect} from 'tdesign-react';
export default function (props) {
const {options, className, clearable, multiple, autoWidth, popupProps} = props;
// autoWidth默认为true
const propsAutoWidth = autoWidth ?? true;
const propsPopupProps = popupProps ?? {};
const [value, setValue] = useState('');
const [list, setList] = useState([]);
const onChange = (value) => {
if (multiple) {
setList(value);
} else {
setValue(value);
}
};
return (
<TSelect
className={className}
value={multiple ? list : value}
clearable={clearable}
autoWidth={propsAutoWidth}
popupProps={propsPopupProps}
multiple={multiple}
onChange={onChange}
options={options}
/>
);
}
resources/js/components/Table/index.tsx
import {Component} from 'react';
import {Table as TTable} from 'tdesign-react';
import './index.less'
import './index.less';
import Pagination from '@/js/components/Pagination/index';
class Index extends Component<any, any> {
constructor(props) {
super(props);
}
pageChange(value: number) {
//通知父组件更新当前页面
this.props.onPageChange(value);
}
render() {
const {columns, data} = this.props;
const {columns, data, style, pagination, pageNum, pageSize, total, className, maxHeight} = this.props;
return (
<TTable columns={columns} data={data} className={'reset-t-table'}>
<div style={style ?? null} className={className}>
<TTable rowKey={'index'} columns={columns} data={data}
className={['reset-t-table'].join(' ')}
maxHeight={maxHeight ?? ''}
>
</TTable>
{
pagination && (
<Pagination onChange={this.pageChange} pageNum={pageNum}
pageSize={pageSize} total={total}></Pagination>
)
}
</div>
)
}
}
......
resources/js/constants/trade.ts 0 → 100644
/**
* @description: Table name
*/
export const table_HoldingPosition = '1';
export const table_CurrentConsignment = '2';
export const table_HistoryTransaction = '3';
resources/js/redux/reducers/count.ts
export default function setCount(pre = 1, action) {//第一个参数是初始化仓库状态的初始值，第二个参数是action对象
const {type, data} = action
switch (type) {
case 1:
return pre + data
case 2:
return pre - data
default:
return pre
if (type == 'count') {
console.log('count执行了')
console.log(pre)
console.log(action)
return pre + 1;
}
return pre;
}
resources/js/redux/reducers/list.ts
export default function setList(pre = [], action) {
const {type, data} = action
switch (type) {
case 1:
return [data, ...pre]
default:
return pre
const {type} = action;
if (type == 'list') {
console.log('list执行了')
console.log(pre)
console.log(action)
}
return [];
}
resources/js/utils/dom.ts
......@@ -2,3 +2,10 @@
export const getDomRect = (dom: HTMLElement) => {
return dom.getBoundingClientRect();
}
/**
* 元素是否显示(v-if)(v-show)
*/
export const isShow = (status: number, type: 'if' | 'show' = 'show') => {
return status ? '' : 'none';
}
routes/web.php
......@@ -16,6 +16,8 @@
Route::group([
'namespace' => '\App\Http\Controllers\Web',
], function () {
Route::get('/', 'HomeController@index')->name('home.index');
Route::get('/detail', 'DetailController@index')->name('detail.index');
// 现货交易
Route::get('/', 'TradeController@spot')->name('trade.spot');
// 合约交易
Route::get('/ContractTrade', 'TradeController@contract')->name('trade.contract');
});
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 to comment