From 5fb85d260530b3d84a3b6d33586c78bb7138464b Mon Sep 17 00:00:00 2001
From: vee <apple@MacBook-Pro.local>
Date: Sun, 28 Aug 2022 17:21:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?k=E7=BA=BF=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                 |   2 +-
 pages/markets/kLine.vue | 841 +++++++++++++++++++++-------------------
 2 files changed, 447 insertions(+), 396 deletions(-)

diff --git a/main.js b/main.js
index 87176b5..7286c68 100644
--- a/main.js
+++ b/main.js
@@ -16,7 +16,7 @@ Vue.prototype.$api = api
 // 自定义底部导航栏
 import tabBar from 'components/tabBar/tabBar.vue'
 Vue.component('tab-bar', tabBar)
-
+window.wx = {} 
 Vue.use(uView);
 uni.$u.config.unit = 'rpx'
 
diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
index 191396b..61ea66a 100644
--- a/pages/markets/kLine.vue
+++ b/pages/markets/kLine.vue
@@ -24,10 +24,22 @@
 					<view class="value">28394893.30943094</view>
 				</view>
 			</view>
+		</view>
+		<view class="tab">
+		    <view class="item" :class="{ select: type === 0 }" @click="onChangeType(0)">1M
+		    </view>
+		    <view class="item" :class="{ select: type === 1 }" @click="onChangeType(1)">30M
+		    </view>
+		    <view class="item" :class="{ select: type === 2 }" @click="onChangeType(2)">60M
+		    </view>
+		    <view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">1D
+			</view>
+			<view class="item" :class="{ select: type === 3 }" @click="onChangeType(3)">30D
+		    </view>
 		</view>
 		<!-- K线图 -->
 		<view class="kline" id="kline" :kdata="kdata" :change:kdata="klineE.receive"
-			style="height:1000rpx;color:aliceblue ">
+			style="height:500rpx;width: 100%;position: relative;  padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
 
 		</view>
 		<!-- 买卖挂牌表 -->
@@ -79,72 +91,88 @@
 </template>
 
 <script>
