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>
</template>

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

		},
		onLoad: function(option) {
			

		},
		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
						}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;
				}
			}
		}
	}
</style>