shuhi-app/pages/my/page/volume.vue

<template>
    <view class="settings-container">
        <!-- 设置选项组 -->
        <view class="settings-section">
            <u-cell-group :border="false">
                <!-- 语音播报设置 -->
                <u-cell
                    title="语音播报"
                    label="控制除app启动提示外所有语音播报的开关"
                    :border-bottom="true"
                >
                    <template #right-icon>
                        <u-switch
                            v-model="settings.audioPlay"
                            activeColor="#4cd964"
                        ></u-switch>
                    </template>
                </u-cell>

                <!-- 点击音效设置 -->
                <u-cell title="点击音效" :border-bottom="true">
                    <template #right-icon>
                        <u-switch
                            v-model="settings.audioClick"
                            activeColor="#4cd964"
                        ></u-switch>
                    </template>
                </u-cell>

                <!-- 启动提示语设置 -->
                <u-cell title="启动提示语" :border-bottom="true">
                    <template #right-icon>
                        <u-switch
                            v-model="settings.audioStartSwitch"
                            activeColor="#4cd964"
                        ></u-switch>
                    </template>
                </u-cell>
            </u-cell-group>

            <!-- 启动提示语输入框 -->
            <view class="input-section">
                <u-textarea
                    v-model="settings.audioStart"
                    placeholder="输入启动时要说的内容，比如：欢迎使用书嗨/很开心又见到你啦"
                    height="100"
                ></u-textarea>
            </view>

            <!-- 语速设置 -->
            <view class="slider-section">
                <view class="slider-title">
                    <text>设置语速</text>
                    <text class="subtitle">(部分机型不支持)</text>
                </view>
                <u-slider
                    :value="settings.audioSpeed"
                    :max="20"
                    :min="5"
                    :step="1"
                    showValue
                    @change="changeSpeed"
                ></u-slider>
            </view>

            <!-- 音调设置 -->
            <view class="slider-section">
                <view class="slider-title">
                    <text>设置音调</text>
                    <text class="subtitle">(部分机型不支持)</text>
                </view>
                <u-slider
                    :value="settings.audioVolume"
                    :max="10"
                    :min="1"
                    :step="1"
                    showValue
                    @change="changeVolume"
                ></u-slider>
            </view>

            <!-- 操作按钮 -->
            <view class="button-group">
                <u-button
                    type="primary"
                    text="保存设置并试听"
                    @click="saveVoiceBroadcast"
                ></u-button>
                <u-button
                    type="warning"
                    text="停止播放"
                    @click="stopPlayback"
                    :plain="true"
                ></u-button>
                <u-button
                    type="error"
                    text="重启app"
                    @click="restartApp"
                    :plain="true"
                ></u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import VolumeTTS from "@/utils/VolumeTTS";
import { onUnload } from "@dcloudio/uni-app";

// 设置状态
const settings = ref({
    audioStartSwitch: true,
    audioStart: "书嗨，不辜负每一个爱书的人",
    audioSpeed: 10,
    audioVolume: 5,
    audioPlay: false,
    audioClick: false,
});

function changeSpeed(value) {
    settings.value.audioSpeed = value;
}

function changeVolume(value) {
    settings.value.audioVolume = value;
}

// 获取语音播报内容
const getVoiceBroadcast = () => {
    uni.$u.http.get("/app/appConf/getAudioConfig").then((res) => {
        if (res.code == 200) {
            settings.value = res.data;
        }
    });
};
getVoiceBroadcast();
// 保存语音播报内容
const saveVoiceBroadcast = () => {
    uni.$u.http
        .post("/app/appConf/setAudioConfig", settings.value)
        .then((res) => {
            if (res.code == 200) {
                uni.showToast({
                    title: "设置成功",
                    icon: "success",
                });
                initTTS();
            }
        });
};

//初始化tts
const tts = ref(null);
const initTTS = () => {
    let params = {
        speed: settings.value.audioSpeed / 10, // 将 0-10 转换为 0-1
        pitch: settings.value.audioVolume, // 将 0-10 转换为 0-1
        volume: 1,
    };
    tts.value = new VolumeTTS(params);

    settings.value.audioStartSwitch &&
        tts.value.speak(settings.value.audioStart);
};

// 停止播放
function stopPlayback() {
    tts.value && tts.value.stop();
    uni.showToast({
        title: "已停止播放",
        icon: "none",
    });
}

// 重启应用
function restartApp() {
    uni.showModal({
        title: "提示",
        content: "确定要重启应用吗？",
        success: function (res) {
            if (res.confirm) {
                // #ifdef APP-PLUS
                plus.runtime.restart();
                // #endif

                // #ifdef H5 || MP-WEIXIN
                uni.reLaunch({
                    url: "/pages/index/index",
                });
                // #endif
            }
        },
    });
}

// 加载保存的设置
function loadSettings() {
    try {
        const savedSettings = uni.getStorageSync("tts_settings");
        if (savedSettings) {
            Object.assign(settings, savedSettings);
        }
    } catch (error) {
        console.error("加载设置失败:", error);
    }
}

// 播放点击音效
function playClickSound() {
    if (!settings.audioClick) return;

    const audio = uni.createInnerAudioContext();
    audio.src = "/static/audio/click.mp3"; // 确保添加点击音效文件
    audio.play();
}

// 生命周期钩子
onMounted(async () => {
    loadSettings();
});

onUnload(() => {
    tts.value && tts.value.destroy();
});
</script>

<style lang="scss" scoped>
.settings-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 40rpx;

    .card-head {
        display: flex;
        align-items: center;
        padding: 10rpx 0;

        .head-title {
            margin-left: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
        }
    }

    .settings-section {
        margin: 20rpx;
        background-color: #ffffff;
        border-radius: 12rpx;
        padding: 20rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    }

    .input-section {
        margin: 30rpx 0;
        padding: 0 20rpx;
    }

    .slider-section {
        margin: 30rpx 0;
        padding: 0 20rpx;

        .slider-title {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            color: #333;

            .subtitle {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
    }

    .button-group {
        margin-top: 50rpx;
        padding: 0 20rpx;

        :deep(.u-button) {
            margin-bottom: 20rpx;
        }
    }
}
</style>