推送

components/positionList/positionList.vue

@@ -5,21 +5,21 @@
 			<view class="num">{{ i18n.Number }}</view>
 		</view>
 		<view class="sell">
-			<view class="item" v-for="(item, index) in sellList" :key="index" @click="depthClick(item)">
+			<view class="item" v-for="(item, index) in bboList.sell" :key="index" @click="depthClick(item)">
-				<text class="price">47823.00</text>
+				<text class="price">{{ item.price }}</text>
-				<text class="num">{{ item }}</text>
+				<text class="num">{{ item.total }}</text>
 				<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
 			</view>
 		</view>
 		<view class="currentPriceBody" @click="depthClick(item)">
-			<view class="currentPrice">34985.93</view>
+			<view class="currentPrice">{{marketDetail.close}}</view>
-			<view class="transition">≈$28767.23</view>
+			<view class="transition">≈${{marketDetail.close*marketDetail.usdRate}}</view>
 		</view>
 
 		<view class="buy">
-			<view class="item" v-for="(item, index) in buyList" :key="index" @click="depthClick(item)">
+			<view class="item" v-for="(item, index) in bboList.buy" :key="index" @click="depthClick(item)">
-				<text class="price">47823.00</text>
+				<text class="price">{{ item.price }}</text>
-				<text class="num">{{ item }}</text>
+				<text class="num">{{ item.total }}</text>
 				<view class="buybg" :style="`width: ${20 * index}%;`"></view>
 			</view>
 		</view>
@@ -30,14 +30,22 @@
 <script>
 export default {
 	props: {
-		item: Object
+		item: Object,
+		marketDetail: {
+			type: Object,
+			default: () => {}
+		},
+		bboList:{
+			type: Object,
+			default: () => {}
+		}
 	},
 	data() {
 		return {
 			popoverVisible: false,
 			depthValue: 1,
 			sellList: 9,
-			buyList: 6,
+			buyList: 10,
 		}
 	},
 	computed: {

package-lock.json

@@ -1,8 +1,222 @@
 {
   "name": "samehome",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "samehome",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "axios": "^0.27.2",
+        "echarts": "^5.3.3",
+        "js-md5": "^0.7.3",
+        "uview-ui": "^2.0.33",
+        "vue-i18n": "^9.2.2"
+      }
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmmirror.com/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/uview-ui": {
+      "version": "2.0.33",
+      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.33.tgz",
+      "integrity": "sha512-M3NsLFAY0z95NGMnTCDUR/TvJb6a/UYZzi1km5Gi6TkBCaoHdbmtQymkc1C4eszeoQOrpEIhit/2V47UglzHRw==",
+      "engines": {
+        "HBuilderX": "^3.1.0"
+      }
+    },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    }
+  },
   "dependencies": {
     "@intlify/core-base": {
       "version": "9.2.2",

pages/markets/trade.vue

@@ -10,7 +10,7 @@
 				<transaction></transaction>
 			</view>
 			<view class="positionSide">
-				<positionList v-on:depthChange="depthChange"></positionList>
+				<positionList v-on:depthChange="depthChange" :marketDetail="marketDetail" :bboList="bboList"></positionList>
 			</view>
 		</view>
 		<view class="orderList">
@@ -56,8 +56,9 @@
 				symbolList: [],
 				symbol: null,
 				marketDetail:null,
-				bboList:[],
+				bboList:{},
-				tradeList:[]
+				tradeList:{},
+				webSocketChannel:{}
 			};
 		},
 		computed: {
@@ -66,22 +67,24 @@
 			},
 		},
 		onLoad() {
+			this.getSymbolGroup();
+			this.initWebSocket();
 			this.symbol=uni.getStorageSync('symbol');
 			if(this.symbol!=null){
-				this.getMarketDetail(this.symbol.symbol)
+				this.getMarketDetail()
-				this.getBboList(this.symbol.symbol);
+				this.getBboList();
-				this.getTradeList(this.symbol.symbol);
+				this.getTradeList();
 			}
-			this.getSymbolGroup();
+			
-			this.initWebSocket();
+			
 		},
 		onShow() {
 			console.log(11111, uni.getStorageSync('symbol'));
 		},
 		methods: {
-			getTradeList(symbol){
+			getTradeList(){
 				const tradeList = this.$api.tradeList({
-					"symbol": symbol
+					"symbol": this.symbol.symbol
 				});
 				tradeList.then(res => {
 						this.tradeList = res
@@ -96,9 +99,9 @@
 						})
 					})
 			},
