1

pages/zhuanti/zhuantiInfo.vue

@@ -5,7 +5,16 @@
 			<text class="nav-bar-title">详情</text>
 		</view>
 		<view>
-			asdfasdfasdfasdfas
+			<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> -->
@@ -26,17 +35,104 @@
 	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
 	import {
 		reactive,
-		ref
+		ref,
+		computed,
+		onBeforeUnmount
 	} from "vue";
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
-	const youkeFlag = ref(null);
-	const yhName = ref(null);
+	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`