1

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

@@ -0,0 +1,142 @@
+<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

@@ -0,0 +1,141 @@
+<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>
+		</view>
+		<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>
+	</view>
+</template>
+
+<script>
+	export default {
+		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;
+					}
+				}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;
+
+		.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;
+				}
+			}
+		}
+		// <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{
+			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,14 @@
 <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="1" 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 +23,20 @@
 
 <script>
 	export default {
+		props: {
+			width: {
+				type: Number,
+				default: 0
+			}
+		},
 		data() {
 			return {
-				stepRatio: 0,
-				 
-				movePlace:null,
+				stepRatio: 30,
+
 			};
 		},
-		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;
-					}
-				}else{
-					if(this.stepRatio < 100){
-						this.stepRatio += 1;
-					}
-				}
-				
-				
-				
-				this.movePlace = e.changedTouches[0].clientX;
-			}
+		methods: {
+
 		}
 	}
 </script>
@@ -67,55 +47,69 @@
 		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{
+				
+				 
+				.active-item{
 					border-color:  #05c175;
 				}
-				.now-node-item{
-						width: 22rpx;
-						height: 22rpx;
-						border: 6rpx solid #05c175;
+				.now-item{
+						 
 				}
 			}
 		}
-		// <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-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;
+				}
+			}
+		}
+
 		.step-node-nums{
 			width: 100%;
 			display: flex;

pages.json

@@ -1,197 +1,205 @@
 {
-	"easycom": {
-		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
-	},
-	"pages": [
-		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "币王"
-			}
-		},
-		{
-			"path": "pages/exchange/index",
-			"style": {
-				"navigationBarTitleText": "闪电兑换"
-			}
-		},
-		{
-			"path": "pages/property/index",
-			"style": {
-				"navigationBarTitleText": "资产"
-			}
-		},
-		{
-			"path": "pages/property/bill",
-			"style": {
-				"navigationBarTitleText": "用户账单"
-			}
-		},
-		{
-			"path": "pages/property/asset",
-			"style": {
-				"navigationBarTitleText": "资产记录"
-			}
-		},
-		{
-			"path": "pages/task/index",
-			"style": {
-				"navigationBarTitleText": "任务中心"
-			}
-		},
-		{
-			"path": "pages/contract/index",
-			"style": {
-				"navigationBarTitleText": "合约"
-			}
-		},
-		{
-			"path": "pages/contract/sustainability/index",
-			"style": {}
-		}
-	],
-	"subPackages": [{
-			"root": "pages/login",
-			"pages": [
-
-				{
-					"path": "/index",
-					"style": {
-						"navigationBarTitleText": "登录"
-					}
-				},
-				{
-					"path": "/register",
-					"style": {
-						"navigationBarTitleText": "注册"
-					}
-				},
-				{
-					"path": "/email-verify",
-					"style": {
-						"navigationBarTitleText": "邮箱验证"
-					}
-				},
-				{
-					"path": "/area-code",
-					"style": {
-						"navigationBarTitleText": "国家/地区"
-					}
-				}
-
-			]
-		},
-		{
-			"root": "pages/content",
-			"pages": [{
-					"path": "share",
-					"style": {
-						"navigationBarTitleText": "分享"
-					}
-				},
-				{
-					"path": "mine",
-					"style": {
-						"navigationBarTitleText": "个人中心"
-					}
-				},
-				{
-					"path": "select-currency",
-					"style": {
-						"navigationBarTitleText": "选择币种"
-					}
-				},
-				{
-					"path": "top-up",
-					"style": {
-						"navigationBarTitleText": "充币"
-					}
-				},
-				{
-					"path": "charge-record",
-					"style": {
-						"navigationBarTitleText": "充币记录"
-					}
-				},
-				{
-					"path": "setting",
-					"style": {
-						"navigationBarTitleText": "系统设置"
-					}
-				},
-				{
-					"path": "safety-set",
-					"style": {
-						"navigationBarTitleText": "安全设置"
-					}
-				},
-				{
-					"path": "change-password",
-					"style": {
-						"navigationBarTitleText": "修改密码"
-					}
-				},
-				{
-					"path": "customer-service",
-					"style": {
-						"navigationBarTitleText": "客服"
-					}
-				}
-			]
-		}
-	],
-	"tabBar": {
-		"color": "#666666",
-		"selectedColor": "#0ED47F",
-		// "borderStyle": "#E7E7E7",
-		// "backgroundColor": "#FFFFFF",
-		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "./static/tabbar/tabbar_1.png",
-				"selectedIconPath": "./static/tabbar/tabbar_1_1.png",
-				"text": "首页"
-			},
-			{
-				"pagePath": "pages/exchange/index",
-				"iconPath": "./static/tabbar/tabbar_2.png",
-				"selectedIconPath": "./static/tabbar/tabbar_2_2.png",
-				"text": "币币"
-			},
-			{
-				"pagePath": "pages/contract/index",
-				"iconPath": "./static/tabbar/tabbar_3.png",
-				"selectedIconPath": "./static/tabbar/tabbar_3_3.png",
-				"text": "合约"
-			},
-			{
-				"pagePath": "pages/task/index",
-				"iconPath": "./static/tabbar/tabbar_4.png",
-				"selectedIconPath": "./static/tabbar/tabbar_4_4.png",
-				"text": "任务"
-			},
-			{
-				"pagePath": "pages/property/index",
-				"iconPath": "./static/tabbar/tabbar_5.png",
-				"selectedIconPath": "./static/tabbar/tabbar_5_5.png",
-				"text": "资产"
-			}
-		]
-	},
-	"globalStyle": {
-		"navigationStyle": "custom",
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "币王",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {},
-	"condition": { //模式配置，仅开发期间生效
-		"current": 0, //当前激活的模式(list 的索引项)
-		"list": [{
-			"name": "", //模式名称
-			"path": "", //启动页面，必选
-			"query": "" //启动参数，在页面的onLoad函数里面得到
-		}]
-	}
-}
+    "easycom" : {
+        "^u-(.*)" : "uview-ui/components/u-$1/u-$1.vue"
+    },
+    "pages" : [
+        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path" : "pages/index/index",
+            "style" : {
+                "navigationBarTitleText" : "币王"
+            }
+        },
+        {
+            "path" : "pages/exchange/index",
+            "style" : {
+                "navigationBarTitleText" : "闪电兑换"
+            }
+        },
+        {
+            "path" : "pages/property/index",
+            "style" : {
+                "navigationBarTitleText" : "资产"
+            }
+        },
+        {
+            "path" : "pages/property/bill",
+            "style" : {
+                "navigationBarTitleText" : "用户账单"
+            }
+        },
+        {
+            "path" : "pages/property/asset",
+            "style" : {
+                "navigationBarTitleText" : "资产记录"
+            }
+        },
+        {
+            "path" : "pages/task/index",
+            "style" : {
+                "navigationBarTitleText" : "任务中心"
+            }
+        },
+        {
+            "path" : "pages/contract/index",
+            "style" : {
+                "navigationBarTitleText" : "合约"
+            }
+        },
+        {
+            "path" : "pages/contract/sustainability/index",
+            "style" : {}
+        },
+        {
+            "path" : "pages/contract/sustainability/lever",
+            "style" : {}
+        }
+    ],
+    "subPackages" : [
+        {
+            "root" : "pages/login",
+            "pages" : [
+                {
+                    "path" : "/index",
+                    "style" : {
+                        "navigationBarTitleText" : "登录"
+                    }
+                },
+                {
+                    "path" : "/register",
+                    "style" : {
+                        "navigationBarTitleText" : "注册"
+                    }
+                },
+                {
+                    "path" : "/email-verify",
+                    "style" : {
+                        "navigationBarTitleText" : "邮箱验证"
+                    }
+                },
+                {
+                    "path" : "/area-code",
+                    "style" : {
+                        "navigationBarTitleText" : "国家/地区"
+                    }
+                }
+            ]
+        },
+        {
+            "root" : "pages/content",
+            "pages" : [
+                {
+                    "path" : "share",
+                    "style" : {
+                        "navigationBarTitleText" : "分享"
+                    }
+                },
+                {
+                    "path" : "mine",
+                    "style" : {
+                        "navigationBarTitleText" : "个人中心"
+                    }
+                },
+                {
+                    "path" : "select-currency",
+                    "style" : {
+                        "navigationBarTitleText" : "选择币种"
+                    }
+                },
+                {
+                    "path" : "top-up",
+                    "style" : {
+                        "navigationBarTitleText" : "充币"
+                    }
+                },
+                {
+                    "path" : "charge-record",
+                    "style" : {
+                        "navigationBarTitleText" : "充币记录"
+                    }
+                },
+                {
+                    "path" : "setting",
+                    "style" : {
+                        "navigationBarTitleText" : "系统设置"
+                    }
+                },
+                {
+                    "path" : "safety-set",
+                    "style" : {
+                        "navigationBarTitleText" : "安全设置"
+                    }
+                },
+                {
+                    "path" : "change-password",
+                    "style" : {
+                        "navigationBarTitleText" : "修改密码"
+                    }
+                },
+                {
+                    "path" : "customer-service",
+                    "style" : {
+                        "navigationBarTitleText" : "客服"
+                    }
+                }
+            ]
+        }
+    ],
+    "tabBar" : {
+        "color" : "#666666",
+        "selectedColor" : "#0ED47F",
+        // "borderStyle": "#E7E7E7",
+        // "backgroundColor": "#FFFFFF",
+        "list" : [
+            {
+                "pagePath" : "pages/index/index",
+                "iconPath" : "./static/tabbar/tabbar_1.png",
+                "selectedIconPath" : "./static/tabbar/tabbar_1_1.png",
+                "text" : "首页"
+            },
+            {
+                "pagePath" : "pages/exchange/index",
+                "iconPath" : "./static/tabbar/tabbar_2.png",
+                "selectedIconPath" : "./static/tabbar/tabbar_2_2.png",
+                "text" : "币币"
+            },
+            {
+                "pagePath" : "pages/contract/index",
+                "iconPath" : "./static/tabbar/tabbar_3.png",
+                "selectedIconPath" : "./static/tabbar/tabbar_3_3.png",
+                "text" : "合约"
+            },
+            {
+                "pagePath" : "pages/task/index",
+                "iconPath" : "./static/tabbar/tabbar_4.png",
+                "selectedIconPath" : "./static/tabbar/tabbar_4_4.png",
+                "text" : "任务"
+            },
+            {
+                "pagePath" : "pages/property/index",
+                "iconPath" : "./static/tabbar/tabbar_5.png",
+                "selectedIconPath" : "./static/tabbar/tabbar_5_5.png",
+                "text" : "资产"
+            }
+        ]
+    },
+    "globalStyle" : {
+        "navigationStyle" : "custom",
+        "navigationBarTextStyle" : "black",
+        "navigationBarTitleText" : "币王",
+        "navigationBarBackgroundColor" : "#F8F8F8",
+        "backgroundColor" : "#F8F8F8"
+    },
+    "uniIdRouter" : {},
+    "condition" : {
+        //模式配置，仅开发期间生效
+        "current" : 0, //当前激活的模式(list 的索引项)
+        "list" : [
+            {
+                "name" : "", //模式名称
+                "path" : "", //启动页面，必选
+                "query" : "" //启动参数，在页面的onLoad函数里面得到
+            }
+        ]
+    }
+}

