shuhi-app/pages/my/page/book-display.vue

<template>
    <view class="settings-container">
        <!-- 设置列表 -->
        <u-cell-group :border="false" class="settings-group">
            <u-cell title="是否展示回收价" :border-bottom="true">
                <template #right-icon>
                    <u-switch v-model="settings.showRecyclePrice" activeColor="#4cd964"></u-switch>
                </template>
            </u-cell>

            <u-cell title="是否展示回收状态" :border-bottom="true">
                <template #right-icon>
                    <u-switch v-model="settings.showRecycleStatus" activeColor="#4cd964"></u-switch>
                </template>
            </u-cell>

            <u-cell title="是否展示库存信息" :border-bottom="true">
                <template #right-icon>
                    <u-switch v-model="settings.showStock" activeColor="#4cd964"></u-switch>
                </template>
            </u-cell>

            <u-cell title="是否默认展开商品详情" :border-bottom="false">
                <template #right-icon>
                    <u-switch v-model="settings.showDetail" activeColor="#4cd964"></u-switch>
                </template>
            </u-cell>
        </u-cell-group>

        <u-button class="mt-40" type="primary" @click="saveSettings">保存</u-button>
    </view>
</template>

<script setup>
import { reactive, onMounted } from 'vue'

// 设置状态
const settings = reactive({
    showRecyclePrice: false,
    showRecycleStatus: false,
    showStock: false,
    showDetail: false
})

// 加载保存的设置
function loadSettings() {
    uni.$u.http.get('/app/appConf/getBookShowConfig').then(res => {
        if (res.code == 200) {
            Object.assign(settings, res.data)
        }
    })
}

// 保存设置
function saveSettings() {
    uni.$u.http.post('/app/appConf/setBookShowConfig', settings).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: '设置已保存',
                icon: 'success'
            })
        } else {
            uni.showToast({
                title: '保存设置失败',
                icon: 'error'
            })
        }
    })
}
// 生命周期钩子
onMounted(() => {
    loadSettings()
})
</script>

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

    .settings-group {
        background-color: #ffffff;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    }
}
</style>