Bit_Wise_World/src/views/bitcoin/TradeFutures.vue

<template>
  <div class="trade-futures-container">

    <div class="menu">
      <div class="menu-left">
        <img class="fc333333" src="../../assets/icon/bitcoin/menu.svg" alt="">
        <div class="pf600 fs18 fc121212">BTCUSDT 永续</div>
      </div>
      <div class="menu-right fc333333">
        <img src="../../assets/icon/bitcoin/jisuanqi.svg" alt="" @click="router.push({name: 'calculator'})">
        <img src="../../assets/icon/bitcoin/hangqing.svg" alt="">
        <img src="../../assets/icon/bitcoin/den.svg" alt="" @click="showFunctions = true">
      </div>
    </div>

    <div class="menu-bottom">
      <div class="pf500 fs12 menu-leftb">
        +2.18%
      </div>
      <div class="fc333333 fs12 pf400 menu-rightb">
        <div>资金费率/倒计时</div>
        <div>0.003%/1:57:32</div>
      </div>
    </div>
    <div class="menu-content">
      <div class="menu-content-l">
        <div class="menu-content-lb pf400 fs14 fc666666">
          <span>价格</span><span>数量(USDT)</span>
        </div>

        <div class="menu-content-lb1">
          <div class="menu-content-lb1l pf400 fs14 fcFF7171">
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
          </div>
          <div class="menu-content-lb1r pf400 fs14 fc444444">
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
          </div>
        </div>

        <div class="menu-content-lb2">
          <p class="pf600 fs16 fcDF384C">5,678.00</p>
          <p class="fs12 fcA8A8A8 pf400">1,678.00</p>
        </div>

        <div class="menu-content-lb1">
          <div class="menu-content-lb1l pf400 fs14 fc333333">
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
            <span>40,166.82</span>
          </div>
          <div class="menu-content-lb1r pf400 fs14 fc444444">
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
            <span>37.80K</span>
          </div>
        </div>

        <div class="menu-content-lb1">
          <div class="menu-content-lb1l pf400 fs12 fc333333" @click="isPickerVisible = true">
            <span class="fs12">{{ displayLabel }}</span>
            <img src="../../assets/icon/bitcoin/shendul.svg" alt="">
          </div>
          <div class="menu-content-lb1r pf400 fs14 fc444444">
            <img src="../../assets/icon/bitcoin/shendur.svg" alt="">
            <img v-if="isassetlessState" src="../../assets/icon/bitcoin/wuzichan.svg" alt="">
          </div>
        </div>
      </div>

      <assetlessStateData v-if="isassetlessState"></assetlessStateData>
      <SellTradingStatusData v-if="isassetlessState"></SellTradingStatusData>

      <div class="menu-content-r">
        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333" @click="showInfo = true">
            <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
            <span>{{ selectedLabel1 }}</span>
          </div>
          <div @click="showModal1 = true" style="font-size: 12px; margin-right: 12px;">
            <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal1 ? 'arrow-up' : 'arrow-down'"/>
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333" @click="showModal3 = true">
            <img src="../../assets/icon/bitcoin/quancang.svg" alt="">
            <span>{{ selectedLabel2 }}</span>
          </div>
          <div @click="showModal2 = true" style="font-size: 12px; margin-right: 12px;">
            <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal2 ? 'arrow-up' : 'arrow-down'"/>
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span>125000</span>
          </div>
          <span>最优价</span>
        </div>
        <div class="menu-content-rb pf400 fs14 fc333333">≈25.2250 USDT</div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc999999">数量</span>
          </div>
          <span>USDT</span>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">可用</span>
          </div>
          <div class="menu-content-rb1">
            <span>0</span>
            <span>USDT</span>
            <img class="fs16" src="../../assets/icon/bitcoin/qianbao1.svg" alt="">
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">倍数</span>
          </div>
          <div class="menu-content-rb1" @click="showLeverageModal = true">
            <span></span>
            <span>{{ selectedLeverage }}X</span>
            <span>更多</span>
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <van-checkbox
                v-model="isEnabled"
                shape="square"
                checked-color="#DC4653"
                icon-size="16px"
            >
            </van-checkbox>
            <span class="menu-content-rb1s fc333333">只减仓</span>
          </div>
          <div class="menu-content-rb1" @click="showModal = true">
            <span></span>
            <span>{{ currentType }}</span>
            <div style="font-size: 12px;">
              <VanIcon :style="{ fontWeight: 'bold' }" :name="showModal ? 'arrow-up' : 'arrow-down'"/>
            </div>
          </div>
        </div>

        <TakeProfitsTopLoss v-show="!isEnabled"></TakeProfitsTopLoss>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">可用</span>
          </div>
          <div class="menu-content-rb1">
            <span>0</span>
            <span>USDT</span>
          </div>
        </div>
        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">保证金</span>
          </div>
          <div class="menu-content-rb1">
            <span>0</span>
            <span>USDT</span>
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14" @click="showConfirm = true">
          <div class="pf400 fs16 fcFFFFFF">买入(做多)</div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">可用</span>
          </div>
          <div class="menu-content-rb1">
            <span>0</span>
            <span>USDT</span>
          </div>
        </div>
        <div class="menu-content-rb pf400 fs14">
          <div class="menu-content-rb1 fs14 fc333333">
            <span class="menu-content-rb1s fc333333">保证金</span>
          </div>
          <div class="menu-content-rb1">
            <span>0</span>
            <span>USDT</span>
          </div>
        </div>

        <div class="menu-content-rb pf400 fs14">
          <div class="pf400 fs16 fcFFFFFF" @click="showConfirm = true">卖出(做空)</div>
        </div>
      </div>
    </div>
      <sellOrder></sellOrder>

    <div v-if="isassetlessState">
      <assetlessState></assetlessState>
    </div>

    <ChooseThisDepth
        v-model:show="isPickerVisible"
        v-model="currentDepth"
    ></ChooseThisDepth>

    <LeveragePopup
        v-model:visible="showLeverageModal"
        :initial-value="selectedLeverage"
        @confirm="handleConfirm">
    </LeveragePopup>

    <OrderConfirmPopup
        v-model:visible="showConfirm"
        @confirm="onOrderConfirmed">
    </OrderConfirmPopup>

    <OrderTimeSheet
        v-model:visible="showModal"
        v-model="currentType"
    ></OrderTimeSheet>

    <MarginInfoSheet
        v-model:visible="showInfo"
    ></MarginInfoSheet>

    <FundingOptions
        v-model:visible="showModal1"
        :selected-id="currentId1"
        @confirm="handleConfirm1">
    </FundingOptions>

    <OrderType
        v-model:visible="showModal2"
        :selected-id="currentId2"
        @confirm="handleConfirm2"
    ></OrderType>

    <LimitOrderModal
        v-model:visible="showModal3"
    ></LimitOrderModal>
    <CommonFunctionsPopup
      v-model:visible="showFunctions"
    ></CommonFunctionsPopup>
  </div>
