aluminium-trading-uniapp-240925/pages/index/tradingPlatform.vue

<template>
  <view class="trading-platform">

    <topbar showRight="0"></topbar>

    <view class="frame">
      <!--顶部栏-->


      <!--折线图-->
      <div ref="chartContainer" class="chart" style="width: 100%; height: 300px;">

      </div>

      <!-- 供应商 -->
      <view v-if="userShop" class="supplier">

        <view class="purchaser-title" style="">
          <span class="active"> {{ $t('other.orderList') }}</span>
        </view>

        <view class="supplierList">
          <orderList :list="list"/>
        </view>
      </view>

      <!-- 采购商 -->
      <view v-else class="purchaser">
        <!--切换现货/期货-->
        <view class="purchaser-title" style="">
          <span v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'"
                @click="actionIndexChange(index)">{{ item.name }}</span>
        </view>
        <view class="productList">
          <productList :list="list"/>
        </view>
      </view>
    </view>
    <tabber select="1"/>
  </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import topbar from "@/components/base/topbar.vue";
import {mapGetters} from 'vuex'
import ProductList from "@/components/user/productList.vue";
import OrderList from "@/pages_order/components/order/orderList.vue";
import mixinList from '@/mixins/list.js'
import * as echarts from 'echarts';

export default {
  mixins: [mixinList],
  components: {
    OrderList,
    ProductList,
    topbar,
    tabber,
  },
  computed: {
    ...mapGetters(['userShop']),
  },
  data() {
    return {
      actionIndex: 0,
      mixinsListApi: 'getMyProductlist',
      type: [
        {
          name: this.$t('other.spotTrading')
        },
        {
          name: this.$t('other.futuresTrading')
        },
      ],
      chartData: [
        // {date: "08/16", value: 10},
        // {date: "08/17", value: 15},
        // {date: "08/18", value: 45},
        // {date: "08/19", value: 20},
        // {date: "08/20", value: 18},
        // {date: "08/21", value: 10},
        // {date: "08/22", value: 15},
        // {date: "08/23", value: 25},
        // {date: "08/24", value: 35},
        // {date: "08/25", value: 30},
        // {date: "08/26", value: 25},
        // {date: "08/27", value: 25},
      ],
      unit: '元/吨',
    }
  },
  onLoad() {
    if (this.userShop) {
      // 现货/期货列表
      this.mixinsListApi = 'productList'
    } else {
      // 交易平台挂单列表
      this.mixinsListApi = 'productlist'
      this.queryParams.productType = this.actionIndex
    }
  },
  mounted() {
    // this.getAlPrice()
    // setTimeout(() => {
    //   this.initChart();
    // })
  },
  onShow() {
    this.getAlPrice()
  },
  methods: {

    getAlPrice() {

      this.$api('getAlPrice', res => {
        this.unit = res.result.unit
        this.chartData = res.result.data
        this.initChart(res.result.data)
      })
    },

    initChart(data) {
      var that = this;
      const chartContainer = this.$refs.chartContainer;
      if (!chartContainer) {
        console.error("Chart container not found");
        return;
      }
      const myChart = echarts.init(chartContainer);

      // 提取日期和数值
      const dates = data.map(item => item.date);
      const values = data.map(item => item.value);

      // 配置 ECharts
      const option = {
        backgroundColor: '#1B263B',
        title: {
          text: `${'铝均价' + data[0].value}`,
          right: '10%',
          top: '10%',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{c0}',
          backgroundColor: '#3A506B',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: function (value) {
              return value;
            }
          }
        },
        series: [{
          name: '长江',
          type: 'line',
          data: values,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#4ECDC4'
          },
          lineStyle: {
            color: '#4ECDC4',
            width: 2
          },
          areaStyle: {
            color: 'rgba(78, 205, 196, 0.2)'
          },
        }]
      };

      myChart.setOption(option);
    },

    // 切换tab
    actionIndexChange(index) {
      // index为0时切换到现货交易，index为1时切换到期货交易
      this.actionIndex = index;
      this.queryParams.productType = this.actionIndex
      this.getData()
    },
  }
}
</script>

<style scoped lang="scss">
.trading-platform {
  background-image: url('../../static/image/index/1.png');

  .frame {

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 120rpx - 120rpx);

    .chart {
      height: 300px !important;
      background-color: #1B263B; /* 背景颜色 */
    }

    .supplier {
      height: 70%;
      padding: 20rpx 20rpx;
      background-image: url('../../static/image/index/1.png');
      color: #FFF;
      font-size: 32rpx;

      .supplierList {
        margin-top: 20rpx;
        height: 92%;
        overflow: auto;
      }

      .purchaser-title {
        height: 8%;

        .active {
          text-decoration: underline;
          width: 80rpx;
          margin: 20rpx 20rpx 20rpx 20rpx;
          padding: 10rpx 20rpx;

        }


        .noactive {
          width: 80rpx;
          margin: 20rpx 20rpx 20rpx 20rpx;
          padding: 10rpx 20rpx;
        }
      }

    }

    .purchaser {
      height: 60%;
      padding: 20rpx 0;
      color: #FFF;
      font-size: 32rpx;


      .purchaser-title {

        .active {
          text-decoration: underline;
          width: 80rpx;
          margin: 20rpx 20rpx 20rpx 20rpx;
          padding: 10rpx 20rpx;

        }


        .noactive {
          width: 80rpx;
          margin: 20rpx 20rpx 20rpx 20rpx;
          padding: 10rpx 20rpx;
        }
      }


      .productList {
        margin-top: 20rpx;
        height: 60vh;
        overflow: auto;
      }
    }
  }
}
</style>