709 lines
21 KiB
Vue
709 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<view class="settings-page" :class="`theme-${themeMode}`">
|
|||
|
|
<view class="page-accent"></view>
|
|||
|
|
|
|||
|
|
<view class="settings-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">基础配置</text>
|
|||
|
|
<text class="card-subtitle">扫码与反馈</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectScanInterval">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">连续扫码时间间隔</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right interval-right">
|
|||
|
|
<view class="value-line">
|
|||
|
|
<text class="setting-value">{{ settings.scanInterval }}s</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectScanRegionPreset">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">有效识别区域</text>
|
|||
|
|
<text class="setting-desc">{{ scanRegionSummary }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ scanRegionPresetLabel }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="settings.scanRegionPreset === 'barcode'" class="setting-row tappable" @tap="selectScanRegionPosition">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">横向条码框位置</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ scanRegionPositionLabel }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="settings.scanRegionPreset === 'barcode'" class="setting-row tappable" @tap="selectScanRegionHeight">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">扫描框高度</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ scanRegionHeightLabel }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="settings.scanRegionPreset === 'barcode' && settings.scanRegionPosition === 'custom'" class="setting-row tappable" @tap="adjustCustomScanRegion">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">自定义条码框位置</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ regionPercent(settings.scanRegion.centerY) }}%</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">成功提示音</text>
|
|||
|
|
</view>
|
|||
|
|
<u-switch v-model="settings.successSound" active-color="#2f6cf6" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">失败提示音</text>
|
|||
|
|
</view>
|
|||
|
|
<u-switch v-model="settings.failSound" active-color="#ef4f4f" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">震动反馈</text>
|
|||
|
|
</view>
|
|||
|
|
<u-switch v-model="settings.vibration" active-color="#35bfa3" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">PDA 模式</text>
|
|||
|
|
</view>
|
|||
|
|
<u-switch v-model="settings.pdaMode" active-color="#1677ff" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="settings-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">识别处理</text>
|
|||
|
|
<text class="card-subtitle">扫码识别与界面偏好</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectTheme">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">主题模式</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ settings.theme === 'light' ? '浅色' : '深色' }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectLanguage">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">语言</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ settings.language === 'zh' ? '中文' : 'EN' }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">自动保存草稿</text>
|
|||
|
|
</view>
|
|||
|
|
<u-switch v-model="settings.autoSave" active-color="#2f6cf6" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectUploadMode">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">图片上传方式</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ settings.uploadMode === 'wifi' ? '仅 Wi-Fi' : '任意网络' }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="settings-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">软件维护</text>
|
|||
|
|
<text class="card-subtitle">本地与维护</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="selectCacheDays">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">历史缓存保留</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">{{ settings.cacheDays }} 天</text>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="checkForUpdate">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">检查更新</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="setting-right">
|
|||
|
|
<text class="setting-value">v{{ currentVersion }}</text>
|
|||
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="clearBusinessCache">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">清理缓存</text>
|
|||
|
|
</view>
|
|||
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="resetSettings">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">恢复默认设置</text>
|
|||
|
|
</view>
|
|||
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="settings-card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<text class="card-title">帮助与支持</text>
|
|||
|
|
<text class="card-subtitle">问题反馈与应用信息</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="goFeedback">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">问题反馈</text>
|
|||
|
|
</view>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-row tappable" @tap="goAbout">
|
|||
|
|
<view class="setting-main">
|
|||
|
|
<text class="setting-label">关于我们</text>
|
|||
|
|
</view>
|
|||
|
|
<u-icon name="arrow-right" color="#d0d6e2" size="24" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="footer-tip">设置会自动保存在本机，切换账号后设置相互独立</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
compareVersions,
|
|||
|
|
getCurrentAppVersion,
|
|||
|
|
getLatestRelease,
|
|||
|
|
getReleaseUpdateInfo
|
|||
|
|
} from '@/api/app-update.js'
|
|||
|
|
import { applyAppTheme } from '@/utils/theme.js'
|
|||
|
|
import { getScanappSettings, getScanappSettingsStorageKey } from '@/utils/scan-settings.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
const defaultSettings = {
|
|||
|
|
scanInterval: 1,
|
|||
|
|
successSound: true,
|
|||
|
|
failSound: true,
|
|||
|
|
vibration: true,
|
|||
|
|
pdaMode: false,
|
|||
|
|
theme: 'light',
|
|||
|
|
language: 'zh',
|
|||
|
|
autoSave: true,
|
|||
|
|
cacheDays: 30,
|
|||
|
|
uploadMode: 'wifi',
|
|||
|
|
scanRegionPreset: 'fullscreen',
|
|||
|
|
scanRegionPosition: 'middle',
|
|||
|
|
scanRegionHeight: 'medium',
|
|||
|
|
scanRegion: { fullScreen: true }
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
settingsStorageKey: getScanappSettingsStorageKey(),
|
|||
|
|
isLoadingSettings: true,
|
|||
|
|
intervalOptions: [0.3, 0.5, 1, 1.5, 2, 3, 5],
|
|||
|
|
cacheDayOptions: [7, 15, 30, 60, 90],
|
|||
|
|
scanRegionPresets: [
|
|||
|
|
{ key: 'fullscreen', label: '全屏识别', description: '整画面均可识别，不显示扫描框' },
|
|||
|
|
{ key: 'qrcode', label: '二维码正方形框', description: '适合二维码与方形标签' },
|
|||
|
|
{ key: 'barcode', label: '横向条码框', description: '适合商品条码，可调整位置和高度' }
|
|||
|
|
],
|
|||
|
|
scanRegionPositions: [
|
|||
|
|
{ key: 'top', label: '上方', centerY: 0.28 },
|
|||
|
|
{ key: 'middle', label: '居中', centerY: 0.5 },
|
|||
|
|
{ key: 'bottom', label: '下方', centerY: 0.72 },
|
|||
|
|
{ key: 'custom', label: '自定义' }
|
|||
|
|
],
|
|||
|
|
scanRegionHeights: [
|
|||
|
|
{ key: 'medium', label: '中（24%）', height: 0.24 },
|
|||
|
|
{ key: 'large', label: '大（32%）', height: 0.32 },
|
|||
|
|
{ key: 'xlarge', label: '特大（40%）', height: 0.4 }
|
|||
|
|
],
|
|||
|
|
defaultSettings,
|
|||
|
|
settings: { ...defaultSettings, scanRegion: { ...defaultSettings.scanRegion } },
|
|||
|
|
checkingUpdate: false,
|
|||
|
|
currentVersion: getCurrentAppVersion()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.settingsStorageKey = getScanappSettingsStorageKey()
|
|||
|
|
this.loadSettings()
|
|||
|
|
this.isLoadingSettings = false
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
settings: {
|
|||
|
|
deep: true,
|
|||
|
|
handler() {
|
|||
|
|
if (this.isLoadingSettings) return
|
|||
|
|
this.saveSettings()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
loadSettings() {
|
|||
|
|
const savedSettings = getScanappSettings()
|
|||
|
|
if (savedSettings && typeof savedSettings === 'object') {
|
|||
|
|
const preset = savedSettings.scanRegionPreset || (savedSettings.scanRegion?.fullScreen ? 'fullscreen' : 'barcode')
|
|||
|
|
const savedRegion = savedSettings.scanRegion || {}
|
|||
|
|
let scanRegion = { ...this.defaultSettings.scanRegion }
|
|||
|
|
if (preset === 'fullscreen') {
|
|||
|
|
scanRegion = { fullScreen: true }
|
|||
|
|
} else if (preset === 'qrcode') {
|
|||
|
|
scanRegion = { width: 0.74, height: 0.74, centerX: 0.5, centerY: 0.5 }
|
|||
|
|
} else {
|
|||
|
|
scanRegion = {
|
|||
|
|
width: Number(savedRegion.width) || 0.96,
|
|||
|
|
height: Number(savedRegion.height) || 0.24,
|
|||
|
|
centerX: Number.isFinite(Number(savedRegion.centerX)) ? Number(savedRegion.centerX) : 0.5,
|
|||
|
|
centerY: Number.isFinite(Number(savedRegion.centerY)) ? Number(savedRegion.centerY) : 0.5
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.settings = {
|
|||
|
|
...this.defaultSettings,
|
|||
|
|
...savedSettings,
|
|||
|
|
scanRegionPreset: preset,
|
|||
|
|
scanRegion
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
applyAppTheme(this.settings.theme)
|
|||
|
|
},
|
|||
|
|
saveSettings() {
|
|||
|
|
uni.setStorageSync(this.settingsStorageKey, { ...this.settings })
|
|||
|
|
},
|
|||
|
|
checkForUpdate() {
|
|||
|
|
if (this.checkingUpdate) return
|
|||
|
|
this.checkingUpdate = true
|
|||
|
|
uni.showLoading({ title: '正在检查更新', mask: true })
|
|||
|
|
getLatestRelease()
|
|||
|
|
.then((release) => {
|
|||
|
|
const currentVersion = getCurrentAppVersion()
|
|||
|
|
const updateInfo = getReleaseUpdateInfo(release)
|
|||
|
|
if (compareVersions(updateInfo.latestVersion, currentVersion) <= 0) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '检查更新',
|
|||
|
|
content: `当前版本 v${currentVersion}，已是最新版本`,
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmText: '知道了'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const content = `发现新版本 v${updateInfo.latestVersion}\n\n${updateInfo.updateNote}${updateInfo.apkUrl ? '\n\n是否立即下载并安装？' : '\n\n更新包暂未发布，请稍后再试。'}`
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '发现新版本',
|
|||
|
|
content,
|
|||
|
|
confirmText: updateInfo.apkUrl ? '立即更新' : '知道了',
|
|||
|
|
showCancel: Boolean(updateInfo.apkUrl),
|
|||
|
|
cancelText: '暂不更新',
|
|||
|
|
success: (modalResult) => {
|
|||
|
|
if (modalResult.confirm && updateInfo.apkUrl) {
|
|||
|
|
this.downloadAndInstallApk(updateInfo.apkUrl)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '检查更新失败',
|
|||
|
|
content: error.message || '无法获取最新版本信息，请稍后重试',
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmText: '知道了'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.checkingUpdate = false
|
|||
|
|
uni.hideLoading()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
downloadAndInstallApk(downloadUrl) {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
if (!downloadUrl) return
|
|||
|
|
uni.showLoading({ title: '正在下载更新包', mask: true })
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: downloadUrl,
|
|||
|
|
success: (result) => {
|
|||
|
|
if (result.statusCode !== 200) {
|
|||
|
|
uni.showToast({ title: '更新包下载失败', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
plus.runtime.install(result.tempFilePath, {}, () => {}, (error) => {
|
|||
|
|
uni.showModal({ title: '安装失败', content: error.message || '请允许安装未知来源应用后重试', showCancel: false })
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: () => uni.showToast({ title: '更新包下载失败，请检查网络', icon: 'none' }),
|
|||
|
|
complete: () => uni.hideLoading()
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
this.openReleasePage(downloadUrl)
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
openReleasePage(url) {
|
|||
|
|
const releaseUrl = url || 'https://gitee.com/li-hua-88/scanapp/releases/latest'
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
plus.runtime.openURL(releaseUrl)
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
window.location.href = releaseUrl
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
clearBusinessCache() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '清理缓存',
|
|||
|
|
content: '将清理扫码业务缓存，保留登录状态和当前设置，是否继续？',
|
|||
|
|
confirmText: '清理',
|
|||
|
|
confirmColor: '#1677ff',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (!res.confirm) return
|
|||
|
|
const protectedKeys = new Set(['scanapp_token', 'scanapp_refresh_token', 'scanapp_user'])
|
|||
|
|
const storageInfo = uni.getStorageInfoSync()
|
|||
|
|
;(storageInfo.keys || []).forEach((key) => {
|
|||
|
|
const isSettingsKey = key === 'scanapp_settings' || key.indexOf('scanapp_settings_') === 0
|
|||
|
|
if (key.indexOf('scanapp_') === 0 && !protectedKeys.has(key) && !isSettingsKey) {
|
|||
|
|
uni.removeStorageSync(key)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.showToast({ title: '缓存已清理', icon: 'success' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
resetSettings() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '恢复默认设置',
|
|||
|
|
content: '所有设置项将恢复为默认值，是否继续？',
|
|||
|
|
confirmText: '恢复',
|
|||
|
|
confirmColor: '#1677ff',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (!res.confirm) return
|
|||
|
|
this.settings = { ...this.defaultSettings, scanRegion: { ...this.defaultSettings.scanRegion } }
|
|||
|
|
this.saveSettings()
|
|||
|
|
applyAppTheme(this.settings.theme)
|
|||
|
|
uni.showToast({ title: '已恢复默认设置', icon: 'success' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectScanInterval() {
|
|||
|
|
this.showSettingOptions('连续扫码时间间隔', this.intervalOptions.map((item) => `${item}S`), (index) => {
|
|||
|
|
this.settings.scanInterval = this.intervalOptions[index]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectScanRegionPreset() {
|
|||
|
|
this.showSettingOptions('有效识别区域', this.scanRegionPresets.map((item) => item.label), (index) => {
|
|||
|
|
const preset = this.scanRegionPresets[index]
|
|||
|
|
if (!preset) return
|
|||
|
|
this.settings.scanRegionPreset = preset.key
|
|||
|
|
if (preset.key === 'fullscreen') {
|
|||
|
|
this.settings.scanRegion = { fullScreen: true }
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (preset.key === 'qrcode') {
|
|||
|
|
this.settings.scanRegion = { width: 0.74, height: 0.74, centerX: 0.5, centerY: 0.5 }
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const position = this.scanRegionPositions.find((item) => item.key === this.settings.scanRegionPosition) || this.scanRegionPositions[1]
|
|||
|
|
const height = this.scanRegionHeights.find((item) => item.key === this.settings.scanRegionHeight) || this.scanRegionHeights[0]
|
|||
|
|
this.settings.scanRegion = { width: 0.96, height: height.height, centerX: 0.5, centerY: position.centerY || 0.5 }
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectScanRegionPosition() {
|
|||
|
|
this.showSettingOptions('横向条码框位置', this.scanRegionPositions.map((item) => item.label), (index) => {
|
|||
|
|
const position = this.scanRegionPositions[index]
|
|||
|
|
if (!position) return
|
|||
|
|
this.settings.scanRegionPosition = position.key
|
|||
|
|
if (position.key !== 'custom') this.settings.scanRegion.centerY = position.centerY
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectScanRegionHeight() {
|
|||
|
|
this.showSettingOptions('扫描框高度', this.scanRegionHeights.map((item) => item.label), (index) => {
|
|||
|
|
const height = this.scanRegionHeights[index]
|
|||
|
|
if (!height) return
|
|||
|
|
this.settings.scanRegionHeight = height.key
|
|||
|
|
this.settings.scanRegion.height = height.height
|
|||
|
|
const minCenterY = height.height / 2
|
|||
|
|
this.settings.scanRegion.centerY = Math.max(minCenterY, Math.min(1 - minCenterY, Number(this.settings.scanRegion.centerY || 0.5)))
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
adjustCustomScanRegion() {
|
|||
|
|
this.showSettingOptions('调整自定义位置', ['上移 5%', '下移 5%'], (index) => {
|
|||
|
|
const delta = index === 0 ? -0.05 : 0.05
|
|||
|
|
const height = Number(this.settings.scanRegion.height || 0.24)
|
|||
|
|
const minCenterY = height / 2
|
|||
|
|
const maxCenterY = 1 - minCenterY
|
|||
|
|
this.settings.scanRegion.centerY = Math.max(minCenterY, Math.min(maxCenterY, Number((Number(this.settings.scanRegion.centerY || 0.5) + delta).toFixed(2))))
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
regionPercent(value) {
|
|||
|
|
return Math.round(Number(value || 0) * 100)
|
|||
|
|
},
|
|||
|
|
selectTheme() {
|
|||
|
|
this.showSettingOptions('主题模式', ['浅色模式', '深色模式'], (index) => {
|
|||
|
|
this.settings.theme = index === 0 ? 'light' : 'dark'
|
|||
|
|
applyAppTheme(this.settings.theme)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectLanguage() {
|
|||
|
|
this.showSettingOptions('语言', ['简体中文', 'English'], (index) => {
|
|||
|
|
this.settings.language = index === 0 ? 'zh' : 'en'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectUploadMode() {
|
|||
|
|
this.showSettingOptions('图片上传方式', ['仅 Wi-Fi', '任意网络'], (index) => {
|
|||
|
|
this.settings.uploadMode = index === 0 ? 'wifi' : 'all'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
selectCacheDays() {
|
|||
|
|
this.showSettingOptions('历史缓存保留', this.cacheDayOptions.map((item) => `${item} 天`), (index) => {
|
|||
|
|
this.settings.cacheDays = this.cacheDayOptions[index]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showSettingOptions(title, itemList, onSelect) {
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
title,
|
|||
|
|
itemList,
|
|||
|
|
success: (res) => onSelect(res.tapIndex)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goFeedback() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/settings/feedback'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goAbout() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/settings/about'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
toggleAutoSave() {
|
|||
|
|
this.settings.autoSave = !this.settings.autoSave
|
|||
|
|
},
|
|||
|
|
showMockToast(title) {
|
|||
|
|
uni.showToast({ title, icon: 'none' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
scanRegionPresetLabel() {
|
|||
|
|
return this.scanRegionPresets.find((item) => item.key === this.settings.scanRegionPreset)?.label || '横向条码框'
|
|||
|
|
},
|
|||
|
|
scanRegionPositionLabel() {
|
|||
|
|
return this.scanRegionPositions.find((item) => item.key === this.settings.scanRegionPosition)?.label || '居中'
|
|||
|
|
},
|
|||
|
|
scanRegionHeightLabel() {
|
|||
|
|
return this.scanRegionHeights.find((item) => item.key === this.settings.scanRegionHeight)?.label || '中（24%）'
|
|||
|
|
},
|
|||
|
|
scanRegionSummary() {
|
|||
|
|
if (this.settings.scanRegionPreset === 'fullscreen') return '整画面识别，不显示扫描框'
|
|||
|
|
const region = this.settings.scanRegion || {}
|
|||
|
|
return `宽 ${this.regionPercent(region.width)}% · 高 ${this.regionPercent(region.height)}% · 中心 ${this.regionPercent(region.centerX)}%, ${this.regionPercent(region.centerY)}%`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.settings-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 0 22rpx 40rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: linear-gradient(180deg, #eaf2ff 0%, #f6f8fd 18%, #f4f7fb 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-accent {
|
|||
|
|
height: 10rpx;
|
|||
|
|
margin: 0 -22rpx 18rpx;
|
|||
|
|
background: linear-gradient(90deg, #2f6cf6 0%, #35bfa3 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settings-card {
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
padding: 30rpx 26rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
box-shadow: 0 14rpx 32rpx rgba(24, 37, 68, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
margin-bottom: 14rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
display: block;
|
|||
|
|
color: #8a94a6;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-subtitle {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
color: #c1c7d0;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
line-height: 1.35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-row,
|
|||
|
|
.action-list .setting-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 18rpx;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #eef1f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-row:last-child,
|
|||
|
|
.action-list .setting-row:last-child {
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
border-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-main {
|
|||
|
|
min-width: 0;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-label {
|
|||
|
|
display: block;
|
|||
|
|
color: #17233d;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-desc {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
color: #8f98a8;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-right {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
flex: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-row :deep(.u-switch) {
|
|||
|
|
transform: scale(0.82);
|
|||
|
|
transform-origin: right center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value-line {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.setting-value {
|
|||
|
|
color: #5f6b7a;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tappable {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-tip {
|
|||
|
|
margin-top: 18rpx;
|
|||
|
|
padding: 0 8rpx;
|
|||
|
|
color: #9aa4b4;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark {
|
|||
|
|
background: #151923;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .settings-card {
|
|||
|
|
background: #222936;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .card-title,
|
|||
|
|
.theme-dark .setting-desc,
|
|||
|
|
.theme-dark .footer-tip {
|
|||
|
|
color: #aeb9ca;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .card-subtitle {
|
|||
|
|
color: #718096;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .setting-label {
|
|||
|
|
color: #f2f5fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .setting-value {
|
|||
|
|
color: #c6d0df;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .setting-row,
|
|||
|
|
.theme-dark .action-list .setting-row {
|
|||
|
|
border-bottom-color: #343e4d;
|
|||
|
|
}
|
|||
|
|
.theme-dark.settings-page {
|
|||
|
|
background: #151923;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .settings-card {
|
|||
|
|
border-color: #364152;
|
|||
|
|
background: #222936;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .card-title,
|
|||
|
|
.theme-dark .setting-label {
|
|||
|
|
color: #f2f5fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .card-subtitle,
|
|||
|
|
.theme-dark .setting-desc,
|
|||
|
|
.theme-dark .footer-tip {
|
|||
|
|
color: #aeb9ca;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .setting-value {
|
|||
|
|
color: #d7deea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.theme-dark .setting-row,
|
|||
|
|
.theme-dark .action-list .setting-row {
|
|||
|
|
border-color: #364152;
|
|||
|
|
}
|
|||
|
|
</style>
|