nzhbsr/pages/transaction/bblist.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.type==1" class="font-color-green">
									{{$t('hy.gm')}}
								</text>
								<text v-if="item.type==2" class="font-color-red">
									{{$t('hy.cs')}}
								</text>
								<text>
									{{item.symbol}}
								</text>
								
							</view>
							<view @click="clearorder(item)" v-if="current==0" class="usdtListButtom">
								{{$t('hy.cx')}}
							</view>
							<view v-if="current!= 0" class="usdtListButtom" style="background: none;color: #b3b4b5;">
								{{item.status == 2?$t('hy.wc'):(item.status == 3?$t('hy.cx'):'')}}
							</view>
						</view>
						<view class="flex" style="flex-wrap: wrap;justify-content: flex-start;">
							<template v-if="current == 0">
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.jg')}}(USDT)
									</view>
									<view class="text">
										{{item.xjprice}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.sl')}}(USDT)
									</view>
									<view class="text">
										{{item.usdtnum}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.sjcj')}}(USDT)
									</view>
									<view class="text">
										{{item.coinnum}}
									</view>
								</view>
							</template>
							<template v-if="current != 0">
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.sj')}}
									</view>
									<view class="text">
										{{item.tradetime}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.wtj')}}（USDT）
									</view>
									<view class="text">
										{{item.ordertype ==2?'市價':item.xjprice}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.jye')}}（USDT）
									</view>
									<view class="text">
										{{item.usdtnum}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.cjzj')}}(USDT)
									</view>
									<view class="text">
										{{item.usdtnum}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.cjjj')}}(USDT)
									</view>
									<view class="text">
										{{item.price}}
									</view>
								</view>
								<view class="tipList">
									<view class="nameTip">
										{{$t('hy.cjl')}}{{item.coin}}
									</view>
									<view class="text">
										{{item.coinnum}}
									</view>
								</view>
							</template>
							
						</view>
					</view>
				</scroll-view>

			</swiper-item>

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

<script>
	import { tradebill,closeorder} from "@/api/login.js"
	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: 'lsjl',
						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
				}
				tradebill({
						type: item.status
					})
					.then(({
						data
					}) => {
						// 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 = data;
						console.log(item.list)
						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({
								oid: 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: that.$t('hy.cx'),
					content: that.$t('hy.sfljcx'),
					confirmText: that.$t('hy.qr'),
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: that.$t('hy.qqz') + '...',
								mask: true
							});
							clearorder({
								id: item.id
							}).then((e) => {
								uni.hideLoading()
								uni.showToast({
									title: that.$t('hy.cxcg'),
									icon: 'success'
								});
								that.ddTypeInit()
							}).catch(() => {
								uni.hideLoading()
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 獲取幣種列表
			geLevertade() {
				uni.showLoading({
					title: this.$t('hy.sjjzz') + '...',
					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: 33%;
			max-width: 33%;
			padding-top: 20rpx;
			flex-grow: 1;

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

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