1

src/views/system/jdorder/components/DistributionMarkTouserConfig.vue

@@ -39,39 +39,45 @@
               :key="`config-${item.configId || item.configKey || index}-${index}`"
               class="config-item"
             >
-              <el-form-item label="分销标识" style="margin-bottom: 10px;">
+              <div class="form-field">
-                <el-input
+                <label class="field-label">分销标识</label>
-                  v-model="item.distributionMark"
+                <div class="field-content">
-                  placeholder="请输入分销标识（如：F、PDD、H-TF）"
+                  <el-input
-                  size="small"
+                    v-model="item.distributionMark"
-                  style="width: 200px;"
+                    placeholder="请输入分销标识（如：F、PDD、H-TF）"
-                  @blur="handleDistributionMarkChange(item, index)"
+                    size="small"
-                />
+                    style="width: 200px;"
-                <el-button
+                    @blur="handleDistributionMarkChange(item, index)"
-                  type="danger"
+                  />
-                  size="mini"
+                  <el-button
-                  icon="el-icon-delete"
+                    type="danger"
-                  @click="handleRemoveConfig(index)"
+                    size="mini"
-                  style="margin-left: 10px;"
+                    icon="el-icon-delete"
-                >
+                    @click="handleRemoveConfig(index)"
-                  删除
+                    style="margin-left: 10px;"
-                </el-button>
+                  >
-              </el-form-item>
+                    删除
-              <el-form-item label="接收人列表" style="margin-bottom: 8px;">
+                  </el-button>
-                <el-input
-                  v-model="item.touser"
-                  placeholder="请输入接收人列表，多个用逗号分隔（如：abc,bcd,efg）"
-                  size="small"
-                />
-                <div class="item-hint">
-                  <i class="el-icon-info"></i>
-                  配置说明：当订单的分销标识为"{{ item.distributionMark || '分销标识' }}"时，将发送给这些接收人
                 </div>
-                <div class="item-hint" style="margin-top: 4px;">
+              </div>
-                  <i class="el-icon-key"></i>
+              <div class="form-field">
-                  配置键名：logistics.push.touser.{{ item.distributionMark || '分销标识' }}
+                <label class="field-label">接收人列表</label>
+                <div class="field-content">
+                  <el-input
+                    v-model="item.touser"
+                    placeholder="请输入接收人列表，多个用逗号分隔（如：abc,bcd,efg）"
+                    size="small"
+                  />
+                  <div class="item-hint">
+                    <i class="el-icon-info"></i>
+                    配置说明：当订单的分销标识为"{{ item.distributionMark || '分销标识' }}"时，将发送给这些接收人
+                  </div>
+                  <div class="item-hint" style="margin-top: 4px;">
+                    <i class="el-icon-key"></i>
+                    配置键名：logistics.push.touser.{{ item.distributionMark || '分销标识' }}
+                  </div>
                 </div>
-              </el-form-item>
+              </div>
             </div>
 
             <div v-if="configList.length === 0" class="empty-state">
@@ -535,6 +541,28 @@ export default {
   padding: 12px;
 }
 
+.form-field {
+  margin-bottom: 18px;
+}
+
+.form-field:last-child {
+  margin-bottom: 0;
+}
+
+.field-label {
+  display: block;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+  padding-bottom: 8px;
+  font-weight: normal;
+}
+
+.field-content {
+  display: block;
+  width: 100%;
+}
+
 .item-header {
   display: flex;
   align-items: center;