Bit_Wise_World/src/views/bitcoin/lever/components/UserAssetsPanel.vue

<template>
  <div class="panel-container">
    <div class="tabs-header">
      <div class="tabs-left">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'assets' }"
          @click="activeTab = 'assets'"
        >
          币种资产
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'positions' }"
          @click="activeTab = 'positions'"
        >
          持有仓位({{ positionsList.length }})
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'orders' }"
          @click="activeTab = 'orders'"
        >
          当前委托({{ ordersList.length }})
        </div>
      </div>
      <div class="tabs-right" @click="router.push('/historyIndex')">
        <span class="history-icon">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.025 10.125L15.5254 8.625L14.025 10.125M15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C11.4764 2.25 13.6414 3.5836 14.8159 5.57182M9 5.25V9L11.25 10.5" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span> 全部
      </div>
    </div>

    <div class="panel-content">

      <div v-if="activeTab === 'assets'" class="list-container">
        <div v-for="(item, index) in assetsList" :key="index" class="card asset-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name">
                <span class="symbol">{{ item.symbol }}</span>
                <span class="name-cn">{{ item.nameCn }}</span>
              </div>
            </div>
            <div class="asset-total">
              <div class="main-val">{{ item.totalValue }}</div>
              <div class="sub-val">≈ ¥ {{ item.cnyValue }}</div>
            </div>
          </div>
          <div class="divider"></div>
          <div class="card-row">
            <span class="label">可用</span>
            <span class="value">{{ item.available }}</span>
          </div>
          <div class="card-row">
            <span class="label">冻结</span>
            <span class="value red-text">{{ item.frozen }}</span>
          </div>
        </div>
      </div>

      <div v-else-if="activeTab === 'positions'" class="list-container">
        <div v-for="(item, index) in positionsList" :key="index" class="card position-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name-block">
                <span class="symbol">{{ item.pair }}</span>
                <div class="tags-row">
                  <span class="tag" :class="item.type === 'buy' ? 'tag-green' : 'tag-red'">
                    {{ item.type === 'buy' ? '买入' : '卖出' }}
                  </span>
                  <span class="tag tag-grey">{{ item.leverage }}X</span>
                  <span class="tag tag-grey">市价</span>
                </div>
              </div>
            </div>
            <div class="header-right-time">
              {{ item.time }} <br> 下单时间
            </div>
          </div>
          <div class="divider"></div>
          <div class="data-grid">
            <div class="data-col">
              <div class="label">倍数</div>
              <div class="val">{{ item.leverage }}X</div>
            </div>
            <div class="data-col center">
              <div class="label">数量</div>
              <div class="val">{{ item.amount }} {{ item.unit }}</div>
            </div>
            <div class="data-col right">
              <div class="label">价格</div>
              <div class="val">{{ item.price }} {{ item.unit }}</div>
            </div>
          </div>
          <button class="btn-block-red">平仓</button>
        </div>
      </div>

      <div v-else-if="activeTab === 'orders'" class="list-container">
        <div v-for="(item, index) in ordersList" :key="index" class="card order-card">
          <div class="card-header">
            <div class="coin-info">
              <div class="coin-icon icon-btc">₿</div>
              <div class="coin-name-block">
                <span class="symbol">{{ item.pair }}</span>
                <div class="tags-row">
                  <span class="tag" :class="item.type === 'buy' ? 'tag-green' : 'tag-red'">
                    {{ item.type === 'buy' ? '买入' : '卖出' }}
                  </span>
                  <span class="tag tag-grey">{{ item.leverage }}X</span>
                  <span class="tag tag-grey">市价</span>
                </div>
              </div>
            </div>
            <button class="btn-small-red">撤单</button>
          </div>
          <div class="divider"></div>
          <div class="data-grid">
            <div class="data-col">
              <div class="label">数量</div>
              <div class="val">{{ item.amount }} {{ item.unit }}</div>
            </div>
            <div class="data-col center">
              <div class="label">下单时间</div>
              <div class="val">{{ item.time }}</div>
            </div>
            <div class="data-col right">
              <div class="label">价格</div>
              <div class="val">{{ item.price }} {{ item.unit }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 【新增】 引入路由

const router = useRouter(); // 【新增】 实例化路由

// 当前选中的 Tab：'assets', 'positions', 'orders'
const activeTab = ref('orders');

// 模拟数据 - 委托
const ordersList = ref([
  {
    pair: 'BTC/USDT',
    type: 'buy',
    leverage: 20,
    amount: '0.215',
    unit: 'USDT',
    price: '0.215',
    time: '2025-11-04, 16:30'
  },
  {
    pair: 'BTC/USDT',
    type: 'sell',
    leverage: 20,
    amount: '0.215',
    unit: 'USDT',
    price: '0.215',
    time: '2025-11-04, 16:30'
  }
]);

// 模拟数据 - 仓位
const positionsList = ref([
  {
    pair: 'BTC/USDT',
    type: 'buy',
    leverage: 200,
    amount: '0.215',
    unit: 'USDT',
    price: '0.215',
    time: '2025-11-04, 16:30'
  },
  {
    pair: 'ETH/USDT',
    type: 'sell',
    leverage: 50,
    amount: '1.5',
    unit: 'USDT',
    price: '1800.00',
    time: '2025-11-04, 14:20'
  }
]);

// 模拟数据 - 资产
const assetsList = ref([
  {
    symbol: 'BTC',
    nameCn: '比特币',
    totalValue: '1,125,158.00',
    cnyValue: '2150508',
    available: '18802.0850',
    frozen: '151.2050'
  },
  {
    symbol: 'BTC', // 重复模拟图3效果
    nameCn: '比特币',
    totalValue: '1,125,158.00',
    cnyValue: '2150508',
    available: '18802.0850',
    frozen: '151.2050'
  }
]);
</script>

<style scoped lang="scss">
/* 基础变量 */
$c-bg: #fff;
$c-white: #ffffff;
$c-text-main: #333333;
$c-text-sub: #969799;
$c-green: #00b86b; /* 买入绿 */
$c-red: #dc3545;   /* 卖出/撤单红 */
$c-line: #f5f5f5;
$c-orange: #f7931a; /* BTC颜色 */

.panel-container {
  width: 100%;
  background-color: $c-bg;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  padding-bottom: 20px;
}

/* Tab 头部样式 */
.tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: $c-white;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tabs-left {
  display: flex;
  gap: 20px;
}

.tab-item {
  font-size: 15px;
  color: $c-text-sub;
  font-weight: 400;
  position: relative;
  cursor: pointer;
  padding-bottom: 4px;
  transition: all 0.2s;

  &.active {
    color: $c-text-main;
    font-weight: 600;
    font-size: 16px;

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background-color: #000;
      border-radius: 2px;
    }
  }
}

