步进器

pages/bluetoothUnlock/unlockSet.vue

@@ -1,187 +1,263 @@
 <template>
-    <view class="unlockSet-page">
-        <view class="lock-img"></view>
-        <view class="main">
-            <view class="primary-text">开启感应解锁后，携带手机靠近车辆并按Auto 键即可开机</view>
-            <view class="car-option-wrap">
-                <view class="img"></view>
-                <view class="opt-text-wrap">
-                    <view class="text">{{ $t('按键解锁') }}</view>
-                    <view class="sub-text">手机接近车辆后，长按Auto键即可解锁</view>
-                </view>
-            </view>
-            <view class="sensitivity-set" @tap="openSensitivityDialog">
-                <view class="txt">{{ $t('灵敏度设置') }}</view>
-            </view>
-        </view>
-        <view class="switch-btn">{{ $t('关闭感应解锁') }}</view>
-
-        <u-popup v-model="showSensitivityDialog" mode="bottom" border-radius="28" @close="close">
-            <view class="popup-content">
-                <view class="title">灵敏度设置</view>
-                <view class="text">距离建议适中，设置过近会降低成功率，设置过远可能会有风险</view>
+	<view class="unlockSet-page">
+		<view class="lock-img"></view>
+		<view class="main">
+			<view class="primary-text">开启感应解锁后，携带手机靠近车辆并按Auto 键即可开机</view>
+			<view class="car-option-wrap">
+				<view class="img"></view>
+				<view class="opt-text-wrap">
+					<view class="text">{{ $t('按键解锁') }}</view>
+					<view class="sub-text">手机接近车辆后，长按Auto键即可解锁</view>
+				</view>
+			</view>
+			<view class="sensitivity-set" @tap="openSensitivityDialog">
+				<view class="txt">{{ $t('灵敏度设置') }}</view>
+			</view>
+		</view>
+		<view class="switch-btn">{{ $t('关闭感应解锁') }}</view>
+
+		<u-popup v-model="showSensitivityDialog" mode="bottom" border-radius="28" @close="close">
+			<view class="popup-content">
+				<view class="title">灵敏度设置</view>
+				<view class="text">距离建议适中，设置过近会降低成功率，设置过远可能会有风险</view>
 				<!-- <slider v-model="sensitivityValue" @change="changeValue"   height="16" :step="1" :min="0" :max="4" activeColor="#060809" backgroundColor="#F1F3F4" block-color="#060809" block-size="20"></slider> -->
-				<u-slider v-model="sensitivityValue"  height="16"  :step="1" :min="0" :max="4" @end="changeValue" activeColor="#060809" backgroundColor="#F1F3F4" block-color="#060809"></u-slider>
+				<!-- <u-slider v-model="sensitivityValue"  height="16"  :step="1"  activeColor="#060809" backgroundColor="#F1F3F4" block-color="#060809"></u-slider> -->
+
+				<view  @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" class="slider">
+					<view class="tag"></view>
+					<view class="len"></view>
+				</view>
 				<view class="flex-row step-text">
 					<text>最近</text>
 					<text>适中</text>
 					<text>最远</text>
 				</view>
 				<!-- <slider v-model="sensitivityValue" @change="changeValue"   height="16rpx" :step="1" :min="0" :max="4" activeColor="#060809" backgroundColor="#F1F3F4" block-color="#8A6DE9" block-size="20"></slider> -->
-                <!-- <u-slider v-model="sensitivityValue" height="16rpx" inactive-color="#F1F3F4" active-color="#060809" :step="1" :min="0" :max="4"></u-slider> -->
-            </view>
-        </u-popup>
-    </view>
+				<!-- <u-slider v-model="sensitivityValue" height="16rpx" inactive-color="#F1F3F4" active-color="#060809" :step="1" :min="0" :max="4"></u-slider> -->
+			</view>
+		</u-popup>
+	</view>
 </template>
 
 <script>
 	var bluetooth = require('@/common/bluetooth.js');
 	var app = getApp();
