145 lines
2.9 KiB
Vue
145 lines
2.9 KiB
Vue
<template>
|
|
<div class="settings-subpage">
|
|
<div class="page-shell subpage-shell">
|
|
<div class="subpage-head">
|
|
<button
|
|
class="back-link"
|
|
@click="router.back()"
|
|
>
|
|
返回
|
|
</button>
|
|
<strong>隐私设置</strong>
|
|
</div>
|
|
|
|
<div class="panel-card">
|
|
<div class="status-row">
|
|
<span>当前可见范围</span>
|
|
<strong>{{ currentPrivacyLabel }}</strong>
|
|
</div>
|
|
|
|
<van-cell-group inset>
|
|
<van-cell title="主页公开范围">
|
|
<template #right-icon>
|
|
<van-dropdown-menu>
|
|
<van-dropdown-item
|
|
v-model="form.privacyLevel"
|
|
:options="privacyOptions"
|
|
/>
|
|
</van-dropdown-menu>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<van-button
|
|
type="primary"
|
|
block
|
|
class="save-btn"
|
|
:loading="saving"
|
|
@click="save"
|
|
>
|
|
保存设置
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { showSuccessToast, showToast } from 'vant'
|
|
import { userApi } from '@/api/user.ts'
|
|
|
|
const router = useRouter()
|
|
const form = reactive({ privacyLevel: 1 })
|
|
const saving = ref(false)
|
|
const privacyOptions = [
|
|
{ text: '公开', value: 1 },
|
|
{ text: '仅关注可见', value: 2 },
|
|
{ text: '仅自己可见', value: 3 }
|
|
]
|
|
const currentPrivacyLabel = computed(() => privacyOptions.find((item) => item.value === form.privacyLevel)?.text || '未设置')
|
|
|
|
const save = async () => {
|
|
saving.value = true
|
|
try {
|
|
await userApi.updateSettings({ privacyLevel: form.privacyLevel })
|
|
showSuccessToast('隐私设置已保存')
|
|
} catch (error: any) {
|
|
showToast(error?.message || '保存失败')
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const settings = await userApi.getSettings()
|
|
form.privacyLevel = settings.privacyLevel
|
|
} catch (error: any) {
|
|
showToast(error?.message || '加载失败')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.settings-subpage {
|
|
min-height: 100vh;
|
|
background: #f4f5f7;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.subpage-shell {
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.subpage-head,
|
|
.panel-card {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.subpage-head {
|
|
padding: 14px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
strong {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.back-link {
|
|
color: var(--link-color);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.panel-card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
|
|
span {
|
|
color: #9499a0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
strong {
|
|
color: #18191c;
|
|
}
|
|
}
|
|
|
|
.save-btn {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|