pages/contract/sustainability/index.vue

@@ -112,8 +112,8 @@
 								v-for="item in range">{{ item.value }}</text>
 						</view>
 					</view>
-					<view class="select-box">
-						<text class="select-text">全仓100x</text>
+					<view class="select-box" @click.stop="adjustLever()">
+						<text class="select-text">{{ leverName }}{{ leverNum }}</text>
 						<text class="iconfont">&#xe601;</text>
 					</view>
 					<!-- <uni-data-select :localdata="range" class="select-item" v-model="value"
@@ -133,7 +133,7 @@
 				</view>
 
 				<view class="step-content">
-					<step />
+					<step :width="365"/>
 				</view>
 
 				<view class="set-node">
@@ -175,16 +175,21 @@
 			</view>
 		</view>
 
-
+		<!-- 侧边抽屉 -->
 		<drawer ref="drawerRef" />
+		
+		<!-- 调整杠杆 -->
+		<lever ref="leverRef" :lever-num.sync="leverNum" :leverName.sync="leverName"/>
 	</view>
 </template>
 
 <script>
 	import drawer from "./../modules/drawer.vue"
+	import lever from "./lever.vue"
 	export default {
 		components: {
-			drawer
+			drawer,
+			lever
 		},
 		data() {
 			return {
@@ -203,6 +208,9 @@
 						text: '计划委托'
 					},
 				],
+				
+				leverName:'全仓',
+				leverNum:'100X',
 			};
 		},
 		methods: {
@@ -212,6 +220,11 @@
 			change(e) {
 				console.log("e:", e);
 			},
+			adjustLever(){
+				this.$nextTick(() => {
+					this.$refs.leverRef.open()
+				})
+			},
 		},
 	}
 </script>

