nzhbsr/pages/index/index.vue

<template>
	<view class="container">
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="(item, index) in 2" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
				<image src="../../static/img/banner.png" />
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 功能盒 start -->
		<view class="gnh-wrap">
			<view class="gnh-top flex">
				<view class="top-item flex">
					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
					<view class="">認購</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-2.png" mode="" class=""></image>
					<view class="">充幣</view>
				</view>
				<view class="top-item flex">
					<image src="../../static/icon/gn-3.png" mode="" class=""></image>
					<view class="">提幣</view>
				</view>
				<!-- <view class="top-item flex">
					<image src="../../static/icon/gn-4.png" mode="" class=""></image>
					<view class="">語言</view>
				</view> -->
				<view class="top-item flex">
					<image src="../../static/icon/gn-5.png" mode="" class=""></image>
					<view class="">客服</view>
				</view>
			</view>
			<view class="gnh-btm flex">
				<view class="btm-item">
					<view class="btm-item-name">
						BTC/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						BTC/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						ETH/USDT
					</view>
					<view class="btm-item-val">
						15716.53
					</view>
					<view class="btm-item-bl">
						-2.44%
					</view>
				</view>
			</view>
		</view>
		<!-- 功能盒 end -->
		<!--  -->
		<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">
					<view class="main-left">{{   }}</view>
					<view class="main-center" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.price == 0 ? '--.--' : item.price }}</view>
					<view class="main-right">
						<view class="btn" :class="{ down: item.zd < 0, ping: item.zd == 0 }">{{ item.zd }}%</view>
					</view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script>
	import {
		scoketNew,
		scoketOpen
	} from '@/utils/socket.js';
	import {
		geLevertade
	} from '@/api/index.js';
	export default {
		data() {
			return {
				maxheight: '',
				scoket: '',
				instId: 'IOTA-USDT', //请求的产品id
				spList:[],//需要查询的列表
				listOBj:{}//保存实际列表对象
			};
		},
		computed: {

		},
		onLoad: function(option) {
			

		},
		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);
				}
			});
		},
		onShow: function() {
			this.geLevertade()
		},
		onHide() {
			this.closeScoket()
		},
		//下拉刷新
		onPullDownRefresh() {

		},
		methods: {
			swiperChange(){
				
			},
			// 开始请求长连接
			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{
						that.listOBj[res.arg.instId] = res.data
						console.log(that.listOBj,'that.listOBj++++++')
						}catch(e){
							console.log(res,'报错');
						}
					})
				})
			},
			closeScoket(){
				that.scoket.scoketClose();
			},
			// 获取查询列表
			geLevertade(){
				const that = this;
				geLevertade().then((e)=>{
					that.spList = e.list;
					// 开启长连接
					that.onScoket()
					
				})
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf('http'), 'banner');
				if (item.wap_url.indexOf('http') >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
		}
	};
</script>

<style lang="scss">
	// 顶部轮播图
	.top-swiper {
		margin: auto;
		width: 726rpx;
		height: 273rpx;

		.carousel-item {}

		// margin: 20rpx 0 0;
		image {
			// margin: auto;
			width: 726rpx;
			height: 273rpx;
		}
	}

	.gnh-wrap {
		margin: 20rpx 0;
		width: 750rpx;
		height: 315rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;

		.gnh-top {
			justify-content: space-around;
			height: 156rpx;

			.top-item {
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 66rpx;
					height: 75rpx;
				}

				view {
					font-weight: 500;
					color: #525C6E;
				}
			}
		}

		.gnh-btm {
			justify-content: space-around;

			.btm-item {
				width: 33%;
				text-align: center;
				padding-top: 20rpx;

				.btm-item-name {
					font-size: 24rpx;
					font-weight: 500;
					color: #525C6E;
				}

				.btm-item-val {
					font-size: 26rpx;
					font-weight: 500;
					color: #DD3745;
					padding: 20rpx 0;
				}

				.btm-item-bl {
					font-size: 24rpx;
					font-weight: 500;
					color: #DD3745;
				}
			}
		}
	}
	.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>