samehome/pages/markets/trade.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation :showBack="false">
			<view class="leftMenuBtn" @click="popupShow = true">{{symbol.pair}}</view>
			<view slot="right" class="right" @click="goto('kLine')"></view>
		</navigation>
		<view class="content">
			<view class="transactionSide">
				<transaction></transaction>
			</view>
			<view class="positionSide">
				<positionList v-on:depthChange="depthChange"></positionList>
			</view>
		</view>
		<view class="orderList">
			<entrustOrderList></entrustOrderList>
		</view>

		<u-popup class="popup" :show="popupShow" mode="left" @close="popupShow = false" @open="popupShow = true"
			bgColor="#15141F">
			<view class="popupContent">
				<!-- nav -->
				<view class="head">
					<text class="item">{{ i18n.TrandingPair }}</text>
					<text class="center">{{ i18n.LatestPrice }}</text>
					<text class="item">{{ i18n.RiseAndfall }}</text>
				</view>
				<!-- 列表 -->
				<view class="coinList">
					<scroll-view scroll-y="true" style="height: 86vh;" scroll-with-animation="true"
						@touchmove.stop.prevent="">
						<view class="coin" v-for="(item, index) in symbolList" :key="index" @click="switchTo(item)">
							<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>
					</scroll-view>

				</view>
			</view>
		</u-popup>
		<!-- tabBar -->
		<tab-bar :selectActive="2" :isTarde="true"></tab-bar>
	</view>
</template>

<script>
	export default {
		name: "trade",
		data() {
			return {
				popupShow: false,
				symbolList: [],
				symbol: null,
				marketDetail:null,
				bboList:[],
				tradeList:[]
			};
		},
		computed: {
			i18n() {
				return this.$t("markets");
			},
		},
		onLoad() {
			this.symbol=uni.getStorageSync('symbol');
			if(this.symbol!=null){
				this.getMarketDetail(this.symbol.symbol)
				this.getBboList(this.symbol.symbol);
				this.getTradeList(this.symbol.symbol);
			}
			this.getSymbolGroup();
			this.initWebSocket();
		},
		onShow() {
			console.log(11111, uni.getStorageSync('symbol'));
		},
		methods: {
			getTradeList(symbol){
				const tradeList = this.$api.tradeList({
					"symbol": symbol
				});
				tradeList.then(res => {
						this.tradeList = res
				
					})
					.catch(e => {
						console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},
			getBboList(symbol){
				const bboList = this.$api.bboList({
					"symbol": symbol
				});
				bboList.then(res => {
						this.bboList = res
				
					})
					.catch(e => {
						console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},
			getMarketDetail(symbol){
				const marketDetail = this.$api.marketDetail({
					"symbol": symbol
				});
				marketDetail.then(res => {
						this.marketDetail = res
				
					})
					.catch(e => {
						console.log(e)
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			},
			getSymbolGroup() {
				const symbolGroup = this.$api.symbolGroup({
					"model": "contract"
				});
				symbolGroup.then(res => {
						this.symbolList = res.USDT
						if(this.symbol==null){
							this.symbol=this.symbolList[0]
						}

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



			},
			initWebSocket() {
			
				
				this.websock = new this.$websocket(this.$constant.WSSURL) // xxx 表示接口地址URL
			
				
				var that = this
				this.websock.getWebSocketMsg(data => {
					
					if (data.channel === 'conn') {
						that.websockId = data.data
						that.subpairsgroup();
					} else if (data.channel === 'market.pairsgroup') {
						that.symbolList = data.data.USDT;
					}else if (data.channel === 'market.pairsgroup') {
						that.symbolList = data.data.USDT;
					}
				});
			},
			//订阅交易对
			subpairsgroup(){
				this.subWebSocket('pairsgroup',['market.pairsgroup'])
			},
			subWebSocket(type,channel) {
				const data = {
					event: 'sub',
					type: type,
					id: this.websockId,
					channel: channel
				};
				
				this.websock.webSocketSendMsg(data)
				console.log("websocket发送", data);
			},
			unsubWebSocket(type,channel) {
				const data = {
					event: 'un_sub',
					type: type,
					id: this.websockId,
					channel: channel
				};
				this.websock.webSocketSendMsg(data)
			
			},
			depthChange(e) {
				console.log(e);
			},
			goto(page) {
				let url = '';
				switch (page) {
					case 'kLine':
						url = '/pages/markets/kLine'
						break;
					default:
						break;
				}
				uni.navigateTo({
					url,
				});
			},
			/**
			 * 切换当前交易货币对
			 */
			switchTo(item) {
				this.popupShow = false;
				this.symbol=item;
			}

		},
	}
</script>

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

		.leftMenuBtn {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 32rpx;
			font-size: 24rpx;
			background-image: url(../../static/maskets/menu.png);
			background-repeat: no-repeat;
			background-size: 48rpx;
			padding-left: 54rpx;
			font-size: 34rpx;
			font-weight: normal;
		}

		.right {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 32rpx;
			font-size: 24rpx;
			background-image: url(../../static/home/ic_increase.png);
			background-repeat: no-repeat;
			background-size: 48rpx;
			color: #FFBC1F;
		}


		.content {
			margin-top: 200rpx;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			margin-bottom: 32rpx;
			background: #211F32;
			display: flex;

			.transactionSide {
				width: 444rpx;
				margin-left: 28rpx;
			}

			.positionSide {
				width: 242rpx;
				margin-left: 36rpx;
			}


		}

		.orderList {}

		.popup {
			.popupContent {
				width: 586rpx;
				font-size: 24rpx;

				.head {
					margin-top: 108rpx;
					color: #818197;
					margin-left: 16rpx;
					display: flex;

					.center {
						width: 190rpx;
						padding-left: 30rpx;
						font-size: 24rpx;
					}

					.item {
						font-size: 24rpx;
					}
				}

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

					.coin {
						overflow: hidden;
						position: relative;
						height: 64rpx;
						padding: 12rpx 0;
						font-size: 24rpx;

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

						.price {
							display: inline-block;
							width: 180rpx;
							height: 100%;
							line-height: 64rpx;
							font-size: 24rpx;
							// text-align: center;
						}

						.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>