-export default {
-    data () {
-        return {
-            showSensitivityDialog: true,
-            sensitivityValue: 50
-        }
-    },
-	onLoad(){
-			this.sensitivityValue=app.globalData.nearLockInfo.level-0
-	},
-    methods: {
-        close () {
-            this.showSensitivityDialog = false
-        },
-		openSensitivityDialog(){
-			this.showSensitivityDialog = true
-			
+	export default {
+		data() {
+			return {
+				stepIndex:1,
+				start:0,
+				end:0,
+				showSensitivityDialog: true,
+				sensitivityValue: 1
+			}
+		},
+		onLoad() {
+			this.sensitivityValue = app.globalData.nearLockInfo.level - 0
 		},
-		changeValue(value){
-			console.log(value,this.sensitivityValue);
-			//value 0 1 2 3 4
-			const car_sn = uni.getStorageSync('car_info').car_sn
-			common.loading();
-			bluetooth.setSensitivity(car_sn,value,()=>{
-				console.log('设置灵敏度指令成功');
-			})
-			
+		methods: {
+			onTouchStart(e) {
+				
+				let pageX = e.changedTouches[0].pageX
+				this.start = pageX
+			},
+			onTouchMove(e) {
+				
+				let pageX = e.changedTouches[0].pageX
+				this.Move = pageX
+			},
+			onTouchEnd(e) {
+				let pageX = e.changedTouches[0].pageX
+				this.end = pageX
+				if(this.start > this.Move ){
+					if((this.start - this.Move) > 20){
+						console.log('左')
+						this.stepIndex --
+					}
+				}else if(this.start < this.Move){
+					if((this.start - this.Move) < 20){
+						console.log('右')
+						this.stepIndex ++
+					}
+				}
+			},
+			close() {
+				this.showSensitivityDialog = false
+			},
+			openSensitivityDialog() {
+				this.showSensitivityDialog = true
+
+			},
+			changeValue(value) {
+				console.log(value, this.sensitivityValue);
+				//value 0 1 2 3 4
+				const car_sn = uni.getStorageSync('car_info').car_sn
+				// common.loading();
+				bluetooth.setSensitivity(car_sn, value, () => {
+					console.log('设置灵敏度指令成功');
+				})
+
+			}
 		}
-    }
-}
+	}
 </script>
 
 
 <style lang="scss" scoped>
-.unlockSet-page {
-    background: #fff;
-    min-height: 100vh;
-    .lock-img {
-        width: 100%;
-        height: 400rpx;
-        background: url('https://qiniu.bms16.com/Fi7jWl2Uf5zBsZHd77SK0RSGXiWr');
-        background-size: 100%;
-    }
-    .main {
-        padding: 0 40rpx;
-        .primary-text {
-            font-family: PingFangSC, PingFang SC;
-            font-weight: bold;
-            font-size: 36rpx;
-            color: #060809;
-        }
-        .car-option-wrap {
-            border-radius: 40rpx;
-            margin: 40rpx 0 24rpx;
-            .img {
-                width: 100%;
-                height: 316rpx;
-                background: url('https://qiniu.bms16.com/FsscWX4rYSUO_RxdlCqHUPqYqXu1');
-                background-size: 100%;
-            }
-            .opt-text-wrap {
-                background: #DCF4FF;
-                border-radius: 0rpx 0rpx 40rpx 40rpx;
-                padding: 32rpx 0;
-                text-align: center;
-                .text {
-                    font-family: PingFangSC, PingFang SC;
-                    font-weight: bold;
-                    font-size: 32rpx;
-                    color: #060809;
-                    margin-bottom: 16rpx;
-                }
-                .sub-text {
-                    font-family: PingFangSC, PingFang SC;
-                    font-weight: 500;
-                    font-size: 24rpx;
-                    color: 5C676B;
-                }
-            }
-        }
-        .sensitivity-set {
-            width: 100%;
-            padding: 40rpx 32rpx;
-            background: #F1F3F4;
-            border-radius: 40rpx;
-            .txt {
-                font-family: PingFangSC, PingFang SC;
-                font-weight: bold;
-                font-size: 32rpx;
-                color: #060809;
-                text-align: left;
-                font-style: normal;
-                display: flex;
-                align-items: center;
-                &::before {
-                    content: "";
-                    width: 64rpx;
-                    height: 64rpx;
-                    margin-right: 16rpx;
-                    background: url('https://qiniu.bms16.com/Fo-sYIixqyae6oTXXyq3RAruvosJ');
-                    background-size: 100%;
-                }
-            }
-        }
-    }
-    .switch-btn {
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 400;
-        font-size: 32rpx;
-        color: #FA2918;
-        position: absolute;
-        bottom: 64rpx;
-        left: 50%;
-        transform: translateX(-50%);
-        &:active {
-            opacity: .6;
-        }
-    }
-    .popup-content {
-        padding: 40rpx 32rpx 164rpx;
-		
-		/deep/ .uni-slider-handle-wrapper {
+	.slider {
+		width: 600rpx;
+		position: relative;
+		padding: 20rpx 0;
+
+		.tag {
+			width: 50rpx;
+			height: 50rpx;
+			background-color: #060809;
+			border-radius: 50%;
+			position: absolute;
+			left: 0;
+			top: 10rpx;
+
+		}
+
+		.len {
+			width: 50%;
+			height: 20rpx;
+			background-color: #060809;
+			position: absolute;
+			left: 0;
+			top: 20rpx;
+		}
+	}
+
+	.unlockSet-page {
+		background: #fff;
+		min-height: 100vh;
+
+		.lock-img {
+			width: 100%;
+			height: 400rpx;
+			background: url('https://qiniu.bms16.com/Fi7jWl2Uf5zBsZHd77SK0RSGXiWr');
+			background-size: 100%;
+		}
+
+		.main {
+			padding: 0 40rpx;
+
+			.primary-text {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #060809;
+			}
+
+			.car-option-wrap {
+				border-radius: 40rpx;
+				margin: 40rpx 0 24rpx;
+
+				.img {
+					width: 100%;
+					height: 316rpx;
+					background: url('https://qiniu.bms16.com/FsscWX4rYSUO_RxdlCqHUPqYqXu1');
+					background-size: 100%;
+				}
+
+				.opt-text-wrap {
+					background: #DCF4FF;
+					border-radius: 0rpx 0rpx 40rpx 40rpx;
+					padding: 32rpx 0;
+					text-align: center;
+
+					.text {
+						font-family: PingFangSC, PingFang SC;
+						font-weight: bold;
+						font-size: 32rpx;
+						color: #060809;
+						margin-bottom: 16rpx;
+					}
+
+					.sub-text {
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 500;
+						font-size: 24rpx;
+						color: 5C676B;
+					}
+				}
+			}
+
+			.sensitivity-set {
+				width: 100%;
+				padding: 40rpx 32rpx;
+				background: #F1F3F4;
+				border-radius: 40rpx;
+
+				.txt {
+					font-family: PingFangSC, PingFang SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #060809;
+					text-align: left;
+					font-style: normal;
+					display: flex;
+					align-items: center;
+
+					&::before {
+						content: "";
+						width: 64rpx;
+						height: 64rpx;
+						margin-right: 16rpx;
+						background: url('https://qiniu.bms16.com/Fo-sYIixqyae6oTXXyq3RAruvosJ');
+						background-size: 100%;
+					}
+				}
+			}
+		}
+
+		.switch-btn {
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #FA2918;
+			position: absolute;
+			bottom: 64rpx;
+			left: 50%;
+			transform: translateX(-50%);
+
+			&:active {
+				opacity: .6;
+			}
+		}
+
+		.popup-content {
+			padding: 40rpx 32rpx 164rpx;
+
+			/deep/ .uni-slider-handle-wrapper {
 				height: 16rpx !important;
+			}
+
+			.title {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: bold;
+				font-size: 40rpx;
+				color: #060809;
+			}
+
+			.text {
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #828DA2;
+				margin: 32rpx 0 40rpx;
+			}
+		}
+
+		.step-text {
+			margin-top: 32rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #060809;
+			justify-content: space-between;
 		}
-        .title {
-            font-family: PingFangSC, PingFang SC;
-            font-weight: bold;
-            font-size: 40rpx;
-            color: #060809;
-        }
-        .text {
-            font-family: PingFangSC, PingFang SC;
-            font-weight: 400;
-            font-size: 24rpx;
-            color: #828DA2;
-            margin: 32rpx 0 40rpx;
-        }
-    }
-	.step-text{
-		margin-top: 32rpx;
-		font-family: PingFangSC, PingFang SC;
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #060809;
-		justify-content: space-between;
 	}
-}
 </style>