1

components/cu-progress/cu-progress.css

@@ -1,4 +1,4 @@
-.cu-progress-main{
+.cu-progress-main {
 	position: relative;
 	display: flex;
 	flex-direction: row;
@@ -10,6 +10,7 @@
 	background-color: inherit;
 	overflow: hidden;
 }
+
 .cu-progress {
 	position: absolute;
 	display: flex;
@@ -22,10 +23,31 @@
 	background-color: inherit;
 	/* overflow: hidden; */
 }
-.cu-progress-bar{
+
+.cu-progress-bar {
 	position: absolute;
 	left: 0;
 }
+
+.cu-progress-node {
+	position: absolute;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.node-item {
+	width: 16rpx;
+	height: 16rpx;
+	background: #ffffff;
+	border: 4rpx solid #e6e6e6;
+	border-radius: 50%;
+}
+
+.active-node-item {
+	border-color: #05c175;
+}
+
 .cu-area {
 	position: absolute;
 	display: flex;
@@ -34,6 +56,7 @@
 	/* left: 0; */
 	z-index: 2;
 }
+
 .cu-handle {
 	position: absolute;
 	display: flex;
@@ -58,4 +81,4 @@
 	overflow: hidden;
 	white-space: nowrap;
 	pointer-events: none;
-}
+}

components/cu-progress/cu-progress.vue

@@ -1,8 +1,21 @@
 <template>
 	<view>
-		<view class="cu-progress-main" :style="{'border-radius':bgBR,'width': progressMainW,'height':progressMainH,'background-color': backgroundColor}">
+		<view class="cu-progress-main" :style="{'border-radius':bgBR,'width': progressMainW,'height': '22rpx','background-color': backgroundColor}">
 			<view class="cu-progress" :style="{'left':areaLeft, 'flex-direction':flexDirection,'width':areaW,height:areaH}">
 				<view class="cu-progress-bar" :style="{'bottom':pgBarBottom,'background':pgBarBg,'margin-left':pgBarML, 'margin-bottom':pgBarMB,'width': pgBarW,'height':pgBarH,'border-radius':pgBarBR,'background-color':noActiveColor}"></view>
+				<view class="cu-progress-node">
+					<text
+						:class="['node-item' , showValue >= 0 ? 'active-node-item' : '' , showValue == 0 ? 'now-item' : '' ]"></text>
+					<text
+						:class="['node-item' , showValue >= 25 ? 'active-node-item' : '' , showValue == 25 ? 'now-item' : '' ]"></text>
+					<text
+						:class="['node-item' , showValue >= 50 ? 'active-node-item' : '' , showValue == 50 ? 'now-item' : '' ]"></text>
+					<text
+						:class="['node-item' , showValue >= 75 ? 'active-node-item' : '' , showValue == 75 ? 'now-item' : '' ]"></text>
+					<text
+						:class="['node-item' , showValue >= 100 ? 'active-node-item' : '' , showValue == 100 ? 'now-item' : '' ]"></text>
+				</view>
+				
 				<movable-area class="cu-area" :style="{'flex-direction':flexDirection,'width':areaW,height:areaH}" @touchcancel="touchCancel" @touchstart="areaTouchStart"
 				 @touchmove="areaTouchMove" @touchend="touchEnd">
 					<movable-view class="cu-handle" disabled="disabled" :animation="false" :style="{ 'top':handleT, 'width':handleS,'height':handleS,'border-radius': handleBR,'background-color':handleColor}"
@@ -12,6 +25,7 @@
 				</movable-area>
 			</view>
 			<text v-if="getShowInfoStatus2view" class="cu-showInfo" :style="{'right':infoRt, 'left':infoLt, 'color':infoColor,'font-size':infoS,width:infoW}">{{showValue}}{{infoEndText}}</text>
+		
 		</view>
 	</view>
 </template>
@@ -465,6 +479,7 @@
 			},
 		},
 		methods: {
+
 			valueFormat (v){
 				// set step
 				v = Number(v - this.minValue).toFixed(7)

components/headContent/headContent.vue

@@ -1,21 +1,24 @@
 <template>
-	<view :class="['head' ]" >
+	<view :class="['head' ]">
 		<!-- 状态栏 -->
-		<view class="status-bar status-bar-fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
+		<view class="status-bar status-bar-fixed"
+			:style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
 		<view class="status-bar" :style="{'height':`${statusBarHeight}px`}"></view>
-		
-		
+
+
 		<template v-if="showHead">
-			<view :class="['head-content', borderBottom ? 'head-border' : '' , fixed ? 'content-fixed' : '']" :style="{'background-color': bgColor}">
-				<view class="status-bar"  v-if="fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
+			<view :class="['head-content', borderBottom ? 'head-border' : '' , fixed ? 'content-fixed' : '']"
+				:style="{'background-color': bgColor}">
+				<view class="status-bar" v-if="fixed"
+					:style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
 				<view class="content-box" :style="{'height':headHeight}">
-					<view class="left" v-if="showleftRight" >
+					<view class="left" v-if="showleftRight">
 						<slot name="left"></slot>
 					</view>
 					<view class="content">
 						<slot name="content"></slot>
 					</view>
-					<view class="right" v-if="showleftRight" >
+					<view class="right" v-if="showleftRight">
 						<slot name="right"></slot>
 					</view>
 				</view>
@@ -82,27 +85,31 @@
 			])
 		},
 		mounted() {
-			
+
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.status-bar{
+	.status-bar {
 		width: 100%;
-		
+
 	}
-	.status-bar-fixed{
+
+	.status-bar-fixed {
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: $headFixedZIndex;
 	}
-	.head-border{
+
+	.head-border {
 		border-bottom: 1rpx solid $border-color;
 	}
+
 	.head {
 		width: 750rpx;
+
 		.head-content {
 			width: 100%;
 
@@ -118,78 +125,82 @@
 
 				.left,
 				.right,
-				 {
-					 position: absolute;
-					 top: 50%;
-					transform: translateY(-50%); 
-					// height: 100%;
-					// display: flex;
-					// align-items: center;
-				}
-				.left{
-					left: $pages-padding;
-				}
-				.right{
-					right: $pages-padding;
-				}
-				
-				.content {
-					width: 100%;
-					height: 100%;
-					display: flex;
-					align-content: center;
-					justify-content: center;
-					// white-space: nowrap;
+				{
+				position: absolute;
+				top: 50%;
+				transform: translateY(-50%);
+				// height: 100%;
+				// display: flex;
+				// align-items: center;
+			}
+
+			.left {
+				left: $pages-padding;
+			}
+
+			.right {
+				right: $pages-padding;
+			}
+
+			.content {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-content: center;
+				justify-content: center;
+				// white-space: nowrap;
+			}
+
+			::v-deep .haed-title {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				white-space: nowrap;
+				font-size: 32rpx;
+				font-family: PingFang SC, PingFang SC-Bold;
+				font-weight: 700;
+				color: #1a1a1a;
+				letter-spacing: 0.72rpx;
+			}
+
+			::v-deep .head-icon {
+				width: 42rpx;
+				height: 40rpx;
+
+				.iconfont {
+					font-size: 40rpx;
+					color: #878A99;
 				}
 
-				::v-deep .haed-title {
+				image {
 					width: 100%;
 					height: 100%;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					white-space: nowrap; 
-					font-size: 32rpx;
-					font-family: PingFang SC, PingFang SC-Bold;
-					font-weight: 700;
-					color: #1a1a1a;
-					letter-spacing: 0.72rpx;
-				}
-
-				::v-deep .head-icon {
-					width: 42rpx;
-					height: 40rpx;
-					.iconfont{
-					font-size: 40rpx;
-						color: rgba(107, 104, 104, 0.9);
-					}
-					image {
-						width: 100%;
-						height: 100%;
-					}
 				}
+			}
 
-				.right {
-					display: flex;
-					align-items: center;
-					justify-content: flex-end;
+			.right {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
 
-					::v-deep .head-icon+.head-icon {
-						margin-left: 20rpx;
-					}
+				::v-deep .head-icon+.head-icon {
+					margin-left: 20rpx;
 				}
 			}
 		}
+	}
 
-		.placeholder-view {
-			width: 100%;
-		}
+	.placeholder-view {
+		width: 100%;
+	}
 
-		.content-fixed {
-			position: fixed;
-			left: 0;
-			top: 0;
-			z-index: $headFixedZIndex;
-		}
+	.content-fixed {
+		position: fixed;
+		left: 0;
+		top: 0;
+		z-index: $headFixedZIndex;
+	}
 	}
 </style>

components/market-depth/market-depth.vue

@@ -0,0 +1,97 @@
+<template>
+	<view :class="['nums-item' , `nums-item_${type}`]" :style="{'height':height}">
+		<text class="nums-item-bg" :style="{'width': val[2] + '%' }"></text>
+		<view class="item-num">
+			<text class="color">{{ val[0] }}</text>
+			<text>{{ val[1] }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "market-depth",
+		props: {
+			type: {
+				type: Number,
+				default: 0
+
+			},
+			val: {
+				type: Array,
+				default: () => {
+					return []
+				}
+
+			},
+			height: {
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nums-item {
+		width: 100%;
+		position: relative;
+		height: 40rpx;
+	}
+
+	.nums-item-bg {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 1;
+		height: 100%;
+	}
+
+	.item-num {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 2;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 22rpx;
+		font-family: PingFang SC, PingFang SC-Bold;
+		font-weight: 700;
+		line-height: 33rpx;
+		color: #1a1a1a;
+
+		text+text {
+
+			font-weight: 700;
+			line-height: 33rpx;
+		}
+	}
+
+	.nums-item_1 {
+		.nums-item-bg {
+			background-color: $mai_04;
+		}
+
+		.color {
+			color: $mai_02;
+		}
+	}
+
+	.nums-item_2 {
+		.nums-item-bg {
+			background-color: $mai_03;
+		}
+
+		.color {
+			color: $mai_01;
+		}
+	}
+</style>

components/step/step - 副本 (2).vue

@@ -1,142 +0,0 @@
-<template>
-	<view class="step-box">
-		<movable-area>
-			<movable-view direction="horizontal" @change="setRate"></movable-view>
-
-		</movable-area>
-	</view>
-</template>
-
-<script>
-	export default {
-		props:{
-			width:{
-				type:Number,
-				default:0
-			}
-		},
-		data() {
-			return {
-				stepRatio: 0,
-
-				movePlace: null,
-			};
-		},
-		methods: {
-			setRate(e){
-				console.log('setRate = ' , e.detail)
-			}
-			// touchStart(e) {
-			// 	this.movePlace = e.changedTouches[0].clientX
-
-			// },
-			// touchEnd(e) {
-
-			// 	// console.log('touchEnd = ' , e.changedTouches[0])
-
-
-			// },
-			// move(e) {
-			// 	const PlaceX = e.changedTouches[0].clientX
-			// 	console.log('move = ', PlaceX, this.movePlace)
-			// 	if (PlaceX < this.movePlace) {
-			// 		if (this.stepRatio > 0) {
-			// 			this.stepRatio -= 1;
-			// 		}
-			// 	} else {
-			// 		if (this.stepRatio < 100) {
-			// 			this.stepRatio += 1;
-			// 		}
-			// 	}
-
-
-
-			// 	this.movePlace = e.changedTouches[0].clientX;
-			// }
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.step-box {
-		width: 100%;
-		height: 54rpx;
-		border-radius: 2rpx;
-
-		movable-area {
-			width: 100%;
-			height: 100%;
-
-			movable-view {
-				width: 70%;
-				height: 6rpx;
-				background: #e6e6e6;
-			}
-		}
-
-		// .step-link {
-		// 	height: 6rpx;
-		// 	background: #e6e6e6;
-		// 	border-radius: 3rpx;
-		// 	position: relative;
-
-		// 	.step-bg {
-		// 		position: absolute;
-		// 		z-index: 1;
-		// 		left: 0;
-		// 		top: 0;
-		// 		background-color: #05C175;
-		// 		border-radius: 3rpx;
-
-		// 		height: 100%;
-		// 	}
-
-		// 	.step-node {
-		// 		position: absolute;
-		// 		z-index: 1;
-		// 		width: 100%;
-		// 		height: 100%;
-		// 		display: flex;
-		// 		justify-content: space-between;
-		// 		align-items: center;
-		// 		.node-item{
-		// 			width: 16rpx;
-		// 			height: 16rpx;
-		// 			background: #ffffff;
-		// 			border: 4rpx solid  #e6e6e6;
-		// 			border-radius: 50%;
-		// 		}
-		// 		.active-node-item{
-		// 			border-color:  #05c175;
-		// 		}
-		// 		.now-node-item{
-		// 				width: 22rpx;
-		// 				height: 22rpx;
-		// 				border: 6rpx solid #05c175;
-		// 		}
-		// 	}
-		// }
-
-		// .step-node-nums{
-		// 	width: 100%;
-		// 	display: flex;
-		// 	justify-content: space-between;
-		// 	padding-top: 10rpx;
-		// 	.num-ratio{
-		// 		flex: 1;
-		// 		font-size: 20rpx;
-		// 		font-family: PingFang SC, PingFang SC-Regular;
-		// 		font-weight: 400;
-		// 		text-align: center;
-		// 		color: #808080;
-		// 		line-height: 28rpx;
-		// 		&:first-child{
-		// 			text-align: left;
-		// 		}
-		// 		&:last-child{
-		// 			text-align: right;
-		// 		}
-		// 	}
-		// }
-	}
-</style>

components/step/step - 副本.vue

@@ -1,13 +1,20 @@
 <template>
-	<view class="step-box"  @touchstart="touchStart"  @touchmove='move'>
-		<view class="step-link">
-			<view class="step-bg" :style="{'width': `${stepRatio}%`}"></view>
-			<view class="step-node">
-				<view :class="['node-item' , stepRatio >= 0 ? 'active-node-item' : '' , stepRatio == 0 ? 'now-node-item' : '' ]"></view>
-				<view :class="['node-item' , stepRatio >= 25 ? 'active-node-item' : '' , stepRatio == 25 ? 'now-node-item' : '' ]"></view>
-				<view :class="['node-item' , stepRatio >= 50 ? 'active-node-item' : '' , stepRatio == 50 ? 'now-node-item' : '' ]"></view>
-				<view :class="['node-item' , stepRatio >= 75 ? 'active-node-item' : '' , stepRatio == 75 ? 'now-node-item' : '' ]"></view>
-				<view :class="['node-item' , stepRatio >= 100 ? 'active-node-item' : '' , stepRatio == 100 ? 'now-node-item' : '' ]"></view>
+	<view class="step-box">
+		<view class="slider-item-box">
+			<u-slider class="step-slider" v-model="stepRatio" activeColor="#05C175" min="0" max="100"
+				inactiveColor="#e6e6e6">
+			</u-slider>
+			<view class="slider-item">
+				<text
+					:class="['item' , stepRatio >= 0 ? 'active-item' : '' , stepRatio == 0 ? 'now-item' : '' ]"></text>
+				<text
+					:class="['item' , stepRatio >= 25 ? 'active-item' : '' , stepRatio == 25 ? 'now-item' : '' ]"></text>
+				<text
+					:class="['item' , stepRatio >= 50 ? 'active-item' : '' , stepRatio == 50 ? 'now-item' : '' ]"></text>
+				<text
+					:class="['item' , stepRatio >= 75 ? 'active-item' : '' , stepRatio == 75 ? 'now-item' : '' ]"></text>
+				<text
+					:class="['item' , stepRatio >= 100 ? 'active-item' : '' , stepRatio == 100 ? 'now-item' : '' ]"></text>
 			</view>
 		</view>
 		<view class="step-node-nums">
@@ -22,41 +29,44 @@
 
 <script>
 	export default {
+		props: {
+			width: {
+				type: Number,
+				default: 0
+			},
+			percent: {
+				type: Number,
+				default: 0
+			}
+		},
 		data() {
 			return {
 				stepRatio: 0,
-				 
-				movePlace:null,
+
 			};
 		},
-		methods:{
-			touchStart(e){
-				this.movePlace =  e.changedTouches[0].clientX
-		 
-			},
-			touchEnd(e){
-				
-				// console.log('touchEnd = ' , e.changedTouches[0])
-				
-				
-			},
-			move(e){
-				const PlaceX = e.changedTouches[0].clientX
-				console.log('move = ' , PlaceX , this.movePlace )
-				if(PlaceX < this.movePlace ){
-					if(this.stepRatio > 0){
-						this.stepRatio -= 1;
+		watch: {
+			percent: {
+				handler(newPercent , old) {
+					if(newPercent !== old){
+						this.stepRatio = newPercent || 0
 					}
-				}else{
-					if(this.stepRatio < 100){
-						this.stepRatio += 1;
+					
+				},
+				immediate: true
+			},
+			stepRatio: {
+				handler(stepRatio , old) {
+					if(stepRatio !== old){
+						this.$emit("update:percent", stepRatio)
 					}
-				}
-				
-				
-				
-				this.movePlace = e.changedTouches[0].clientX;
+					
+				},
+				immediate: true
 			}
+		},
+		methods: {
+
 		}
 	}
 </script>
@@ -67,61 +77,76 @@
 		height: 54rpx;
 		border-radius: 2rpx;
 
-		.step-link {
-			height: 6rpx;
-			background: #e6e6e6;
-			border-radius: 3rpx;
+		.slider-item-box {
+			width: 100%;
+			height: 22rpx;
+			display: flex;
+			align-items: center;
 			position: relative;
 
-			.step-bg {
+			.slider-item {
 				position: absolute;
-				z-index: 1;
 				left: 0;
 				top: 0;
-				background-color: #05C175;
-				border-radius: 3rpx;
-				
-				height: 100%;
-			}
-
-			.step-node {
-				position: absolute;
-				z-index: 1;
 				width: 100%;
 				height: 100%;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				.node-item{
+
+				.item {
 					width: 16rpx;
 					height: 16rpx;
 					background: #ffffff;
-					border: 4rpx solid  #e6e6e6;
+					border: 4rpx solid #e6e6e6;
 					border-radius: 50%;
 				}
-				.active-node-item{
-					border-color:  #05c175;
+
+
+				.active-item {
+					border-color: #05c175;
+				}
+
+				.now-item {}
+			}
+		}
+
+		.step-slider {
+			width: 100%;
+			position: relative;
+
+			.slider-item {
+				position: absolute;
+				width: 10px;
+				height: 10px;
+				background-color: red;
+
+
+			}
+
+			::v-deep uni-slider {
+				margin: 0;
+
+				.uni-slider-handle-wrapper {
+					height: 6rpx;
 				}
-				.now-node-item{
-						width: 22rpx;
-						height: 22rpx;
-						border: 6rpx solid #05c175;
+
+				.uni-slider-thumb {
+					margin-top: -11rpx !important;
+					width: 22rpx !important;
+					height: 22rpx !important;
+					border: 6rpx solid #05c175;
 				}
 			}
 		}
-		// <view class="step-node-nums">
-		// 	<view class="num-ratio">0%</view>
-		// 	<view class="num-ratio">25%</view>
-		// 	<view class="num-ratio">50%</view>
-		// 	<view class="num-ratio">75%</view>
-		// 	<view class="num-ratio">100%</view>
-		// </view>
-		.step-node-nums{
+
+		.step-node-nums {
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
 			padding-top: 10rpx;
-			.num-ratio{
+
+			.num-ratio {
 				flex: 1;
 				font-size: 20rpx;
 				font-family: PingFang SC, PingFang SC-Regular;
@@ -129,10 +154,12 @@
 				text-align: center;
 				color: #808080;
 				line-height: 28rpx;
-				&:first-child{
+
+				&:first-child {
 					text-align: left;
 				}
-				&:last-child{
+
+				&:last-child {
 					text-align: right;
 				}
 			}

components/step/step.vue

@@ -1,28 +1,14 @@
 <template>
 	<view class="step-box">
-		<view class="slider-item-box">
-			<u-slider class="step-slider" v-model="stepRatio" activeColor="#05C175" min="0" max="100"
-				inactiveColor="#e6e6e6">
-			</u-slider>
-			<view class="slider-item">
-				<text
-					:class="['item' , stepRatio >= 0 ? 'active-item' : '' , stepRatio == 0 ? 'now-item' : '' ]"></text>
-				<text
-					:class="['item' , stepRatio >= 25 ? 'active-item' : '' , stepRatio == 25 ? 'now-item' : '' ]"></text>
-				<text
-					:class="['item' , stepRatio >= 50 ? 'active-item' : '' , stepRatio == 50 ? 'now-item' : '' ]"></text>
-				<text
-					:class="['item' , stepRatio >= 75 ? 'active-item' : '' , stepRatio == 75 ? 'now-item' : '' ]"></text>
-				<text
-					:class="['item' , stepRatio >= 100 ? 'active-item' : '' , stepRatio == 100 ? 'now-item' : '' ]"></text>
-			</view>
-		</view>
+		<!-- :iconBorderRadius="" -->
+		<cu-progress ref="cuProgressRef" :value="percent" width="100%" @dragging="dragging" strokeWidth="4rpx" handleSize="18rpx" handleColor="#fff"
+			activeColor="#05C175" noActiveColor="#e6e6e6" progressMainH='22rpx'></cu-progress>
 		<view class="step-node-nums">
 			<view class="num-ratio">0%</view>
-			<view class="num-ratio">25%</view>
-			<view class="num-ratio">50%</view>
-			<view class="num-ratio">75%</view>
-			<view class="num-ratio">100%</view>
+			<view class="num-ratio"><text class="t">25%</text></view>
+			<view class="num-ratio"><text class="t">50%</text></view>
+			<view class="num-ratio"><text class="t">75%</text></view>
+			<view class="num-ratio"><text>100%</text></view>
 		</view>
 	</view>
 </template>
@@ -41,32 +27,28 @@
 		},
 		data() {
 			return {
-				stepRatio: 0,
+		
 
 			};
 		},
-		watch: {
-			percent: {
-				handler(newPercent , old) {
-					if(newPercent !== old){
-						this.stepRatio = newPercent || 0
-					}
-					
-				},
-				immediate: true
-			},
-			stepRatio: {
-				handler(stepRatio , old) {
-					if(stepRatio !== old){
-						this.$emit("update:percent", stepRatio)
-					}
-					
-				},
-				immediate: true
-			}
+		watch:{
+			// percent:{
+			// 	handler(newNum , oldNum){
+			// 		if(newNum === 0 && newNum !== oldNum){
+			// 			this.$nextTick(() => {
+			// 				this.$refs.cuProgressRef.initialNum()
+			// 			})
+			// 		}
+			// 	},
+			// 	immediate:true,
+			// }
 		},
 		methods: {
-
+			// 百分比滑动条
+			dragging(e) {
+				// const num = `${e.value}%`
+				this.$emit('update:percent', e.value)
+			},
 		}
 	}
 </script>
@@ -74,95 +56,60 @@
 <style lang="scss" scoped>
 	.step-box {
 		width: 100%;
-		height: 54rpx;
+		height: 50rpx;
 		border-radius: 2rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
 
-		.slider-item-box {
-			width: 100%;
-			height: 22rpx;
-			display: flex;
-			align-items: center;
-			position: relative;
-
-			.slider-item {
-				position: absolute;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.item {
-					width: 16rpx;
-					height: 16rpx;
-					background: #ffffff;
-					border: 4rpx solid #e6e6e6;
-					border-radius: 50%;
-				}
-
-
-				.active-item {
-					border-color: #05c175;
-				}
-
-				.now-item {}
-			}
-		}
-
-		.step-slider {
-			width: 100%;
-			position: relative;
-
-			.slider-item {
-				position: absolute;
-				width: 10px;
-				height: 10px;
-				background-color: red;
-
-
-			}
-
-			::v-deep uni-slider {
-				margin: 0;
-
-				.uni-slider-handle-wrapper {
-					height: 6rpx;
-				}
-
-				.uni-slider-thumb {
-					margin-top: -11rpx !important;
-					width: 22rpx !important;
-					height: 22rpx !important;
-					border: 6rpx solid #05c175;
-				}
-			}
+		::v-deep .cu-handle {
+			border: 6rpx solid #05C175;
+			background-color: #fff;
 		}
 
 		.step-node-nums {
 			width: 100%;
 			display: flex;
 			justify-content: space-between;
-			padding-top: 10rpx;
+
 
 			.num-ratio {
-				flex: 1;
+				width: 1rpx;
 				font-size: 20rpx;
 				font-family: PingFang SC, PingFang SC-Regular;
 				font-weight: 400;
 				text-align: center;
 				color: #808080;
 				line-height: 28rpx;
+				position: relative;
 
-				&:first-child {
-					text-align: left;
+				.t {
+					position: absolute;
+					left: 50%;
+					transform: translateX(-50%);
 				}
 
+				// &:first-child {
+				// 	text-align: left;
+				// }
+
 				&:last-child {
-					text-align: right;
+					text {
+						position: absolute;
+						right: 0;
+					}
+
 				}
 			}
 		}
+
+
+
+
+
+
+
+
+
 	}
 </style>

pages/contract/index.vue

@@ -16,7 +16,7 @@
 		<template v-if="contractIndex === 0">
 			<sustainability ref="sustainabilityRef" :currency-info="currencyVal" :leverTransaction="lever_transaction"
 				:pagesInfo="pagesInfo" :rate-profits-total="rate_profits_total" @refreshData="init"
-				@setContract="setContract" @setProfitLoss="setProfitLoss"/>
+				@setContract="setContract" @setProfitLoss="setProfitLoss" />
 		</template>
 		<!-- 永续合约 -->
 		<template v-if="contractIndex === 1">
@@ -34,7 +34,7 @@
 		<!-- 偏好设置 -->
 		<preference ref="preferenceRef" />
 		<!-- 设置盈亏 -->
-		<restrictPopup ref="restrictPopupRef" @setSuccess="setRestrictSuccess"/>
+		<restrictPopup ref="restrictPopupRef" @setSuccess="setRestrictSuccess" />
 	</view>
 </template>
 
@@ -96,7 +96,9 @@
 		watch: {
 			currencyVal: {
 				handler(newCurrency) {
-					this.init();
+					if (newCurrency && newCurrency?.legal_id) {
+						this.init();
+					}
 				},
 				deep: true,
 				immediate: true
@@ -107,8 +109,8 @@
 			this.contractIndex = [0, 1, 2].includes(nu) ? nu : this.contractIndex
 			this.$removeStorageSync('contractIndex')
 
-			// this.init()
-			this.setSocket();
+			this.init()
+			// this.setSocket();
 		},
 		onHide() {
 			this.close()
@@ -126,13 +128,6 @@
 			// });
 		},
 		methods: {
-			close() {
-				closeSocket()
-				this.$store.dispatch('websocket/getQuotationNew', {
-					suspend: true
-				})
-
-			},
 			init() {
 				if ([0, 1].includes(this.contractIndex)) {
 					// 永续 / 快捷 需要获取持仓信息
@@ -214,7 +209,7 @@
 				})
 			},
 			// 设置盈亏成功
-			setRestrictSuccess(){
+			setRestrictSuccess() {
 				this.getRegister();
 				this.getLeverDeal();
 			},

pages/contract/modules/drawer.vue

@@ -123,7 +123,7 @@ import { Api_getQuotationNew } from "@/api/index.js"
 		},
 		methods: {
 			setName(item){
-				console.log(1)
+				console.log(1 , item)
 				if(this.searchName && item){
 					if( item.currency_name.indexOf(this.searchName) >= 0 ){
 						return true

pages/contract/sustainability/index.scss

@@ -1,3 +1,4 @@
+
 .lable-title {
 		width: 100%;
 		height: 80rpx;

pages/contract/sustainability/index.vue

@@ -12,8 +12,10 @@
 			</view>
 			<view class="contract-item">
 				<text class="title-ratio">资金费率:{{ rateProfitsTotal.profits_total }}%</text>
-				<image class="ratio-icon" @click.stop="lookDetails" src="../../../static/images/icon_05.png" mode="aspectFit"></image>
-				<image class="ratio-icon"  @click.stop="setContract" src="../../../static/images/icon_06.png" mode="aspectFit"></image>
+				<image class="ratio-icon" @click.stop="lookDetails" src="../../../static/images/icon_05.png"
+					mode="aspectFit"></image>
+				<image class="ratio-icon" @click.stop="setContract" src="../../../static/images/icon_06.png"
+					mode="aspectFit"></image>
 			</view>
 		</view>
 
@@ -36,46 +38,69 @@
 				</view>
 				<text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
 			</view>
+			<view class="account-item">
+				<view class="account-title">
+					<text class="text">净值(USDT</text>
+				</view>
+				<text class="account-num">{{ contractAccount.usdt_totle }}</text>
+			</view>
+			<view class="account-item">
+				<view class="account-title">
+					<text class="text">风险率</text>
+				</view>
+				<text class="account-num">{{ contractAccount.totle }}</text>
+			</view>
+			<view class="account-item">
+				<view class="account-title">
+					<text class="text">账户余额(USDT)</text>
+				</view>
+				<text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
+			</view>
 		</view>
 
 		<view class="data-box">
 			<view class="data-left">
-				<view class="left-title flex">
-					<text>价格</text>
-					<text>数量</text>
-				</view>
-				<view class="subhead-title flex">
-					<text>(USDT)</text>
-					<text>(张)</text>
+				<view class="nums-title">
+					<view class="left-title flex">
+						<text>价格</text>
+						<text>数量</text>
+					</view>
+					<view class="subhead-title flex">
+						<text>(USDT)</text>
+						<text>(张)</text>
+					</view>
 				</view>
 
 				<view class="nums-list">
-					<view class="nums-item die" v-for="(item , indx) in bids" :key="`bids_${indx}`" v-if="indx < 7">
+					<template v-for="(item , indx) in bids" v-if="indx < marketNum">
+						<market-depth :type="1" :val="item"></market-depth>
+					</template>
+					<!-- <view class="nums-item die" v-for="(item , indx) in bids" :key="`bids_${indx}`" v-if="indx < 7">
 						<text class="nums-item-bg pankoubgcolor" :style="{'width': item[2] + '%' }"></text>
 						<view class="item-num">
 							<text class="color">{{ item[1] }}</text>
 							<text>{{ item[0] }}</text>
 						</view>
-					</view>
+					</view> -->
 				</view>
 
-				<view class="left-title index-num-title flex">
-					<text>{{ daymarket.now_price }}</text>
-					<text>{{ daymarket.change }}%</text>
-				</view>
-				<view class="subhead-title index-title flex">
-					<text>指数{{ daymarket.high }}</text>
-					<text>标记{{ daymarket.open }}</text>
+				<view class="index-num-box">
+					<view class=" index-num-title ">
+						<text>{{ daymarket.now_price }}</text>
+						<text>{{ daymarket.change }}%</text>
+					</view>
+					<view class=" index-title ">
+						<text>指数{{ daymarket.high }}</text>
+						<text>标记{{ daymarket.open }}</text>
+					</view>
 				</view>
 
 				<view class="nums-list" style="padding-top: 6.5rpx;">
-					<view class="nums-item zhang" v-for="(item , indx) in asks" :key="`asks_${indx}`" v-if="indx < 7">
-						<text class="nums-item-bg pankoubgcolor" :style="{'width': item[2] + '%' }"></text>
-						<view class="item-num">
-							<text class="color">{{ item[1] }}</text>
-							<text>{{ item[0] }}</text>
-						</view>
-					</view>
+					<!-- <template  v-for="(item , indx) in asks" v-if="indx < 7"> -->
+					<template v-for="(item , indx) in asks"  v-if="indx < marketNum">
+						<market-depth :type="2" :val="item"></market-depth>
+					</template>
+
 				</view>
 			</view>
 
@@ -111,8 +136,11 @@
 					</template>
 					<!-- target_price -->
 				</view>
+				<!-- 下单数量 -->
 				<view class="right-input">
-					<input class="input-item" v-model="share" type="number">
+					<input v-show="!percent" class="input-item" @focus="percent = 0" v-model="share" type="number">
+					<text @click.stop="percent = 0" v-show="percent"
+						class="input-item input-item-text">{{ percent }}%</text>
 					<view class="right-input-icon">
 						<text>张</text>
 						<text class="icon-link">|</text>
@@ -120,13 +148,43 @@
 					</view>
 				</view>
 				<view class="step-content">
-					<step :width="365" :percent.sync="percent" />
+					<step :percent.sync="percent" />
+					<!-- <cu-progress width="100%" @dragging="dragging"> </cu-progress> -->
 				</view>
 
 				<view class="set-node">
-					<view class="set-node-status"></view>
-					<text class="set-node-text">设置止盈止损</text>
+					<view class="set-node-box">
+						<view @click.stop="setNodePrice = !setNodePrice"
+							:class="['set-node-status' , setNodePrice ? 'active-set' : '']">
+							<text class="iconfont" v-show="setNodePrice">&#xe6c5;</text>
+						</view>
+						<text class="set-node-text">设置止盈止损</text>
+					</view>
+					<text v-show="setNodePrice" class="set-node-high">高级</text>
 				</view>
+				<template v-if="setNodePrice">
+					<view class="right-input">
+						<input placeholder-class="placeholder-class" :placeholder="`按${ restrictProfitStatus == 1 ? '价格' : '比例' }止盈`" class="input-item"
+							v-model="restrictProfitVal" type="number">
+						<text v-show="restrictProfitStatus === 2" class="input-item input-item-text">%</text>
+						<view class="right-input-icon">
+							<text>USDT</text>
+							<text class="icon-link">|</text>
+							<text class="switch-icon iconfont">&#xe672;</text>
+						</view>
+					</view>
+					<view class="right-input">
+						<input :placeholder="`按${ restrictLossStatus == 1 ? '价格' : '比例' }止损`" class="input-item"
+							v-model="restrictLossVal" type="number">
+						<text v-show="restrictLossStatus === 2" class="input-item input-item-text">%</text>
+						<view class="right-input-icon">
+							<text>USDT</text>
+							<text class="icon-link">|</text>
+							<text class="switch-icon iconfont">&#xe672;</text>
+						</view>
+					</view>
+
+				</template>
 
 				<view class="info-item">
 					<text class="info-item-lable">成本</text>
@@ -143,7 +201,8 @@
 				<view class="info-btns">
 					<view class="info-btn-info">
 						<text class="info-btn-lable">可做多</text>
-						<text class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
+						<text
+							class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
 						<!-- {{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit?.max : '--' }} -->
 					</view>
 					<view class="info-btn" @click.stop="setSubmitLever(2)">
@@ -153,7 +212,8 @@
 				<view class="info-btns err-btns">
 					<view class="info-btn-info">
 						<text class="info-btn-lable">可做空</text>
-						<text class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
+						<text
+							class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
 					</view>
 					<view class="info-btn" @click.stop="setSubmitLever(1)">
 						卖出/做空
@@ -169,7 +229,7 @@
 				<text @click.stop="freightSpaceIndex = 2"
 					:class="['lable-text-item' , freightSpaceIndex == 2 ? 'active-text-item' : '' ]">当前委托({{ entrustList.length }})</text>
 			</view>
-			<view class="iconfont" @click.stop="getHistory()">&#xe613;</view>
+			<view class="iconfont" style="color: #878592;" @click.stop="getHistory()">&#xe613;</view>
 		</view>
 
 		<swiper class="swiper-content" :current="freightSpaceIndex - 1"
@@ -177,7 +237,8 @@
 			<swiper-item class="swiper-item-box">
 				<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
 					<freightSpace ref="freightSpaceRef" :leverTransaction="leverTransaction"
-						@closeLeverSuccess="closeLeverSuccess" @setDepot="setDepot" :currency="currencyVal" v-bind="$attrs" v-on="$listeners"/>
+						@closeLeverSuccess="closeLeverSuccess" @setDepot="setDepot" :currency="currencyVal"
+						v-bind="$attrs" v-on="$listeners" />
 				</u-list>
 			</swiper-item>
 			<swiper-item>
@@ -267,8 +328,8 @@
 
 
 				freightSpaceIndex: 1,
-			 
-		 
+				marketNum:7,
+
 				entrustList: [],
 				scrollHeight: '',
 				percent: 0,
@@ -281,10 +342,28 @@
 				// 平仓 - 反向开仓
 				closeLeverContent: '',
 				title: '平仓',
-				restrict: ''
+				restrict: '',
+				setNodePrice: false,
+				// 止盈
+				restrictProfitVal: '',
+				restrictProfitStatus: 1, // 按价格止盈 ， 2 ： 比例止盈
+				// 止损
+				restrictLossVal: '',
+				restrictLossStatus: 1, // 按价格止损 ， 2 ： 比例止损
+
 			};
 		},
 		watch: {
+			
+			setNodePrice:{
+				handler(newStatus){
+					if(newStatus){
+						this.marketNum = 9
+					}else{
+						this.marketNum = 7
+					}
+				}
+			},
 			PageContentHeight: {
 				handler(newHeigth) {
 					this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
@@ -292,11 +371,11 @@
 				immediate: true
 			},
 			percent(newNums) {
-				const maxNums = this.pagesInfo?.lever_share_limit?.max
-				if (newNums >= 0 && maxNums) {
-					this.share = this.$decimalNum.mul(maxNums, newNums / 100);
-					console.log('this.share = ', this.share)
-				}
+				// const maxNums = this.pagesInfo?.lever_share_limit?.max
+				// if (newNums >= 0 && maxNums) {
+				// 	this.share = this.$decimalNum.mul(maxNums, newNums / 100);
+				// 	console.log('this.share = ', this.share)
+				// }
 				// 
 			},
 
@@ -317,9 +396,12 @@
 
 		},
 		methods: {
+
+
+
 			getData() {
 				this.closeLeverSuccess();
-				
+
 			},
 			setNum(type) {
 				if (this.status === 0) {
@@ -436,19 +518,19 @@
 					this.$refs.freightSpaceRef.confirm();
 				})
 			},
-			
-			lookDetails(){
-				if(this.currencyVal && this.currencyVal.currency_id && this.currencyVal.legal_id){
+
+			lookDetails() {
+				if (this.currencyVal && this.currencyVal.currency_id && this.currencyVal.legal_id) {
 					uni.navigateTo({
-						url:'/pages/contract/sustainability/details'
+						url: '/pages/contract/sustainability/details'
 					})
 				}
 			},
 			// 合约设置
-			setContract(){
+			setContract() {
 				this.$emit('setContract')
 			}
-			
+
 
 		},
 	}
@@ -466,6 +548,7 @@
 				display: flex;
 				align-items: center;
 				flex-shrink: 0;
+
 				.title-iocn {
 					width: 28rpx;
 					height: 24rpx;
@@ -586,68 +669,54 @@
 		.data-left {
 			width: 303rpx;
 
-			.flex {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-
-			.left-title {
-				font-size: 24rpx;
-				font-family: PingFang SC, PingFang SC-Bold;
-				font-weight: 700;
-				color: #807e89;
-				line-height: 33rpx;
-			}
-
-			.subhead-title {
-				font-size: 24rpx;
-				font-family: PingFang SC, PingFang SC-Bold;
-				font-weight: 700;
-				color: #807e89;
-				line-height: 33rpx;
-			}
-
-			.index-num-title {
+			.nums-title {
+				width: 100%;
+				height: 67rpx;
 
-				font-size: 36rpx;
-				font-family: PingFang SC, PingFang SC-Bold;
-				font-weight: 700;
-				color: #20b482;
-				line-height: 50rpx;
+				.flex {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					line-height: 33rpx;
 
-				text+text {
-					font-size: 28rpx;
+					font-size: 24rpx;
 					font-family: PingFang SC, PingFang SC-Bold;
 					font-weight: 700;
-					color: #20b482;
-					line-height: 40rpx;
+					color: #807e89;
 				}
 			}
 
-			.index-title {
-				font-size: 20rpx;
-				color: #808080;
-				line-height: 1.2;
-
-				text {
-					border-bottom: 2rpx dashed #707070;
-					display: flex;
-					align-items: center;
-				}
+			// .<view class="nums-title">
+			// 		<view class="left-title flex">
+			// 			<text>价格</text>
+			// 			<text>数量</text>
+			// 		</view>
+			// 		<view class="subhead-title flex">
+			// 			<text>(USDT)</text>
+			// 			<text>(张)</text>
+			// 		</view>
+			// 	</view>
+			// .left-title {
+			// 	font-size: 24rpx;
+			// 	font-family: PingFang SC, PingFang SC-Bold;
+			// 	font-weight: 700;
+			// 	color: #807e89;
+			// 	line-height: 33rpx;
+			// }
+
+			// .subhead-title {
+			// 	font-size: 24rpx;
+			// 	font-family: PingFang SC, PingFang SC-Bold;
+			// 	font-weight: 700;
+			// 	color: #807e89;
+			// 	line-height: 33rpx;
+			// }
 
-				padding-bottom: 18rpx;
-				border-bottom: 1px solid #f2f2f2;
-				// &:first-child{
-				// 	text-align: right;
-				// }
-			}
 
 			.nums-list {
 				width: 100%;
 				padding: 10rpx 0 4rpx;
-				border-bottom: 1rpx solid #f2f2f2;
-				min-height: 300rpx;
+				min-height: 318rpx;
 
 				.nums-item {
 					width: 100%;
@@ -716,7 +785,7 @@
 					align-items: center;
 					background-color: #f1f1f1;
 					padding: 0 3px;
-					border-radius: 4rpx;
+					border-radius: 8rpx;
 
 					.select-text {
 						font-size: 26rpx;
@@ -799,7 +868,7 @@
 				height: 76rpx;
 				background: #efefef;
 				border-radius: 10rpx;
-				margin-top: 20rpx;
+				margin-top: 30rpx;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
@@ -813,6 +882,14 @@
 				.input-item {
 					height: 100%;
 					font-size: 24rpx;
+					flex: 1;
+				}
+				.placeholder-class{
+					font-size: 24rpx;
+				}
+				.input-item-text {
+					display: flex;
+					align-items: center;
 				}
 
 				.input-item-p {
@@ -911,6 +988,20 @@
 				width: 100%;
 				display: flex;
 				align-items: center;
+				justify-content: space-between;
+
+				.set-node-box {
+					display: flex;
+					align-items: center;
+				}
+
+				.set-node-high {
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC-Regular;
+					font-weight: 400;
+					color: $Theme-Color;
+					line-height: 1.1;
+				}
 
 				.set-node-status {
 					width: 27rpx;
@@ -919,6 +1010,18 @@
 					border-radius: 2rpx;
 				}
 
+				.active-set {
+					background-color: $Theme-Color;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+
+					.iconfont {
+						font-size: 26rpx;
+						color: #fff;
+					}
+				}
+
 				.set-node-text {
 
 					font-size: 24rpx;
@@ -938,11 +1041,11 @@
 				justify-content: space-between;
 				align-items: center;
 				font-size: 26rpx;
-				padding: 16rpx 0;
+				padding: 32rpx 0 0;
 				line-height: 1.1;
 
 				.info-item-lable {
-					color: #ccc;
+					color: $SizeColor3;
 					border-bottom: 1rpx dashed #707070;
 				}
 
@@ -977,7 +1080,7 @@
 					padding-bottom: 10rpx;
 
 					.info-btn-lable {
-						color: #ccc;
+						color: $SizeColor3;
 					}
 
 					.info-btn-val {
@@ -1009,21 +1112,6 @@
 				}
 			}
 
-			// <view class="info-btns">
-			// 	<view class="info-btn-info">
-			// 		<text class="info-btn-lable">可做多</text>
-			// 		<text class="info-btn-val">33719张</text>
-			// 	</view>
-			// 	<view class="info-btn">
-			// 		买入/做多
-			// 	</view>
-			// </view>
-
-			// <view class="set-node">
-			// 	<view class="set-node-status"></view>
-			// 	<text class="set-node-text">设置止盈止损</text>
-			// </view>
-
 		}
 	}
 
@@ -1078,4 +1166,95 @@
 			}
 		}
 	}
+
+	// <view class="left-title index-num-title flex">
+	// 	<text>{{ daymarket.now_price }}</text>
+	// 	<text>{{ daymarket.change }}%</text>
+	// </view>
+	// <view class="subhead-title index-title flex">
+	// 	<text>指数{{ daymarket.high }}</text>
+	// 	<text>标记{{ daymarket.open }}</text>
+	// </view>
+	.index-num-box {
+		height: 115rpx;
+		width: 100%;
+		border: 1rpx solid $border-color;
+		border-left: none;
+		border-right: none;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		.index-num-title {
+			height: 50rpx;
+			line-height: 50rpx;
+			display: flex;
+			justify-content: space-between;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+			color: #20b482;
+
+			text {
+				&:first-child {
+					font-size: 36rpx;
+				}
+
+				&:last-child {
+
+					font-size: 28rpx;
+				}
+			}
+		}
+
+		.index-title {
+			height: 28rpx;
+			display: flex;
+			justify-content: space-between;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+
+			text {
+				font-size: 20rpx;
+				line-height: 28rpx;
+				color: #808080;
+				border-bottom: 1px solid #808080;
+			}
+		}
+
+		// .index-num-title {
+
+		// 	font-size: 36rpx;
+		// 	font-family: PingFang SC, PingFang SC-Bold;
+		// 	font-weight: 700;
+		// 	color: #20b482;
+		// 	line-height: 50rpx;
+
+		// 	text+text {
+		// 		font-size: 28rpx;
+		// 		font-family: PingFang SC, PingFang SC-Bold;
+		// 		font-weight: 700;
+		// 		color: #20b482;
+		// 		line-height: 40rpx;
+		// 	}
+		// }
+
+		// .index-title {
+		// 	font-size: 20rpx;
+		// 	color: #808080;
+		// 	line-height: 1.2;
+
+		// 	text {
+		// 		border-bottom: 2rpx dashed #707070;
+		// 		display: flex;
+		// 		align-items: center;
+		// 	}
+
+		// 	padding-bottom: 18rpx;
+		// 	border-bottom: 1px solid #f2f2f2;
+		// 	// &:first-child{
+		// 	// 	text-align: right;
+		// 	// }
+		// }
+
+	}
 </style>

pages/exchange/index.vue

@@ -8,7 +8,7 @@
 				</view>
 			</template>
 			<template #right>
-				<view @click.stop="lookRecord()" class="head-record iconfont">&#xe648;</view>
+				<view @click.stop="lookRecord()" style="color: #878592;" class="head-record iconfont">&#xe648;</view>
 			</template>
 		</headContent>
 		<view class="box">

pages/index/index.vue

@@ -62,6 +62,10 @@
 	import {
 		mapGetters
 	} from 'vuex'
+	
+	// import {
+	// 	gerCurrencyMarket
+	// } from "@/utils/currency-market.js"
 	export default {
 		components: {
 			loginStatus,
@@ -81,8 +85,18 @@
 				Announcement: [],
 
 				refreshStatus: false,
+	 
 			}
 		},
+		// watch:{
+		// 	aa:{
+		// 		handler(newAAA){
+		// 			console.log('newAAA' , newAAA)
+		// 		},
+		// 		immediate:true,
+		// 		deep:true
+		// 	}
+		// },
 		computed: {
 			...mapGetters([
 				'stocksColor'
@@ -90,7 +104,8 @@
 		},
 
 		onLoad() {
-
+			// this.aa = gerCurrencyMarket()
+			// currencyMarket()
 			this.getBanner();
 			this.getAnnouncement();
 		},
@@ -104,6 +119,7 @@
 			// this.getQuotationNew();
 		},
 		onHide() {
+			// this.$store.commit('websocket/set_currencySuspend' , false)
 			this.$store.commit('websocket/set_currencySuspend', false)
 
 		},

pages/login/index.vue

@@ -104,18 +104,35 @@
 					return false
 				};
 				this.limina = true
+				uni.showLoading({
+					title: '',
+					mask: true
+				});
 				Api_userLogin(this.formData).then(res => {
-					if (res) {
-						this.$store.dispatch("app/setToken", res)
-						// reverseBack()
-						uni.reLaunch({
-							url: '/pages/index/index'
-						});
-					}
+					setTimeout(() => {
+						if (res) {
+							uni.showToast({
+								title: '登录成功',
+								icon: "none"
+							})
+							this.$store.dispatch("app/setToken", res)
+							setTimeout(() => {
+								uni.reLaunch({
+									url: '/pages/index/index'
+								});
+							}, 500)
+						}
+					}, 300)
 				}).catch(err => {
 
 				}).finally(() => {
-					this.limina = false;
+					setTimeout(() => {
+						this.limina = false;
+						uni.hideLoading({
+							title: '',
+							mask: true
+						});
+					},200)
 				})
 			}
 		}

store/modules/websocket.js

@@ -127,15 +127,15 @@ const actions = {
 					state.marketAll = newArr
 				}
 			}).catch(err => {
-				console.log(11111 , state.currencySuspend , data?.noRefresh)
 				if (state.currencySuspend && data?.noRefresh) {
+				console.log(11111 , state.currencySuspend , data?.noRefresh)
 					rq()
 				}
 			}).finally(() => {
 				setTimeout(() => {
-					console.log(22222 , state.currencySuspend , data?.noRefresh)
 					// noRefresh ： 是否不刷新，true 不会继续调用
 					if (state.currencySuspend && !data?.noRefresh) {
+					console.log(22222 , state.currencySuspend , data?.noRefresh)
 						rq()
 					}
 				}, 3000)

utils/currency-market.js

@@ -0,0 +1,130 @@
+ import {
+ 	Api_getQuotationNew
+ } from "@/api/index.js"
+
+
+ export const gerCurrencyMarket = (callback) => {
+
+
+
+ 	const rq = (callback) => {
+ 		Api_getQuotationNew().then(res => {
+ 			// 		if (res && res.length > 0) {
+
+ 			// 			let newArr = res.find((item) => item.name == 'USDT').quotation || [];
+ 			// 			if (!state.currencyVal || !state.currencyVal?.currency_id) {
+ 			// 				state.currencyVal = newArr[0];
+ 			// 			}
+ 			// 			// 首页推荐
+ 			// 			if (newArr && newArr.length > 0) {
+ 			// 				const nums = newArr.length > 3 ? 3 : newArr.length;
+ 			// 				state.usdtList = newArr.slice(0, nums);
+ 			// 			} else {
+ 			// 				state.usdtList = []
+ 			// 			}
+ 			// 			// 自选
+ 			// 			state.optional = newArr.slice(0, 6)
+ 			// 			// 全部
+ 			// 			state.marketAll = newArr
+ 			// 		}
+ 			callback(new Date())
+ 		}).catch(err => {
+ 			// if (state.currencySuspend && data?.noRefresh) {
+ 			// console.log(11111 , state.currencySuspend , data?.noRefresh)
+ 			// 	rq()
+ 			// }
+ 		}).finally(() => {
+ 			setTimeout(() => {
+				rq()
+ 				// noRefresh ： 是否不刷新，true 不会继续调用
+ 				// if (state.currencySuspend && !data?.noRefresh) {
+ 				// console.log(22222 , state.currencySuspend , data?.noRefresh)
+ 				// 	rq()
+ 				// }
+ 			}, 3000)
+
+ 		})
+ 	}
+
+ 	rq(callback)
+
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+ // export default class currencyMarket {
+ // 	​
+ // 	constructor() {
+ // 		​
+ // 		this.socket = null;​
+ // 		this.typeName = null;​
+ // 		this.onopen = (() => {
+ // 			​
+ // 			console.log(`open ${this.typeName} websocket`);​​
+ // 		})​ this.onmessage = (e => {
+ // 			​ //处理各种推送消息
+ // 			​​})​ this.onerror = (e => {
+ // 			​
+ // 			console.warn(`${this.typeName}websocket服务已断开，正在重连`);​
+ // 			console.error("error " + e);​​
+ // 		})​ this.onclose = (() => {
+ // 			​
+ // 			console.warn("close websocket");​
+ // 			console.warn(`${this.typeName}websocket服务已断开，正在重连`);​​
+ // 		})​ this.initWs();​
+ // 	}
+
+ // 	​ initWs() {
+ // 		​
+ // 		console.warn(`初始化${this.typeName}websocket连接`);​
+ // 		this.socket = new WebSocket(this.url); // 创建连接并注册响应函数
+ // 		​
+ // 		this.socket.onopen = () => {
+ // 			​
+ // 			this.onopen();​
+ // 		};​
+ // 		this.socket.onclose = () => {
+ // 			​
+ // 			this.onclose();​
+ // 			this.socket = null; // 清理
+ // 			​
+ // 			stopWebsocket();​
+ // 		};​
+ // 		this.socket.onerror = (e) => {
+ // 			​
+ // 			this.onerror(e);​
+ // 			stopWebsocket();​
+ // 		}​
+ // 		this.socket.onmessage = (e) => {
+ // 			​
+ // 			this.onmessage(e);​
+ // 		};​
+ // 	}
+
+ // 	​ reConnect(that) {
+ // 		​
+ // 		if (that.isReconnect) return;​
+ // 		that.isReconnect = true;​ //没连接上会一直重连，设置延迟避免请求过多
+ // 		​
+ // 		setTimeout(() => {
+ // 			​
+ // 			that.initWs();​
+ // 			that.isReconnect = false;​
+ // 		}, 2000);​
+ // 	}
+ // }

utils/websocket.js

@@ -3,17 +3,20 @@ let socket_api = 'https://doc.okenx.com:2000'
 // import io from '@/js_sdk/hyoga-uni-socket_io/uni-socket.io.js';
 import io from '@hyoga/uni-socket.io';
 import store from '@/store'
+import {
+	decimalNum
+} from "./common.js"
+
 const socketObj = {}
 
 
 const nums = (arr = []) => {
 	const att = arr.map(el => {
-		return el[0]
+		return el[1]
 	})
-	const num = Math.max.apply(null, att)
-
-	arr.forEach(el => {
-		let n = Math.round(el[0] / num * 10000) / 100
+	const num = Math.max.apply(null, att) 
+	arr.forEach(el => { 
+		let n = (el[1] / num * 100).toFixed(2);
 		el[2] = n > 100 ? 100 : n;
 	})
 	return arr
@@ -61,8 +64,9 @@ export const startSocket = (data) => {
 
 export const closeSocket = () => {
 	for (let key in socketObj) {
-		console.log('key = ', key)
-		socketObj[key].disconnect()
-		socketObj[key] = null
-	}
+		if (key) {
+			socketObj[key].disconnect()
+			socketObj[key] = null
+		}
+	};
 }