nzhbsr/pages/heyue/tradlist.vue

<template>
	<view class="content">
		<view class="flex navbar">
			<view class="" v-for="(item,index) in navList" :class="{'action':current == index}" @click="changetab(index)">
				{{item.name}}
			</view>
		</view>
		<swiper class="swiper" :style="{'height': height}" :current="current">
			<swiper-item v-for="navitem in navList">
				<scroll-view scroll-y="true" class="scroll"  :style="{'height': height}">
					<view v-for="(item,ind) in navitem.list" class="usdtList padding-t-30 padding-b-30">
						<view class="flex">
							<view class="name">
								<text v-if="item.direction==1" class="font-color-green">
									做多
								</text>
								<text v-if="item.direction==2" class="font-color-red">
									做空
								</text>
								<text>
									{{item.symbol}}
								</text>
								<text v-if="current==0"
									:class="{'font-color-green':+item.profit>=0,'font-color-red':+item.profit<0}">
									{{+item.profit}}
								</text>
							</view>
							<view @click="clearorder(item)" v-if="current==0" class="usdtListButtom">
								撤銷
							</view>
							<view @click="closeorder(item)" v-if="current==1" class="usdtListButtom">
								一鍵平倉
							</view>
						</view>
						<view class="tip ">
							<text v-if="item.direction==1">
								委託時間：{{item.wttime}}
							</text>
							<text v-if="item.direction==2">
								開倉時間：{{item.addtime}}
							</text>
						</view>
						<view class="flex">
							<view v-if="item.direction==1" class="tipList">
								<view class="nameTip">
									限價
								</view>
								<view class="text">
									{{item.wt_price}}
								</view>
							</view>
							<view v-if="item.direction==2" class="tipList">
								<view class="nameTip">
									開倉單價
								</view>
								<view class="text">
									{{item.price}}
								</view>
							</view>

							<view class="tipList">
								<view class="nameTip">
									保證金
								</view>
								<view class="text">
									{{item.bond}}
								</view>
							</view>
							<view class="tipList">
								<view class="nameTip">
									交易個數
								</view>
								<view class="text">
									{{item.num}}
								</view>
							</view>
							<view class="tipList">
								<view class="nameTip">
									槓桿倍數
								</view>
								<view class="text">
									{{item.ggan}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import {
		levertadeLaverorder,
		closeorder,
		clearorder,
		UpOrderHandle,
		bond
	} from '@/api/heyue.js';
	export default {
		data() {
			return {
				height: '',
				current: 0,
				navList: [{
						status: 1,
						name: '全部委托',
						page: 1,
						limit: 10,
						loadingType: 'more',
						loded: false,
						list: []
					},
					{
						status: 2,
						name: '全部持倉',
						page: 1,
						limit: 10,
						loadingType: 'more',
						loded: false,
						list: []
					},
					{
						status: 3,
						name: '成交明細',
						page: 1,
						limit: 10,
						loadingType: 'more',
						loded: false,
						list: []
					}
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadData()
		},
		onReachBottom() {

		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			changetab(index) {
				this.current = index
				this.loadData('tab')
			},
			loadData(tab) {
				let obj = this
				let index = obj.current
				let item = obj.navList[index]
				if (tab == 'tab' && item.loaded) {
					return
				}
				if (item.loadingType == 'loading' || item.loadingType == 'noMore') {
					return
				}
				levertadeLaverorder({
						type: item.status,
						page: item.page,
						limit: item.limit
					})
					.then(({
						list
					}) => {
						// uni.hideLoading()
						let arr = list.map(e => {
							e.direction = +e.direction;
							e.bond = +e.bond
							e.price = +e.price
							e.wt_price = +e.wt_price
							return e;
						});
						item.list = arr;
						this.$set(item, 'loaded', true);
					})
					.catch(e => {
						// uni.hideLoading()
						console.log(e);
					});
			},
			// 平倉
			closeorder(item) {
				const that = this;
				uni.showModal({
					title: '平倉',
					content: '是否立即平倉，確認後不可修改',
					confirmText: '確認',
					cancelText: '取消',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '請求中...',
								mask: true
							});
							closeorder({
								id: item.id
							}).then((e) => {
								uni.hideLoading()
								uni.showToast({
									title: '平倉成功',
									icon: 'success'
								});
								that.ddTypeInit()
							}).catch(() => {
								uni.hideLoading()
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 撤銷
			clearorder(item) {
				const that = this;
				uni.showModal({
					title: '撤銷',
					content: '是否立即撤銷，確認後不可修改',
					confirmText: '確認',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '請求中...',
								mask: true
							});
							clearorder({
								id: item.id
							}).then((e) => {
								uni.hideLoading()
								uni.showToast({
									title: '撤銷成功',
									icon: 'success'
								});
								that.ddTypeInit()
							}).catch(() => {
								uni.hideLoading()
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	.swiper {
		background-color: #fff;
	}
	.scroll {
		padding: 0 20rpx;
	}
	.navbar {
		justify-content: flex-start;
		font-size: 40rpx;
		padding: 30rpx;
		view {
			width: 184rpx;
			height: 100rpx;
			line-height: 100rpx;

		}
	}
	.usdtList {
		color: #707A8A;
		border-bottom: 1px solid $border-color-light;
	
		.name {
			font-size: $font-lg;
			font-weight: bold;
		}
	
		.usdtListButtom {
			font-size: $font-base;
			background-color: #F5F5F5;
			color: $uni-color-warning;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}
	
		.tip {
			padding-top: 10rpx;
			padding-bottom: 30rpx;
			font-size: $font-base;
		}
	
		.tipList {
			font-size: $font-sm;
			text-align: center;
	
			.nameTip {
				padding-bottom: 20rpx;
			}
		}
	}
	.action {
		font-weight: bold;
		font-size: 44rpx;
	}
</style>