pages/contract/sustainability/lever.vue

@@ -0,0 +1,336 @@
+<template>
+	<uni-popup ref="popupRef" type="bottom" @change="popupChange" :isMaskClick="false">
+
+		<view class="popup-box">
+			<view class="popup-title">
+				<text class="title-side"></text>
+				<text class="title-name">调整杠杆</text>
+				<text @click.stop="close()" class="title-side iconfont">&#xe621;</text>
+			</view>
+			<view class="popup-content">
+				<view class="content-tab">
+					<view @click.stop="pattern.name = '全仓'"
+						:class="['tab-item' , pattern.name == '全仓' ? 'active-tab-item' : '']">全仓</view>
+					<view @click.stop="pattern.name = '逐仓'"
+						:class="['tab-item' , pattern.name == '逐仓' ? 'active-tab-item' : '']">逐仓</view>
+				</view>
+				<view class="content-nums">
+					<text class="nums-alter iconfont" @click.stop="changeLeverNum('minus')">&#xeaf5;</text>
+					<view class="nums-box">
+						  
+						<input ref="numsInpRef" class="nums-inp" @input="patternNumChange" @focus="setCursorNum"
+							@blur="cursorNum = 0" :cursor="cursorNum"  v-model="pattern.num">
+
+					</view>
+					<text class="nums-alter iconfont" @click.stop="changeLeverNum('add')">&#xeaf3;</text>
+				</view>
+				<view class="content-nums-item">
+					<text v-for="item in LeverArr" :key="`lever_${item}`" @click.stop="changeLeverItem(item)"
+						:class="['nums-item', pattern.num == item ? 'active-nums-item' : '']">{{item}}</text>
+				</view>
+				<view class="content-hint" v-show="pattern.name == '全仓'">
+					<text class="hint-lable">全仓模式：</text>
+					全仓模式下所有仓位将共享合约账户的可用保证金，若发生强平，交易者可能损失所有仓位和可用保证金，请注意仓位风险！
+				</view>
+				<view class="content-hint" v-show="pattern.name == '逐仓'">
+					<text class="hint-lable">逐仓模式：</text>
+					逐仓模式下保证金被分配到单独的仓位上，如果该仓位保证金亏损到低于维持保证金的值，仓位将被强平。您可以通过为仓位添加和减少保证金来控制仓位风险。
+				</view>
+
+
+				<view class="footer-btns">
+					<view class="footer-btn" @click.stop="close()">取消</view>
+					<view class="footer-btn" @click.stop="confirm()">确定</view>
+				</view>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			leverNum: {
+				type: String,
+				default: '1X'
+			},
+			leverName: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				pattern: {
+					name: '全仓',
+					num: '',
+				},
+
+				LeverArr: ['5X', '10X', '20X', '50X', '100X'],
+
+				cursorNum: 0,
+			};
+		},
+		watch: {
+			leverNum: {
+				handler(newVal) {
+					this.pattern.num = newVal
+				},
+				immediate: true
+			},
+			leverName: {
+				handler(newVal) {
+					this.pattern.name = newVal
+				},
+				immediate: true
+			},
+			"pattern.num"(newVal, oldVal) {
+					if (newVal !== oldVal) {
+						let numStr = newVal.replace(/[^0-9]/ig, "");
+						if (numStr > 100) {
+							numStr = 100
+						} else if (numStr < 1) {
+							numStr = 1
+						}
+						setTimeout(() => {
+							this.$set(this.pattern , 'num' , `${numStr}X`);
+						}, 0)
+					}
+
+			}
+
+		},
+		mounted() {
+			// this.open();
+		},
+		methods: {
+			popupChange(e) {
+				try {
+					if (e && e.show) {
+						uni.hideTabBar()
+					} else {
+						setTimeout(() => {
+							uni.showTabBar()
+						}, 10)
+					}
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			// close(type) {
+			// 	this.showTrans = false
+			// 	this.$emit('change', {
+			// 		show: false,
+			// 		type: this.type
+			// 	})
+			open() {
+				this.pattern.num = this.leverNum;
+				this.pattern.name = this.leverName;
+				this.$nextTick(() => {
+					this.$refs.popupRef.open();
+				})
+			},
+			close() {
+				this.$refs.popupRef.close();
+			},
+
+			confirm() {
+				this.$emit('update:leverNum', this.pattern.num);
+				this.$emit('update:leverName', this.pattern.name);
+				this.close()
+			},
+			changeLeverItem(e) {
+				this.pattern.num = e;
+			},
+			setCursorNum() {
+				// this.$refs.numsInpRef
+				console.log('eee')
+				// this.leverNum.length - 1
+				setTimeout(() => {
+					this.cursorNum = 1
+				}, 1)
+
+			},
+			// 输入修改
+			patternNumChange() {
+
+				// this.$set()
+			},
+			// 
+			changeLeverNum(type) {
+				let nums = this.pattern.num
+				if (this.pattern.num.indexOf('X') >= 0) {
+					nums = nums.split('X')[0]
+				}
+				if (type === 'minus') {
+					// 减
+					if (nums > 1) {
+						nums = nums - 1
+					} else {
+						nums = 1
+					}
+				} else if (type === 'add') {
+					// 加
+					if (nums < 100) {
+						// - 0 是防止出现字符串
+						nums = nums - 0 + 1
+					} else {
+						nums = 100
+					}
+				};
+				this.pattern.num = `${nums}X`
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.popup-content {
+		padding: 0 $pages-padding;
+
+		// <view class="content-tab">
+		// 	<view class="tab-item">全仓</view>
+		// 	<view class="tab-item">逐仓</view>
+		// </view>
+		.content-tab {
+			padding: 20rpx 0;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.tab-item {
+				width: 48%;
+				height: 70rpx;
+				text-align: center;
+				border: 1rpx solid $border-color4;
+				line-height: 70rpx;
+				font-size: 26rpx;
+				border-radius: 10rpx;
+				// font-weight: bold;
+			}
+
+			.active-tab-item {
+				border-color: $Theme-Color;
+				color: $Theme-Color;
+			}
+		}
+
+		.content-nums {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: stretch;
+			padding: 40rpx 0 20rpx;
+
+			.nums-alter {
+				flex-shrink: 0;
+				width: 80rpx;
+				height: 80rpx;
+				text-align: center;
+				line-height: 80rpx;
+				border: 1px solid $border-color6;
+				font-size: 26rpx;
+				color: $Theme-Color;
+
+				&:last-child {
+					border-radius: 0 10rpx 10rpx 0;
+				}
+
+				&:first-child {
+					border-radius: 10rpx 0 0 10rpx;
+				}
+			}
+
+			.nums-box {
+				flex: 1;
+				border-top: 1px solid $border-color6;
+				border-bottom: 1px solid $border-color6;
+				position: relative;
+
+				.nums-inp {
+					width: 100%;
+					height: 100%;
+					text-align: center;
+					font-size: 28rpx;
+					font-weight: bold;
+				}
+
+				.nums-t {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 100%;
+					height: 100%;
+				}
+
+				// <input class="nums-inp" type="text" v-model="leverNum">
+				// <text class="nums-inp-tag">X</text>
+			}
+		}
+
+		.content-nums-item {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: stretch;
+
+			.nums-item {
+				width: calc((100% - 40rpx) / 5);
+				height: 54rpx;
+				border: 1rpx solid $border-color4;
+				border-radius: 6rpx;
+				text-align: center;
+				line-height: 52rpx;
+				font-size: 26rpx;
+			}
+
+			.active-nums-item {
+				background-color: $Theme-Color;
+				border-color: $Theme-Color;
+				color: #fff;
+			}
+		}
+
+		.content-hint {
+			width: 100%;
+			font-size: 24rpx;
+			color: #8d8a8a;
+			line-height: 1.8;
+			padding-top: 20rpx;
+
+			.hint-lable {
+				font-size: 24rpx;
+				color: $Theme-Color;
+				font-weight: bold;
+			}
+		}
+
+		.footer-btns {
+			padding: 80rpx 0 26rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: stretch;
+
+			.footer-btn {
+				width: 47.5%;
+				height: 70rpx;
+				text-align: center;
+				border: 1rpx solid $Theme-Color;
+				line-height: 68rpx;
+				font-size: 30rpx;
+				border-radius: 10rpx;
+				color: $Theme-Color;
+
+				&:last-child {
+					color: #fff;
+					background-color: $Theme-Color;
+				}
+			}
+		}
+
+		// <view class="footer-btns">
+		// 	<view class="footer-btn">取消</view>
+		// 	<view class="footer-btn">确定</view>
+		// </view>
+	}
+</style>

pages/demo.vue

@@ -11,6 +11,9 @@
 			return {
 				
 			};
+		},
+		mounted() {
+		 
 		}
 	}
 </script>

pages/index/index.vue

@@ -84,6 +84,7 @@
 			]),
 		},
 		onLoad() {
+			// console.log('process.env.NODE_ENV = ' , process.env.NODE_ENV)
 			this.getBanner();
 			this.getAnnouncement();
 			this.getQuotationNew()

static/css/index.scss

@@ -32,4 +32,31 @@
 	}
 }
  
