laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加气泡消息交互

Browse Source
This commit is contained in:
kron
2025-07-12 16:01:49 +08:00
parent e0807eb06a
commit 927ad523f2
9 changed files with 132 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/first-try.vue
View File

@@ -11,6 +11,7 @@ import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
@@ -34,8 +35,26 @@ const title = ref("新手试炼场");
const start = ref(false);
const practiseResult = ref({});
const power = ref(0);
// const btnDisabled = ref(false);
const btnDisabled = ref(false);
const practiseId = ref("");
const showGuide = ref(false);
const guideImages = [
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68bs7z5elwvw7.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68qmi7grgreen.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68hgrw1ip4wae.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x684x8zmfrmbla.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x67sding7fodnk.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68mpug7cac4yt.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68my783mlmgxv.png",
"https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68p48ylzirtb0.png",
];
const onSwiperIndexChange = (index) => {
if (index + 1 === guideImages.length) {
showGuide.value = true;
}
};
const createPractise = async (arrows) => {
const result = await createPractiseAPI(arrows);
@@ -49,9 +68,9 @@ async function onReceiveMessage(messages = []) {
scores.value.push(msg.target);
}
power.value = msg.target.battery;
// if (step.value === 2 && msg.target.dst / 100 > 5) {
// if (step.value === 2 && msg.target.dst > 5) {
// btnDisabled.value = false;
// if (step.value === 2 && msg.target.dst / 100 >= 5) {
btnDisabled.value = false;
showGuide.value = true;
// }
}
if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
@@ -87,10 +106,12 @@ const nextStep = async () => {
step.value = 1;
title.value = "-凹造型";
} else if (step.value === 1) {
// btnDisabled.value = true;
showGuide.value = false;
btnDisabled.value = true;
step.value = 2;
title.value = "-感知距离";
} else if (step.value === 2) {
showGuide.value = false;
step.value = 3;
title.value = "-小试牛刀";
} else if (step.value === 3) {
@@ -189,18 +210,7 @@ const onClose = () => {
v-if="step === 5"
/>
<view style="height: 570px" v-if="step === 1">
<Swiper
:data="[
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68bs7z5elwvw7.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68qmi7grgreen.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68hgrw1ip4wae.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x684x8zmfrmbla.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x67sding7fodnk.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68mpug7cac4yt.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68my783mlmgxv.png',
'https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68p48ylzirtb0.png',
]"
/>
<Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
</view>
<ShootProgress
v-if="step === 4"
@@ -243,9 +253,18 @@ const onClose = () => {
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="step !== 4" :onClick="nextStep">{{
stepButtonTexts[step]
}}</SButton>
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">
<BubbleTip
v-if="showGuide"
type="long"
:location="{ top: '-50%', left: '50%' }"
>
<text :style="{ transform: 'translateY(-18rpx)' }">{{
step === 1 ? "学会了，我摆得比教练还帅" : "我找到合适的点位了"
}}</text>
</BubbleTip>
{{ stepButtonTexts[step] }}
</SButton>
</view>
</Container>
</template>