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> -->
				
					<span v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'"
						@click="actionIndexChange(index)">{{ item.name }}</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).splice(0, 48);
				const values = data.map(item => item.value).splice(0, 48);


				// 计算铝均价
				let sum = 0
				values.forEach(n => {
					sum += parseFloat(n)
				})
				
				console.log(sum);

				// 配置 ECharts
				const option = {
					backgroundColor: '#1B263B',
					title: {
						text: `${'铝均价' + (sum / values.length).toFixed(4)}`,
						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');
		padding-bottom: 100rpx;

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