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" disable-touch>
			<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==1 && item.direction==2"
									:class="{'font-color-green':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)>=0,'font-color-red':+((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num)<0}">
									<!-- {{+item.profit}} -->{{ ((item.price - listOBj[item.symbol.replace('/','-')].last)/item.num).toFixed(2)|| ''}}
								</text>
								<text v-if="current==1 && item.direction==1"
									:class="{'font-color-green':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)>=0,'font-color-red':+(( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num)<0}">
									<!-- {{+item.profit}} -->{{ (( listOBj[item.symbol.replace('/','-')].last- item.price )/item.num).toFixed(2) || ''}}
								</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" style="flex-wrap: wrap;justify-content: flex-start;">
							<view v-if="current == 0" class="tipList">
								<view class="nameTip">
									限價
								</view>
								<view class="text">
									{{item.wt_price}}
								</view>
							</view>
							<view v-if="current != 0" class="tipList">
								<view class="nameTip">
									開倉單價
								</view>
								<view class="text">
									{{item.price}}
								</view>
							</view>

							<view class="tipList" v-if="current == 2">
								<view class="nameTip">
									平倉單價
								</view>
								<view class="text">
									{{item.pc_price}}
								</view>
							</view>
							<view class="tipList">
								<view class="nameTip">
									{{current == 0?'委托手數': '交易個數'}}
								</view>
								<view class="text">
									{{item.num}}
								</view>
							</view>
							<view class="tipList">
								<view class="nameTip">
									槓桿倍數
								</view>
								<view class="text">
									{{item.ggan}}
								</view>
							</view>
							<template v-if="current == 1">
								<view class="tipList">
									<view class="nameTip">
										止盈單價
									</view>
									<view class="text">
										{{item.zyprice}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										止損單價
									</view>
									<view class="text">
										{{item.zsprice}}
									</view>
								</view>
							</template>
							<view class="tipList" v-if="current != 0">
								<view class="nameTip">
									手續費
								</view>
								<view class="text">
									{{item.fee}}
								</view>
							</view>
							<template v-if="current == 2">
								<view class="tipList">
									<view class="nameTip">
										盈虧狀態
									</view>
									<view class="text" :style="{'color': item.yk_status == 1?'#5DC887':'#dd524d'}">
										{{item.yk_status == 1?'盈利':'虧損'}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										盈虧金額
									</view>
									<view class="text" :style="{'color': item.yk_status == 1?'#5DC887':'#dd524d'}">
										{{item.yk_status == 1?'+':'-'}}{{item.ylmoney}}
									</view>
								</view>
							</template>

						</view>
					</view>
				</scroll-view>

			</swiper-item>

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

<script>
	import {
		geLevertade
	} from '@/api/index.js';
	import {
		scoketNew,
		scoketOpen
	} from '@/utils/socket.js';
	import {
		levertadeLaverorder,
		closeorder,
		clearorder,
		UpOrderHandle,
		bond
	} from '@/api/heyue.js';
	export default {
		data() {
			return {
				listOBj: {}, //保存实际列表对象
				timer: '',
				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() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			this.geLevertade()
			this.loadData()
		},
		onHide() {
			this.closeScoket()
		  clearTimeout(this.timer);
		 },
		 // 监听页面卸载
		 onUnload() {
		  // 关闭倒计时
		  clearTimeout(this.timer);
		 },
		 // 监听页面后退
		 onBackPress() {
		  // 关闭倒计时
		  clearTimeout(this.timer);
		 },
		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') {
					return
				}
				levertadeLaverorder({
						type: item.status,
						page: item.page,
						limit: item.limit
					})
					.then(({
						list
					}) => {
						console.log(list, 'list+++++++')
						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);
						if (obj.timer) {
							clearTimeout(obj.timer);
							obj.timer = null;
						}
						obj.timer = setTimeout(() => {
							obj.loadData()
						}, 2000)

					})
					.catch(e => {
						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: () => {}
				});
			},
			// 獲取幣種列表
			geLevertade() {
				uni.showLoading({
					title: '數據加載中...',
					mask: true
				});
				const that = this;
				geLevertade().then((e) => {
					that.spList = e.list;
					// 开启长连接
					that.onScoket()
			
				})
			},
			// 开始请求长连接
			onScoket() {
				const that = this;
				that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
				that.scoket.scoketOpen().then((res) => {
					uni.hideLoading()
					const requestList = that.spList.map((e) => {
						return {
							"channel": "tickers",
							"instId": e.coinname.toUpperCase() + "-USDT"
						}
					})
					that.scoket.scoketSend({
						"op": "subscribe",
						"args": requestList
					}).then((res) => {
						console.log(res, '发送成功');
					})
					that.scoket.scoketMessage((res) => {
						try {
							if (res.data) {
								// 判断是否已经有这个对象
								// console.log(res.arg.instId, 'id', that.listOBj);
								that.listOBj[res.arg.instId] = res.data[0];
								const item = that.listOBj[res.arg.instId];
								// 转为数字
								item.last = +item.last;
								item.sodUtc0 = +item.sodUtc0;
								// 保存收益情况
								item.bool = item.last - item.sodUtc0 > 0 ? true : false;
								// 算出收益率
								item.dcf = (+((item.last - item.sodUtc0) / item.sodUtc0 * 100).toFixed(
									2)) + '%'
								item.name = item.instId.replace('-', '/')
								that.listOBj = Object.assign({}, that.listOBj);
								console.log(that.listOBj,'that.listOBj')
							}
						} catch (e) {
							console.log(res, res.data, '报错');
						}
					})
				})
			},
			closeScoket() {
				this.scoket.scoketClose();
			},
		}
	}
</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;
			width: 25%;
			max-width: 33%;
			padding-top: 20rpx;
			flex-grow: 1;

			.nameTip {
				padding-bottom: 20rpx;
			}
		}
	}

	.action {
		font-weight: bold;
		font-size: 44rpx;
	}
</style>