deepChartVueApp/components/MarketOverview.vue

<template>
  <view>
    <!-- 第一行：白色背景，标题和按钮 -->
    <view class="market-header">
      <text class="section-title">今日市场概览</text>
      <text class="more-btn" @click="showMarketSelector">{{ buttonText }}</text>
    </view>
    
    <!-- 第二行：灰色圆角背景，市场数据 -->
    <view class="market-content">
      <!-- 默认显示图片 -->
      <view class="selected-market" v-if="!showForexMarket">
        <image class="market-image" src="https://d31zlh4on95l9h.cloudfront.net/images/dee46373b5593d5f315d91675a38fb61.png" mode="widthFix"></image>
      </view>
      
      <!-- 外汇市场样式 -->
      <view class="selected-market" v-if="showForexMarket">
        <view class="forex-market">
          <!-- 上部分：三个汇率容器 -->
          <view class="forex-rates">
            <view class="forex-rate-item up">
              <text class="forex-pair">美元/日元</text>
              <text class="forex-value">151.13</text>
              <text class="forex-change">+1.62%</text>
            </view>
            <view class="forex-rate-item down">
              <text class="forex-pair">美元/韩元</text>
              <text class="forex-value">1424.900</text>
              <text class="forex-change">-2.92%</text>
            </view>
            <view class="forex-rate-item up">
              <text class="forex-pair">美元/英镑</text>
              <text class="forex-value">0.730</text>
              <text class="forex-change">+2.92%</text>
            </view>
          </view>
          
          <!-- 中部分：智能解读标题 -->
          <view class="forex-analysis-title">
            <text class="analysis-title">智能解读</text>
          </view>
          
          <!-- 下部分：智能解读内容 -->
          <view class="forex-analysis-content">
            <view class="analysis-icon-container">
              <image class="analysis-brain-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/8f35e54c52412467101370aa70d8fdb2.png" mode="aspectFit"></image>
            </view>
            <view class="analysis-items">
              <view class="analysis-item">
                <text class="analysis-dot orange"></text>
                <text class="analysis-text">今日市场情报: 偏乐观</text>
              </view>
              <view class="analysis-item">
                <text class="analysis-dot blue"></text>
                <text class="analysis-text">市场风险评级: 需警惕潜在风险</text>
              </view>
              <view class="analysis-item">
                <text class="analysis-dot green"></text>
                <text class="analysis-text">早盘解析: 今日高开, 芯片、稀土、公共</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 市场选择对话框 -->
    <uni-popup ref="marketPopup" type="center" :mask-click="true" @change="popupChange">
      <view class="market-dialog">
        <view class="dialog-title">
          <text>选择市场</text>
        </view>
        <view class="market-list">
          <view class="market-option" v-for="(market, index) in marketOptions" :key="index" @click="selectMarket(market.id)">
            <view class="market-flag">
              <image :src="market.flag" mode="aspectFit" class="flag-image"></image>
            </view>
            <view class="market-name-container">
              <text class="market-option-name">{{ market.name }}</text>
            </view>
            <view class="market-checkbox">
              <radio :checked="selectedMarket === market.id" color="#4080ff" />
            </view>
          </view>
        </view>
        <view class="dialog-buttons">
          <button class="confirm-btn" @click="confirmMarketSelection">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'MarketOverview',
  data() {
    return {
      selectedMarket: 'forex',
      tempSelectedMarket: 'forex', // 临时选择，确认后才会应用
      previousMarket: null,
      buttonText: '切换市场',
      showSelector: false,
      showForexMarket: false, // 默认不显示外汇市场内容
      marketOptions: [
        { id: 'forex', name: '外汇市场', flag: '/static/c2.png', value: '+1.62%', trend: 'up' }
      ],
      marketData: {
        'forex': {
          name: '外汇市场',
          value: '+1.62%',
          trend: 'up',
          indicators: [
            { name: '美元/日元', value: '151.13 +1.62%', trend: 'up' },
            { name: '美元/韩元', value: '1424.900 -2.92%', trend: 'down' },
            { name: '美元/英镑', value: '0.79 +2.92%', trend: 'up' }
          ]
        }
      }
    }
  },
  methods: {
    showMarketSelector() {
      // 切换显示外汇市场内容
      this.showForexMarket = !this.showForexMarket;
      // 更新按钮文本
      this.buttonText = this.showForexMarket ? '外汇市场' : '切换市场';
    },
    popupChange(e) {
      // 对话框关闭时，如果没有确认，则恢复原来的选择
      if (!e.show && this.tempSelectedMarket !== this.selectedMarket) {
        this.tempSelectedMarket = this.selectedMarket;
      }
    },
    selectMarket(marketId) {
      // 临时选择市场，不立即应用
      this.tempSelectedMarket = marketId;
    },
    confirmMarketSelection() {
      // 确认选择，应用市场选择并关闭对话框
      this.selectedMarket = this.tempSelectedMarket;
      this.showSelector = false;
      this.$refs.marketPopup.close();
    },
    getSelectedMarketName() {
      if (!this.selectedMarket) return '';
      return this.marketData[this.selectedMarket].name;
    },
    getSelectedMarketValue() {
      if (!this.selectedMarket) return '';
      return this.marketData[this.selectedMarket].value;
    },
    getSelectedMarketTrend() {
      if (!this.selectedMarket) return '';
      return this.marketData[this.selectedMarket].trend;
    },
    getSelectedMarketIndicators() {
      if (!this.selectedMarket) return [];
      return this.marketData[this.selectedMarket].indicators;
    }
  }
}
</script>

<style>
/* 市场概览样式 */
.market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #ffffff;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.more-btn {
  font-size: 14px;
  color: #4080ff;
}

.market-content {
  margin: 0 0 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}

/* 外汇市场样式 */
.forex-market {
  padding: 15px;
}

.forex-rates {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.forex-rate-item {
  width: 30%;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.forex-rate-item.up {
  background-color: rgba(82, 196, 26, 0.1);
  border: 1px solid #52c41a;
}

.forex-rate-item.down {
  background-color: rgba(245, 34, 45, 0.1);
  border: 1px solid #f5222d;
}

.forex-pair {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.forex-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.forex-change {
  font-size: 12px;
  color: #52c41a;
}

.forex-rate-item.down .forex-change {
  color: #f5222d;
}

.forex-analysis-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-left: 3px solid #f5222d;
  padding-left: 8px;
}


.analysis-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.forex-analysis-content {
  display: flex;
  background-color: #fff;
  border-radius: 6px;
  padding: 12px;
}

.analysis-icon-container {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.analysis-brain-icon {
  width: 100%;
  height: 100%;
}

.analysis-items {
  flex: 1;
}

.analysis-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.analysis-item:last-child {
  margin-bottom: 0;
}

.analysis-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.analysis-dot.orange {
  background-color: #fa8c16;
}

.analysis-dot.blue {
  background-color: #1890ff;
}

.analysis-dot.green {
  background-color: #52c41a;
}

.analysis-text {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
}

/* 市场选择对话框样式 */
.market-dialog {
  width: 300px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.dialog-title {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.market-list {
  max-height: 300px;
  overflow-y: auto;
}

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

.market-flag {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.flag-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.market-name-container {
  flex: 1;
}

.market-option-name {
  font-size: 14px;
  color: #333;
}

.dialog-buttons {
  padding: 10px 15px 15px;
  display: flex;
  justify-content: center;
}

.confirm-btn {
  width: 80%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #4080ff;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
}
</style>