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 in clist" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item" /></swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 通告欄 start -->
		<u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="goDetail" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
		<!-- 通告欄 end -->
		<!-- 功能盒 start -->
		<view class="gnh-wrap">
			<view class="gnh-top flex">
				<view class="top-item flex" @click="navto('/pages/index/rg')">
					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
					<view class="">認購</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/transaction/cblist')">
					<image src="../../static/icon/gn-2.png" mode="" class=""></image>
					<view class="">充幣</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/transaction/tblist')">
					<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" @click="navto('/pages/index/kf')">
					<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 { tradelist } from '@/api/login.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState, mapMutations } from 'vuex';
import { scoketNew, scoketOpen } from '@/utils/socket.js';
import { geLevertade, gglist } from '@/api/index.js';
export default {
	data() {
		return {
			clist: {},
			scoket: '',
			instId: 'IOTA-USDT', //请求的产品id
			spList: [], //需要查询的列表
			list: [],
			listInfo: [],
			listOBj: {} //保存实际列表对象
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad: function(option) {},
	onShow: function() {
		this.geLevertade();
		this.tradelist();
		this.getgg();
	},
	onHide() {
		this.closeScoket();
	},
	//下拉刷新
	onPullDownRefresh() {},
	methods: {
		navto(url) {
			console.log(url);
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				uni.navigateTo({
					url
				});
			}
		},
		goDetail(e) {
			uni.navigateTo({
				url: '/pages/index/ggDetail?id=' + this.listInfo[e].id
			});
		},
		getgg() {
			const obj = this;
			gglist({ page: 1, limit: 1000 }).then(e => {
				obj.listInfo = e.data;
				e.data.forEach(e => {
					obj.list.push(e.title);
				});
			});
		},
		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
			});
		},
		tradelist() {
			tradelist().then(res => {
				console.log(res);
				this.clist = res.data.clist;
				this.clist = Object.assign({}, this.clist);
				console.log(this.clist, 'this.clist');
			});
		}
	}
};
</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>