</template>

<script setup>
import {Checkbox as VanCheckbox, Icon as VanIcon} from 'vant';
import {computed, defineAsyncComponent, ref, onMounted} from 'vue';
import { useRouter } from 'vue-router'; // 【新增】 引入路由
onMounted(() => {
  // 强制滚动到顶部
  window.scrollTo(0, 0);
});
const router = useRouter(); // 【新增】 实例化路由

// --- 异步组件引入 ---
const priceLimit = defineAsyncComponent(() => import("./components/priceLimit.vue"));
const assetlessState = defineAsyncComponent(() => import("./components/assetlessState.vue"));
const assetlessStateData = defineAsyncComponent(() => import("./components/assetlessStateData.vue"));
const sellOrder = defineAsyncComponent(() => import('./components/sellOrder.vue'));
const SellTradingStatusData = defineAsyncComponent(() => import('./components/SellTradingStatusData.vue'));
const TakeProfitsTopLoss = defineAsyncComponent(() => import('./components/TakeProfitsTopLoss.vue'));
const ChooseThisDepth = defineAsyncComponent(() => import('./components/ChooseThisDepth.vue'));
const LeveragePopup = defineAsyncComponent(() => import('./components/LeveragePopup.vue'));
const OrderConfirmPopup = defineAsyncComponent(() => import('./components/OrderConfirmPopup.vue'));
const OrderTimeSheet = defineAsyncComponent(() => import('./components/OrderTimeSheet.vue'));
const MarginInfoSheet = defineAsyncComponent(() => import('./components/MarginInfoSheet.vue'));
const FundingOptions = defineAsyncComponent(() => import('./components/FundingOptions.vue'));
const OrderType = defineAsyncComponent(() => import('./components/OrderType.vue'));
const LimitOrderModal = defineAsyncComponent(() => import('./components/LimitOrderModal.vue'));
// 假设您的组件在 @/components/CommonFunctionsPopup.vue (请根据实际路径修改)
const CommonFunctionsPopup = defineAsyncComponent(() => import('./CommonFunctionsPopup/CommonFunctionsPopup.vue'));

