From 3f3e2d5977787b0c6e09cd5cba7b41e5fb7d3fd0 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Sun, 21 Apr 2024 15:59:28 +0800
Subject: [PATCH] first
---
src/page/tradeRecord/index.vue | 496 +++++++++++++++++++++++++++++-------------------------
1 files changed, 263 insertions(+), 233 deletions(-)
diff --git a/src/page/tradeRecord/index.vue b/src/page/tradeRecord/index.vue
index 2b835ab..cedf94c 100644
--- a/src/page/tradeRecord/index.vue
+++ b/src/page/tradeRecord/index.vue
@@ -1,279 +1,309 @@
<template>
- <div class="tradeRecord">
- <assets-head :title="$t('交易记录')" />
- <div class="content">
- <van-tabs v-model="active" class="w-full px-32 box-border" sticky @click="changeType">
-
- <van-tab :title="$t('当前委托')" class="font-30">
- <div class="all-select flex justify-end">
- <div class="select-box flex" @click.stop="isAll = !isAll">
- <div class="flex-1 font-24">
- {{ symbol.toUpperCase() }}/USDT
- </div>
- <van-icon name="arrow-down" />
- <div class="select-data" v-if="isAll">
- <div class="select-item font-24" @click.stop="selectItem(item)"
- v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
- </div>
- </div>
- </div>
- </div>
- <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
- @cancelOrder="cancelOrder" />
- </van-tab>
- <van-tab :title="$t('历史委托')">
- <div class="all-select flex justify-end">
- <div class="select-box flex" @click.stop="isAll = !isAll">
- <div class="flex-1">
- {{ symbol.toUpperCase() }}/USDT
- </div>
- <van-icon name="arrow-down" />
- <div class="select-data" v-if="isAll">
- <div class="select-item" @click.stop="selectItem(item)"
- v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
- </div>
- </div>
- </div>
- </div>
- <history-item :coinPrice="coinPrice" v-for="item in entrustList" :key="item.order_no" :entrust="item"
- :state="item.state" @cancelOrder="cancelOrder" />
- </van-tab>
- <van-tab :title="$t('成交历史')" class="font-30">
- <div class="all-select flex justify-end">
- <div class="select-box flex" @click.stop="isAll = !isAll">
- <div class="flex-1">
- {{ symbol.toUpperCase() }}/USDT
- </div>
- <van-icon name="arrow-down" />
- <div class="select-data" v-if="isAll">
- <div class="select-item" @click.stop="selectItem(item)"
- v-for="(item, index) in currencyList" :key="index">{{ item.symbol.toUpperCase() }}/USDT
- </div>
- </div>
- </div>
- </div>
- <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
- @cancelOrder="cancelOrder" />
- </van-tab>
- </van-tabs>
- <div v-if="!entrustList.length" class="flex flex-col justify-center items-center pt-185">
- <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
- <p class="textColor">{{ $t('暂无数据') }}</p>
+ <div class="tradeRecord">
+ <assets-head :title="$t('交易记录')" />
+ <div class="content">
+ <van-tabs
+ v-model="active"
+ class="w-full px-32 box-border"
+ sticky
+ @click="changeType"
+ >
+ <van-tab :title="$t('当前委托')" class="font-30">
+ <div class="all-select flex justify-end">
+ <div class="select-box flex" @click.stop="isAll = !isAll">
+ <div class="flex-1 font-24">{{ symbol.toUpperCase() }}/USDT</div>
+ <van-icon name="arrow-down" />
+ <div class="select-data" v-if="isAll">
+ <div
+ class="select-item font-24"
+ @click.stop="selectItem(item)"
+ v-for="(item, index) in currencyList"
+ :key="index"
+ >
+ {{ item.symbol.toUpperCase() }}/USDT
+ </div>
+ </div>
</div>
- </div>
+ </div>
+ <entrust-item
+ v-for="item in entrustList"
+ :key="item.order_no"
+ :entrust="item"
+ :state="item.state"
+ @cancelOrder="cancelOrder"
+ />
+ </van-tab>
+ <van-tab :title="$t('历史委托')">
+ <div class="all-select flex justify-end">
+ <div class="select-box flex" @click.stop="isAll = !isAll">
+ <div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
+ <van-icon name="arrow-down" />
+ <div class="select-data" v-if="isAll">
+ <div
+ class="select-item"
+ @click.stop="selectItem(item)"
+ v-for="(item, index) in currencyList"
+ :key="index"
+ >
+ {{ item.symbol.toUpperCase() }}/USDT
+ </div>
+ </div>
+ </div>
+ </div>
+ <history-item
+ :coinPrice="coinPrice"
+ v-for="item in entrustList"
+ :key="item.order_no"
+ :entrust="item"
+ :state="item.state"
+ @cancelOrder="cancelOrder"
+ />
+ </van-tab>
+ <van-tab :title="$t('成交历史')" class="font-30">
+ <div class="all-select flex justify-end">
+ <div class="select-box flex" @click.stop="isAll = !isAll">
+ <div class="flex-1">{{ symbol.toUpperCase() }}/USDT</div>
+ <van-icon name="arrow-down" />
+ <div class="select-data" v-if="isAll">
+ <div
+ class="select-item"
+ @click.stop="selectItem(item)"
+ v-for="(item, index) in currencyList"
+ :key="index"
+ >
+ {{ item.symbol.toUpperCase() }}/USDT
+ </div>
+ </div>
+ </div>
+ </div>
+ <entrust-item
+ v-for="item in entrustList"
+ :key="item.order_no"
+ :entrust="item"
+ :state="item.state"
+ @cancelOrder="cancelOrder"
+ />
+ </van-tab>
+ </van-tabs>
+ <div
+ v-if="!entrustList.length"
+ class="flex flex-col justify-center items-center pt-185"
+ >
+ <img
+ src="@/assets/image/assets-center/no-data.png"
+ alt="no-date"
+ class="w-180 h-180"
+ />
+ <p class="textColor">{{ $t("暂无数据") }}</p>
+ </div>
</div>
+ </div>
</template>
<script>
import assetsHead from "@/components/assets-head";
-import { Tabs, Tab, DropdownMenu, DropdownItem } from 'vant';
-import EntrustItem from '@/components/entrust-item'
-import historyItem from '@/components/history-item'
+import { Tabs, Tab, DropdownMenu, DropdownItem } from "vant";
+import EntrustItem from "@/components/entrust-item";
+import historyItem from "@/components/history-item";
import TradeApi from "@/API/trading.js";
-import { _getCoins, _getHomeList } from '@/API/home.api'
+import { _getCoins, _getHomeList } from "@/API/home.api";
export default {
- props: {
-
+ props: {},
+ components: {
+ assetsHead,
+ [Tabs.name]: Tabs,
+ [Tab.name]: Tab,
+ [DropdownMenu.name]: DropdownMenu,
+ [DropdownItem.name]: DropdownItem,
+ EntrustItem,
+ historyItem,
+ },
+ data() {
+ return {
+ active: 0,
+ entrustList: [],
+ historyList: [],
+ finishList: [],
+ type: "orders",
+ isAll: false,
+ symbol: "",
+ currencyList: [],
+ coinPrice: 0,
+ };
+ },
+ watch: {
+ active() {
+ this.isAll = false;
},
- components: {
- assetsHead,
- [Tabs.name]: Tabs,
- [Tab.name]: Tab,
- [DropdownMenu.name]: DropdownMenu,
- [DropdownItem.name]: DropdownItem,
- EntrustItem,
- historyItem
+ },
+ mounted() {
+ this.getCoins();
+ this.symbol = this.$route.params.symbol;
+ this.getOrderList(this.type);
+ this.getCoinPrce(this.symbol);
+ },
+ computed: {},
+ methods: {
+ getCoins() {
+ _getCoins().then((res) => {
+ console.log(res);
+ this.currencyList = res;
+ });
},
- data() {
- return {
- active: 0,
- entrustList: [],
- historyList: [],
- finishList: [],
- type: 'orders',
- isAll: false,
- symbol: '',
- currencyList: [],
- coinPrice: 0
- }
+ getCoinPrce(val) {
+ _getHomeList(val).then((res) => {
+ this.coinPrice = res[0].close;
+ });
},
- watch: {
- active() {
- this.isAll = false
- }
+ getOrderList(type) {
+ this.entrustList = [];
+ TradeApi.tradeRecord({
+ page_no: 1,
+ symbol: this.symbol,
+ type: type,
+ })
+ .then((res) => {
+ console.log(res.data);
+ this.entrustList = res.data;
+ })
+ .catch(() => {});
},
- mounted() {
- this.getCoins()
- this.symbol = this.$route.params.symbol
- this.getOrderList(this.type)
- this.getCoinPrce(this.symbol)
+ changeType() {
+ this.entrustList = [];
+ if (this.active == 0) {
+ this.type = "orders";
+ } else if (this.active == 1) {
+ this.type = "hisorders";
+ } else {
+ this.type = "opponent";
+ }
+ this.getOrderList(this.type);
},
- computed: {
+ cancelOrder(order) {
+ TradeApi.tradeCancel({
+ order_no: order,
+ })
+ .then((res) => {
+ this.$toast(this.$t("成功"));
+ this.getOrderList(this.type);
+ })
+ .catch(() => {});
},
- methods: {
- getCoins() {
- _getCoins().then((res) => {
- console.log(res)
- this.currencyList = res
- })
- },
- getCoinPrce(val) {
- _getHomeList(val).then((res) => {
- this.coinPrice = res[0].close
- })
- },
- getOrderList(type) {
- this.entrustList = []
- TradeApi.tradeRecord({
- page_no: 1,
- symbol: this.symbol,
- type: type
- }).then(res => {
- console.log(res.data)
- this.entrustList = res.data;
- }).catch(() => {
-
- })
- },
- changeType() {
- this.entrustList = [];
- if (this.active == 0) {
- this.type = 'orders'
- } else if (this.active == 1) {
- this.type = 'hisorders'
- } else {
- this.type = 'opponent'
- }
- this.getOrderList(this.type);
- },
- cancelOrder(order) {
- TradeApi.tradeCancel({
- order_no: order,
- }).then(res => {
- this.$toast(this.$t('成功'));
- this.getOrderList(this.type)
- }).catch(() => {
-
- })
- },
- //选择币种
- selectItem(item) {
- this.symbol = item.symbol
- this.getOrderList()
- this.getCoinPrce(item.symbol)
- this.isAll = false
- }
- }
-}
+ //选择币种
+ selectItem(item) {
+ this.symbol = item.symbol;
+ this.getOrderList();
+ this.getCoinPrce(item.symbol);
+ this.isAll = false;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.tradeRecord {
- width: 100%;
- min-height: 100vh;
- box-sizing: border-box;
+ width: 100%;
+ min-height: 100vh;
+ box-sizing: border-box;
+ @include themify() {
+ background: themed("main_background");
+ }
+
+ ::v-deep .van-tab {
@include themify() {
- background: themed("main_background");
+ color: themed("text_color");
}
+ }
- ::v-deep .van-tab {
- @include themify() {
- color: themed("text_color");
- }
+ ::v-deep .van-tabs__nav {
+ @include themify() {
+ background: themed("tab_background");
}
+ }
- ::v-deep .van-tabs__nav {
- @include themify() {
- background: themed("tab_background");
- }
+ ::v-deep .van-tab--active {
+ background: #1194f7;
+ border-radius: 5px;
+ color: #fff !important;
+ }
+ ::v-deep .van-nav-bar {
+ @include themify() {
+ background: themed("main_background");
}
+ }
- ::v-deep .van-tab--active {
- background: #1194F7;
- border-radius: 5px;
- color: #fff !important;
+ ::v-deep .van-nav-bar__title {
+ @include themify() {
+ color: themed("text_color");
}
+ }
- ::v-deep .van-nav-bar {
- @include themify() {
- background: themed("main_background");
- }
+ ::v-deep .van-tabs__nav {
+ @include themify() {
+ background: themed("main_background");
}
+ }
- ::v-deep .van-nav-bar__title {
- @include themify() {
- color: themed("text_color");
- }
- }
-
- ::v-deep .van-tabs__nav {
- @include themify() {
- background: themed("main_background");
- }
- }
-
- ::v-deep .van-tabs__line {
- background-color: transparent !important;
-
- }
+ ::v-deep .van-tabs__line {
+ background-color: transparent !important;
+ }
}
.listItem {
- border-bottom: 1px solid #484756;
- display: flex;
- justify-content: space-between;
+ border-bottom: 1px solid #484756;
+ display: flex;
+ justify-content: space-between;
}
.all-select {
- padding: 30px 0;
+ padding: 30px 0;
- .select-box {
- width: 160px;
- height: 50px;
+ .select-box {
+ width: 160px;
+ height: 50px;
- @include themify() {
- background: themed("input_background");
- }
-
- @include themify() {
- color: themed("text_color");
- }
-
- display: flex;
- align-items: center;
- font-size: 14px;
- padding: 0 20px;
- position: relative;
-
- .select-data {
- position: absolute;
- top: 55px;
- left: 0;
- z-index: 10;
- width: 100%;
- height: 300px;
- overflow-y: auto;
-
- @include themify() {
- background: themed("input_background");
- }
-
-
- .select-item {
- padding: 20px 20px;
- text-align: center;
-
- @include themify() {
- border-bottom: 1px solid themed("border_color");
- }
- }
- }
+ @include themify() {
+ background: themed("input_background");
}
+
+ @include themify() {
+ color: themed("text_color");
+ }
+
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ padding: 0 20px;
+ position: relative;
+
+ .select-data {
+ position: absolute;
+ top: 55px;
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ height: 300px;
+ overflow-y: auto;
+
+ @include themify() {
+ background: themed("input_background");
+ }
+
+ .select-item {
+ padding: 20px 20px;
+ text-align: center;
+
+ @include themify() {
+ border-bottom: 1px solid themed("border_color");
+ }
+ }
+ }
+ }
}
.textColor {
- color: #DAD5DC;
+ color: #dad5dc;
}
</style>
--
Gitblit v1.9.3