|
|
@@ -1,23 +1,28 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="icon-title-navBar-box">
|
|
|
- <view @click="goUpPage" class="nav-bar-icon"></view>
|
|
|
- <text class="nav-bar-title">详情</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view v-if="[1,2,3,4,5,6,7,8].includes(type)">
|
|
|
- <img :src="'img'+type" alt="">
|
|
|
+ <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 @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel"
|
|
|
- @touchmove="handleTouchMove" :class="[buttonState]">
|
|
|
- {{ buttonText }}
|
|
|
+ <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>
|
|
|
-
|
|
|
- <!-- 取消提示层 -->
|
|
|
- <view v-if="showCancel" class="cancel-tip">松开取消</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> -->
|
|
|
+
|
|
|
+ <CustomTabBar :currentTabNumber="1"></CustomTabBar>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
@@ -42,16 +47,16 @@
|
|
|
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 img1 = ref(null);
|
|
|
- const img2 = ref(null);
|
|
|
- const img3 = ref(null);
|
|
|
- const img4 = ref(null);
|
|
|
- const img5 = ref(null);
|
|
|
- const img6 = ref(null);
|
|
|
- const img7 = ref(null);
|
|
|
- const img8 = ref(null);
|
|
|
const isPressing = ref(false); // 是否正在按压
|
|
|
const isCancelled = ref(false); // 是否已取消
|
|
|
const touchPos = ref({
|
|
|
@@ -62,6 +67,15 @@
|
|
|
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';
|
|
|
@@ -71,7 +85,7 @@
|
|
|
// 按钮文本
|
|
|
const buttonText = computed(() => {
|
|
|
if (isCancelled.value) return '已取消';
|
|
|
- return isPressing.value ? '松开结束' : '按住开始';
|
|
|
+ return isPressing.value ? '松开发送' : '按住说话';
|
|
|
});
|
|
|
|
|
|
// 是否显示取消提示
|
|
|
@@ -90,6 +104,7 @@
|
|
|
|
|
|
// 这里触发开始逻辑（如开始录音）
|
|
|
console.log('操作开始');
|
|
|
+ maikeType.value = 'maike-songkai';
|
|
|
};
|
|
|
|
|
|
// 触摸结束
|
|
|
@@ -98,13 +113,14 @@
|
|
|
// 正常结束逻辑
|
|
|
console.log('操作完成');
|
|
|
}
|
|
|
-
|
|
|
+ maikeType.value = 'maike-anzhu';
|
|
|
resetState();
|
|
|
};
|
|
|
|
|
|
// 触摸取消
|
|
|
const handleTouchCancel = () => {
|
|
|
isCancelled.value = true;
|
|
|
+ maikeType.value = 'maike-songkai';
|
|
|
resetState();
|
|
|
console.log('操作取消');
|
|
|
};
|
tanxue