// 控制弹窗显示的变量
const showFunctions = ref(false);

// --- 状态定义 ---
const isassetlessState = ref(false);

const isPickerVisible = ref(false);
const currentDepth = ref('depth1');
const depthMap = {
  'depth1': '深度1',
  'depth2': '深度2',
  'depth3': '深度3',
};
const displayLabel = computed(() => depthMap[currentDepth.value] || '请选择');

/* 市价说明 */
const showModal3 = ref(false);

/* 订单类型选项 */
const showModal2 = ref(false);
const currentId2 = ref(1);
const selectedLabel2 = ref('市价');
const selectedUnit2 = ref('%');
const handleConfirm2 = (item) => {
  currentId2.value = item.id;
  selectedLabel2.value = item.label.slice(0, 2);
  selectedUnit2.value = item.unit;
};

/* 全仓逐仓选项 */
const showModal1 = ref(false);
const currentId1 = ref(1);
const selectedLabel1 = ref('全仓');
const selectedUnit1 = ref('%');
const handleConfirm1 = (item) => {
  currentId1.value = item.id;
  selectedLabel1.value = item.label.slice(0, 2);
  selectedUnit1.value = item.unit;
};

/* 全仓逐仓说明 */
const showInfo = ref(false);

/* GTC 弹框 */
const showModal = ref(false);
const currentType = ref('GTC');

/* 控制止盈止损显隐 */
const isEnabled = ref(false);

/* 控制倍数 */
const showLeverageModal = ref(false);
const selectedLeverage = ref(100);
const handleConfirm = (value) => {
  selectedLeverage.value = value;
};

/* 交易确认 */
const showConfirm = ref(false);
const onOrderConfirmed = () => {
  // console.log('订单已提交');
};
</script>

<style lang="less" scoped>
:deep(.van-checkbox__icon--square .van-icon) {
  border-radius: 2px !important;
}

.trade-futures-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px; /* <-- 改成这行 */
   padding-top: 65px;
box-sizing: border-box;
  width: 100%;
  /* 1. 设定高度为视口高度，占满屏幕 */
  //height: 100vh;

  /* 2. 开启容器内部纵向滚动 */
  overflow-y: auto;

  /* 3. 开启 iOS 惯性滚动，滑动更丝滑 */
  -webkit-overflow-scrolling: touch;

  /* 4. 取消 box-sizing 的注释，防止 padding 撑破宽度 */

  /* 5. 底部留白（防止内容被底部导航栏遮挡） */
  /* --- 修改结束 --- */


}


/* --- 【新增】 头部行情的样式 --- */
.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* 既然Layout底部给了margin，这里如果不想要间距可以调整，或者保留 */
  /* margin-top: 21px; */
  width: 345px;
  height: 24px;

  .menu-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    line-height: 0px;

    img {
      margin: 0px 10px 0 0;
    }
  }

  .menu-right {
    img {
      margin-left: 14px;
    }
  }
}

