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

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

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

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


      <!--折线图-->
      <view class="chart">
        折线图
      </view>

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

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

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

      <!-- 采购商 -->
      <view class="purchaser" v-else>
        <view style="" class="purchaser-title">
          <span @click="actionIndexChange(0)" :class="actionIndex==0?'active':'noactive'">{{ $t('other.spotTrading') }}</span>
          <span @click="actionIndexChange(1)" :class="actionIndex==1?'active':'noactive'">{{ $t('other.futuresTrading') }}</span>
        </view>

        <view class="productList">
          <productList :productList="list.records"/>
        </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";

export default {
  components: {
    OrderList,
    ProductList,
    topbar,
    tabber,
  },
  computed: {
    ...mapGetters(['userShop']),
  },
  data() {
    return {
      list: {
        records: [
          {}
        ],
        total: 0,
      },
      actionIndex: 0,
    }
  },
  methods: {
    // 切换tab
    actionIndexChange(index) {
      // index为0时切换到现货交易，index为1时切换到期货交易
      this.actionIndex = index;

    },
  }
}
</script>

<style scoped lang="scss">
.trading-platform {
  .frame {

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

    .chart {
      height: 30%;
    }

    .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;
      background-image: url('../../static/image/index/1.png');
      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>