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)">{{ $t('hy.' + 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">{{ $t('hy.zd') }}</text>
								<text v-if="item.direction == 2" class="font-color-red">{{ $t('hy.zk') }}</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">{{ $t('hy.cx') }}</view>
							<view @click="closeorder(item)" v-if="current == 1" class="usdtListButtom">{{ $t('hy.pc') }}</view>
						</view>
						<view class="tip ">
							<text v-if="current == 0">{{ $t('hy.wtsj') }}：{{ item.wttime }}</text>
							<text v-if="current != 0">{{ $t('hy.kcsj') }}：{{ item.addtime }}</text>
							<text v-if="current == 2">
								<br />
								{{ $t('hy.pcsj') }}：{{ item.endtime }}
							</text>
						</view>
						<view class="flex" style="flex-wrap: wrap;justify-content: flex-start;">
							<view v-if="current == 0" class="tipList">
								<view class="nameTip">{{ $t('hy.wtjg') }}</view>
								<view class="text">{{ item.wt_price }}</view>
							</view>
							<view v-if="current != 0" class="tipList">
								<view class="nameTip">{{ $t('hy.kcdj') }}</view>
								<view class="text">{{ item.price }}</view>
							</view>
							<!-- <view v-if="current != 0" class="tipList">
								<view class="nameTip">{{ $t('hy.dqjg') }}</view>
								<view class="text">{{ listOBj[item.symbol.replace('/', '-')].last }}</view>
							</view> -->
							<view v-if="current == 1" class="tipList">
								<view class="nameTip">{{ $t('hy.dqjg') }}</view>
								<view class="text">{{ listOBj[item.symbol.replace('/', '-')].last || 0 }}</view>
							</view>
							<view v-if="current == 2" class="tipList">
								<view class="nameTip">{{ $t('hy.pcjg') }}</view>
								<view class="text">{{ item.pc_price || 0 }}</view>
							</view>
							<view class="tipList">
								<view class="nameTip">{{ $t('hy.ggbs') }}</view>
								<view class="text">{{ item.ggan }}</view>
							</view>
							<view class="tipList" v-if="current != 0">
								<view class="nameTip">{{ $t('hy.sxf') }}</view>
								<view class="text">{{ item.fee }}</view>
							</view>
							<!-- <view class="tipList" v-if="current == 2">
								<view class="nameTip">
									平倉單價
								</view>
								<view class="text">
									{{item.pc_price}}
								</view>
							</view> -->

							<template v-if="current == 1">
								<view class="tipList">
									<view class="nameTip">{{ $t('hy.zydj') }}</view>
									<view class="text">{{ item.zyprice }}</view>
								</view>
								<view class="tipList">
									<view class="nameTip">{{ $t('hy.zkdj') }}</view>
									<view class="text">{{ item.zsprice }}</view>
								</view>
							</template>
							<view class="tipList">
								<view class="nameTip">{{ current == 0 ? $t('hy.wtss') : $t('hy.jygs') }}</view>
								<view class="text">{{ item.num }}</view>
							</view>
							<template v-if="current == 2">
								<view class="tipList">
									<view class="nameTip">{{ $t('hy.ykzt') }}</view>
									<view class="text" :style="{ color: item.yk_status == 1 ? '#5DC887' : '#dd524d' }">{{ item.yk_status == 1 ? $t('hy.yl') : $t('hy.ks') }}</view>
								</view>
								<view class="tipList">
									<view class="nameTip">{{ $t('hy.ykje') }}</view>
									<view class="text" :style="{ color: item.yk_status == 1 ? '#5DC887' : '#dd524d' }">
										{{ item.yk_status == 1 ? '+' : '-' }}{{ item.ylmoney }}
									</view>
								</view>
							</template>
							<view class="tipList">
								<view class="nameTip">{{ $t('hy.bzj') }}</view>
								<view class="text">{{ item.bond }}</view>
							</view>
						</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: 'qbwt',
					page: 1,
					limit: 10,
					loadingType: 'more',
					loded: false,
					list: []
				},
				{
					status: 2,
					name: 'qbcc',
					page: 1,
					limit: 10,
					loadingType: 'more',
					loded: false,
					list: []
				},
				{
					status: 3,
					name: 'cjmx',
					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>