- 
+ 
+.popup-box {
+		width: 100%;
+		background-color: #Fff;
+		border-radius: 50rpx 50rpx 0px 0px;
+
+		.popup-title {
+			width: 100%;
+			height: 113rpx;
+			border-radius: 50rpx 50rpx 0px 0px;
+			background-color: #F7F7F7 !important;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 40rpx;
+			font-weight: 700;
+
+			.title-side {
+				flex-shrink: 0;
+				font-size: 28rpx;
+				width: 40rpx;
+				height: 100%;
+				line-height: 113rpx;
+				color: #666;
+				font-weight: 400;
+			}
+		}
+ }

static/fontsize/iconfont.css

@@ -1,9 +1,8 @@
-
 @font-face {
   font-family: 'iconfont';  /* Project id 4023758 */
-  src: url('https://at.alicdn.com/t/c/font_4023758_n964mkrdhk.woff2?t=1682330143550') format('woff2'),
-       url('https://at.alicdn.com/t/c/font_4023758_n964mkrdhk.woff?t=1682330143550') format('woff'),
-       url('https://at.alicdn.com/t/c/font_4023758_n964mkrdhk.ttf?t=1682330143550') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4023758_mituiqa7l6.woff2?t=1682392643449') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4023758_mituiqa7l6.woff?t=1682392643449') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4023758_mituiqa7l6.ttf?t=1682392643449') format('truetype');
 }
 .iconfont {
 	font-family: "iconfont" !important;

uni.scss

@@ -18,6 +18,8 @@ $box-bg: #f1f1f1;
 $modules-box-bg:#ffffff;
 $Theme-Color: #05C175;
 $border-color: rgba(204, 204, 204, 0.2);
+$border-color6: rgba(204, 204, 204, 0.6);
+$border-color4: rgba(204, 204, 204, 0.4);
 $headFixedZIndex:50,
 
 /* 颜色变量 */

utils/config.js

@@ -1,8 +1,23 @@
- const config = {
- 	tokenKey: 'token', 
- 	baseUrl: '/Api',
- 	// baseUrl: 'https://doc.okenx.com',
+ const getBaseUrl = () => {
+	 let baseUrl = 'https://doc.okenx.com'
+ 
+ 	// #ifdef H5
+ 	baseUrl = '/Apis';
+ 	// #endif
+ 	// #ifdef APP-PLUS
+ 	baseUrl = 'https://doc.okenx.com';
+ 	// #endif
+	
+	return baseUrl
+ }
+ 
 
+ const config = {
+ 	tokenKey: 'token',
+	
+ 	devBaseUrl: getBaseUrl(), // 开发环境
+	
+ 	proBaseUrl: 'https://doc.okenx.com', // 生产环境
 
  	stocksColorObj: {
  		'green_rise': '绿涨红跌',

utils/request.js

@@ -2,13 +2,14 @@
 
 
 import config from './config.js'
+import store from '@/store'
 import {
 	getToken
 } from "./common.js"
 
 // 请求域名
-// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
-const baseUrl = config.baseUrl
+const baseUrl = process.env.NODE_ENV === 'development' ? config.devBaseUrl : config.proBaseUrl
+// const baseUrl = config.baseUrl
 
 let LoginFailure = false
 // 存储请求信息，当接口正在请求中，不会进行下一次接口请求
@@ -42,8 +43,7 @@ const errorHandle = (res) => {
 }
 
 export const request = async (opt = {}) => {
-	// 考虑与uniapp的接口进行兼容
-
+	// 考虑与uniapp的接口进行兼容 
 
 	let headers = {
 		"Content-Type": "application/x-www-form-urlencoded"
@@ -52,7 +52,7 @@ export const request = async (opt = {}) => {
 	if (token) {
 		headers['authorization'] = token;
 	}
-	console.log('headers = ', headers)
+	
 	const {
 		data,
 		success,
@@ -64,7 +64,7 @@ export const request = async (opt = {}) => {
 
 	// 处理请求地址
 	opt.url = baseUrl + opt.url
-	console.log('opt.url = ' , opt.url)
+
 	// 处理公共参数
 
 	opt.data = data
@@ -79,6 +79,9 @@ export const request = async (opt = {}) => {
 				delete pending[key]
 				if (data.type === 'ok') {
 					resolve(data.message)
+				}else if (data.type === '999') {
+					// 未登录
+					store.commit('app/SET_TOKEN' , '')
 				} else {
 					uni.showToast({
 						icon: 'none',
@@ -89,7 +92,7 @@ export const request = async (opt = {}) => {
 
 			},
 			fail: (e) => {
-				console.log('fail = ', e)
+				// console.log('fail = ', e)
 			}
 		}))
 		if (pending[key]) {

vue.config.js

@@ -1,15 +1,22 @@
-module.exports = {
-	devServer:{
-		port:'8080',
-		disableHostCheck:true,
-		proxy:{
-			'/Api':{
-				target: 'https://doc.okenx.com',
-				changeOrigin:true,
-				pathRewrite:{
-					'^/Api': ''
-				}
-			}
-		}
-	}
-}
+ module.exports = {
+ 	devServer: {
+ 		port: '8080',
+ 		disableHostCheck: true,
+ 		proxy: {
+ 			// 'https://doc.okenx.com': {
+ 			// 	target: 'https://doc.okenx.com',
+ 			// 	changeOrigin: true,
+ 			// 	pathRewrite: {
+ 			// 		["^" + 'https://doc.okenx.com']: ''
+ 			// 	}
+ 			// },
+ 			'/Apis': {
+ 				target: 'https://doc.okenx.com',
+ 				changeOrigin: true,
+ 				pathRewrite: {
+ 					"^/Apis": ''
+ 				}
+ 			}
+ 		}
+ 	}
+ }