# 页面地址 [BinanceAccountView.vue](TonyMask/src/pages/BinanceAccountView.vue)

# 页面设计

- 需要在 Header 右侧显示当前 用户名(加粗,加大显示)
  - 从已登录信息中获取当前用户名

# 页面功能

## 接口信息

- 接口地址 GET /api/binance/account/info
- 接口返回的结构体

```go
// Account define account info
type Account struct {
	MakerCommission  int64           `json:"makerCommission"`
	TakerCommission  int64           `json:"takerCommission"`
	BuyerCommission  int64           `json:"buyerCommission"`
	SellerCommission int64           `json:"sellerCommission"`
	CommissionRates  CommissionRates `json:"commissionRates"`
	CanTrade         bool            `json:"canTrade"`
	CanWithdraw      bool            `json:"canWithdraw"`
	CanDeposit       bool            `json:"canDeposit"`
	UpdateTime       uint64          `json:"updateTime"`
	AccountType      string          `json:"accountType"`
	Balances         []Balance       `json:"balances"`
	Permissions      []string        `json:"permissions"`
	UID              int64           `json:"uid"`
}

type CommissionRates struct {
	Maker  string `json:"maker"`
	Taker  string `json:"taker"`
	Buyer  string `json:"buyer"`
	Seller string `json:"seller"`
}

// Balance define user balance of your account
type Balance struct {
	Asset  string `json:"asset"`
	Free   string `json:"free"`
	Locked string `json:"locked"`
}
```

## 账户支持的交易对信息

### 账户支持的交易对模块

- 查看状态
  - 使用隐藏的输入框,包含胶囊按钮状交易对信息
  - 输入框隐藏,不可见
  -
- 账户支持的交易对信息,通过如下接口获取
  - 接口地址 GET /api/binance/account/symbols/get
- 胶囊按钮状显示每一个支持的交易对信息
  - 包含 交易对图标 简称
  - 图标信息通过[CryptoIcon.vue](TonyMask/src/components/CryptoIcon.vue)获取
- 右侧有编辑按钮,点击编辑之后进入编辑模式
  - 隐藏输入框出现
  - 胶囊按钮出现删除按键
  - 右侧编辑按键变为保存按键

### 添加账户支持加密货币

- 账户支持的交易对模块进入编辑模式后
- 空白侧支持点击
- 点击之后,可以使用[CurrencySelector.vue](/TonyMask/src/components/CurrencySelector.vue)进行交易对选择
  - 选择之后,立即调用添加接口
  - 接口地址 POST /api/binance/account/symbols/add
- 当点击保存按钮之后,退出编辑模式

### 删除账户支持的加密货币

- 账户支持的交易对模块进入编辑模式后
- 可以通过胶囊按钮的删除键进行删除
  - 点击删除按键后,立刻调用删除接口
  - 接口地址 POST /api/binance/account/symbols/delete
- 当点击保存按钮之后,退出编辑模式

## 账户信息模块
- 使用矩形长条状展示账户信息
  - 账户UID
  - 账户类型
  - 能否交易
  - 能否提款
  - 能够充值
  - 交易手续费
  - 账户权限

## 资产详情模块

- 使用表格的形式展示当前用户的资产信息

### 表格设计

- 表格头从左到右依次展示

  - 文字输入框-筛选功能-快速根据币种简称 币种名称筛选到币种
  - 刷新按钮
    - 用于刷新调用币种实时价格
  - 汇总计算-当前账户总资产-累加每一行的资产总计
    - 加粗显示

- 表格内容展示

  - 统一采用四舍五入保存两位小数
  - 统一不显示单位

- 按照如下的顺序展示列信息
  - 币种图标
    - 不显示表头
  - 币种大写名称
    - 表头显示名称
  - 币种实时价格
    - 表头显示实时价格
  - 币种总数量
    - 表头显示总数量
  - 币种可使用数量
    - 表头显示可使用数量
  - 币种冻结数量
    - 表头显示冻结数量
  - 币种总计
    - 表头显示币种总计
    - 该行币种总数量与币种的实时价格相乘的结果

### 币种实时价格列展示

- 使用 symbols 参数,将 account_info 接口中的所有币种,一次查询
- 查询币种的实时价格 接口地址为 POST /api/binance/market/ticker/price
- 具体函数为 [binance_market_handler.go](TonyCryptoOctopus\handler\binance_market_handler.go)中的 GetPriceTickerHandler 方法
