uniProject/pages/zhuanti/zhuantiInfo.vue

<template>
	<view>
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">详情</text>
		</view>
		<view>
			<view v-if="[1,2,3,4,5,6,7,8].includes(type)">
				<img :src="'img'+type" alt="">
			</view>
			<view @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel"
				@touchmove="handleTouchMove" :class="[buttonState]">
				{{ buttonText }}
			</view>

			<!-- 取消提示层 -->
			<view v-if="showCancel" class="cancel-tip">松开取消</view>
		</view>

		<!-- 	<CustomTabBar  :currentTabNumber="1"></CustomTabBar> -->
	</view>

</template>

<script setup>
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import cacheManager from '@/utils/cacheManager.js';
	import {

	} from '@/api/zhuanti.js'

	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import {
		reactive,
		ref,
		computed,
		onBeforeUnmount
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const type = ref(null);
	const showIcon = ref(null);
	const img1 = ref(null);
	const img2 = ref(null);
	const img3 = ref(null);
	const img4 = ref(null);
	const img5 = ref(null);
	const img6 = ref(null);
	const img7 = ref(null);
	const img8 = ref(null);
	const isPressing = ref(false); // 是否正在按压
	const isCancelled = ref(false); // 是否已取消
	const touchPos = ref({
		x: 0,
		y: 0
	}); // 触摸位置
	onLoad((options) => {
		console.log('opt', options);
		type.value = options.type
	})
	// 按钮状态计算
	const buttonState = computed(() => {
		if (isCancelled.value) return 'cancelled';
		return isPressing.value ? 'recording' : 'idle';
	});

	// 按钮文本
	const buttonText = computed(() => {
		if (isCancelled.value) return '已取消';
		return isPressing.value ? '松开结束' : '按住开始';
	});

	// 是否显示取消提示
	const showCancel = computed(() => {
		return isPressing.value && !isCancelled.value;
	});

	// 触摸开始
	const handleTouchStart = (e) => {
		isPressing.value = true;
		isCancelled.value = false;
		touchPos.value = {
			x: e.touches[0].clientX,
			y: e.touches[0].clientY
		};

		// 这里触发开始逻辑（如开始录音）
		console.log('操作开始');
	};

	// 触摸结束
	const handleTouchEnd = () => {
		if (isPressing.value && !isCancelled.value) {
			// 正常结束逻辑
			console.log('操作完成');
		}

		resetState();
	};

	// 触摸取消
	const handleTouchCancel = () => {
		isCancelled.value = true;
		resetState();
		console.log('操作取消');
	};

	// 触摸移动检测（判断是否滑动取消）
	const handleTouchMove = (e) => {
		if (!isPressing.value) return;

		const currentX = e.touches[0].clientX;
		const currentY = e.touches[0].clientY;
		const moveDistance = Math.sqrt(
			Math.pow(currentX - touchPos.value.x, 2) +
			Math.pow(currentY - touchPos.value.y, 2)
		);

		// 移动超过50px视为取消
		if (moveDistance > 50) {
			isCancelled.value = true;
		}
	};

	// 重置状态
	const resetState = () => {
		isPressing.value = false;
		setTimeout(() => {
			isCancelled.value = false;
		}, 500); // 短暂保持
	};
	function goUpPage() {
		uni.redirectTo({
			url: `/pages/zhuanti/index`

		})
	}
</script>