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 {
		moodAdd,
		moodLess,
		moodSize
	} 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
	// 	// }))
	// );
	let bubbles = ref([])
	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
		getSize()
	})

	function getSize() {
		moodSize({
			type: type.value
		}).then(res => {
			console.log('res', res);
			if (res.code == 0) {
				bubbles.value = Array.from({
					length: Number(res.data)
				}, () => ({
					disabled: false,
					iconType: "qipao-mask"
				}));
			} else {
				toast("查询数量失败")
				return false
			}

		})
	}
	// 点击气泡
	function qipaoBtn(index) {
		bubbles.value[index].disabled = true;
		bubbles.value[index].iconType = "polie-qipao-mask";
		moodLess({
			type: type.value
		}).then(res => {
			console.log('res', res);
			if (res.code == 0) {
				bubbles.value.splice(index, 1)
			} else {
				toast("戳破气泡失败！")
				return false
			}
		})
		// wgy看这↓ 在这里播放mp3,时间一秒及删除接口
	}


	// const buttonState = computed(() => {
	// 	if (isCancelled.value) return 'cancelled';
	// 	return isPressing.value ? 'recording' : 'idle';
	// });

	// const showCancel = computed(() => {
	// 	return isPressing.value && !isCancelled.value;
	// });

	const buttonText = computed(() => {
		if (isCancelled.value) return '松开取消';
		return isPressing.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('操作完成');
			if (bubbles.value.length == 5) {
				console.log('5555');
				maikeType.value = 'maike-anzhu';
				resetState();
				return false
			}
			moodAdd({
				type: type.value
			}).then(res => {
				console.log('moodAdd', res);
				const array = {
					disabled: false,
					iconType: "qipao-mask",
				}
				bubbles.value.push(array)
			})
		}
		console.log('123123123');
		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)
		);
		if (moveDistance > 50) {
			isCancelled.value = true;
		} else if (isCancelled.value && moveDistance <= 50) {
			isCancelled.value = false;
		}
	};
	const resetState = () => {
		isPressing.value = false;
		setTimeout(() => {
			isCancelled.value = false;
		}, 500); // 短暂保持
	};

	function goUpPage() {
		uni.redirectTo({
			url: `/pages/zhuanti/index`

		})
	}
</script>