1

pages/zhuanti/zhuantiInfo.vue

@@ -4,12 +4,15 @@
 		<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 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>
@@ -60,6 +63,9 @@
 	// );
 	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); // 是否已取消
@@ -71,8 +77,38 @@
 		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
@@ -83,7 +119,8 @@
 					length: Number(res.data)
 				}, () => ({
 					disabled: false,
-					iconType: "qipao-mask"
+					iconType: "qipao-mask",
+					showFlag: "1",
 				}));
 			} else {
 				toast("查询数量失败")
@@ -94,14 +131,30 @@
 	}
 	// 点击气泡
 	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)
+
+				// if (isPlaying.value) {
+				// 	console.log('1231231231241242314');
+				// 	audioContext.value.stop();
+				// } else {
+				// 	console.log('bibo');
+				// 	audioContext.value.play(); // 开始播放
+				// }
+				bubbles.value[index].disabled = true;
+				bubbles.value[index].iconType = "polie-qipao-mask";
+				setTimeout(() => {
+					bubbles.value[index] = {};
+				}, 1000)
+
+				console.log('bubbles', bubbles.value);
+				// setTimeout(() => {
+				// 	bubbles.value.splice(index, 1)
+				// }, 1000)
 			} else {
 				toast("戳破气泡失败！")
 				return false
@@ -144,7 +197,11 @@
 	const handleTouchEnd = () => {
 		if (isPressing.value && !isCancelled.value) {
 			console.log('操作完成');
-			if (bubbles.value.length == 5) {
+			const newLength = bubbles.value.filter(item =>
+				Object.keys(item).length > 0
+			).length;
+
+			if (newLength == 5) {
 				console.log('5555');
 				maikeType.value = 'maike-anzhu';
 				resetState();
@@ -157,15 +214,32 @@
 				const array = {
 					disabled: false,
 					iconType: "qipao-mask",
+					showFlag: "1",
 				}
-				bubbles.value.push(array)
+				addItem(array)
+				//bubbles.value.push(array)
 			})
 		}
-		console.log('123123123');
+		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';