zx_flk_app/pages/bluetoothUnlock/unlockSet.vue

<template>
	<view class="unlockSet-page">
		<navBar name="开启感应解锁" left="0"></navBar>
		<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 @tap="closeNeerUnlock" 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"  activeColor="#060809" backgroundColor="#F1F3F4" block-color="#060809"></u-slider> -->

				<view  class="slider">
					<view  @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="'left:' + sensitivityValue*25 + '%;'" class="tag"><image class="icon-step" src="https://qiniu.bms16.com/Fj9w9q_9esu7rWBIVJ1yk0OZdeF1"/></view>
					<view :style="'width:'+ sensitivityValue*25 + '%;'" class="len"></view>
					<view class="slider-bg"></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>
</template>

<script>
	var bluetooth = require('@/common/bluetooth.js');
	var app = getApp();
	export default {
		data() {
			return {
				stepIndex:1,
				start:0,
				end:0,
				showSensitivityDialog: true,
				sensitivityValue: 1
			}
		},
		onLoad() {
			// this.sensitivityValue = app.globalData.nearLockInfo.level - 0
		},
		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('左')
						if(this.sensitivityValue==0) return
						this.sensitivityValue --
						this.changeValue()
					}
				}else if(this.start < this.Move){
					if((this.start - this.Move) < 20){
						if(this.sensitivityValue==4) return
						this.sensitivityValue ++
						this.changeValue()
					}
				}
			},
			close() {
				this.showSensitivityDialog = false
			},
			openSensitivityDialog() {
				this.showSensitivityDialog = true

			},
			changeValue() {
				// console.log(value, this.sensitivityValue);
				//value 0 1 2 3 4
				const value = this.sensitivityValue
				const car_sn = uni.getStorageSync('car_info').car_sn
				common.loading();
				bluetooth.setSensitivity(car_sn, value, () => {
					console.log('设置灵敏度指令成功');
				})
			},
			closeNeerUnlock(){
				nearCloseUnlock(car_sn,()=>{
					console.log('关闭接近解锁成功');
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.slider {
		width: 100%;
		position: relative;
		padding: 20rpx 0;

		.tag {
			width: 50rpx;
			height: 50rpx;
			// background-color: #060809;
			// border-radius: 50%;
			position: absolute;
			left: 0;
			top: 10rpx;
			z-index: 300;
		}

		.len {
			width: 50%;
			height: 20rpx;
			background-color: #060809;
			border-radius: 40rpx 0 0 40rpx;
			position: absolute;
			left: 0;
			top: 26rpx;
			z-index: 200;
		}
		.slider-bg{
			background: #F1F3F4;
			display: flex;
			flex-grow: 1;
			height: 20rpx;
			position: absolute;
			top: 26rpx;
			width: 100%;
			border-radius: 0 40rpx 40rpx 0;
			z-index: 100;
		}
		.icon-step{
			width: 32rpx;
			height: 48rpx;
		}
	}

	.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;
		}
	}
</style>