nzhbsr/pages/index/index.vue

<template>
	<view class="container">
		<view class="flex" style="justify-content: space-between;padding: 20rpx 30rpx;">
			<image src="../../static/icon/user.png" mode="" style="width: 53rpx;height: 53rpx;" @click="navto('/pages/user/menu')"></image>
			<!-- <image src="../../static/icon/tz.png" mode="" style="width: 53rpx;height: 53rpx;"></image> -->
		</view>
		<!-- 轮播图 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>
					<template v-if="listOBj['BTC-USDT']">
						<view class="btm-item-val" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
							{{listOBj['BTC-USDT'].last|| '--,--'}}
						</view>
						<view class="btm-item-bl" :style="{'color': listOBj['BTC-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
							{{listOBj['BTC-USDT'].dcf || '--,--'}}%
						</view>
					</template>
					
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						BCH/USDT
					</view>
					<template v-if="listOBj['BCH-USDT']">
						<view class="btm-item-val" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}" >
							{{listOBj['BCH-USDT'].last || '--,--'}}
						</view>
						<view class="btm-item-bl" :style="{'color': listOBj['BCH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
							{{listOBj['BCH-USDT'].dcf || '--,--'}}%
						</view>
					</template>
					
				</view>
				<view class="btm-item">
					<view class="btm-item-name">
						ETH/USDT
					</view>
					<template v-if="listOBj['ETH-USDT']">
						<view class="btm-item-val" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
							{{listOBj['ETH-USDT'].last || '--,--'}}
						</view>
						<view class="btm-item-bl" :style="{'color': listOBj['ETH-USDT'].dcf > 0 ? '#5ec886': '#DD3745'}">
							{{listOBj['ETH-USDT'].dcf || '--,--'}}%
						</view>
					</template>
					
				</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>
			<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>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	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: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad: function(option) {


		},
		onShow: function() {
			this.geLevertade()
		},
		onHide() {
			this.closeScoket()
		},
		//下拉刷新
		onPullDownRefresh() {

		},
		methods: {
			navto(url) {
				console.log(url);
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			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 {
							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()

				})
			},
			// 轮播图跳转
			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>