-import ktest from '@/utils/ktest.js'
-export default {
-	name: "trade",
-	components: { ktest },
-	data() {
-		return {
-			buyList: 7,
-			sellList: 9,
-			kdata: []
-
-		};
-	},
-	computed: {
-		i18n() {
-			return this.$t("markets");
-		},
-	},
-	onLoad() {
-		this.kdata = this.splitData(ktest.JSON);
-		// console.log(this.kdata, 1111)
-	},
-	onShow() { },
-	methods: {
-		into() {
-
+	import ktest from '@/utils/ktest.js'
+	export default {
+		name: "trade",
+		components: {
+			ktest
 		},
-		splitData(rawData) {
-			let categoryData = [];
-			let values = [];
-			let volumes = [];
-			for (let i = 0; i < rawData.length; i++) {
-				categoryData.push(rawData[i].splice(0, 1)[0]);
-				values.push(rawData[i]);
-				volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
-			}
+		data() {
 			return {
-				categoryData: categoryData,
-				values: values,
-				volumes: volumes
+				buyList: 7,
+				sellList: 9,
+				kdata: [],
+				type:1
+
 			};
 		},
-		depthChange(e) {
-			console.log(e);
+		computed: {
+			i18n() {
+				return this.$t("markets");
+			},
+		},
+		onLoad() {
+			this.kdata = this.splitData(ktest.JSON);
+			// console.log(this.kdata, 1111)
 		},
-		goto(page) {
-			let url = '';
-			switch (page) {
-				case 'kLine':
-					url = '/pages/markets/kLine'
-					break;
-				default:
-					break;
+		onShow() {},
+		methods: {
+			into() {
+
+			},
+			splitData(rawData) {
+				let categoryData = [];
+				let values = [];
+				let volumes = [];
+				for (let i = 0; i < rawData.length; i++) {
+					categoryData.push(rawData[i].splice(0, 1)[0]);
+					values.push(rawData[i]);
+					volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
+				}
+				return {
+					categoryData: categoryData,
+					values: values,
+					volumes: volumes
+				};
+			},
+			depthChange(e) {
+				console.log(e);
+			},
+			goto(page) {
+				let url = '';
+				switch (page) {
+					case 'kLine':
+						url = '/pages/markets/kLine'
+						break;
+					default:
+						break;
+				}
+				uni.navigateTo({
+					url,
+				});
+			},
+			openBtnClick(){
+				// let categoryData = [];
+				// 				let values = [];
+				// 				let volumes = [];
+				// this.kdata.values.pop();
+				// this.kdata.volumes.pop();
+				this.kdata.values.push([17827.33+Math.floor(Math.random()*100),
+				 17829.73+Math.floor(Math.random()*100), 
+				 17799.8+Math.floor(Math.random()*100), 
+				 17877.84+Math.floor(Math.random()*100)	, 85130000+Math.floor(Math.random()*100)])
+				this.kdata.volumes.push([3140,1688777777,1])
+				this.kdata.categoryData.push('2016-06-22')
 			}
-			uni.navigateTo({
-				url,
-			});
-		}
 
-	},
-}
+		},
+	}
 </script>
 <script module="klineE" lang="renderjs">
 	let kline
 	export default {
 		mounted() {
-			console.log('1111',this.kdata);
+			console.log('1111', this.kdata.categoryData);
 			if (typeof window.echarts === 'function') {
 				//this.initEcharts()
 			} else {
@@ -159,16 +187,18 @@ export default {
 		},
 
 		methods: {
-			receive(newValue, oldValue, ownerVm, vm) {
+			receive(newValue, oldValue, ownerVm, vm) {
+				
 				console.log('newValue', newValue)
 				const script = document.createElement('script');
 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
 				script.src = './static/echarts.js';
 				script.onload = this.upData.bind(this);
 				document.head.appendChild(script);
+
 				
 			},
-			
+
 			calculateMA(dayCount, data) {
 				var result = [];
 				for (var i = 0, len = data.values.length; i < len; i++) {
@@ -184,207 +214,212 @@ export default {
 				}
 				return result;
 			},
-			upData(myChart){
+			upData(myChart) {
 				const upColor = '#00C873';
 				const downColor = '#FF3750';
-				var chartDom = document.getElementById('kline');
-				var myChart = echarts.init(chartDom);
+				var chartDom = document.getElementById('kline');
+				if(!this.is){
+					this.myChart = echarts.init(chartDom);
+				}
+				
+				this.is=true;
 				var option;
-				myChart.setOption(
-				    (option = {
-				      animation: false,
-				      legend: {
-				        bottom: 10,
-				        left: 'center',
-				        data: []
-				      },
-				      tooltip: {
-				        trigger: 'axis',
-				        axisPointer: {
-				          type: 'cross'
-				        },
-				        borderWidth: 1,
-				        borderColor: '#ccc',
-				        padding: 10,
-				        textStyle: {
-				          color: '#ffffff'
-				        },
-				        position: function (pos, params, el, elRect, size) {
-				          const obj = {
-				            top: 10
-				          };
-				          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
-				          return obj;
-				        }
-				        // extraCssText: 'width: 170px'
-				      },
-				      axisPointer: {
-				        link: [
-				          {
-				            xAxisIndex: 'all'
-				          }
-				        ],
-				        label: {
-				          backgroundColor: '#fff'
-				        }
-				      },
-				      toolbox: {
-				        feature: {
-				          dataZoom: {
-				            yAxisIndex: false
-				          },
-				          brush: {
-				            type: ['lineX', 'clear']
-				          }
-				        }
-				      },
-				      brush: {
-				        xAxisIndex: 'all',
-				        brushLink: 'all',
-				        outOfBrush: {
-				          colorAlpha: 0.1
-				        }
-				      },
-				      visualMap: {
-				        show: false,
-				        seriesIndex: 5,
-				        dimension: 2,
-				        pieces: [
-				          {
-				            value: 1,
-				            color: downColor
-				          },
-				          {
-				            value: -1,
-				            color: upColor
-				          }
-				        ]
-				      },
-				      grid: [ 
-				        {
-				          left: '10%',
-				          right: '0%',
-				          height: '50%',
-						  backgroundColor:'transparent',
-				        },
-				        {
-				          left: '10%',
-				          right: '0%',
-				          top: '63%',
-				          height: '16%'
-				        }
-				      ],
-				      xAxis: [
-				        {
-				          type: 'category',
-				          data: this.kdata.categoryData,
-				          boundaryGap: false,
-				          axisLine: {show: false, onZero: false },
-						  axisTick: { show: false },
-				          splitLine: { show: false },
-				          min: 'dataMin',
-				          max: 'dataMax',
-				          axisPointer: {
-				            z: 100
-				          }
-				        },
-				        {
-				          type: 'category',
-				          gridIndex: 1,
-				          data: this.kdata.categoryData,
-				          boundaryGap: false,
-				          axisLine: { onZero: false },
-				          axisTick: { show: false },
-				          splitLine: { show: false },
-				          axisLabel: { show: false },
-				          min: 'dataMin',
-				          max: 'dataMax'
-				        }
-				      ],
-				      yAxis: [
-				        {
-				          scale: true,
-						  axisLine: { show: false },
-						  axisTick: { show: false },
-				          splitArea: {
-				            show: false,
-							// areaStyle: {
-                			// 	color: 'transparency',
-            				// },
-				          },
-						  splitLine: { show: true,
-						   	lineStyle: {
-        						// 使用深浅的间隔色
-        						color: ['#211F32']
-    						}
-						  }
-				        },
-				        {
-				          scale: true,
-				          gridIndex: 1,
-				          splitNumber: 2,
-				          axisLabel: { show: false },
-				          axisLine: { show: false },
-				          axisTick: { show: false },
-				          splitLine: { show: false }
-				        }
-				      ],
-				      dataZoom: [
-				        {
-				          type: 'inside',
-				          xAxisIndex: [0, 1],
-				          start: 98,
-				          end: 100
-				        },
-				        {
-				          show: true,
-				          xAxisIndex: [0, 1],
-				          type: 'slider',
-				          top: '85%',
-				          start: 98,
-				          end: 100
-				        }
-				      ],
-				      series: [
-				        {
-				          name: 'Dow-Jones index',
-				          type: 'candlestick',
-				          data: this.kdata.values,
-				          itemStyle: {
-				            color: upColor,
-				            color0: downColor,
-				            borderColor: undefined,
-				            borderColor0: undefined
-				          },
-				          tooltip: {
-				            formatter: function (param) {
-				              param = param[0];
-				              return [
-				                'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
-				                'Open: ' + param.data[0] + '<br/>',
-				                'Close: ' + param.data[1] + '<br/>',
-				                'Lowest: ' + param.data[2] + '<br/>',
-				                'Highest: ' + param.data[3] + '<br/>'
-				              ].join('');
-				            }
-				          }
-				        },
-						{
-                    		name: 'Volume',
-                    		type: 'bar',
-                    		xAxisIndex: 1,
-                    		yAxisIndex: 1,
-                    		data: this.kdata.volumes,
-							itemStyle: {
-				            	color: upColor,
-				            	borderColor: undefined,
-				          	},
-        				}
-				        
-				      ]
-				    }),
-				    true
-				  );
+				this.myChart.setOption(
+					(option = {
+
+						tooltip: {
+							trigger: 'axis',
+							axisPointer: {
+								animation: false,
+								type: 'cross',
+								lineStyle: {
+									width: 1,
+									opacity: 3
+								}
+							}
+						},
+						xAxis: [{
+								type: 'category',
+								data: this.kdata.categoryData,
+								boundaryGap: false,
+								axisLine: {
+									show: false,
+									onZero: false
+								},
+								
+								axisTick: {
+									show: false
+								},
+								splitLine: {
+									show: false
+								},
+								min: 'dataMin',
+								max: 'dataMax',
+								axisPointer: {
+									z: 100
+								}
+							},
+							{
+								type: 'category',
+								gridIndex: 1,
+								data: this.kdata.categoryData,
+								boundaryGap: false,
+								axisLine: {
+									onZero: false
+								},
+								axisTick: {
+									show: false
+								},
+								splitLine: {
+									show: false
+								},
+								axisLabel: {
+									show: false
+								},
+								min: 'dataMin',
+								max: 'dataMax'
+							}
+						],
+						yAxis: [{
+							    
+								scale: true,
+								
+								axisLine: {
+									
+									show: false
+								},
+								axisTick: {
+									show: true
+								},
+								splitArea: {
+									show: false, // areaStyle: {
+									// 	color: 'transparency',
+									// },
+								},
+								splitLine: {
+									show: true,
+									lineStyle: {
+										// 使用深浅的间隔色
+										color: ['#211F32']
+									}
+								}
+							},
+							{
+								scale: true,
+								gridIndex: 1,
+								splitNumber: 2,
+								axisLabel: {
+									show: false
+								},
+								axisLine: {
+									show: false
+								},
+								axisTick: {
+									show: false
+								},
+								splitLine: {
+									show: false
+								}
+							}
+						],
+
+
+						visualMap: {
+							show: false,
+							seriesIndex: 1,
+							dimension: 2,
+							pieces: [{
+									value: 1,
+									color: downColor
+								},
+								{
+									value: -1,
+									color: upColor
+								}
+							]
+						},
+						grid: [{
+							top: '8%',
+								left: '50rpx',
+								right: '10rpx',
+								height: '60%',
+								backgroundColor: 'transparent',
+							},
+							{
+								left: '0%',
+								right: '0%',
+								top: '80%',
+								height: '16%'
+							}
+						],
+
+						dataZoom: [{
+								type: 'inside',
+								start: 98,
+								end: 100
+							},
+							{
+								show: false,
+								xAxisIndex: [0, 1],
+								type: 'slider',
+								top: '85%',
+								start: 98,
+								end: 100
+							}
+						],
+						series: [{
+								name: 'Dow-Jones index',
+								type: 'candlestick',
+								data: this.kdata.values,
+								itemStyle: {
+									color: upColor,
+									color0: downColor,
+									borderColor: undefined,
+									borderColor0: undefined
+								},
+								markLine: {
+								        symbol: ['none', 'none'],
+								        data: [
+								          
+								          
+								          {
+								            name: 'max line on close',
+								            type: 'max',
+								            valueDim: 'close'
+								          }
+								        ]
+								      },
+								tooltip: {
+									formatter: function(param) {
+										param = param[0];
+										return [
+											'Date: ' + param.name +
+											'<hr size=1 style="margin: 3px 0">',
+											'Open: ' + param.data[0] + '<br/>',
+											'Close: ' + param.data[1] + '<br/>',
+											'Lowest: ' + param.data[2] + '<br/>',
+											'Highest: ' + param.data[3] + '<br/>'
+										].join('');
+									}
+								}
+							},
+							{
+								name: 'Volume',
+								type: 'bar',
+								xAxisIndex: 1,
+								yAxisIndex: 1,
+								data: this.kdata.volumes,
+								itemStyle: {
+									color: upColor,
+									borderColor: undefined,
+								},
+							}
+
+						]
+					}),
+					true
+				);
+				
 			}
 		},
 		watch: {
@@ -398,190 +433,206 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.main {
+	.main {
 
-	.header {
-		background: #000000;
-		margin-top: 200rpx;
-		padding: 0 32rpx;
+		.header {
+			background: #000000;
+			margin-top: 200rpx;
+			padding: 0 32rpx;
 
 
-		.top {
-			height: 80rpx;
-			border-bottom: 2rpx solid #A1A0A8;
+			.top {
+				height: 80rpx;
+				border-bottom: 2rpx solid #A1A0A8;
 
-			.price {
-				line-height: 80rpx;
-				font-size: 40rpx;
+				.price {
+					line-height: 80rpx;
+					font-size: 40rpx;
+				}
+
+				.percent {
+					vertical-align: text-top;
+					margin-left: 20rpx;
+					padding: 8rpx 20rpx;
+					border-radius: 8rpx;
+					font-size: 24rpx;
+					background-color: rgba($color: #F26666, $alpha: 0.2);
+					color: #F26666;
+
+					&.rise {
+						color: #00E8A2;
+						background-color: rgba($color: #00E8A2, $alpha: 0.2);
+					}
+				}
 			}
 
-			.percent {
-				vertical-align: text-top;
-				margin-left: 20rpx;
-				padding: 8rpx 20rpx;
-				border-radius: 8rpx;
+			.bottom {
+				display: flex;
 				font-size: 24rpx;
-				background-color: rgba($color: #F26666, $alpha: 0.2);
-				color: #F26666;
 
-				&.rise {
-					color: #00E8A2;
-					background-color: rgba($color: #00E8A2, $alpha: 0.2);
+				.title {
+					margin-top: 24rpx;
+					line-height: 32rpx;
 				}
-			}
-		}
 
-		.bottom {
-			display: flex;
-			font-size: 24rpx;
-
-			.title {
-				margin-top: 24rpx;
-				line-height: 32rpx;
-			}
+				.value {
+					margin: 24rpx 0;
+					color: #A1A0A8;
+				}
 
-			.value {
-				margin: 24rpx 0;
-				color: #A1A0A8;
-			}
+				.left {
+					flex: 1;
+					text-align: left;
+				}
 
-			.left {
-				flex: 1;
-				text-align: left;
-			}
+				.center {
+					flex: 1;
+					text-align: center;
+				}
 
-			.center {
-				flex: 1;
-				text-align: center;
-			}
+				.right {
+					flex: 1;
+					text-align: right;
+				}
 
-			.right {
-				flex: 1;
-				text-align: right;
 			}
-
 		}
-	}
+		.tab {
+		    display: flex;
+			background:#000000;
+		    .item {
+		        height: 64rpx;
+		        line-height: 64rpx;
+		        flex: 1;
+		        font-size: 24rpx;
+		        text-align: center;
+		
+		        &.select {
+		            background: rgba(0, 232, 162,0.3);
+					border-radius: 19px;
+		        }
+		    }
+		
+		
+		}
+		.kline {
+			
+			background: #000000;
+		}
 
-	.kline {
-		margin-top: 20rpx;
-		padding-left: 32rpx;
-		padding-right: 28rpx;
-		background: #000000;
-	}
+		.MarketTrades {
+			.headTitle {
+				padding-left: 32rpx;
+				font-size: 34rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+			}
 
-	.MarketTrades {
-		.headTitle {
-			padding-left: 32rpx;
-			font-size: 34rpx;
-			height: 80rpx;
-			line-height: 80rpx;
-		}
+			.table {
+				display: flex;
+				font-size: 24rpx;
 
-		.table {
-			display: flex;
-			font-size: 24rpx;
+				.box {
+					padding-left: 32rpx;
+					flex: 1;
+					overflow: hidden;
+					height: 450rpx;
 
-			.box {
-				flex: 1;
-				overflow: hidden;
-				height: 450rpx;
+					.title {
+						display: flex;
+						margin-bottom: 16rpx;
+						color: #A1A0A8;
 
-				.title {
-					display: flex;
-					margin-bottom: 16rpx;
-					color: #A1A0A8;
+						.quantity {
+							flex: 1;
+						}
 
-					.quantity {
-						flex: 1;
+						.price {
+							flex: 1;
+							text-align: center;
+						}
 					}
 
-					.price {
-						flex: 1;
-						text-align: center;
-					}
-				}
+					.list {
+						overflow: hidden;
 
-				.list {
-					overflow: hidden;
+						.item {
+							position: relative;
+							width: 100%;
+							height: 50rpx;
+							line-height: 50rpx;
+							display: flex;
 
-					.item {
-						position: relative;
-						width: 100%;
-						height: 50rpx;
-						line-height: 50rpx;
-						display: flex;
+							.price {
+								display: block;
+								width: 50%;
+								text-align: left;
+								z-index: 1;
 
-						.price {
-							display: block;
-							width: 50%;
-							text-align: left;
-							z-index: 1;
+							}
 
-						}
+							.num {
+								display: block;
+								width: 50%;
+								text-align: right;
+								padding-right: 32rpx;
+								z-index: 1;
 
-						.num {
-							display: block;
-							width: 50%;
-							text-align: right;
-							padding-right: 32rpx;
-							z-index: 1;
+								&.buy {
+									color: #00E8A2;
+								}
 
-							&.buy {
-								color: #00E8A2;
+								&.sell {
+									color: #F4506A;
+								}
 							}
 
-							&.sell {
-								color: #F4506A;
+							.buybg {
+								height: 100%;
+								position: absolute;
+								top: 0;
+								left: 0;
+								z-index: 0;
+								background: rgba($color: #00E8A2, $alpha: 0.1)
 							}
-						}
 
-						.buybg {
-							height: 100%;
-							position: absolute;
-							top: 0;
-							left: 0;
-							z-index: 0;
-							background: rgba($color: #00E8A2, $alpha: 0.1)
-						}
+							.sellbg {
+								height: 100%;
+								position: absolute;
+								top: 0;
+								right: 0;
+								z-index: 0;
+								background: rgba($color: #F4506A, $alpha: 0.1)
+							}
 
-						.sellbg {
-							height: 100%;
-							position: absolute;
-							top: 0;
-							right: 0;
-							z-index: 0;
-							background: rgba($color: #F4506A, $alpha: 0.1)
 						}
-
 					}
 				}
-			}
 
 
 
 
+			}
 		}
-	}
 
-	.btn {
-		display: flex;
-		margin: 96rpx 32rpx;
-
-		.button {
-			flex: 1;
-			box-sizing: border-box;
-			height: 96rpx;
-			border-radius: 16rpx;
-			font-weight: 700;
-			font-size: 28rpx;
-			color: #15141F !important;
-
-			&:nth-child(2) {
-				margin-left: 14rpx;
+		.btn {
+			display: flex;
+			margin: 96rpx 32rpx;
+
+			.button {
+				flex: 1;
+				box-sizing: border-box;
+				height: 96rpx;
+				border-radius: 16rpx;
+				font-weight: 700;
+				font-size: 28rpx;
+				color: #15141F !important;
+
+				&:nth-child(2) {
+					margin-left: 14rpx;
+				}
 			}
 		}
-	}
 
-}
-</style>
+	}
+</style>

From 685619c8a62cf0b9648915c991996ec37c3c5cc5 Mon Sep 17 00:00:00 2001
From: vee <897831508@qq.com>
Date: Mon, 29 Aug 2022 19:07:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=90=88=E7=BA=A6?=
 =?UTF-8?q?=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                 |  10 +-
 pages/markets/.DS_Store | Bin 0 -> 6148 bytes
 pages/markets/index.vue | 402 +++++++++++++++-----------
 pages/markets/kLine.vue |   3 +-
 pages/markets/trade.vue | 624 ++++++++++++++++++++++++----------------
 utils/axios.js          |  15 +-
 utils/websocket.js      | 184 ++++++++++++
 7 files changed, 816 insertions(+), 422 deletions(-)
 create mode 100644 pages/markets/.DS_Store
 create mode 100644 utils/websocket.js

diff --git a/main.js b/main.js
index 873820a..f5bd8d8 100644
--- a/main.js
+++ b/main.js
@@ -12,16 +12,22 @@ import ZH from './utils/language/zh_TW.js'
 import VI from './utils/language/vi_VN.js'
 
 import api from './utils/api.js'
+import constant from './utils/constant.js'
+import websocket from './utils/websocket.js'
 Vue.prototype.$api = api
+Vue.prototype.$constant = constant
+Vue.prototype.$websocket = websocket
 // 自定义底部导航栏
 import tabBar from 'components/tabBar/tabBar.vue'
 Vue.component('tab-bar', tabBar)
-window.wx = {} 
+ 
 Vue.use(uView);
 uni.$u.config.unit = 'rpx'
 
 Vue.use(VueI18n);
-
+// #ifdef  H5
+window.wx = {}
+// #endif
 const i18n = new VueI18n({
   locale: store.state.language,  // 默认选择的语言
   // locale: 'en_US', // 默认选择的语言
diff --git a/pages/markets/.DS_Store b/pages/markets/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/pages/markets/index.vue b/pages/markets/index.vue
index babbebd..1225c06 100644
--- a/pages/markets/index.vue
+++ b/pages/markets/index.vue
@@ -1,167 +1,237 @@
-<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 20" :key="index" @click="goto(item)">
-                <view class="icon">
-                    <u-icon name="../../static/maskets/bye.png" size="40rpx" width="40rpx"></u-icon>
-                </view>
-                <view class="name">BTC/USDT</view>
-                <view class="price">{{ 5145 * index * index * index }}</view>
-                <view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</view>
-            </view>
-        </view>
-        <!-- tabBar -->
-        <tab-bar :selectActive="2"></tab-bar>
-    </view>
-</template>
-
-<script>
-export default {
-    name: 'markets',
-    data() {
-        return {
-
-        }
-    },
-    onLoad() {
-
-    },
-    onShow() {
-
-    },
-    onHide() {
-    },
-    computed: {
-        i18n() {
-            return this.$t('markets')
-        }
-    },
-    methods: {
-        /**
-         * 跳转
-         */
-        goto(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);
-                    }
-                }
-            }
-        }
-    }
-
-
-
-
-}
+<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.unsubWebSocket();
+		},
+		onUnload() {
+			this.unsubWebSocket();
+		},
+		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>
diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
index 61ea66a..af6e4c2 100644
--- a/pages/markets/kLine.vue
+++ b/pages/markets/kLine.vue
@@ -342,7 +342,8 @@
 							top: '8%',
 								left: '50rpx',
 								right: '10rpx',
-								height: '60%',
+								height: '60%',
+								
 								backgroundColor: 'transparent',
 							},
 							{
diff --git a/pages/markets/trade.vue b/pages/markets/trade.vue
index 4a6ac4d..693919d 100644
--- a/pages/markets/trade.vue
+++ b/pages/markets/trade.vue
@@ -1,245 +1,381 @@
-<template>
-    <view class="main">
-        <!-- nav -->
-        <navigation :showBack="false">
-            <view class="leftMenuBtn" @click="popupShow = true">{{ 'BTC/USDT' }}</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 20" :key="index" @click="switchTo(item)">
-                            <view class="name">BTC/USDT</view>
-                            <view class="price">{{ 5145 * index * index * index }}</view>
-                            <view class="priceChange" :class="{ 'down': index % 2 === 0 }">500.30%</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,
-        };
-    },
-    computed: {
-        i18n() {
-            return this.$t("markets");
-        },
-    },
-    onLoad() {
-    },
-    onShow() { },
-    methods: {
-        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;
-        }
-
-    },
-}
-</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);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-
-
-    }
-
-
-
-
-}
+<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>
diff --git a/utils/axios.js b/utils/axios.js
index ebaa520..c557e0f 100644
--- a/utils/axios.js
+++ b/utils/axios.js
@@ -28,10 +28,11 @@ service.interceptors.request.use(
 				title: 'loading',
 				mask: true
 			})
-		}
+		}
+		
 		if (config.url.indexOf('market') > -1) {
 			// #ifdef H5
-			baseURL = constant.H5_MARKET_URL;
+			config.baseURL = constant.H5_MARKET_URL;
 			// #endif
 			// #ifdef APP-PLUS
 			config.baseURL = Vue.prototype.MARKET_URL;
@@ -138,19 +139,16 @@ service.interceptors.response.use(res => {
 	// console.log(res)
 	// console.log(res.data)
 	// console.log(res.data.data[0].nameAlias)
-	if (res.success || res.errCode === 'USER.0017') {
+	if (res.code===0||res.success) {
 		return res.data;
 	} 
-	if(res.errMsg=='No customer service is online'&&res.errCode=='SYS.0012'){
-		return res;
-	}
-	else {
+	
 		uni.showToast({
 			title: res.errMsg,
 			icon: 'none',
 			duration: 1500
 		})
-		if (res.errCode === 'USER.0010') {
+		if (res.errCode === 'SYS.0006') {
 			uni.setStorageSync('ticket',null);
 			uni.removeStorage({
 				key: 'logInfo',
@@ -178,7 +176,6 @@ service.interceptors.response.use(res => {
 		}
 		uni.$emit('refreshQrCode')
 		return Promise.reject(res.errMsg);
-	}
 }, error => {
 	uni.hideLoading();
 	return Promise.reject(error)
diff --git a/utils/websocket.js b/utils/websocket.js
new file mode 100644
index 0000000..9d55568
--- /dev/null
+++ b/utils/websocket.js
@@ -0,0 +1,184 @@
+class WebSocketClass {
+	constructor(url) {
+		this.lockReconnect = false; // 是否开始重连
+		this.wsUrl = ""; // ws 地址
+		this.globalCallback = null; // 回调方法
+		this.userClose = false; // 是否主动关闭
+		this.createWebSocket(url);
+	}
+
+	createWebSocket(url) {
+		// #ifdef H5
+		if (typeof(WebSocket) === 'undefined') {
+			this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
+			return false
+		}
+		// #endif
+
+		// #ifdef APP-PLUS
+		if (typeof(uni.connectSocket) === 'undefined') {
+			this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
+			return false
+		}
+		// #endif
+
+		this.wsUrl = url;
+		try {
+			// 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】
+
+			// #ifdef H5
+			this.ws = new WebSocket(this.wsUrl);
+			this.initEventHandle();
+			// #endif
+
+			// #ifdef APP-PLUS
+			let that = this
+			this.ws = uni.connectSocket({
+				url: this.wsUrl,
+				success(data) {
+					console.log("websocket连接成功");
+
+					that.initEventHandle();
+				},
+			});
+			// #endif
+		} catch (e) {
+			this.reconnect(url);
+		}
+	}
+
+	// 初始化
+	initEventHandle() {
+		/**
+		 * 监听WebSocket连接打开成功
+		 */
+
+		// #ifdef H5
+		this.ws.onopen = (event) => {
+			console.log("WebSocket连接打开");
+		};
+		// #endif
+
+		// #ifdef APP-PLUS
+		this.ws.onOpen(res => {
+			console.log('WebSocket连接打开');
+		});
+		// #endif
+
+
+		/**
+		 * 连接关闭后的回调函数
+		 */
+
+		// #ifdef H5
+		this.ws.onclose = (event) => {
+			if (!this.userClose) {
+				this.reconnect(this.wsUrl); //重连
+			}
+		};
+		// #endif
+
+		// #ifdef APP-PLUS
+		this.ws.onClose(() => {
+			if (!this.userClose) {
+				this.reconnect(this.wsUrl); //重连
+			}
+		});
+		// #endif
+
+
+		/**
+		 * 报错时的回调函数
+		 */
+
+		// #ifdef H5
+		this.ws.onerror = (event) => {
+			if (!this.userClose) {
+				this.reconnect(this.wsUrl); //重连
+			}
+		};
+		// #endif
+
+		// #ifdef APP-PLUS
+		this.ws.onError(() => {
+			if (!this.userClose) {
+				this.reconnect(this.wsUrl); //重连
+			}
+		});
+		// #endif
+
+
+		/**
+		 * 收到服务器数据后的回调函数
+		 */
+
+		// #ifdef H5
+		this.ws.onmessage = (event) => {
+			
+			this.globalCallback(JSON.parse(event.data))
+		};
+		// #endif
+
+		// #ifdef APP-PLUS
+		this.ws.onMessage(event => {
+			this.globalCallback(JSON.parse(event.data))
+		});
+		// #endif
+	}
+
+	// 关闭ws连接回调
+	reconnect(url) {
+		if (this.lockReconnect) return;
+		this.ws.close();
+		this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多
+		setTimeout(() => {
+			this.createWebSocket(url);
+			this.lockReconnect = false;
+		}, 1000);
+	}
+
+	// 发送信息方法
+	webSocketSendMsg(msg) {
+		// #ifdef H5
+		this.ws && this.ws.send(JSON.stringify(msg));
+		// #endif
+		
+		// #ifdef APP-PLUS
+		this.ws && this.ws.send({
+			data: JSON.stringify(msg),
+			success() {
+				console.log("消息发送成功");
+			},
+			fail(err) {
+				console.log("关闭失败", err)
+			}
+		});
+		// #endif
+		
+	}
+
+	// 获取ws返回的数据方法
+	getWebSocketMsg(callback) {
+		this.globalCallback = callback
+	}
+
+	// 关闭ws方法
+	closeSocket() {
+		if (this.ws) {
+			this.userClose = true;
+			this.ws.close({
+				success(res) {
+					console.log("关闭成功", res)
+				},
+				fail(err) {
+					console.log("关闭失败", err)
+				}
+			});
+		}
+	}
+
+	writeToScreen(massage) {
+		console.log(massage);
+	}
+}
+export default WebSocketClass;