样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 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>