pet-system-fulfiller-app/pages/mine/settings/notification/index.vue

<template>
    <view class="container">
        <!-- 自定义头部 -->
        <view class="custom-header">
            <view class="header-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);"></image>
            </view>
            <text class="header-title">推送通知设置</text>
            <view class="header-right"></view>
        </view>
        <view class="header-placeholder"></view>

        <view class="group-card">
            <view class="list-item">
                <text class="item-title">系统消息通知</text>
                <switch checked color="#FF5722" style="transform:scale(0.8)"  @change="switchChange('system', $event)" />
            </view>
            <view class="list-item no-border">
                <text class="item-title">订单消息通知</text>
                <switch checked color="#FF5722" style="transform:scale(0.8)" @change="switchChange('order', $event)" />
            </view>
        </view>
        
        <text class="tips-text">关闭通知后将收不到消息通知推送</text>

    </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {
        navBack() {
             uni.navigateBack({
                delta: 1
            });
        },
        switchChange(type, e) {
            console.log('switch change', type, e.detail.value);
            // 实际开发中需调用 API 更新设置
        }
    }
}
</script>

<style>
page {
    background-color: #F8F8F8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: border-box;
    z-index: 100;
}
.header-placeholder {
    height: calc(88rpx + var(--status-bar-height));
}
.back-icon {
    width: 40rpx;
    height: 40rpx;
}
.header-title {
    font-size: 32rpx; /* 16pt based on design req, though previous pages used 14pt (28rpx). Sticking to consistency with previous pages might be better but user requested specifically for this task based on screenshot which looks a bit large. Let's stick to 32rpx for title as requested earlier for uniformity */
    font-weight: bold;
    color: #333;
}
.header-right {
    width: 40rpx;
}

.container {
    padding: 20rpx 30rpx;
}
.group-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
}
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1px solid #F5F5F5;
}
.list-item.no-border {
    border-bottom: none;
}
.item-title {
    font-size: 28rpx;
    color: #333;
}
.tips-text {
    font-size: 24rpx;
    color: #999;
    padding-left: 10rpx;
}
</style>