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 v-if="item.showFlag ==1">
					<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>
			<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 audioContext = ref(null);
	const audioPath = '/static/mp3/zhuanti/qipao.mp3';
	const isPlaying = ref(false);
	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()
		initAudio()
	})

	function initAudio() {
		audioContext.value = uni.createInnerAudioContext();
		audioContext.value.src = audioPath;
		// 设置事件监听
		audioContext.value.onPlay(() => {
			console.log('开始播放');
			isPlaying.value = true;
		});

		audioContext.value.onPause(() => {
			console.log('暂停播放');
			isPlaying.value = false;
		});

		audioContext.value.onStop(() => {
			console.log('停止播放');
			isPlaying.value = false;
		});

		audioContext.value.onError((err) => {
			console.error('播放错误:', err);
			isPlaying.value = false;
			uni.showToast({
				title: '播放失败',
				icon: 'none'
			});
		});
	}

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

		})
	}
	// 点击气泡
	function qipaoBtn(index) {

		moodLess({
			type: type.value
		}).then(res => {
			if (res.code == 0) {

				if (isPlaying.value) {
					audioContext.value.stop();
				} else {
					audioContext.value.play(); // 开始播放
				}
				bubbles.value[index].disabled = true;
				bubbles.value[index].iconType = "polie-qipao-mask";
				setTimeout(() => {
					bubbles.value[index] = {};
				}, 200)

				// setTimeout(() => {
				// 	bubbles.value.splice(index, 1)
				// }, 1000)
			} 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('操作完成');
			const newLength = bubbles.value.filter(item =>
				Object.keys(item).length > 0
			).length;

			if (newLength == 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",
					showFlag: "1",
				}
				addItem(array)
				//bubbles.value.push(array)
			})
		}
		console.log('bubbles', bubbles.value);
		maikeType.value = 'maike-anzhu';
		resetState();
	};

	function addItem(item) {
		const emptyIndex = bubbles.value.findIndex(item =>
			Object.keys(item).length == 0
		);

		if (emptyIndex !== -1) {
			// 如果找到空对象，替换它
			bubbles.value[emptyIndex] = item;
		} else {
			// 如果没有空对象，推入新项
			bubbles.value.push(item);
		}

		return bubbles.value;
	}
	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>