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: '您未登錄，是否馬上登錄？',
				confirmText: '確認',
				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>