uniProject/pages/zhuanti/zhuantiInfo.vue

<template>
	<view class="ezy-biaoqing-page">
		<view class="ezy-nav-bar-icon" @click="goUpPage"></view>
		<view class="biaoqing-bj-box" :class="'biaoqing-bj'+ type">
			<view v-for="(item, index) in bubbles" :key="index" 
			class="qipao-item-box" :class="{ 'qipao-item-disabled': item.disabled }" @click="qipaoBtn(index)" >
				<view :class="item.iconType"></view>
				<view class="show-biaoqing-icon"></view>
				<view class="qipao-text-row">
					<text>可扎破</text>
					<icon class="shou-icon"></icon>
				</view>
			</view>
			<view class="biaoqing-img"></view>
		</view>
		<view :class="maikeType">
			<view class="maike-box" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel"
				@touchmove="handleTouchMove">
				<icon class="maike-icon"></icon>
			</view>
			<text class="maike-text" v-if="maikeType =='maike-anzhu'">{{ buttonText }}</text>
			<text class="maike-text" v-if="maikeType =='maike-songkai'">{{ buttonText }}</text>
		</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 maikeType = ref('maike-anzhu');
	// 定义气泡数据状态
	const bubbles = reactive(
	  Array.from({ length: 5 }, () => ({
		disabled: false, // 是否破裂
	    iconType: "qipao-mask",//mask
	  }))
	);
	const type = ref(null);
	const showIcon = 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
	})
	
	// 点击气泡
	function qipaoBtn(index) {
	  bubbles[index].disabled = true;
	  bubbles[index].iconType = "polie-qipao-mask"; 
	  // wgy看这↓ 在这里播放mp3,时间一秒及删除接口
	  
	}
	
	// 按钮状态计算
	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('操作开始');
		maikeType.value = 'maike-songkai';
	};

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

	// 触摸取消
	const handleTouchCancel = () => {
		isCancelled.value = true;
		maikeType.value = 'maike-songkai';
		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>