BiKing/pages/contract/history/index.vue

<template>
	<view class="history-box" :rise-fall="stocksColor">
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					合约历史
				</view>
			</template>
		</headContent>
		<view class="swiper-lable">
			<template v-for="(item , index) in historyLable">
				<view @click.stop="historyIdex = index"
					:class="['swiper-lable-item' , historyIdex === index ? 'active-swiper-lable' : '']">
					{{ item.name }}
				</view>
			</template>
		</view>
		<view class="">
			<!-- <u-swiper :list="list1" @change="change" ></u-swiper> -->
			<swiper class="swiper-content" :current="historyIdex"
				:style="{'height': swiperHeight ? `${swiperHeight}px` : '' }" :duration="200">
				<swiper-item class="swiper-item-box">
					<at-present :listHeight="swiperHeight" :status="historyLable[historyIdex].status"
						:legal_id="legal_id" :currency_id="currency_id" />
				</swiper-item>
				<swiper-item class="swiper-item-box">
					<history-entrust :listHeight="swiperHeight" :status="historyLable[historyIdex].status"
						:legal_id="legal_id" :currency_id="currency_id" />
				</swiper-item>
				<swiper-item>
					<history-freight-space :listHeight="swiperHeight" :status="historyLable[historyIdex].status" />
				</swiper-item>
				<swiper-item>
					<turnover :listHeight="swiperHeight" :status="historyLable[historyIdex].status" />
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import entrust from "../sustainability/entrust.vue"
	import atPresent from "./at-present.vue"
	import historyEntrust from "./history-entrust.vue"
	import historyFreightSpace from "./history-freight-space.vue"
	import turnover from "./turnover.vue"
	import {
		Api_getRegister
	} from "@/api/index.js"
	export default {
		name: 'contract-history',
		components: {
			entrust,
			historyEntrust,
			historyFreightSpace,
			turnover,
			atPresent
		},
		data() {
			return {
				legal_id: '',
				currency_id: '',
				swiperHeight: 0,

				historyIdex: 0,

				historyLable: [
					// 类型：
					// -1：历史仓位；
					// 3：成交记录；
					// 0：当前委托；
					// 1：当前持仓
					// （无历史委托，成交的委托会转 1 当前持仓，成交后转 成交记录）
					{
						name: '当前委托',
						status: 0,
					},
					{
						name: '历史委托',
						status: 999,
					},
					{
						name: '历史仓位',
						status: -1,
					},
					{
						name: '成交记录',
						status: 3,
					}
				],
				historyData: [
					[],
					[],
					[]
				]
			};
		},
		computed: {
			...mapGetters([
				"stocksColor",
				'PageContentHeight'
			])
		},
		watch: {
			PageContentHeight: {
				handler(newH) {
					if (newH) {
						this.swiperHeight = newH - uni.upx2px(96);
					}
				},
				immediate: true
			},

		},
		onLoad(opt) {
			this.legal_id = opt?.legal_id;
			this.currency_id = opt?.currency_id;
			// ?legal_id=3&currency_id=1
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "~../sustainability/index.scss";

	.history-box {
		width: 100%;
		height: 100vh;


		// <view class="swiper-lable">
		// 	<template v-for="(item , index) in historyLable">
		// 		<view class="swiper-lable-item">{{ item.name }}</view>
		// 	</template>
		// </view>
		.swiper-lable {
			padding: 0 $pages-padding;
			width: 100%;
			height: 96rpx;
			border-bottom: 1rpx solid $border-color;
			background-color: #fff;
			display: flex;
			align-items: stretch;

			.swiper-lable-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: $SizeColor3;
				font-weight: 700;

				&:nth-child(n + 2) {
					margin-left: 30rpx;
				}
			}

			.active-swiper-lable {
				position: relative;
				color: $Theme-Color;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 40rpx;
					height: 7rpx;
					background-color: $Theme-Color;
					transform: translateX(-50%);
					border-radius: 8rpx;
				}
			}
		}

		.swiper-content {
			width: 100%;

			.swiper-item-box {
				width: 100%;
				height: 100%;
			}

			.swiper-list {}
		}
	}
</style>