samehome/pages/markets/index.vue

<template>
	<view class="main">
		<!-- nav -->
		<view class="nav-head">
			<view class="left">{{ i18n.TrandingPair }}</view>
			<view class="middle">{{ i18n.LatestPrice }}</view>
			<view class="right">{{ i18n.RiseAndfall }}</view>
		</view>
		<!-- 列表 -->
		<view class="coinList">
			<view class="coin" v-for="(item, index) in symbolList" :key="index" @click="goto(item)">
				<view class="icon">
					<u-icon :name="BASE_URL+item.coinSymbol+'.png'" size="40rpx" width="40rpx"></u-icon>
				</view>
				<view class="name">{{item.pair}}</view>
				<view class="price">{{ item.price}}</view>
				<view class="priceChange" :class="{ 'down': item.percent< 0 }">
					{{item.percent>=0?'+'+item.percent:item.percent}}%
				</view>
			</view>
		</view>
		<!-- tabBar -->
		<tab-bar :selectActive="2"></tab-bar>
	</view>
</template>

<script>
	export default {
		name: 'markets',
		data() {
			return {
				BASE_URL: '',
				symbolList: [],
				websock: null,
				websockId: null
			}
		},
		onLoad() {
			this.BASE_URL = this.$constant.BASE_URL + '/coins/';
			this.getSymbolGroup();
			this.initWebSocket()
		},
		onShow() {
			
		},
		onHide() {
			this.websock.closeSocket();
		},
		onUnload() {
			this.websock.closeSocket();
		},
		computed: {
			i18n() {
				return this.$t('markets')
			}
		},
		methods: {
			getSymbolGroup() {
				const symbolGroup = this.$api.symbolGroup({
					"model": "contract"
				});
				symbolGroup.then(res => {
						this.symbolList = res.USDT

					})
					.catch(e => {
						console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
				


			},
			subWebSocket() {
				const data = {
					event: 'sub',
					type: 'pairsgroup',
					id: this.websockId,
					channel: ["market.pairsgroup"]
				};
				
				this.websock.webSocketSendMsg(data)
				console.log("websocket发送", data);
			},
			unsubWebSocket() {
				const data = {
					event: 'un_sub',
					type: 'pairsgroup',
					id: this.websockId,
					channel: ["market.pairsgroup"]
				};
				this.websock.webSocketSendMsg(data)

			},
			initWebSocket() {

				
				this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL

				
				var that = this
				this.websock.getWebSocketMsg(data => {
					console.log(data, 1111)
					if (data.channel === 'conn') {
						that.websockId = data.data
						that.subWebSocket();
					} else if (data.channel === 'market.pairsgroup') {
						that.symbolList = data.data.USDT;
					}
				});
			},

			/**
			 * 跳转
			 */
			goto(data) {
				uni.setStorageSync('symbol', data);
				uni.navigateTo({
					url: '/pages/markets/trade',
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 198rpx; // 避免底部TabBar盖住内容

		.nav-head {
			overflow: hidden;
			position: fixed;
			top: 0rpx;
			height: 112rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 750rpx;
			z-index: 8;
			background-color: #15141F;
			border-bottom: 4rpx solid #323045;
			padding-top: 88rpx;

		}

		.coinList {
			margin: 212rpx 32rpx 0;
			overflow: hidden;

			.coin {
				overflow: hidden;
				position: relative;
				height: 64rpx;
				padding: 12rpx 0;


				.icon {
					vertical-align: top;
					overflow: hidden;
					display: inline-block;
					box-sizing: border-box;
					width: 64rpx;
					height: 64rpx;
					background: #211F32;
					border-radius: 20rpx;
					padding: 12rpx;
				}

				.name {
					display: inline-block;
					width: 180rpx;
					height: 100%;
					line-height: 64rpx;
					font-size: 28rpx;
					margin-left: 16rpx;
				}

				.price {
					display: inline-block;
					width: 180rpx;
					height: 100%;
					line-height: 64rpx;
					font-size: 28rpx;
					color: #A1A0A8;
				}

				.priceChange {
					position: absolute;
					right: 0;
					display: inline-block;
					width: 164rpx;
					height: 64rpx;
					border-radius: 20rpx;
					line-height: 64rpx;
					background-color: $mainColor;
					font-size: 24rpx;
					text-align: right;
					padding-right: 16rpx;
					box-sizing: border-box;


					&::before {
						display: block;
						position: absolute;
						content: '';
						background-image: url(../../static/maskets/ic_arrow_up.png);
						background-repeat: no-repeat;
						background-size: contain;
						width: 28rpx;
						height: 28rpx;
						top: 18rpx;
						left: 16rpx;
					}


					&.down {
						background-color: $assistRed;

						&::before {
							background-image: url(../../static/maskets/ic_arrow_down.png);
						}
					}
				}
			}
		}




	}
</style>