huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新页面的添加

Browse Source
This commit is contained in:
not-like-juvenile
2026-01-22 17:26:53 +08:00
parent 75fad97d5d
commit d5a3a4e8f0
5 changed files with 2094 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

494
pages/mall/delivery/settings.uvue Normal file
View File

@@ -0,0 +1,494 @@
<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>