1

api/zhuanti.js

@@ -1,7 +1,31 @@
 import request from '@/utils/request'
-export function myInfo(data = {}) {
+export function moodSize(data = {}) {
   return request({
-    'url': '/app/user/my/info',
+    'url': '/app/user/mood/size',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
+}
+
+export function moodLess(data = {}) {
+  return request({
+    'url': '/app/user/mood/less',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
+}
+
+export function moodAdd(data = {}) {
+  return request({
+    'url': '/app/user/mood/add',
     headers: {
       isToken: true
     },

pages/zhuanti/zhuantiInfo.vue

@@ -34,9 +34,10 @@
 	} 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,
@@ -49,14 +50,15 @@
 	} from '@dcloudio/uni-app';
 	const maikeType = ref('maike-anzhu');
 	// 定义气泡数据状态
-	const bubbles = reactive(
-		Array.from({
-			length: 5
-		}, () => ({
-			disabled: false, // 是否破裂
-			iconType: "qipao-mask", //mask
-		}))
-	);
+	// 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); // 是否正在按压
@@ -68,34 +70,64 @@
 	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[index].disabled = true;
-		bubbles[index].iconType = "polie-qipao-mask";
+		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 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 showCancel = computed(() => {
-		return isPressing.value && !isCancelled.value;
-	});
 
-	// 触摸开始
+
+
 	const handleTouchStart = (e) => {
 		isPressing.value = true;
 		isCancelled.value = false;
@@ -109,44 +141,52 @@
 		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)
 		);
-
-		// 移动超过50px视为取消
 		if (moveDistance > 50) {
 			isCancelled.value = true;
 		} else if (isCancelled.value && moveDistance <= 50) {
-			isCancelled.value = false; // 当移回范围内时恢复状态
+			isCancelled.value = false;
 		}
 	};
-
-	// 重置状态
 	const resetState = () => {
 		isPressing.value = false;
 		setTimeout(() => {