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/TtrendDetails/index.vue | 322 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 320 insertions(+), 2 deletions(-)
diff --git a/src/page/TtrendDetails/index.vue b/src/page/TtrendDetails/index.vue
index e66e703..e48182a 100644
--- a/src/page/TtrendDetails/index.vue
+++ b/src/page/TtrendDetails/index.vue
@@ -28,13 +28,13 @@
:tabIndex="tab"
/>
<div class="flex justify-between px-32 pt-40" v-if="!kineType">
- <div
+ <!-- <div
class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
:class="tab === '1' ? 'activeBtn' : ''"
@click="onTab('1')"
>
{{ $t("永续合约") }}
- </div>
+ </div> -->
<!-- <div
class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
:class="tab === '2' ? 'activeBtn' : ''"
@@ -111,6 +111,78 @@
/>
</div>
<div class="w-full h-20 greyBg"></div>
+ <!-- 买入 卖出 -->
+ <div class="operateBtnGroup">
+ <div class="buy btn" @click="openTradePopup('open')">
+ {{ $t("买入") }}
+ </div>
+ <div class="sell btn" @click="openTradePopup('sell')">
+ {{ $t("卖出") }}
+ </div>
+ </div>
+ <van-popup v-model="showTradePopup" position="bottom" class="trade-popup">
+ <div class="popup-header">
+ {{ $t("订单确认") }}
+ </div>
+ <div class="popup-content">
+ <!-- 市价选择框 -->
+ <div class="form-item form-item_wrp">
+ {{ $t("市价") }}
+ </div>
+ <div class="form-item form-item_wrp">
+ {{ $t("已当前最优价格交易") }}
+ </div>
+ <!-- 交易金额输入框 -->
+ <div class="form-item">
+ <van-field
+ v-model="tradeAmount"
+ :placeholder="$t('交易金额')"
+ type="number"
+ />
+ </div>
+ <div class="balance" v-if="tradeDirection === 'open'">
+ <div class="text">{{ $t("可用") }}</div>
+ <div class="value">{{ initOpen.volume }} USDT</div>
+ <div
+ class="exchangeicon"
+ @click="$router.push('/exchange/exchangePage')"
+ >
+ <van-icon name="sort" />
+ </div>
+ </div>
+ <div class="balance" v-else>
+ <div class="text">{{ $t("可卖") }}</div>
+ <div class="value">{{ initClose.volume }} {{ symbolname }}</div>
+ <div
+ class="exchangeicon"
+ @click="$router.push('/exchange/exchangePage')"
+ >
+ <van-icon name="sort" />
+ </div>
+ </div>
+ <!-- 百分比按钮 -->
+ <div class="percentage-buttons">
+ <button
+ v-for="percent in [20, 50, 75, 100]"
+ :key="percent"
+ @click="setPercentage(percent)"
+ >
+ {{ percent }}%
+ </button>
+ </div>
+ </div>
+ <!-- 底部按钮 -->
+ <div class="popup-footer">
+ <button
+ class="confirm-btn"
+ :class="tradeDirection === 'open' ? 'buy' : 'sell'"
+ @click="confirmTrade"
+ >
+ {{ tradeDirection === "open" ? $t("买入") : $t("卖出") }}
+ </button>
+ </div>
+ </van-popup>
+
<!-- tab 区域-->
<div class="pb-180 tabContent">
<van-tabs v-model="active">
@@ -368,6 +440,9 @@
import { getStorage } from "@/utils/utis";
import PopupDelivery from "@/components/popup-delivery";
import PopupConfirmOrder from "@/components/popup-confirm-order";
+import TradeApi from "@/API/trading.js";
+// import Axios from "@/API/trading";
+
export default {
name: "TrendDetails",
components: {
@@ -391,6 +466,22 @@
});
}
return {
+ // 买入卖出
+ showTradePopup: false, // 控制弹窗显示
+ tradeDirection: "open", // 当前交易方向，"open" 或 "sell"
+ tradeAmount: "", // 交易金额
+ balance: 1000, // 用户余额（假设为 1000）
+ initOpen: {},
+ initClose: {},
+ form: {
+ volume: "",
+ session_token: "",
+ symbol: "", // 币种
+ price: "",
+ total: "",
+ order_price_type: "opponent", // 市价or限价
+ },
+
show: false,
direction: "buy",
initFutrue: {},
@@ -442,6 +533,11 @@
this.symbolname = getStorage("symbolname");
},
created() {},
+ filters: {
+ nan(val) {
+ return isNaN(val) ? "--" : val;
+ },
+ },
watch: {
active(val) {
// tab切换
@@ -463,6 +559,109 @@
},
},
methods: {
+ // 买入卖出
+ // 打开弹窗
+ openTradePopup(direction) {
+ this.tradeDirection = direction;
+ this.showTradePopup = true;
+ this.initParam(this.symbol, direction);
+ },
+ initParam(symbol, type) {
+ // 初始化参数
+ if (type === "open" || !type) {
+ //console.log('开仓数据')
+ TradeApi.tradeBuyToken({}).then((res) => {
+ this.initOpen = res.data;
+ console.log(this.initOpen.volume, res.data.volume, type);
+ });
+ }
+ if (type === "sell" || !type) {
+ TradeApi.tradeSellToken({
+ symbol,
+ }).then((res) => {
+ this.initClose = res.data;
+ });
+ }
+ // this.getWallet();
+ // if (this.userInfo.token) {
+ // this.getOrderList();
+ // }
+ },
+ // 设置百分比
+ setPercentage(percent) {
+ if (this.tradeDirection === "open") {
+ this.tradeAmount = ((this.initOpen.volume * percent) / 100).toFixed(2);
+ } else {
+ this.tradeAmount = ((this.initClose.volume * percent) / 100).toFixed(2);
+ }
+ },
+ // 确认交易
+ confirmTrade() {
+ if (!this.userInfo.token) {
+ this.$router.push("/login");
+ return;
+ }
+ // let volume = "";
+ // if (this.isTotal) {
+ if (!this.tradeAmount) {
+ this.$toast.fail(this.$t("请输入总额"));
+ return;
+ }
+ // if (this.currentType === "buy") {
+ // this.form.volume = parseFloat(this.form.total).toFixed(5);
+ // } else {
+ // this.form.volume =
+ // parseFloat(this.form.total) / parseFloat(this.form.price);
+ // this.form.volume = this.form.volume.toFixed(5);
+ // }
+ // volume = this.form.volume;
+ // } else {
+ // if (!this.form.volume) {
+ // this.$toast.fail(this.$t("请输入数量"));
+ // return;
+ // }
+ // if (this.currentType === "buy") {
+ // volume = parseFloat(this.form.volume) * parseFloat(this.form.price);
+ // } else {
+ // volume = this.form.volume;
+ // }
+ // }
+ this.form.symbol = this.$route.params.symbol;
+ let _order = null; // api
+ // let emitFunc = null; // 触发函数
+
+ if (this.tradeDirection === "open") {
+ this.form.session_token = this.initOpen.session_token;
+ } else {
+ this.form.session_token = this.initClose.session_token;
+ }
+ _order =
+ this.tradeDirection === "open" ? TradeApi.tradeBuy : TradeApi.tradeSell;
+ // emitFunc = this.tradeDirection;
+ _order({
+ volume: this.tradeAmount,
+ session_token: this.form.session_token,
+ symbol: this.form.symbol, // 币种
+ price: this.form.price,
+ // total: this.form.total,
+ order_price_type: "opponent", // 市价or限价
+ })
+ .then((res) => {
+ this.$toast(this.$t("操作成功"));
+ this.tradeAmount = "";
+ // this.form.total = "";
+ // _getBalance().then((data) => {
+ // 刷新余额
+ // this.$store.commit("user/SET_USERINFO", { balance: data.money });
+ // });
+ // this.$emit("ordered", emitFunc);
+ })
+ .catch(() => {
+ // 也需要重新初始化
+ // this.$emit("ordered", emitFunc);
+ });
+ this.showTradePopup = false;
+ },
onChangeLine() {
this.isChangeLine = true;
},
@@ -1003,4 +1202,123 @@
height: 100% !important;
}
}
+
+.operateBtnGroup {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ padding: 2.4rem 0;
+ color: #fff;
+ .btn {
+ width: 18rem;
+ height: 5rem;
+ text-align: center;
+ line-height: 5rem;
+ border-radius: 1rem;
+ font-size: 1.8rem;
+ }
+ .buy {
+ background-color: #13c366;
+ }
+ .sell {
+ background-color: #f6003c;
+ }
+}
+
+.trade-popup {
+ box-sizing: border-box;
+ padding: 2rem 2rem 15rem 2rem;
+ background-color: #1e1e1e; // 黑夜模式背景色
+ border-radius: 1rem 1rem 0 0;
+
+ .popup-header {
+ text-align: center;
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: #ffffff; // 白色字体
+ margin-bottom: 2rem;
+ }
+
+ .popup-content {
+ .form-item {
+ margin-bottom: 2rem;
+
+ label {
+ display: block;
+ font-size: 1.4rem;
+ color: #cccccc; // 灰色字体
+ margin-bottom: 0.8rem;
+ }
+ }
+
+ .percentage-buttons {
+ display: flex;
+ justify-content: space-between;
+
+ button {
+ flex: 1;
+ margin: 0 0.5rem;
+ padding: 1rem 0;
+ background-color: #333333; // 深灰色按钮背景
+ border: none;
+ border-radius: 0.5rem;
+ font-size: 1.4rem;
+ color: #ffffff; // 白色字体
+
+ &:hover {
+ background-color: #444444; // 按钮悬停效果
+ }
+ }
+ }
+ }
+
+ .popup-footer {
+ margin-top: 2rem;
+
+ .confirm-btn {
+ width: 100%;
+ padding: 1rem 0;
+ font-size: 1.6rem;
+ font-weight: bold;
+ border: none;
+ border-radius: 0.5rem;
+
+ &.buy {
+ background-color: #13c366; // 买入绿色
+ color: #ffffff;
+ }
+
+ &.sell {
+ background-color: #f6003c; // 卖出红色
+ color: #ffffff;
+ }
+ }
+ }
+}
+
+.balance {
+ display: flex;
+ justify-content: space-between;
+ color: #fff;
+ font-size: 1.6rem;
+ align-items: center;
+ .exchangeicon {
+ transform: rotate(90deg);
+ height: 3.5rem;
+ width: 3.5rem;
+ }
+}
+.popup-content {
+ :deep(.van-field__body) {
+ height: 5rem;
+ padding-left: 1.3rem;
+ }
+}
+.form-item_wrp {
+ height: 5rem;
+ padding-left: 1.3rem;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+}
</style>
--
Gitblit v1.9.3