nzhbsr/pages/transaction/transaction.vue

<template>
	<view class="content">
		<scroll-view scroll-x="true" :scroll-with-animation="true" class="navbar">
			<view class="navbar-item" :class="{ current: tabCurrentIndex === index }" v-for="(item, index) in typelist" @click="tabClick(index)">{{ item.name }}</view>
		</scroll-view>
		<view class="list">
			<view class="list-title flex">
				<view class="title-left">交易對</view>
				<view class="title-center">最新價格</view>
				<view class="title-right">24h漲跌</view>
			</view>
			<scroll-view class="swiper-box" scroll-y="true" :style="{ height: maxheight }">
				<view class="list-main flex" v-for="(item,index ) in listOBj">
					<view class="main-left">{{index}}</view>
					<view class="main-center" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">
						{{ item.last == 0 ? '--.--' : item.last }}</view>
					<view class="main-right">
						<view class="btn" :class="{ down: item.dcf > 0, ping: item.dcf == 0 }">{{ item.dcf }}%</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapMutations,mapState } from 'vuex';
	import {
		scoketNew,
		scoketOpen
	} from '@/utils/socket.js';
	import {
		geLevertade
	} from '@/api/index.js';
export default {
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper-box').boundingClientRect();
				query.exec(function(res) {
					_this.maxheight = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.maxheight);
				});
			},
			fail: res => {
				console.log('打印页面的剩余高度', res);
			}
		});
	},
	computed: {
		...mapState('user',['hasLogin'])
	},
	data() {
		return {
			typelist: [{ name: 'USDT市场' }],
			tabCurrentIndex: 0,
			maxheight: '',
			scoket: '',
			instId: 'IOTA-USDT', //请求的产品id
			spList: [], //需要查询的列表
			listOBj: {} //保存实际列表对象
		};
	},
	onLoad() {
		
	},
	onShow() {
		if(this.hasLogin) {
			this.geLevertade()
		}else {
			uni.showModal({
				title: '提示',
				content: '您未登錄，是否馬上登錄？',
				complete(res) {
					console.log(res)
					if(res.confirm) {
						uni.navigateTo({
							url:'/pages/public/login'
						})
					}
				}
			})
		}
		
	},
	onHide() {
		this.closeScoket()
	},
	methods: {
		tabClick(opt) {
			this.tabCurrentIndex = opt;
		},
		// 开始请求长连接
		onScoket() {
			const that = this;
			that.scoket = scoketNew("wss://wsaws.okx.com:8443/ws/v5/public");
			that.scoket.scoketOpen().then((res) => {
				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) {
							// res.res.data[0].name = res.arg.instId
							that.listOBj[res.arg.instId] = res.data[0];
							that.listOBj[res.arg.instId].dcf = ((res.data[0].last*1 -  res.data[0].sodUtc0*1)/(res.data[0].sodUtc0*1) * 100 ).toFixed(2)
							that.listOBj = Object.assign( {},that.listOBj);
						}
						console.log(that.listOBj, 'that.listOBj++++++')
					} catch (e) {
		
						console.log(res, res.data, '报错');
					}
				})
			})
		},
		closeScoket() {
			this.scoket.scoketClose();
		},
		// 获取查询列表
		geLevertade() {
			const that = this;
			geLevertade().then((e) => {
				that.spList = e.list;
				// 开启长连接
				that.onScoket()
		
			})
		},
	}
};
</script>

<style lang="scss">
page,
.content {
	height: auto;
	min-height: 100%;
	background: #f6f6f6;
}
.navbar {
	padding-top: 34rpx;
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 100rpx;
	.navbar-item {
		text-align: center;
		display: inline-block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #777988;
		margin-left: 115rpx;
		padding-bottom: 14rpx;
		line-height: 1;
		&.current {
			border-bottom: 3px solid #f7d359;
		}
	}
}
.list {
	background: #ffffff;
	border-top-left-radius: 26rpx;
	border-top-right-radius: 26rpx;
	padding: 40rpx 15rpx 0;
	.list-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #525c6e;
		padding-bottom: 32rpx;
		.title-left {
			text-align: left;
			width: 33%;
		}
		.title-center {
			text-align: center;
			width: 33%;
		}
		.title-right {
			text-align: right;
			width: 33%;
		}
	}
	.list-main {
		padding: 12rpx 0;
		.main-left {
			text-align: left;
			width: 33%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #525c6e;
		}
		.main-center {
			text-align: center;
			width: 33%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e15560;
			&.down {
				color: #5ec886;
			}
			&.ping {
				color: #525c6e;
			}
		}
		.main-right {
			text-align: right;
			width: 33%;
			display: flex;
			justify-content: flex-end;
			.btn {
				width: 122rpx;
				height: 63rpx;
				background: #e15562;
				border-radius: 5rpx;
				text-align: center;
				line-height: 63rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				&.down {
					background: #5ec886;
				}
				&.ping {
					background: #f6f6f6;
				}
			}
		}
	}
}
</style>