From fcb00a66b4053550b473a29d7299c7a4737eea75 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 14:41:04 +0800
Subject: [PATCH] 翻译
---
src/page/deliveryContract/hold.vue | 422 ++++++++++++++++++++++++++++------------------------
1 files changed, 230 insertions(+), 192 deletions(-)
diff --git a/src/page/deliveryContract/hold.vue b/src/page/deliveryContract/hold.vue
index e14a74a..7fa8d1e 100644
--- a/src/page/deliveryContract/hold.vue
+++ b/src/page/deliveryContract/hold.vue
@@ -1,217 +1,255 @@
<template>
- <!-- 持有仓位列表 -->
- <div>
- <!-- <div class="flex justify-between" v-if="listData.length">-->
- <!-- <div class="flex" @click.stop="changeIcon">-->
- <!-- <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
- <!-- <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
- <!-- <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
- <!-- </div>-->
- <!-- </div>-->
- <div class="" v-for="item in listData" :key="item.order_no">
- <div class="flex justify-between pt-44 pb-44">
- <div class="flex flex-col">
- <div class="flex items-center">
- <div class="pl-10 pr-11 pt-5 pb-5 text-white open-btn"
- :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'">
- {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
- </div>
- <div class="ml-22 font-31 font-600">
- <span class="textColor">{{ item.name }} {{ $t('交割') }}</span>
- <span class="text-grey font-28 font-400 ml-17 mr-17">{{ $t('全仓') }} {{ item.lever_rate
- }}x</span>
- </div>
- <img v-if="item.direction == 'buy'" src="../../assets/image/public/green-leverage.png" alt=""
- class="w-32 h-32" />
- <img v-else src="../../assets/image/public/red-leverage.png" alt="" class="w-32 h-32" />
- </div>
- </div>
+ <!-- 持有仓位列表 -->
+ <div>
+ <!-- <div class="flex justify-between" v-if="listData.length">-->
+ <!-- <div class="flex" @click.stop="changeIcon">-->
+ <!-- <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
+ <!-- <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
+ <!-- <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <div class="" v-for="item in listData" :key="item.order_no">
+ <div class="flex justify-between pt-44 pb-44">
+ <div class="flex flex-col">
+ <div class="flex items-center">
+ <div
+ class="pl-10 pr-11 pt-5 pb-5 text-white open-btn"
+ :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'"
+ >
+ {{ item.direction == "buy" ? $t("开多") : $t("开空") }}
</div>
- <div class="flex justify-between">
- <div class="fexl-1">
- <div class="text-grey">{{ $t('购买价') }}(USDT)</div>
- <div class="mt-20 textColor">{{ item.open_price }}</div>
- </div>
- <div>
- <div class="text-grey text-right">{{ $t('现价') }}</div>
- <div class="mt-20 text-right" :class="item.close_price > item.open_price ? 'text-green' : 'text-red'">
- <!-- {{ item.close_price }} -->
- {{newprice}}
- </div>
- </div>
+ <div class="ml-22 font-31 font-600">
+ <span class="textColor">{{ item.name }} {{ $t("交割") }}</span>
+ <span class="text-grey font-28 font-400 ml-17 mr-17"
+ >{{ $t("全仓") }} {{ item.lever_rate }}x</span
+ >
</div>
- <div class="flex pt-40 pb-40">
- <div class="flex-1">
- <div class="text-grey">{{ $t('方向') }}</div>
- <div class="mt-20" :class="item.direction === 'buy' ? 'text-green' : 'text-red'">{{ item.direction ===
- 'buy' ? $t('开多') : $t('开空') }}</div>
- </div>
- <div class="flex-1">
- <div class="text-grey text-center">{{ $t('数量') }}</div>
- <div class="mt-20 text-center textColor">{{ item.volume }}</div>
- </div>
- <div class="flex-1 flex flex-col items-end">
- <div class="text-grey">{{ $t('盈亏') }}</div>
- <div class="mt-20" :class="item.profit / 1 > 0 ? 'text-green' : 'text-red'">
- {{ item.profit / 1 > 0 ? '+' + item.profit : item.profit }}
- </div>
- </div>
- </div>
- <div class="flex pb-32">
- <div class="flex-1">
- <div class="text-grey">{{ $t('剩余时间') }}</div>
- <div class="mt-20 textColor">{{ fomatTime(item.remain_time) }}</div>
- </div>
- <div class="flex-1">
- <div class="text-grey text-center">{{ $t('交割时间') }}</div>
- <div class="mt-20 text-center textColor">{{ item.time_num + item.time_unit }}</div>
- </div>
- <div class="flex-1">
- <div class="text-grey text-right">{{ $t('操作') }}</div>
- <div class="mt-20 colorMain text-right" @click="goDetail(item)">{{ $t('详情') }}</div>
- </div>
- </div>
- <div class="w-full h-1 bgDark"></div>
+ <img
+ v-if="item.direction == 'buy'"
+ src="../../assets/image/public/green-leverage.png"
+ alt=""
+ class="w-32 h-32"
+ />
+ <img
+ v-else
+ src="../../assets/image/public/red-leverage.png"
+ alt=""
+ class="w-32 h-32"
+ />
+ </div>
</div>
- <div class="text-grey text-center py-300" v-if="!listData.length && $route.name == 'perpetualContract'">{{
- $t('您目前没有持仓') }}</div>
- <van-popup v-model="show">
- <popup-delivery :showBtns="true" :price="price" :detailData="detailData" :key="detailData.order_no"
- @close="onClose" :symbol="symbol" />
- </van-popup>
+ </div>
+ <div class="flex justify-between">
+ <div class="fexl-1">
+ <div class="text-grey">{{ $t("购买价") }}(USDT)</div>
+ <div class="mt-20 textColor">{{ item.open_price }}</div>
+ </div>
+ <div>
+ <div class="text-grey text-right">{{ $t("现价") }}</div>
+ <div
+ class="mt-20 text-right"
+ :class="
+ item.close_price > item.open_price ? 'text-green' : 'text-red'
+ "
+ >
+ <!-- {{ item.close_price }} -->
+ {{ newprice }}
+ </div>
+ </div>
+ </div>
+ <div class="flex pt-40 pb-40">
+ <div class="flex-1">
+ <div class="text-grey">{{ $t("方向") }}</div>
+ <div
+ class="mt-20"
+ :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
+ >
+ {{ item.direction === "buy" ? $t("开多") : $t("开空") }}
+ </div>
+ </div>
+ <div class="flex-1">
+ <div class="text-grey text-center">{{ $t("数量") }}</div>
+ <div class="mt-20 text-center textColor">{{ item.volume }}</div>
+ </div>
+ <div class="flex-1 flex flex-col items-end">
+ <div class="text-grey">{{ $t("盈亏") }}</div>
+ <div
+ class="mt-20"
+ :class="item.profit / 1 > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ item.profit / 1 > 0 ? "+" + item.profit : item.profit }}
+ </div>
+ </div>
+ </div>
+ <div class="flex pb-32">
+ <div class="flex-1">
+ <div class="text-grey">{{ $t("剩余时间") }}</div>
+ <div class="mt-20 textColor">{{ fomatTime(item.remain_time) }}</div>
+ </div>
+ <div class="flex-1">
+ <div class="text-grey text-center">{{ $t("交割时间") }}</div>
+ <div class="mt-20 text-center textColor">
+ {{ item.time_num + item.time_unit }}
+ </div>
+ </div>
+ <div class="flex-1">
+ <div class="text-grey text-right">{{ $t("操作") }}</div>
+ <div class="mt-20 colorMain text-right" @click="goDetail(item)">
+ {{ $t("详情") }}
+ </div>
+ </div>
+ </div>
+ <div class="w-full h-1 bgDark"></div>
</div>
+ <div
+ class="text-grey text-center py-300"
+ v-if="!listData.length && $route.name == 'perpetualContract'"
+ >
+ {{ $t("您目前没有持仓") }}
+ </div>
+ <van-popup v-model="show">
+ <popup-delivery
+ :showBtns="true"
+ :price="price"
+ :detailData="detailData"
+ :key="detailData.order_no"
+ @close="onClose"
+ :symbol="symbol"
+ />
+ </van-popup>
+ </div>
</template>
<script>
-import PopupDelivery from '@/components/popup-delivery'
-import { WS_URL } from '@/config'
-import { Popup } from 'vant';
+import PopupDelivery from "@/components/popup-delivery";
+import { WS_URL } from "@/config";
+import { Popup } from "vant";
import { _futrueOrderDetail } from "@/API/trade.api";
export default {
- name: "deliveryHoldList",
- data() {
- return {
- sockets: {
- quotes: null, // 行情
- deep: null /// 深度
- },
- show: false,
- newprice:"",
- iconShow: false,
- detailData: {},
+ name: "deliveryHoldList",
+ data() {
+ return {
+ sockets: {
+ quotes: null, // 行情
+ deep: null, /// 深度
+ },
+ show: false,
+ newprice: "",
+ iconShow: false,
+ detailData: {},
+ };
+ },
+ components: {
+ [Popup.name]: Popup,
+ PopupDelivery,
+ },
+ props: {
+ listData: {
+ type: Array,
+ default() {
+ return [];
+ },
+ },
+ symbol: {
+ type: String,
+ default: "",
+ },
+ price: {
+ type: [Number, String],
+ default: "0.00",
+ },
+ },
+ deactivated() {
+ this.closeSocket();
+ },
+ mounted() {
+ this.fetchDeepData();
+ },
+ methods: {
+ closeSocket() {
+ this.sockets.deep.close();
+ // this.sockets.quotes && this.sockets.quotes.close()
+ // this.sockets.deep && this.sockets.deep.close()
+ this.sockets.quotes = null;
+ this.sockets.deep = null;
+ },
+ fetchDeepData() {
+ this.startDeepSocket(); // socket
+ },
+ startDeepSocket() {
+ this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`);
+ this.sockets.deep.onmessage = (evt) => {
+ const { data } = evt;
+ const { code, data: _data } = JSON.parse(data);
+ // console.log(_data.bids[0].price);
+ this.newprice = _data.asks[0].price;
+ };
+ },
+ clearTimeout() {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ },
+ //合约时间结束后显示详情
+ handleTimeEnd(order) {
+ _futrueOrderDetail(order).then((data) => {
+ this.clearTimeout();
+ this.detailData = data;
+ if (data.state !== "created") {
+ this.timeout = setTimeout(() => {
+ this.handleTimeEnd(order);
+ }, 1000);
}
+ });
},
- components: {
- [Popup.name]: Popup,
- PopupDelivery
+ fomatTime(time) {
+ let arr = time.split(":");
+ let day = Math.floor(arr[0] / 24);
+ let hour = arr[0] % 24 >= 10 ? arr[0] % 24 : "0" + (arr[0] % 24);
+ console.log(hour);
+ let min = arr[1] >= 10 ? arr[1] : "0" + arr[1];
+ let sec = arr[2] >= 10 ? arr[2] : "0" + arr[2];
+ if (day >= 1) {
+ return day + this.$t("天") + " " + hour + ":" + min + ":" + sec;
+ } else {
+ return hour + ":" + min + ":" + sec;
+ }
},
- props: {
- listData: {
- type: Array,
- default() {
- return []
- }
- },
- symbol: {
- type: String,
- default: ''
- },
- price: {
- type: [Number, String],
- default: '0.00'
- },
+ changeIcon() {
+ this.iconShow = !this.iconShow;
},
- deactivated(){
- this.closeSocket()
- },
- mounted (){
- this.fetchDeepData()
- },
- methods: {
- closeSocket() {
- this.sockets.deep.close()
- // this.sockets.quotes && this.sockets.quotes.close()
- // this.sockets.deep && this.sockets.deep.close()
- this.sockets.quotes = null
- this.sockets.deep = null
- },
- fetchDeepData() {
-
- this.startDeepSocket() // socket
- },
- startDeepSocket() {
- this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`)
- this.sockets.deep.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- // console.log(_data.bids[0].price);
- this.newprice = _data.asks[0].price
- }
- },
- clearTimeout() {
- clearTimeout(this.timeout)
- this.timeout = null
- },
- //合约时间结束后显示详情
- handleTimeEnd(order) {
- _futrueOrderDetail(order).then(data => {
- this.clearTimeout()
- this.detailData = data
- if (data.state !== 'created') {
- this.timeout = setTimeout(() => {
- this.handleTimeEnd(order)
- }, 1000)
- }
- })
- },
- fomatTime(time) {
- let arr = time.split(':')
- let day = Math.floor(arr[0] / 24)
- let hour = arr[0] % 24 >= 10 ? arr[0] % 24 : '0' + arr[0] % 24
- console.log(hour)
- let min = arr[1] >= 10 ? arr[1] : '0' + arr[1]
- let sec = arr[2] >= 10 ? arr[2] : '0' + arr[2]
- if (day >= 1) {
- return day + this.$t('天') + ' ' + hour + ':' + min + ':' + sec
- } else {
- return hour + ':' + min + ':' + sec
- }
- },
- changeIcon() {
- this.iconShow = !this.iconShow;
- },
- goDetail(item) {
- this.detailData = item
- this.show = true
- // 当前数据是定时轮询地数据, 不必拿最新地数据了
- // _futrueOrderDetail(item.order_no).then(data => {
- // this.detailData = data
- // this.show = true
- // })
- // this.$router.push({
- // path:"/orderDetail?order_no=" + item.order_no
- // });
- },
- onClose() { // 关闭
- this.show = false
- }
- }
-}
+ goDetail(item) {
+ this.detailData = item;
+ this.show = true;
+ // 当前数据是定时轮询地数据, 不必拿最新地数据了
+ // _futrueOrderDetail(item.order_no).then(data => {
+ // this.detailData = data
+ // this.show = true
+ // })
+ // this.$router.push({
+ // path:"/orderDetail?order_no=" + item.order_no
+ // });
+ },
+ onClose() {
+ // 关闭
+ this.show = false;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.border-b-color {
- @include themify() {
- border-bottom: 1px solid themed("border_color");
- }
+ @include themify() {
+ border-bottom: 1px solid themed("border_color");
+ }
}
::v-deep .van-popup {
- @include themify() {
- background: themed("input_background1");
- }
+ @include themify() {
+ background: themed("input_background1");
+ }
}
.open-btn {
- border-radius: 10px;
+ border-radius: 10px;
}
</style>
--
Gitblit v1.9.3