.menu-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  width: 345px;

  .menu-leftb {
    width: 61px;
    height: 25px;
    background-color: #45b26b;
    border-radius: 5px;
    color: #ffffff;
    text-align: center;
    line-height: 25px;
  }

  .menu-rightb {
    text-align: right;
  }
}
/* --- 【新增】 头部样式结束 --- */

.menu-content {
    width: 100%;
    max-width: 345px;
    display: flex;
    flex-direction: row;
    margin-top: 8px;

    .menu-content-l {
      flex: 1;

      .menu-content-lb {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 14px;
      }

      .menu-content-lb1 {
        margin-top: 11px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 14px;

        .menu-content-lb1l {
          display: flex;
          flex-direction: column;
          line-height: 22px;
        }

        .menu-content-lb1r {
          display: flex;
          flex-direction: column;
          line-height: 22px;
        }
      }

      .menu-content-lb1:nth-child(4) {
        .menu-content-lb1l {
          color: #45b26b;
        }
      }

      .menu-content-lb1:nth-child(5) {
        .menu-content-lb1l {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          background-color: #f5f5f5;
          border-radius: 6px;
          height: 24px;
          padding: 0 5px 0 13px;


        }

        .menu-content-lb1r {
          margin-left: 15px;
        }
      }

      .menu-content-lb2 {
        margin-top: 8px;
        line-height: 16px;
        //span:nth-child(2){
        //  //border-style: dashed;
        //}
      }
    }

    .menu-content-r {
      flex: 1;
      flex-basis: 63.5px;
      max-width: 204.25px;

      .menu-content-rb:nth-of-type(4) {
        background-color: transparent;
        height: 20px;

      }

      .menu-content-rb {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 6px;
        margin-bottom: 8px;
        height: 38px;

        span {
          padding-right: 12px;

        }

        img {
          padding-right: 12px;
          //height: 16px;
          //width: 16px;
        }

        .menu-content-rb1 {
          text-align: center;
          margin-left: 12px;
          display: flex;
          align-content: center;
          justify-content: center;
          align-items: center;

          img {
            padding-right: 6px;

          }

        }
      }

      .menu-content-rb:nth-of-type(6) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          margin-left: 0;
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(1) {

            font-size: 12px;
          }

          span:nth-child(2) {
            margin: 0 9px 0 9px;
            font-size: 12px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(7) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          margin-left: 0;
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 9px 0 9px;
            font-size: 12px;
          }

          span:nth-child(3) {
            color: #df384c;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(8) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 9px 0 9px;
          }
        }

        .menu-content-rb1s {
          margin-left: 6px;
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(9) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }

          img {
            padding-left: 5px;
            font-size: 16px;
            padding-top: 2px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 9px 0 9px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(10) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }

          img {
            padding-left: 5px;
            font-size: 16px;
            padding-top: 2px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 0px 0 5px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(11) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }

          img {
            padding-left: 5px;
            font-size: 16px;
            padding-top: 2px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 0px 0 5px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(12) {
        background-color: #45b26b;

        div {
          margin: auto;
        }

      }

      .menu-content-rb:nth-of-type(13) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }

          img {
            padding-left: 5px;
            font-size: 16px;
            padding-top: 2px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 0px 0 5px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(14) {
        background-color: transparent;
        height: 20px;

        .menu-content-rb1 {
          display: flex;
          align-items: center;
          height: 24px;
          margin-left: 0;
          align-content: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 5px;
          }

          img {
            padding-left: 5px;
            font-size: 16px;
            padding-top: 2px;
          }
        }

        .menu-content-rb1:nth-child(2) {
          span:nth-child(2) {
            margin: 0 0px 0 5px;
          }
        }

        span {
          padding-right: 0;
        }

        img {
          padding-right: 0;
        }

      }

      .menu-content-rb:nth-of-type(15) {
        background-color: #df384c;

        div {
          margin: auto;
        }

      }

      //.van-dropdown-menu__bar{
      //  width: 214px;
      //}

    }
  }

</style>