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 :list="list" />
				</view>
			</view>

			<!-- 采购商 -->
			<view class="purchaser" v-else>
        <!--切换现货/期货-->
				<view style="" class="purchaser-title">
					<span @click="actionIndexChange(index)" v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'">{{ 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'
	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')
					},
				],
			}
		},
		onLoad() {
			if(this.userShop){
        // 现货/期货列表
				this.mixinsListApi = 'productList'
			}else{
        // 交易平台挂单列表
				this.mixinsListApi = 'productlist'

				this.queryParams.productType = this.actionIndex
			}
		},
		methods: {
			// 切换tab
			actionIndexChange(index) {
				// index为0时切换到现货交易，index为1时切换到期货交易
				this.actionIndex = index;
				this.queryParams.productType = this.actionIndex
				this.getData()
			},
		}
	}
</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>