<template>
|
<view class="page-container">
|
<u-navbar
|
:title="$t('settings.title')"
|
:fixed="true"
|
:placeholder="true"
|
:autoBack="true"
|
bgColor="#ffffff"
|
titleStyle="font-weight: 600; color: #303133; font-size: 32rpx;"
|
></u-navbar>
|
|
<view class="content">
|
<u-cell-group :border="false">
|
<u-cell
|
v-for="(item, index) in settingsList"
|
:key="index"
|
:title="item.title"
|
:border="true"
|
size="large"
|
titleStyle="font-size: 30rpx; color: #333333;"
|
>
|
<view
|
slot="icon"
|
:class="['cell-icon-wrap', item.iconBgColor]"
|
>
|
<u-icon
|
:name="item.iconName"
|
color="#ffffff"
|
size="20"
|
></u-icon>
|
</view>
|
|
<!-- 开关类型设置项 -->
|
<view slot="value" v-if="item.type === 'switch'">
|
<u-switch
|
v-model="appSettings[item.key]"
|
@change="saveSettings"
|
size="24"
|
activeColor="#2979ff"
|
></u-switch>
|
</view>
|
|
<!-- 输入框类型设置项 -->
|
<view slot="value" v-else-if="item.type === 'input'" style="width: 200rpx;" @tap.stop>
|
<u--input
|
v-model="appSettings[item.key]"
|
@blur="saveSettings"
|
border="none"
|
inputAlign="right"
|
:placeholder="$t('settings.inputPlaceholder')"
|
></u--input>
|
</view>
|
|
<!-- 数字输入框类型设置项 -->
|
<view slot="value" v-else-if="item.type === 'number'" style="width: 200rpx;" @tap.stop>
|
<u--input
|
type="number"
|
v-model="appSettings[item.key]"
|
@blur="saveSettings"
|
border="none"
|
inputAlign="right"
|
:placeholder="$t('settings.inputPlaceholder')"
|
></u--input>
|
</view>
|
|
<!-- 图标/箭头类型（例如跳转其它设置页） -->
|
<!-- 可以根据需要扩展 v-else-if="item.type === 'link'" -->
|
</u-cell>
|
|
<!-- 如果需要配置更多设置项，可以参考下方的样式结构 -->
|
<!--
|
<u-cell
|
title="其他设置"
|
:border="true"
|
:isLink="true"
|
size="large"
|
titleStyle="font-size: 30rpx; color: #333333;"
|
>
|
<view slot="icon" class="cell-icon-wrap bg-yellow">
|
<u-icon name="setting" color="#ffffff" size="20"></u-icon>
|
</view>
|
</u-cell>
|
-->
|
</u-cell-group>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
appSettings: {
|
orderReviewRequired: false,
|
orderPakinRequiresMainList: false,
|
orderDetlMultiSelect: false,
|
orderCombNeedSplit: true,
|
orderCombSeparator: ';',
|
orderCombArrayIndex: 0,
|
orderCombStartPos: 3
|
}
|
}
|
},
|
computed: {
|
settingsList() {
|
return [
|
{
|
key: 'orderReviewRequired',
|
title: this.$t('settings.orderReviewRequired'),
|
iconName: 'checkbox-mark',
|
iconBgColor: 'bg-blue',
|
type: 'switch'
|
},
|
{
|
key: 'orderPakinRequiresMainList',
|
title: this.$t('settings.orderPakinRequiresMainList'),
|
iconName: 'list',
|
iconBgColor: 'bg-green',
|
type: 'switch'
|
},
|
{
|
key: 'orderDetlMultiSelect',
|
title: this.$t('settings.orderDetlMultiSelect'),
|
iconName: 'list-dot',
|
iconBgColor: 'bg-yellow',
|
type: 'switch'
|
},
|
{
|
key: 'orderCombNeedSplit',
|
title: this.$t('settings.orderCombNeedSplit'),
|
iconName: 'cut',
|
iconBgColor: 'bg-blue',
|
type: 'switch'
|
},
|
{
|
key: 'orderCombSeparator',
|
title: this.$t('settings.orderCombSeparator'),
|
iconName: 'minus',
|
iconBgColor: 'bg-yellow',
|
type: 'input'
|
},
|
{
|
key: 'orderCombArrayIndex',
|
title: this.$t('settings.orderCombArrayIndex'),
|
iconName: 'grid-fill',
|
iconBgColor: 'bg-blue',
|
type: 'number'
|
},
|
{
|
key: 'orderCombStartPos',
|
title: this.$t('settings.orderCombStartPos'),
|
iconName: 'play-right-fill',
|
iconBgColor: 'bg-green',
|
type: 'number'
|
}
|
]
|
}
|
},
|
onShow() {
|
const settings = uni.getStorageSync('appSettings')
|
if (settings) {
|
this.appSettings = { ...this.appSettings, ...settings }
|
} else {
|
// 兼容或迁移旧的设置读取逻辑
|
const oldSetting = uni.getStorageSync('orderReviewRequired')
|
if (oldSetting !== '') {
|
this.appSettings.orderReviewRequired = oldSetting
|
this.saveSettings()
|
}
|
}
|
},
|
methods: {
|
saveSettings() {
|
uni.setStorageSync('appSettings', this.appSettings)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #f0f2f5;
|
}
|
|
.page-container {
|
min-height: 100vh;
|
background-color: #f0f2f5;
|
}
|
|
.content {
|
margin-top: 20rpx;
|
background-color: #ffffff;
|
}
|
|
/* 左侧图标外层方块背景 */
|
.cell-icon-wrap {
|
width: 52rpx;
|
height: 52rpx;
|
border-radius: 12rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 20rpx;
|
}
|
|
/* 定义几种颜色匹配截图里不同状态的图标底色 */
|
.bg-blue {
|
background-color: #7ec3fa;
|
}
|
|
.bg-yellow {
|
background-color: #f8c158;
|
}
|
|
.bg-green {
|
background-color: #63d98f;
|
}
|
</style>
|