.tabs-right {
  font-size: 13px;
  color: $c-text-sub;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}

/* 列表容器 */
.list-container {
  padding: 10px 16px;
}

/* 卡片通用样式 */
.card {
  background: $c-white;
  border-radius: 8px;
  padding: 12px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  border: 1px solid #ebedf0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.coin-info {
  display: flex;
  align-items: flex-start;
}

.coin-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: $c-orange;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.coin-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.symbol {
  font-size: 16px;
  font-weight: 600;
  color: $c-text-main;
}

/* 标签样式 */
.tags-row {
  display: flex;
  gap: 4px;
}

.tag {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  line-height: 1.4;
}

.tag-green { background: $c-green; }
.tag-red { background: $c-red; }
.tag-grey { background: #c8c9cc; color: #fff; }

/* 分割线 */
.divider {
  height: 1px;
  background: $c-line;
  margin: 0 0 12px 0;
}

/* 数据网格 (三列) */
.data-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.data-col {
  text-align: left;


  &.center { text-align: center; width: 50%; }
  &.right { text-align: right; }

  .label {
    font-size: 12px;
    color: $c-text-sub;
    margin-bottom: 4px;
  }
  .val {
    font-size: 14px;
    color: $c-text-main;
    font-weight: 500;
  }
}

/* 按钮样式 */
.btn-small-red {
  background: $c-red;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
}

.btn-block-red {
  width: 100%;
  background: $c-red;
  color: #fff;
  border: none;
  padding: 10px 0;
  border-radius: 20px; /* 圆角按钮 */
  font-size: 15px;
  margin-top: 8px;
  font-weight: 500;
}

/* 特殊样式：Position 页面的时间 */
.header-right-time {
  text-align: right;
  font-size: 12px;
  color: $c-text-sub;
  line-height: 1.4;
}

/* 特殊样式：Asset 页面 */
.asset-card {
  .card-header {
    align-items: center;
  }
  .coin-name {
    display: flex;
    flex-direction: column;
    .name-cn { font-size: 12px; color: $c-text-sub; }
  }
  .asset-total {
    text-align: right;
    .main-val { font-size: 18px; font-weight: bold; color: $c-text-main; }
    .sub-val { font-size: 12px; color: $c-text-sub; margin-top: 2px; }
  }
  .card-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    &:last-child { margin-bottom: 0; }

    .label { color: $c-text-sub; }
    .value { color: $c-text-sub; font-family: sans-serif; }
    .red-text { color: $c-red; font-weight: 500; }
  }
}
</style>