nzhbsr/pages/index/index.vue

<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="vheight"></view>
		<!-- #endif -->
		<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')"> -->
				<view class="top-item flex" @click="jqqd()">
					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
					<view class="">{{ $t('index.rg') }}</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/transaction/cblist')">
					<image src="../../static/icon/gn-2.png" mode="" class=""></image>
					<view class="">{{ $t('index.cb') }}</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/transaction/tblist')">
					<image src="../../static/icon/gn-3.png" mode="" class=""></image>
					<view class="">{{ $t('index.tb') }}</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/index/language')">
					<image src="../../static/icon/gn-4.png" mode="" class=""></image>
					<view class="">{{ $t('index.yy') }}</view>
				</view>
				<view class="top-item flex" @click="navto('/pages/index/kf')">
					<image src="../../static/icon/gn-5.png" mode="" class=""></image>
					<view class="">{{ $t('index.kf') }}</view>
				</view>
			</view>
			<view class="gnh-btm flex">
				<view class="btm-item" @click="navto('/pages/transaction/transactionDetail?type=BTC-USDT')">
					<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" @click="navto('/pages/transaction/transactionDetail?type=BCH-USDT')">
					<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" @click="navto('/pages/transaction/transactionDetail?type=GCB-USDT')">
					<view class="btm-item-name">GCB/USDT</view>
					<template v-if="listOBj['GCB-USDT']">
						<view class="btm-item-val"
							:style="{ color: listOBj['GCB-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">
							{{ listOBj['GCB-USDT'].last || '--,--' }}
						</view>
						<view class="btm-item-bl"
							:style="{ color: listOBj['GCB-USDT'].dcf > 0 ? '#5ec886' : '#DD3745' }">
							{{ listOBj['GCB-USDT'].dcf || '--,--' }}%
						</view>
					</template>
				</view>
				<view class="btm-item" @click="navto('/pages/transaction/transactionDetail?type=ETH-USDT')">
					<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>
		<view class="list">
			<view class="list-title flex">
				<view class="title-left">{{ $t('index.jyd') }}</view>
				<view class="title-center">{{ $t('index.zxjg') }}</view>
				<view class="title-right">{{ $t('index.zd') }}</view>
			</view>
			<view class="list-main flex" @click="navto('/pages/transaction/transactionDetail?type=' + index)"
				v-for="(item, index) in listOBj">
				<view class="main-left">{{ item.name }}</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,
		gcb,
		version
	} 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 {
				timer: '',
				clist: {},
				scoket: '',
				instId: 'IOTA-USDT', //请求的产品id
				spList: [], //需要查询的列表
				list: [],
				listInfo: [],
				listOBj: {
					'BTC-USDT': {},
					'ETH-USDT': {}
				} //保存实际列表对象
			};
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		onLoad: function(option) {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
			uni.setNavigationBarTitle({
				title: this.$t('index.sy')
			});
		},
		onShow: function() {
			this.geLevertade();
			this.tradelist();
			this.getgg();
			this.gcb()
			this.ww()
		},
		onHide() {
			this.closeScoket();
			clearTimeout(this.timer);
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			navto(url) {
				console.log(url);
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			gcb() {
				let that = this
				gcb().then(res => {
					console.log(res)
					let data = res.data
					that.listOBj[data.name] = data
					that.listOBj[data.name].dcf = (((data.last * 1 - data.sodUtc0 * 1) / (data.sodUtc0 * 1)) * 100)
						.toFixed(2);
					that.listOBj[data.name].name = data.name.replace('-', '/')
					console.log(that.listOBj, 'that.listOBj')
					if (that.timer) {
						clearTimeout(that.timer)
						that.timer = null
					}
					that.timer = setTimeout(() => {
						that.gcb()
					},5000)
				})
			},
			jqqd() {
				this.$api.msg(this.$t('zxt.jqqd'));
			},
			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) {
								// console.log(res.data, '123456');
								that.listOBj[res.arg.instId] = res.data[0];
								const item = that.listOBj[res.arg.instId];
								item.dcf = (((item.last * 1 - item.sodUtc0 * 1) / (item.sodUtc0 * 1)) *
									100).toFixed(2);
								item.name = item.instId.replace('-', '/');
								// 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');
				});
			},
			down() {
				version().then(res => {
					console.log(res)
					window.open(res.data.app)
				})
				
			},
			ww() {
				
			}
		}
	};
</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;
		min-height: 315rpx;
		padding-bottom: 20rpx;
		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;
					}
				}
			}
		}
	}

	.vheight {
		height: var(--status-bar-height);
	}
	.wwdown {
		// padding: 20rpx;
		image {
			width: 750rpx;
		}
		margin-bottom: 20rpx;
		font-size: 24rpx;
		text-align: right;
		color: #525c6e;
	}
</style>