1

app/components/DeliverySettings.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="settings-section">
+    <div class="settings-form-horizontal">
+      <div class="form-row">
+        <div class="form-item">
+          <label class="form-label">自动投递：</label>
+          <ToggleSwitch v-model="config.autoDelivery" @change="updateConfig('autoDelivery', $event)" />
+          <span class="switch-label">{{ config.autoDelivery ? '开启' : '关闭' }}</span>
+        </div>
+
+        <div class="form-item">
+          <label class="form-label">投递开始时间：</label>
+          <InputText type="time" :value="config.startTime" @input="updateConfig('startTime', $event.target.value)" class="form-input" />
+        </div>
+
+        <div class="form-item">
+          <label class="form-label">投递结束时间：</label>
+          <InputText type="time" :value="config.endTime" @input="updateConfig('endTime', $event.target.value)" class="form-input" />
+        </div>
+
+        <div class="form-item">
+          <label class="form-label">是否仅工作日：</label>
+          <Select
+            v-model="config.workdaysOnly"
+            :options="workdaysOptions"
+            optionLabel="label"
+            optionValue="value"
+            @change="updateConfig('workdaysOnly', $event.value)"
+            class="form-input"
+          />
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import ToggleSwitch from 'primevue/toggleswitch';
+import InputText from 'primevue/inputtext';
+import Select from 'primevue/select';
+import logMixin from '../mixins/logMixin.js';
+
+export default {
+  name: 'DeliverySettings',
+  mixins: [logMixin],
+  components: {
+    ToggleSwitch,
+    InputText,
+    Select
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      workdaysOptions: [
+        { label: '全部日期', value: false },
+        { label: '仅工作日', value: true }
+      ]
+    };
+  },
+  methods: {
+    ...mapActions('delivery', ['updateDeliveryConfig', 'saveDeliveryConfig']),
+    updateConfig(key, value) {
+      // ToggleSwitch 的 change 事件传递的是布尔值
+      const boolValue = typeof value === 'boolean' ? value : (value?.value !== undefined ? value.value : value);
+      this.updateDeliveryConfig({ key, value: boolValue });
+    },
+    async handleSave() {
+      const result = await this.saveDeliveryConfig();
+      if (result && result.success) {
+        this.addLog('success', '投递配置已保存');
+      } else {
+        this.addLog('error', result?.error || '保存配置失败');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.settings-section {
+  margin-bottom: 30px;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.settings-form-horizontal {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .form-label {
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  
+  .form-input {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    
+    &:focus {
+      outline: none;
+      border-color: #4CAF50;
+    }
+  }
+  
+  .switch-label {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+@media (max-width: 768px) {
+  .form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .form-item {
+    justify-content: space-between;
+  }
+}
+</style>
+