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.showInventoryInfo" activeColor="#4cd964"></u-switch>
                </template>
            </u-cell>

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

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

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

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

// 保存设置
function saveSettings() {
    try {
        uni.setStorageSync('display_settings', JSON.stringify(settings))
        uni.showToast({
            title: '设置已保存',
            icon: 'success'
        })
    } catch (error) {
        console.error('保存设置失败:', error)
        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>