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