-			getBboList(symbol){
+			getBboList(){
 				const bboList = this.$api.bboList({
-					"symbol": symbol
+					"symbol": this.symbol.symbol
 				});
 				bboList.then(res => {
 						this.bboList = res
@@ -113,9 +116,9 @@
 						})
 					})
 			},
-			getMarketDetail(symbol){
+			getMarketDetail(){
 				const marketDetail = this.$api.marketDetail({
-					"symbol": symbol
+					"symbol": this.symbol.symbol
 				});
 				marketDetail.then(res => {
 						this.marketDetail = res
@@ -164,11 +167,22 @@
 					
 					if (data.channel === 'conn') {
 						that.websockId = data.data
-						that.subpairsgroup();
+						that.subpairsgroup()
+						that.subbbo()
+						that.subtrade()
+						that.submarketDetail()
 					} else if (data.channel === 'market.pairsgroup') {
 						that.symbolList = data.data.USDT;
-					}else if (data.channel === 'market.pairsgroup') {
+					}else if (data.channel === that.webSocketChannel.bbo) {
-						that.symbolList = data.data.USDT;
+						that.bboList = data.data;
+						
+					}else if (data.channel === that.webSocketChannel.bbo) {
+						that.bboList = data.data;
+						
+					}else if(data.channel === that.webSocketChannel.trade){
+						that.tradeList=data.data;
+					}else if(data.channel === that.webSocketChannel.detail){
+						that.marketDetail=data.data;
 					}
 				});
 			},
@@ -176,6 +190,35 @@
 			subpairsgroup(){
 				this.subWebSocket('pairsgroup',['market.pairsgroup'])
 			},
+			//取消订阅交易对
+			unsubpairsgroup(){
+				this.unsubWebSocket('pairsgroup',['market.pairsgroup'])
+			},
+			subbbo(){
+				this.webSocketChannel.bbo='market.'+this.symbol.symbol+".bbo";
+				this.subWebSocket('bbo',[this.webSocketChannel.bbo])
+			},
+			
+			unsubbbo(){
+				this.unsubWebSocket('bbo',[this.webSocketChannel.bbo])
+			},
+			subtrade(){
+				this.webSocketChannel.trade='market.'+this.symbol.symbol+".trade";
+				this.subWebSocket('trade',[this.webSocketChannel.trade])
+			},
+			
+			unsubtrade(){
+				this.unsubWebSocket('trade',[this.webSocketChannel.trade])
+			},
+			submarketDetail(){
+				this.webSocketChannel.detail='market.'+this.symbol.symbol+".detail";
+				this.subWebSocket('detail',[this.webSocketChannel.detail])
+			},
+			
+			unsubmarketDetail(){
+				this.unsubWebSocket('detail',[this.webSocketChannel.detail])
+			},
+			
 			subWebSocket(type,channel) {
 				const data = {
 					event: 'sub',
@@ -218,7 +261,18 @@
 			 */
 			switchTo(item) {
 				this.popupShow = false;
+				
+				this.unsubbbo()
+				this.unsubtrade()
+				this.unsubmarketDetail()
 				this.symbol=item;
+				uni.setStorageSync('symbol',this.symbol);
+				this.getMarketDetail()
+				this.getBboList();
+				this.getTradeList();
+				this.subbbo()
+				this.subtrade()
+				this.submarketDetail()
 			}
 
 		},