zx_flk_app/component/customSwitch.vue

<template>
	<view class="switch-container" :style="{ width: width, height: height }" @touchstart="onTouchStart"
		@touchmove="onTouchMove" @touchend="onTouchEnd" @click="handleClick">
		<view class="switch" :class="{ active: isValue }">
			<!-- 额外包裹一层 -->
			<view class="indicator-wrapper" :class="{ shaking: isShaking }">
				<image class="indicator" :src="imageSrc" />
			</view>
			<view v-if="isShowSwitchText&&isValue" class="switch_text_off">{{$t('滑动关机')}}</view>
			<view v-if="isShowSwitchText&&!isValue" class="switch_text_on">{{$t('滑动开机')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			modelValue: String,
			imageSrc: {
				type: String,
				default: "https://qiniu.bms16.com/Fkovrpq1bexe-Unal_VJREbLUhdu" // 默认滑块图片
			},
			width: {
				type: String,
				default: "400rpx" // 默认宽度
			},
			height: {
				type: String,
				default: "96rpx" // 默认高度
			},
			defaultPosition: {
				type: String,
				default: "right" // 默认在左边
			},
			fetchData: Function // 后台请求函数
		},
		data() {
			return {
				isValue:false,
				isShowSwitchText: true,
				isSwiping: false, // 是否滑动
				isShaking: false, // 是否抖动
				startX: 0, // 触摸起始位置
				position: 2, // 滑块初始位置 (左侧)
				containerWidth: 400, // 容器宽度(px)
				indicatorSize: 36 // 滑块大小(px)
			};
		},
		computed: {
			maxPosition() {
				return this.containerWidth - this.indicatorSize - 4; // 计算滑块最右边的位移
			}
		},
		watch: {
			modelValue(newValue) {
				// console.log(newValue,"值变动")
				// this.isValue = JSON.parse(newValue).state
				this.position = this.isValue ? this.maxPosition : 2;
			}
		},
		mounted() {
		},
		methods: {
			async triggerRequest() {
				if (this.isShaking) return; // 避免重复触发
				this.isShaking = true; // 开始抖动
				try {
					let data = await this.fetchData(this.isValue); // 触发后台请求
					this.isValue = JSON.parse(data).state
					this.$emit('changEnd',data)
				} catch (error) {
					console.error("请求失败:", error);
				} finally {
					this.isShowSwitchText = true;
					this.isShaking = false; // 停止抖动
					// this.isValue = !this.isValue
				}
			},
			handleClick() {
				if (this.isSwiping) return;
				this.isShowSwitchText = false;
				this.triggerRequest();
			},
			onTouchStart(e) {
				this.isShowSwitchText = false;
				this.isSwiping = false;
				this.startX = e.touches[0].clientX;
			},
			onTouchMove(e) {
				let moveX = e.touches[0].clientX - this.startX;
				if (Math.abs(moveX) > 10) {
					this.isSwiping = true;
				}
			},
			onTouchEnd() {
				if (!this.isSwiping) return;
				this.triggerRequest();
				this.isSwiping = false;
			}
		}
	};
</script>

<style scoped>
	.switch-container {
		/* 	width: 400rpx;
		height: 96rpx; */
		background: #FFFFFF;
		border-radius: 48rpx;
		border: 4rpx solid #F1F3F4;
		display: flex;
		align-items: center;
		padding: 2px;
		position: relative;
	}

	.switch {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		position: relative;
		transition: background 0.3s;
	}

	.switch.active {
		background: #ffffff;
	}

	/* 外层比滑块大 5px */
	.indicator-wrapper {
		width: 144rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 1);
		border-radius: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		/* top: 6rpx; */
		left: 6rpx;
	}

	.indicator {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		position: relative;
		transition: transform 0.3s;
	}

	.switch.active .indicator-wrapper {
		transform: translateX(244rpx);
	}

	.indicator-wrapper.shaking {
		animation: shake 0.2s infinite alternate;
	}

	.switch_text_on {
		position: relative;
		width: 158rpx;
		height: 80rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #060809;
		line-height: 80rpx;
		text-align: left;
		font-style: normal;
		margin-left: 200rpx;
	}

	.switch_text_off {
		position: relative;
		width: 158rpx;
		height: 80rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #060809;
		line-height: 80rpx;
		text-align: left;
		font-style: normal;
		margin-left: 50rpx;
	}

	@keyframes shake {
		0% {
			transform: translateX(110rpx);
		}

		100% {
			transform: translateX(120rpx);
		}
	}
</style>