update:按钮特效优化

This commit is contained in:
2026-07-31 11:16:34 +08:00
parent d6f914ca7e
commit 4245a3f947
3 changed files with 28 additions and 7 deletions
+20 -3
View File
@@ -1,12 +1,17 @@
<script setup>
import { ref, watch } from "vue";
import SButton from "@/components/SButton.vue";
import audioManager from "@/audioManager";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
clickSound: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
@@ -39,7 +44,19 @@ watch(
{}
);
const playClickSound = () => {
if (props.clickSound) {
audioManager.play("点击按钮");
}
};
const handleSelectTarget = (target) => {
playClickSound();
selectedTarget.value = target;
};
const handleConfirm = () => {
playClickSound();
props.onConfirm(selectedTarget.value);
props.onClose();
};
@@ -70,14 +87,14 @@ const handleConfirm = () => {
<view class="target-options">
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 1 }"
@click="() => (selectedTarget = 1)"
@click="handleSelectTarget(1)"
>
<text>20厘米全环靶</text>
</view>
<view style="width: 30rpx"></view>
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
@click="() => (selectedTarget = 2)"
@click="handleSelectTarget(2)"
>
<text>40厘米全环靶</text>
</view>
@@ -194,4 +211,4 @@ const handleConfirm = () => {
color: #fed847;
border: 4rpx solid #fed847;
}
</style>
</style>
+4 -1
View File
@@ -5,6 +5,7 @@ import Container from "@/components/Container.vue";
import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
import TrainingDifficultyStartButton from "./components/TrainingDifficultyStartButton.vue";
import audioManager from "@/audioManager";
import {
createPractiseV2API,
endPractiseAPI,
@@ -676,6 +677,8 @@ const handleSelectDifficulty = (node) => {
return;
}
audioManager.play("点击按钮");
if (node.id === selectedDifficultyId.value) {
return;
}
@@ -810,7 +813,7 @@ onShow(() => {
<view class="difficulty-page__start">
<TrainingDifficultyStartButton
:text="selectedDifficulty.startText"
@click="handleStart"
@click="$clickSound(handleStart)"
/>
</view>
</view>
+4 -3
View File
@@ -469,7 +469,7 @@ onShow(async () => {
</view>
<view class="radar-section">
<view class="record-bubble" @click="openTrainingRecord">
<view class="record-bubble" @click="$clickSound(openTrainingRecord)">
<image
class="record-bubble-bg"
src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_28.png"
@@ -530,7 +530,7 @@ onShow(async () => {
</view>
</view>
<view class="featured-card" @click="openRoutineTraining">
<view class="featured-card" @click="$clickSound(openRoutineTraining)">
<image
class="featured-card-bg"
src="https://static.shelingxingqiu.com/shootmini/static/training-home/img_22.png"
@@ -547,7 +547,7 @@ onShow(async () => {
v-for="item in visibleTrainingItems"
:key="item.id"
class="mode-card"
@click="openTrainingItem(item)"
@click="$clickSound(() => openTrainingItem(item))"
>
<view v-if="item.id === recommendedTrainingId" class="mode-tag">
推荐
@@ -572,6 +572,7 @@ onShow(async () => {
</view>
<TargetPicker
:show="showRoutineTargetPicker"
:clickSound="true"
:onClose="() => (showRoutineTargetPicker = false)"
:onConfirm="handleRoutineTargetConfirm"
/>