494 lines
13 KiB
Plaintext
494 lines
13 KiB
Plaintext
<template>
|
||
<view class="settings-container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="header-bar">
|
||
<view class="nav-left" @click="goBack">
|
||
<text class="nav-icon">←</text>
|
||
<text class="nav-title">设置</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设置列表 -->
|
||
<scroll-view class="settings-list" scroll-y="true">
|
||
<!-- 基础设置 -->
|
||
<view class="setting-section">
|
||
<text class="section-title">基础设置</text>
|
||
|
||
<view class="setting-item" @click="toggleDarkMode">
|
||
<text class="item-label">深色模式</text>
|
||
<switch :checked="darkModeEnabled" color="#4CAF50" />
|
||
</view>
|
||
|
||
<view class="setting-item" @click="toggleAutoUpdate">
|
||
<text class="item-label">自动更新</text>
|
||
<switch :checked="autoUpdateEnabled" color="#4CAF50" />
|
||
</view>
|
||
|
||
<view class="setting-item" @click="openLanguagePicker">
|
||
<text class="item-label">语言</text>
|
||
<text class="item-value">{{ selectedLanguage }}</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 通知设置 -->
|
||
<view class="setting-section">
|
||
<text class="section-title">通知设置</text>
|
||
|
||
<view class="setting-item" @click="toggleOrderNotifications">
|
||
<text class="item-label">订单通知</text>
|
||
<switch :checked="orderNotificationsEnabled" color="#4CAF50" />
|
||
</view>
|
||
|
||
<view class="setting-item" @click="toggleSystemNotifications">
|
||
<text class="item-label">系统通知</text>
|
||
<switch :checked="systemNotificationsEnabled" color="#4CAF50" />
|
||
</view>
|
||
|
||
<view class="setting-item" @click="openNotificationTimeRange">
|
||
<text class="item-label">通知时段</text>
|
||
<text class="item-value">{{ notificationTimeRange }}</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 隐私与安全 -->
|
||
<view class="setting-section">
|
||
<text class="section-title">隐私与安全</text>
|
||
|
||
<view class="setting-item" @click="openPasswordChange">
|
||
<text class="item-label">修改密码</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="setting-item" @click="toggleLocationSharing">
|
||
<text class="item-label">位置共享</text>
|
||
<switch :checked="locationSharingEnabled" color="#4CAF50" />
|
||
</view>
|
||
|
||
<view class="setting-item" @click="clearCache">
|
||
<text class="item-label">清除缓存</text>
|
||
<text class="item-value">{{ cacheSize }}</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 关于与帮助 -->
|
||
<view class="setting-section">
|
||
<text class="section-title">关于与帮助</text>
|
||
|
||
<view class="setting-item" @click="openAboutPage">
|
||
<text class="item-label">关于我们</text>
|
||
<text class="item-value">{{ appVersion }}</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="setting-item" @click="openHelpCenter">
|
||
<text class="item-label">帮助中心</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
|
||
<view class="setting-item" @click="openFeedback">
|
||
<text class="item-label">意见反馈</text>
|
||
<text class="item-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登出按钮 -->
|
||
<view class="logout-section">
|
||
<button class="logout-btn" @click="logout">退出登录</button>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 语言选择弹窗 -->
|
||
<view v-if="showLanguagePicker" class="picker-overlay" @click="closeLanguagePicker">
|
||
<view class="picker-panel" @click.stop="noop">
|
||
<text class="picker-title">选择语言</text>
|
||
<scroll-view scroll-y="true" class="picker-options">
|
||
<view v-for="(lang, index) in languageOptions" :key="index"
|
||
class="picker-option"
|
||
:class="{ 'picker-option-selected': selectedLanguage === lang.label }"
|
||
@click="selectLanguage(lang)">
|
||
<text>{{ lang.label }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="picker-actions">
|
||
<button size="mini" @click="closeLanguagePicker">取消</button>
|
||
<button size="mini" type="primary" @click="confirmLanguageSelection">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 通知时段选择弹窗 -->
|
||
<view v-if="showTimeRangePicker" class="picker-overlay" @click="closeTimeRangePicker">
|
||
<view class="picker-panel" @click.stop="noop">
|
||
<text class="picker-title">选择通知时段</text>
|
||
<view class="time-range-picker">
|
||
<text class="range-label">从</text>
|
||
<picker mode="time" :value="startTime" @change="onStartTimeChange">
|
||
<view class="time-input">{{ startTime }}</view>
|
||
</picker>
|
||
<text class="range-label">到</text>
|
||
<picker mode="time" :value="endTime" @change="onEndTimeChange">
|
||
<view class="time-input">{{ endTime }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="picker-actions">
|
||
<button size="mini" @click="closeTimeRangePicker">取消</button>
|
||
<button size="mini" type="primary" @click="confirmTimeRange">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
type LanguageOption = {
|
||
value: string
|
||
label: string
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
darkModeEnabled: false,
|
||
autoUpdateEnabled: true,
|
||
orderNotificationsEnabled: true,
|
||
systemNotificationsEnabled: true,
|
||
locationSharingEnabled: true,
|
||
|
||
selectedLanguage: '简体中文',
|
||
languageOptions: [
|
||
{ value: 'zh-CN', label: '简体中文' },
|
||
{ value: 'en-US', label: 'English' },
|
||
{ value: 'ja-JP', label: '日本語' },
|
||
{ value: 'ko-KR', label: '한국어' }
|
||
] as Array<LanguageOption>,
|
||
showLanguagePicker: false,
|
||
|
||
notificationTimeRange: '全天接收',
|
||
startTime: '08:00',
|
||
endTime: '22:00',
|
||
showTimeRangePicker: false,
|
||
|
||
cacheSize: '15.2 MB',
|
||
appVersion: 'v1.2.3'
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
toggleDarkMode() {
|
||
this.darkModeEnabled = !this.darkModeEnabled
|
||
// TODO: 保存设置到本地存储或同步到服务器
|
||
console.log('Dark mode toggled:', this.darkModeEnabled)
|
||
},
|
||
|
||
toggleAutoUpdate() {
|
||
this.autoUpdateEnabled = !this.autoUpdateEnabled
|
||
console.log('Auto update toggled:', this.autoUpdateEnabled)
|
||
},
|
||
|
||
toggleOrderNotifications() {
|
||
this.orderNotificationsEnabled = !this.orderNotificationsEnabled
|
||
console.log('Order notifications toggled:', this.orderNotificationsEnabled)
|
||
},
|
||
|
||
toggleSystemNotifications() {
|
||
this.systemNotificationsEnabled = !this.systemNotificationsEnabled
|
||
console.log('System notifications toggled:', this.systemNotificationsEnabled)
|
||
},
|
||
|
||
toggleLocationSharing() {
|
||
this.locationSharingEnabled = !this.locationSharingEnabled
|
||
console.log('Location sharing toggled:', this.locationSharingEnabled)
|
||
},
|
||
|
||
openLanguagePicker() {
|
||
this.showLanguagePicker = true
|
||
},
|
||
|
||
closeLanguagePicker() {
|
||
this.showLanguagePicker = false
|
||
},
|
||
|
||
selectLanguage(lang: LanguageOption) {
|
||
// 可以在这里高亮选中项，但确认还需点击确定
|
||
this.selectedLanguage = lang.label
|
||
},
|
||
|
||
confirmLanguageSelection() {
|
||
// 实际应用中，这里会保存选中的语言设置
|
||
console.log('Language confirmed:', this.selectedLanguage)
|
||
this.closeLanguagePicker()
|
||
// TODO: 调用API或本地存储更新语言设置
|
||
},
|
||
|
||
openNotificationTimeRange() {
|
||
this.showTimeRangePicker = true
|
||
},
|
||
|
||
closeTimeRangePicker() {
|
||
this.showTimeRangePicker = false
|
||
},
|
||
|
||
onStartTimeChange(e: UniEvent<HTMLInputElement>) {
|
||
this.startTime = e.detail.value
|
||
},
|
||
|
||
onEndTimeChange(e: UniEvent<HTMLInputElement>) {
|
||
this.endTime = e.detail.value
|
||
},
|
||
|
||
confirmTimeRange() {
|
||
this.notificationTimeRange = `${this.startTime} - ${this.endTime}`
|
||
console.log('Time range confirmed:', this.notificationTimeRange)
|
||
this.closeTimeRangePicker()
|
||
},
|
||
|
||
openPasswordChange() {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/delivery/change-password'
|
||
})
|
||
},
|
||
|
||
clearCache() {
|
||
// TODO: 调用API或本地方法清除缓存
|
||
uni.showModal({
|
||
title: '清除缓存',
|
||
content: `确定要清除 ${this.cacheSize} 的缓存吗？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('Cache cleared')
|
||
this.cacheSize = '0.0 MB'
|
||
uni.showToast({ title: '缓存已清除', icon: 'success' })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
openAboutPage() {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/delivery/about'
|
||
})
|
||
},
|
||
|
||
openHelpCenter() {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/delivery/help-center'
|
||
})
|
||
},
|
||
|
||
openFeedback() {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/delivery/feedback'
|
||
})
|
||
},
|
||
|
||
logout() {
|
||
uni.showModal({
|
||
title: '退出登录',
|
||
content: '确定要退出当前账号吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 调用登出API
|
||
console.log('Logging out...')
|
||
uni.reLaunch({
|
||
url: '/pages/user/login'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
noop() {
|
||
// 阻止事件冒泡的空函数
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.settings-container {
|
||
background-color: #f8f9fa;
|
||
min-height: 100vh;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
.header-bar {
|
||
background-color: #fff;
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.nav-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 36rpx;
|
||
margin-right: 10rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.settings-list {
|
||
flex: 1;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.setting-section {
|
||
background-color: #fff;
|
||
margin: 20rpx;
|
||
padding: 0 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
padding: 20rpx 0 10rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f8f9fa;
|
||
}
|
||
|
||
.setting-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.item-value {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.item-arrow {
|
||
font-size: 28rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.logout-section {
|
||
margin: 40rpx 20rpx 20rpx 20rpx;
|
||
}
|
||
|
||
.logout-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background-color: #f44336;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
border: none;
|
||
}
|
||
|
||
/* 弹窗遮罩 */
|
||
.picker-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.picker-panel {
|
||
background-color: #fff;
|
||
width: 80%;
|
||
max-width: 600rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.picker-title {
|
||
display: block;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.picker-options {
|
||
max-height: 400rpx;
|
||
}
|
||
|
||
.picker-option {
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
border-bottom: 1rpx solid #f8f9fa;
|
||
}
|
||
|
||
.picker-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.picker-option-selected {
|
||
background-color: #E8F5E8;
|
||
color: #4CAF50;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time-range-picker {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.range-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.time-input {
|
||
font-size: 28rpx;
|
||
padding: 10rpx 20rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
background-color: #f9f9f9;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.picker-actions {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20rpx;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
</style> |