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/perpetualContract/perpetualHistory.vue | 659 +++++++++++++++++++++++++++++------------------------------
1 files changed, 325 insertions(+), 334 deletions(-)
diff --git a/src/page/perpetualContract/perpetualHistory.vue b/src/page/perpetualContract/perpetualHistory.vue
index 4d75ea6..c7f6a9f 100644
--- a/src/page/perpetualContract/perpetualHistory.vue
+++ b/src/page/perpetualContract/perpetualHistory.vue
@@ -1,369 +1,360 @@
<template>
- <!-- U本位合约历史 -->
- <div class="perpetualHistory">
- <assets-head :title="$t('U本位合约历史')" :backFunc="() => {
- if ($route.query.goback) {
- $router.push({
- path: '/funds',
- query: {
- tab: 2,
- index: 0 // 0: 查看理财订单 1: 矿机
+ <!-- U本位合约历史 -->
+ <div class="perpetualHistory">
+ <assets-head
+ :title="$t('U本位合约历史')"
+ :backFunc="
+ () => {
+ if ($route.query.goback) {
+ $router.push({
+ path: '/funds',
+ query: {
+ tab: 2,
+ index: 0, // 0: 查看理财订单 1: 矿机
+ },
+ });
+ } else {
+ //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
+ $router.go(-1);
}
- })
- } else {
- //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
- $router.go(-1)
- }
- }" />
- <div>
- <van-tabs ref="tabs" v-model="type" @change="onChange" sticky>
- <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
- <div class="all-select flex justify-end" v-if="symbol">
- <div class="select-box flex" @click.stop="isAll = !isAll">
- <div class="flex-1 font-24" v-if="symbol === 'wld'">
- FTB/USDT
- </div>
- <div class="flex-1 font-24" v-else-if="symbol === 'mln'">
- DKL/USDT
- </div>
- <div class="flex-1 font-24" v-else-if="symbol === 'qtum'">
- BQHN/USDT
- </div>
- <div class="flex-1 font-24" v-else-if="symbol === 'knc'">
- XCM/USDT
- </div>
- <div class="flex-1 font-24" v-else-if="symbol === 'vet'">
- ACG/USDT
- </div>
-
- <div class="flex-1 font-24" v-else>
- {{ 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(item2)" v-for="(item2, index) in currencyList"
- :key="index">{{ item2.symbolFullName }}</div>
+ }
+ "
+ />
+ <div>
+ <van-tabs ref="tabs" v-model="type" @change="onChange" sticky>
+ <van-tab
+ :title="item.title"
+ v-for="item in selectData"
+ :key="item.title"
+ :name="item.type"
+ >
+ <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(item2)"
+ v-for="(item2, index) in currencyList"
+ :key="index"
+ >
+ {{ item2.symbol.toUpperCase() }}/USDT
+ </div>
</div>
- <!-- <div data-v-5764026c="" class="select-data" @click.stop="selectItem(item2)" v-if="isAll">
- <div data-v-5764026c="" class="select-item font-24">WLD/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">WDC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">BTC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">ETH/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">XTZ/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">ADA/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">YFII/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">MLN/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">YFI/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">DAI/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">ETC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">XRP/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">LTC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">USDC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">KNC/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">DOGE/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">VET/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">SHIB/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">QTUM/USDT</div>
- <div data-v-5764026c="" class="select-item font-24">ICP/USDT</div>
- </div> -->
- </div>
- </div>
- <template v-if="type === 'orders'">
- <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
- :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">
- <PerpetualEntrustList v-if="type === 'orders'" :list-data="dataList.orders"
- @recall="recall">
- </PerpetualEntrustList>
- <div class="flex flex-col justify-center pt-50 pb-20 items-center"
- v-if="!dataList.orders.length && !loading">
- <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
- <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
- </div>
- </van-list>
- </template>
+ </div>
+ </div>
+ <template v-if="type === 'orders'">
+ <van-list
+ v-model="loading"
+ :loading-text="$t('加载中...')"
+ :finished="finished"
+ :finished-text="
+ dataList.orders.length ? $t('已经全部加载完毕') : ''
+ "
+ @load="onLoad"
+ :offset="130"
+ >
+ <PerpetualEntrustList
+ v-if="type === 'orders'"
+ :list-data="dataList.orders"
+ @recall="recall"
+ >
+ </PerpetualEntrustList>
+ <div
+ class="flex flex-col justify-center pt-50 pb-20 items-center"
+ v-if="!dataList.orders.length && !loading"
+ >
+ <img
+ src="@/assets/image/assets-center/no-data.png"
+ alt=""
+ class="w-180 h-180"
+ />
+ <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
+ </div>
+ </van-list>
+ </template>
- <template v-if="type === 'hisorders'">
-
- <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
- :finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad"
- :offset="130">
-
- <PerpetualHistoryPosition :list-data="dataList.hisorders"></PerpetualHistoryPosition>
- <div class="flex flex-col justify-center pt-50 pb-20 items-center"
- v-if="!dataList.hisorders.length && !loading">
- <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
- <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
- </div>
- </van-list>
- </template>
- </van-tab>
- </van-tabs>
- </div>
- </div>
+ <template v-if="type === 'hisorders'">
+ <van-list
+ v-model="loading"
+ :loading-text="$t('加载中...')"
+ :finished="finished"
+ :finished-text="
+ dataList.hisorders.length ? $t('已经全部加载完毕') : ''
+ "
+ @load="onLoad"
+ :offset="130"
+ >
+ <PerpetualHistoryPosition
+ :list-data="dataList.hisorders"
+ ></PerpetualHistoryPosition>
+ <div
+ class="flex flex-col justify-center pt-50 pb-20 items-center"
+ v-if="!dataList.hisorders.length && !loading"
+ >
+ <img
+ src="@/assets/image/assets-center/no-data.png"
+ alt=""
+ class="w-180 h-180"
+ />
+ <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
+ </div>
+ </van-list>
+ </template>
+ </van-tab>
+ </van-tabs>
+ </div>
+ </div>
</template>
<script>
- import assetsHead from "@/components/assets-head";
- import PerpetualEntrustList from '@/components/perpetual-entrust-list/index.vue';
- import PerpetualHistoryPosition from '@/components/perpetual-history-position/index.vue';
- import {
- _orderListCur,
- _orderListHold
- } from '@/API/trade.api'
- import {
- _getCoins
- } from '@/API/home.api'
- import {
- List,
- Tab,
- Tabs,
- DropdownMenu,
- DropdownItem
- } from 'vant';
- export default {
- data() {
- return {
- type: "orders",
- dataList: {
- orders: [],
- hisorders: []
- },
- isAll: false,
- symbol: '',
- selectData: [{
- title: this.$t('当前委托'),
- type: 'orders'
- },
- {
- title: this.$t('历史仓位'),
- type: 'hisorders'
- },
- ],
- loading: false,
- finished: false,
- page: 1,
- };
- },
- mounted() {
- this.getCoins()
- this.symbol = this.$route.query.symbol
- },
- methods: {
- getCoins() {
- _getCoins().then((res) => {
- console.log(res)
- this.currencyList = res
- })
- },
- onChange(e) {
- this.dataList[e] = []
- this.finished = false
- this.page = 1
- this.type = e
- this.loading = true;
- if (this.loading) {
- this.fetchList(this.symbol)
- }
- },
- onClickLeft() {
- this.$router.go(-1);
- },
- async fetchList(symbol) {
- const _api = this.type === 'orders' ? _orderListCur : _orderListHold
- const type = this.type
- _api(symbol, type, this.page).then(data => {
- this.dataList[type] = this.dataList[type].concat(data)
- this.loading = false
- if (data.length < 10) {
- this.finished = true
- }
- this.page++
- })
- },
- recall() {
- this.page = 1;
- this.dataList.orders = []
- this.fetchList(this.symbol)
- },
- onLoad() {
- this.fetchList(this.symbol)
- },
- //选择币种
- selectItem(item) {
- this.dataList[this.type] = []
- this.page = 1
- this.symbol = item.symbol
- this.fetchList(this.symbol)
- this.isAll = false
- }
- },
- components: {
- PerpetualEntrustList,
- PerpetualHistoryPosition,
- assetsHead,
- [DropdownMenu.name]: DropdownMenu,
- [DropdownItem.name]: DropdownItem,
- [List.name]: List,
- [Tabs.name]: Tabs,
- [Tab.name]: Tab
- },
- beforeRouteEnter(to, from, next) {
- const {
- query: {
- symbol
- }
- } = to
- next(vm => {
- vm.symbol = symbol
-
- })
- }
- }
+import assetsHead from "@/components/assets-head";
+import PerpetualEntrustList from "@/components/perpetual-entrust-list/index.vue";
+import PerpetualHistoryPosition from "@/components/perpetual-history-position/index.vue";
+import { _orderListCur, _orderListHold } from "@/API/trade.api";
+import { _getCoins } from "@/API/home.api";
+import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
+import { _symbolName } from "@/utils/filter";
+export default {
+ data() {
+ return {
+ type: "orders",
+ dataList: {
+ orders: [],
+ hisorders: [],
+ },
+ isAll: false,
+ symbol: "",
+ selectData: [
+ {
+ title: this.$t("当前委托"),
+ type: "orders",
+ },
+ {
+ title: this.$t("历史仓位"),
+ type: "hisorders",
+ },
+ ],
+ loading: false,
+ finished: false,
+ page: 1,
+ };
+ },
+ mounted() {
+ this.getCoins();
+ this.symbol = this.$route.query.symbol;
+ },
+ methods: {
+ getCoins() {
+ _getCoins().then((res) => {
+ console.log(res);
+ this.currencyList = res;
+ });
+ },
+ onChange(e) {
+ this.dataList[e] = [];
+ this.finished = false;
+ this.page = 1;
+ this.type = e;
+ this.loading = true;
+ if (this.loading) {
+ this.fetchList(this.symbol);
+ }
+ },
+ onClickLeft() {
+ this.$router.go(-1);
+ },
+ async fetchList(symbol) {
+ const _api = this.type === "orders" ? _orderListCur : _orderListHold;
+ const type = this.type;
+ _api(symbol, type, this.page).then((data) => {
+ this.dataList[type] = this.dataList[type].concat(data);
+ this.loading = false;
+ if (data.length < 10) {
+ this.finished = true;
+ }
+ this.page++;
+ });
+ },
+ recall() {
+ this.page = 1;
+ this.dataList.orders = [];
+ this.fetchList(this.symbol);
+ },
+ onLoad() {
+ this.fetchList(this.symbol);
+ },
+ //选择币种
+ selectItem(item) {
+ this.dataList[this.type] = [];
+ this.page = 1;
+ this.symbol = item.symbol;
+ this.fetchList(this.symbol);
+ this.isAll = false;
+ },
+ },
+ components: {
+ PerpetualEntrustList,
+ PerpetualHistoryPosition,
+ assetsHead,
+ [DropdownMenu.name]: DropdownMenu,
+ [DropdownItem.name]: DropdownItem,
+ [List.name]: List,
+ [Tabs.name]: Tabs,
+ [Tab.name]: Tab,
+ },
+ beforeRouteEnter(to, from, next) {
+ const {
+ query: { symbol },
+ } = to;
+ next((vm) => {
+ vm.symbol = symbol;
+ });
+ },
+};
</script>
<style lang="scss" scoped>
- .perpetualHistory {
- width: 100%;
- box-sizing: border-box;
- min-height: 100vh;
+.perpetualHistory {
+ width: 100%;
+ box-sizing: border-box;
+ min-height: 100vh;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
- ::v-deep .van-tab {
- @include themify() {
- 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-tab--active {
+ background: #1194f7;
+ border-radius: 5px;
+ color: #fff !important;
+ }
- ::v-deep .van-nav-bar {
- @include themify() {
- background: themed("main_background");
- }
- }
+ ::v-deep .van-nav-bar {
+ @include themify() {
+ background: themed("main_background");
+ }
+ }
- ::v-deep .van-nav-bar__title {
- @include themify() {
- color: themed("text_color");
- }
- }
+ ::v-deep .van-nav-bar__title {
+ @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-tabs__line {
- background-color: transparent !important;
+ ::v-deep .van-tabs__line {
+ background-color: transparent !important;
+ }
+}
- }
+.active-line {
+ position: relative;
+ padding-bottom: 30px;
+ color: #1194f7;
+}
- }
+.active-line::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 0;
+ right: 0;
+ width: 280px;
+ height: 8px;
- .active-line {
- position: relative;
- padding-bottom: 30px;
- color: #1194F7;
- }
+ @include themify() {
+ background-color: themed("color_main");
+ }
+}
- .active-line::after {
- content: '';
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: 0;
- right: 0;
- width: 280px;
- height: 8px;
+::v-deep .van-tabs {
+ padding: 0 40px !important;
+}
- @include themify() {
- background-color: themed("color_main");
- }
- }
+::v-deep .van-nav-bar {
+ @include themify() {
+ background: themed("main_background");
+ }
+}
- ::v-deep .van-tabs {
- padding: 0 40px !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-tab--active {
+ color: #fff;
+}
- ::v-deep .van-tabs__nav {
- @include themify() {
- background: themed("main_background");
- }
- }
+.all-select {
+ padding: 30px 30px;
- ::v-deep .van-tab--active {
- color: #fff;
- }
+ .select-box {
+ width: 160px;
+ height: 50px;
- .all-select {
- padding: 30px 30px;
+ @include themify() {
+ background: themed("input_background");
+ }
- .select-box {
- width: 160px;
- height: 50px;
+ @include themify() {
+ color: themed("text_color");
+ }
- @include themify() {
- background: themed("input_background");
- }
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ padding: 0 20px;
+ position: relative;
- @include themify() {
- color: themed("text_color");
- }
+ .select-data {
+ position: absolute;
+ top: 55px;
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ height: 300px;
+ overflow-y: auto;
- display: flex;
- align-items: center;
- font-size: 14px;
- padding: 0 20px;
- position: relative;
+ @include themify() {
+ background: themed("input_background");
+ }
- .select-data {
- position: absolute;
- top: 55px;
- left: 0;
- z-index: 10;
- width: 100%;
- height: 300px;
- overflow-y: auto;
+ .select-item {
+ padding: 20px 20px;
+ text-align: center;
- @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() {
+ border-bottom: 1px solid themed("border_color");
+ }
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.3