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

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

    <view class="frame">
      <!--顶部栏-->
      <topbar showRight="0"></topbar>

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

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

        <view style="" class="purchaser-title">
          <span class="active">挂单列表</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'">现货交易</span>
          <span @click="actionIndexChange(1)" :class="actionIndex==1?'active':'noactive'">期货交易</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 {
    .chart {
      border: 1px solid red;
      height: 250rpx;

    }

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

      .supplierList{
        margin-top: 20rpx;
        height: 60vh;
        overflow: auto;
      }

      .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;
        }
      }

    }

    .purchaser {
      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>