deepChartVueApp/pages/home/marketDetail.vue

<!-- @format -->

<template>
  <view class="main">
    <!-- 自定义导航栏 -->
    <view class="header_fixed" :style="{ top: iSMT + 'px' }">
      <view class="header-content">
        <view class="header-left" @click="goBack">
          <text class="back-text">‹</text>
        </view>
        <view class="header-center">
          <text class="header-title">{{ marketTitle }}</text>
        </view>
        <view class="header-right">
          <image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
          <text class="more-text">···</text>
        </view>
      </view>
      <!-- 表头 -->
      <view class="table-header">
        <view class="header-item name-column">
          <text class="header-text">名称</text>
        </view>
        <view class="header-item price-column" @click="sortByPrice">
          <text class="header-text">最新</text>
          <text class="sort-icon">{{ sortType === "price" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
        </view>
        <view class="header-item change-column" @click="sortByChange">
          <text class="header-text">涨幅</text>
          <text class="sort-icon">{{ sortType === "change" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
      <!-- 股票列表 -->
      <view class="stock-list">
        <view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewStockDetail(stock)">
          <view class="stock-cell name-column">
            <view class="stock-name">{{ stock.stockName }}</view>
            <view class="stock-code">{{ stock.stockCode }}</view>
          </view>
          <view class="stock-cell price-column">
            <text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'">
              {{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }}
            </text>
          </view>
          <view class="stock-cell change-column">
            <text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'">
              {{ stock.change || stock.changePercent }}
            </text>
          </view>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <!-- <view class="bottom-safe-area"></view> -->
    </scroll-view>
  </view>

  <!-- 底部导航栏 -->
  <!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import footerBar from "@/components/footerBar.vue";

// 响应式数据
const iSMT = ref(0);
const headerHeight = ref(80);
const marketType = ref("america");
const marketTitle = ref("美洲");
const sortType = ref(""); // 排序类型：'price' 或 'change'
const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'

// 股票数据
const stockList = ref([
  {
    stockName: "Telecommunication",
    stockCode: "888607",
    price: 1349.47,
    change: "+7.67%",
    isRising: true,
  },
  {
    stockName: "Other",
    stockCode: "888607",
    price: 1349.47,
    change: "+6.67%",
    isRising: true,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1349.47,
    change: "+5.67%",
    isRising: true,
  },
  {
    stockName: "Telecommunication",
    stockCode: "888607",
    price: 1349.47,
    change: "+4.67%",
    isRising: true,
  },
  {
    stockName: "Other",
    stockCode: "888611",
    price: 1359.47,
    change: "+3.67%",
    isRising: true,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1349.47,
    change: "+2.67%",
    isRising: true,
  },
  {
    stockName: "Telecommunication",
    stockCode: "888607",
    price: 1349.47,
    change: "+1.67%",
    isRising: true,
  },
  {
    stockName: "Other",
    stockCode: "888611",
    price: 1009.98,
    change: "-1.67%",
    isRising: false,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1009.98,
    change: "-0.67%",
    isRising: false,
  },
  {
    stockName: "Telecommunication",
    stockCode: "888607",
    price: 1009.98,
    change: "-0.67%",
    isRising: false,
  },
  {
    stockName: "Other",
    stockCode: "888611",
    price: 1009.98,
    change: "-1.67%",
    isRising: false,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1009.98,
    change: "-4.67%",
    isRising: false,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1009.98,
    change: "-3.67%",
    isRising: false,
  },
  {
    stockName: "Consumer Discretio...",
    stockCode: "888610",
    price: 1009.98,
    change: "-3.67%",
    isRising: false,
  },
]);

// 计算属性
const contentTopPosition = computed(() => {
  return iSMT.value + headerHeight.value;
});

const sortedStockList = computed(() => {
  console.log("计算sortedStockList，原始数据长度:", stockList.value.length);
  let list = [...stockList.value];

  if (sortType.value === "price") {
    list.sort((a, b) => {
      return sortOrder.value === "asc" ? a.price - b.price : b.price - a.price;
    });
  } else if (sortType.value === "change") {
    list.sort((a, b) => {
      const aChange = parseFloat(a.change.replace(/[+%-]/g, ""));
      const bChange = parseFloat(b.change.replace(/[+%-]/g, ""));
      return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange;
    });
  }

  console.log("排序后数据长度:", list.length);
  return list;
});

// 页面加载时接收参数
onLoad((options) => {
  if (options && options.market) {
    marketType.value = options.market;
    switch (options.market) {
      case "america":
        marketTitle.value = "美洲";
        break;
      case "asia":
        marketTitle.value = "亚太";
        break;
      case "asia-china":
        marketTitle.value = "亚太-中华";
        break;
      default:
        marketTitle.value = "全球指数";
    }
  }
});

// 方法
const goBack = () => {
  uni.navigateBack();
};

const sortByPrice = () => {
  if (sortType.value === "price") {
    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
  } else {
    sortType.value = "price";
    sortOrder.value = "desc";
  }
};

const sortByChange = () => {
  if (sortType.value === "change") {
    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
  } else {
    sortType.value = "change";
    sortOrder.value = "desc";
  }
};

const viewStockDetail = (stock) => {
  console.log("查看股票详情:", stock);
  // 这里可以跳转到股票详情页面
  uni.navigateTo({
    url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(stock))}`,
  });
};

onMounted(() => {
  // 获取状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
  // 动态计算header实际高度
  uni
    .createSelectorQuery()
    .select(".header_fixed")
    .boundingClientRect((rect) => {
      if (rect) {
        headerHeight.value = rect.height;
        console.log("Header实际高度:", headerHeight.value, "px");
      }
    })
    .exec();
});

// 监听headerHeight变化，重新计算contentHeight
watch(headerHeight, (newHeight) => {
  if (newHeight > 0) {
    const systemInfo = uni.getSystemInfoSync();
    const windowHeight = systemInfo.windowHeight;
    const statusBarHeight = systemInfo.statusBarHeight || 0;
    const footerHeight = 100;

    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
    console.log("重新计算contentHeight:", contentHeight.value);
  }
});
</script>

<style scoped>
.main {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 自定义导航栏 */
.header_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
}

.header-left,
.header-right {
  width: 60px;
  display: flex;
  align-items: center;
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
  gap: 10px;
}

.back-text {
  font-size: 24px;
  color: #333333;
  font-weight: 500;
  line-height: 1;
}

.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

.header-icon {
  width: 20px;
  height: 20px;
}

.more-text {
  font-size: 20px;
  color: #666666;
  font-weight: bold;
}

/* 内容区域 */
.content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}

/* 表头样式 */
.table-header {
  display: flex;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.header-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-item.name-column {
  flex: 2;
  justify-content: flex-start;
}

.header-item.price-column,
.header-item.change-column {
  flex: 1;
  justify-content: center;
}

.header-text {
  font-size: 14px;
  color: #666666;
  font-weight: 500;
}

.sort-icon {
  margin-left: 4px;
  font-size: 12px;
  color: #999999;
}

/* 股票列表 */
.stock-list {
  background-color: #ffffff;
}

.stock-row {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #f5f5f5;
}

.stock-row:active {
  background-color: #f8f8f8;
}

.stock-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stock-cell.name-column {
  flex: 2;
  align-items: flex-start;
}

.stock-cell.price-column,
.stock-cell.change-column {
  flex: 1;
  align-items: center;
}

.stock-name {
  font-size: 15px;
  color: #333333;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
}

.stock-code {
  font-size: 11px;
  color: #999999;
  line-height: 1.2;
}

.stock-price {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.stock-change {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.rising {
  color: #00c851;
}

.falling {
  color: #ff4444;
}

/* 底部安全区域 */
/* .bottom-safe-area {
	height: 20px;
} */

/* 底部导航栏 */
/* .static-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
} */
</style>