update:按钮特效优化
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user