<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>
|
|
<!-- displayFields 类型设置项（点击打开弹窗） -->
|
<view slot="value" v-else-if="item.type === 'displayFields'" @tap="openFieldsPopup(item.key)">
|
<text style="color: #909399; font-size: 26rpx;">{{ $t('settings.manageFields') }} ▶</text>
|
</view>
|
</u-cell>
|
</u-cell-group>
|
</view>
|
|
<!-- 字段管理弹窗 -->
|
<u-popup
|
:show="showFieldsPopup"
|
mode="bottom"
|
round="12"
|
@close="showFieldsPopup = false"
|
>
|
<view class="fields-popup">
|
<view class="fields-popup-header">
|
<text class="fields-popup-title">{{ $t('settings.containerBindingFields') }}</text>
|
<text class="fields-popup-restore" @tap="restoreDefaultFields">{{ $t('settings.restoreDefault') }}</text>
|
</view>
|
|
<!-- 已配置字段列表 -->
|
<view class="fields-list">
|
<view
|
class="field-item"
|
v-for="(field, idx) in editingFields"
|
:key="idx"
|
>
|
<view class="field-info">
|
<text class="field-name">{{ field.field }}</text>
|
<text class="field-label">{{ $t(field.label) }}<text v-if="editingFieldsKey.indexOf('Edit') > -1"> ({{ field.type || 'text' }})</text></text>
|
</view>
|
<u-icon
|
name="minus-circle-fill"
|
color="#f56c6c"
|
size="22"
|
@click="removeField(idx)"
|
></u-icon>
|
</view>
|
</view>
|
|
<!-- 添加新字段 -->
|
<view class="add-field-section">
|
<view class="add-field-row">
|
<u--input
|
v-model="newFieldName"
|
:placeholder="$t('settings.fieldName')"
|
border="surround"
|
customStyle="flex: 1; margin-right: 16rpx;"
|
></u--input>
|
<u--input
|
v-model="newFieldLabel"
|
:placeholder="$t('settings.fieldLabel')"
|
border="surround"
|
customStyle="flex: 1;"
|
></u--input>
|
</view>
|
<view class="add-field-row" v-if="editingFieldsKey.indexOf('Edit') > -1" style="margin-top: 16rpx; padding: 16rpx 20rpx; background-color: #f5f7fa; border-radius: 8rpx;">
|
<text style="font-size: 26rpx; color: #606266; margin-right: 16rpx;">{{ $t('settings.fieldType') }}</text>
|
<u-radio-group v-model="newFieldType" placement="row">
|
<u-radio label="text" name="text" customStyle="margin-right: 30rpx;"></u-radio>
|
<u-radio label="number" name="number"></u-radio>
|
</u-radio-group>
|
</view>
|
<u-button
|
type="primary"
|
size="small"
|
:text="$t('settings.addField')"
|
@click="addField"
|
customStyle="margin-top: 30rpx;"
|
></u-button>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="fields-popup-footer">
|
<u-button
|
:text="$t('common.cancel')"
|
@click="showFieldsPopup = false"
|
customStyle="flex: 1; margin-right: 20rpx;"
|
></u-button>
|
<u-button
|
type="primary"
|
:text="$t('common.confirm')"
|
@click="saveFields"
|
customStyle="flex: 1;"
|
></u-button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
appSettings: {
|
orderReviewRequired: false,
|
orderPakinRequiresMainList: false,
|
orderDetlMultiSelect: false,
|
orderCombNeedSplit: true,
|
orderCombSeparator: ';',
|
orderCombArrayIndex: 0,
|
orderCombStartPos: 3,
|
containerBindingFields: [
|
{ field: 'maktx', label: 'container.matName' },
|
{ field: 'specs', label: 'container.matSpec' },
|
{ field: 'batch', label: 'container.matBatch' },
|
{ field: 'anfme', label: 'container.matQty' }
|
],
|
containerBindingEditFields: [
|
{ field: 'batch', label: 'container.matBatch', type: 'text' },
|
{ field: 'anfme', label: 'container.matQty', type: 'number' }
|
]
|
},
|
showFieldsPopup: false,
|
editingFieldsKey: '',
|
editingFields: [],
|
newFieldName: '',
|
newFieldLabel: '',
|
newFieldType: 'text',
|
defaultFieldsMap: {
|
containerBindingFields: [
|
{ field: 'maktx', label: 'container.matName' },
|
{ field: 'specs', label: 'container.matSpec' },
|
{ field: 'batch', label: 'container.matBatch' },
|
{ field: 'anfme', label: 'container.matQty' }
|
],
|
containerBindingEditFields: [
|
{ field: 'batch', label: 'container.matBatch', type: 'text' },
|
{ field: 'anfme', label: 'container.matQty', type: 'number' }
|
]
|
}
|
}
|
},
|
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'
|
},
|
{
|
key: 'containerBindingFields',
|
title: this.$t('settings.containerBindingFields'),
|
iconName: 'grid-fill',
|
iconBgColor: 'bg-green',
|
type: 'displayFields'
|
},
|
{
|
key: 'containerBindingEditFields',
|
title: this.$t('settings.containerBindingEditFields'),
|
iconName: 'edit-pen-fill',
|
iconBgColor: 'bg-yellow',
|
type: 'displayFields'
|
}
|
]
|
}
|
},
|
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)
|
},
|
openFieldsPopup(key) {
|
this.editingFieldsKey = key
|
this.editingFields = JSON.parse(JSON.stringify(this.appSettings[key] || []))
|
this.newFieldName = ''
|
this.newFieldLabel = ''
|
this.newFieldType = 'text'
|
this.showFieldsPopup = true
|
},
|
removeField(idx) {
|
this.editingFields.splice(idx, 1)
|
},
|
addField() {
|
if (!this.newFieldName || !this.newFieldLabel) {
|
uni.showToast({ title: this.$t('settings.fieldRequired'), icon: 'none' })
|
return
|
}
|
this.editingFields.push({
|
field: this.newFieldName,
|
label: this.newFieldLabel,
|
type: this.newFieldType || 'text'
|
})
|
this.newFieldName = ''
|
this.newFieldLabel = ''
|
this.newFieldType = 'text'
|
},
|
restoreDefaultFields() {
|
var defaults = this.defaultFieldsMap[this.editingFieldsKey]
|
if (defaults) {
|
this.editingFields = JSON.parse(JSON.stringify(defaults))
|
}
|
},
|
saveFields() {
|
this.appSettings[this.editingFieldsKey] = JSON.parse(JSON.stringify(this.editingFields))
|
this.saveSettings()
|
this.showFieldsPopup = false
|
}
|
}
|
}
|
</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;
|
}
|
|
/* 字段管理弹窗样式 */
|
.fields-popup {
|
padding: 40rpx 30rpx;
|
max-height: 70vh;
|
}
|
|
.fields-popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
}
|
|
.fields-popup-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.fields-popup-restore {
|
font-size: 26rpx;
|
color: #409eff;
|
}
|
|
.fields-list {
|
max-height: 400rpx;
|
overflow-y: auto;
|
margin-bottom: 30rpx;
|
}
|
|
.field-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 16rpx;
|
background-color: #f5f7fa;
|
border-radius: 8rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.field-info {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.field-name {
|
font-size: 28rpx;
|
color: #303133;
|
font-weight: 500;
|
}
|
|
.field-label {
|
font-size: 24rpx;
|
color: #909399;
|
margin-top: 4rpx;
|
}
|
|
.add-field-section {
|
padding: 20rpx 0;
|
border-top: 1px solid #ebeef5;
|
}
|
|
.add-field-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.fields-popup-footer {
|
display: flex;
|
margin-top: 30rpx;
|
}
|
</style>
|
