docs: 添加分销商相关功能说明文档

- 新增分销商提现弹窗优化说明文档
- 新增分销商申请页面异常修复说明文档
- 新增分销商设置弹窗优化说明文档
- 新增分销商资金流动弹窗优化说明文档
- 新增分销海报功能说明文档

src/views/shop/shopDealerCapital/components/shopDealerCapitalEdit.vue

@@ -1,11 +1,11 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="900"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑分销商资金明细表' : '添加分销商资金明细表'"
+    :title="isUpdate ? '编辑资金流动记录' : '新增资金流动记录'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -14,60 +14,128 @@
       ref="formRef"
       :model="form"
       :rules="rules"
-      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
-      :wrapper-col="
-        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
-      "
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
     >
-      <a-form-item label="分销商用户ID" name="userId">
-        <a-input
-          allow-clear
-          placeholder="请输入分销商用户ID"
-          v-model:value="form.userId"
-        />
-      </a-form-item>
-      <a-form-item label="订单ID" name="orderId">
-        <a-input
-          allow-clear
-          placeholder="请输入订单ID"
-          v-model:value="form.orderId"
-        />
-      </a-form-item>
-      <a-form-item label="资金流动类型 (10佣金收入 20提现支出 30转账支出 40转账收入)" name="flowType">
-        <a-input
-          allow-clear
-          placeholder="请输入资金流动类型 (10佣金收入 20提现支出 30转账支出 40转账收入)"
-          v-model:value="form.flowType"
-        />
-      </a-form-item>
-      <a-form-item label="金额" name="money">
-        <a-input
-          allow-clear
-          placeholder="请输入金额"
-          v-model:value="form.money"
-        />
-      </a-form-item>
-      <a-form-item label="描述" name="describe">
-        <a-input
-          allow-clear
-          placeholder="请输入描述"
+      <!-- 基本信息 -->
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600;">基本信息</span>
+      </a-divider>
+
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="分销商用户ID" name="userId">
+            <a-input-number
+              :min="1"
+              placeholder="请输入分销商用户ID"
+              v-model:value="form.userId"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="订单ID" name="orderId">
+            <a-input-number
+              :min="1"
+              placeholder="请输入订单ID（可选）"
+              v-model:value="form.orderId"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 资金流动信息 -->
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600;">资金流动信息</span>
+      </a-divider>
+
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="流动类型" name="flowType">
+            <a-select v-model:value="form.flowType" placeholder="请选择资金流动类型">
+              <a-select-option :value="10">
+                <div class="flow-type-option">
+                  <a-tag color="success">佣金收入</a-tag>
+                  <span>获得分销佣金</span>
+                </div>
+              </a-select-option>
+              <a-select-option :value="20">
+                <div class="flow-type-option">
+                  <a-tag color="warning">提现支出</a-tag>
+                  <span>申请提现</span>
+                </div>
+              </a-select-option>
+              <a-select-option :value="30">
+                <div class="flow-type-option">
+                  <a-tag color="error">转账支出</a-tag>
+                  <span>转账给他人</span>
+                </div>
+              </a-select-option>
+              <a-select-option :value="40">
+                <div class="flow-type-option">
+                  <a-tag color="processing">转账收入</a-tag>
+                  <span>收到转账</span>
+                </div>
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="金额" name="money">
+            <a-input-number
+              :min="0"
+              :precision="2"
+              placeholder="请输入金额"
+              v-model:value="form.money"
+              style="width: 100%"
+            >
+              <template #addonAfter>元</template>
+            </a-input-number>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item label="流动描述" name="describe">
+        <a-textarea
           v-model:value="form.describe"
+          placeholder="请输入资金流动描述"
+          :rows="3"
+          :maxlength="200"
+          show-count
         />
       </a-form-item>
-      <a-form-item label="对方用户ID" name="toUserId">
-        <a-input
-          allow-clear
+
+      <!-- 关联信息 -->
+      <a-divider orientation="left">
+        <span style="color: #1890ff; font-weight: 600;">关联信息</span>
+      </a-divider>
+
+      <a-form-item
+        label="对方用户ID"
+        name="toUserId"
+        v-if="form.flowType === 30 || form.flowType === 40"
+      >
+        <a-input-number
+          :min="1"
           placeholder="请输入对方用户ID"
           v-model:value="form.toUserId"
+          style="width: 300px"
         />
+        <span style="margin-left: 12px; color: #999; font-size: 12px;">
+          转账相关操作需要填写对方用户ID
+        </span>
       </a-form-item>
-      <a-form-item label="修改时间" name="updateTime">
-        <a-input
-          allow-clear
-          placeholder="请输入修改时间"
-          v-model:value="form.updateTime"
+
+      <!-- 金额预览 -->
+      <div class="amount-preview" v-if="form.money && form.flowType">
+        <a-alert
+          :type="getAmountAlertType()"
+          :message="getAmountPreviewText()"
+          show-icon
+          style="margin-top: 16px"
         />
-      </a-form-item>
+      </div>
     </a-form>
   </ele-modal>
 </template>
@@ -111,23 +179,18 @@
   const formRef = ref<FormInstance | null>(null);
   const images = ref<ItemType[]>([]);
 
-  // 用户信息
+  // 表单数据
   const form = reactive<ShopDealerCapital>({
     id: undefined,
     userId: undefined,
     orderId: undefined,
     flowType: undefined,
     money: undefined,
-    describe: undefined,
+    describe: '',
     toUserId: undefined,
     tenantId: undefined,
     createTime: undefined,
-    updateTime: undefined,
-    shopDealerCapitalId: undefined,
-    shopDealerCapitalName: '',
-    status: 0,
-    comments: '',
-    sortNumber: 100
+    updateTime: undefined
   });
 
   /* 更新visible */
@@ -137,28 +200,94 @@
 
   // 表单验证规则
   const rules = reactive({
-    shopDealerCapitalName: [
+    userId: [
       {
         required: true,
-        type: 'string',
-        message: '请填写分销商资金明细表名称',
+        message: '请输入分销商用户ID',
+        trigger: 'blur'
+      }
+    ],
+    flowType: [
+      {
+        required: true,
+        message: '请选择资金流动类型',
+        trigger: 'change'
+      }
+    ],
+    money: [
+      {
+        required: true,
+        message: '请输入金额',
+        trigger: 'blur'
+      },
+      {
+        validator: (rule: any, value: any) => {
+          if (value && value <= 0) {
+            return Promise.reject('金额必须大于0');
+          }
+          return Promise.resolve();
+        },
+        trigger: 'blur'
+      }
+    ],
+    describe: [
+      {
+        required: true,
+        message: '请输入流动描述',
+        trigger: 'blur'
+      },
+      {
+        min: 2,
+        max: 200,
+        message: '描述长度应在2-200个字符之间',
+        trigger: 'blur'
+      }
+    ],
+    toUserId: [
+      {
+        validator: (rule: any, value: any) => {
+          if ((form.flowType === 30 || form.flowType === 40) && !value) {
+            return Promise.reject('转账操作必须填写对方用户ID');
+          }
+          return Promise.resolve();
+        },
         trigger: 'blur'
       }
     ]
   });
 
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-    form.image = data.path;
+  /* 获取金额预览提示类型 */
+  const getAmountAlertType = () => {
+    if (!form.flowType) return 'info';
+
+    switch (form.flowType) {
+      case 10: // 佣金收入
+      case 40: // 转账收入
+        return 'success';
+      case 20: // 提现支出
+      case 30: // 转账支出
+        return 'warning';
+      default:
+        return 'info';
+    }
   };
 
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-    form.image = '';
+  /* 获取金额预览文本 */
+  const getAmountPreviewText = () => {
+    if (!form.money || !form.flowType) return '';
+
+    const amount = parseFloat(form.money.toString()).toFixed(2);
+    const flowTypeMap = {
+      10: '佣金收入',
+      20: '提现支出',
+      30: '转账支出',
+      40: '转账收入'
+    };
+
+    const flowTypeName = flowTypeMap[form.flowType] || '未知类型';
+    const symbol = form.flowType === 10 || form.flowType === 40 ? '+' : '-';
+
+    return `${flowTypeName}：${symbol}¥${amount}`;
   };
 
   const { resetFields } = useForm(form, rules);
@@ -195,18 +324,23 @@
     () => props.visible,
     (visible) => {
       if (visible) {
-        images.value = [];
         if (props.data) {
           assignObject(form, props.data);
-          if(props.data.image){
-            images.value.push({
-              uid: uuid(),
-              url: props.data.image,
-              status: 'done'
-            })
-          }
           isUpdate.value = true;
         } else {
+          // 重置为默认值
+          Object.assign(form, {
+            id: undefined,
+            userId: undefined,
+            orderId: undefined,
+            flowType: undefined,
+            money: undefined,
+            describe: '',
+            toUserId: undefined,
+            tenantId: undefined,
+            createTime: undefined,
+            updateTime: undefined
+          });
           isUpdate.value = false;
         }
       } else {
@@ -216,3 +350,49 @@
     { immediate: true }
   );
 </script>
+
+<style lang="less" scoped>
+.flow-type-option {
+  display: flex;
+  align-items: center;
+
+  .ant-tag {
+    margin-right: 8px;
+  }
+
+  span {
+    color: #666;
+    font-size: 12px;
+  }
+}
+
+.amount-preview {
+  :deep(.ant-alert) {
+    .ant-alert-message {
+      font-weight: 600;
+      font-size: 14px;
+    }
+  }
+}
+
+:deep(.ant-divider-horizontal.ant-divider-with-text-left) {
+  margin: 24px 0 16px 0;
+
+  .ant-divider-inner-text {
+    padding: 0 16px 0 0;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.ant-select-selection-item) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.ant-input-number) {
+  width: 100%;
+}
+</style>

src/views/shop/shopDealerCapital/index.vue

@@ -100,47 +100,83 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '主键ID',
+      title: 'ID',
       dataIndex: 'id',
       key: 'id',
       align: 'center',
-      width: 90,
+      width: 80,
+      fixed: 'left'
     },
     {
-      title: '分销商用户ID',
+      title: '用户ID',
       dataIndex: 'userId',
       key: 'userId',
       align: 'center',
+      width: 100,
+      fixed: 'left'
     },
     {
-      title: '订单ID',
-      dataIndex: 'orderId',
-      key: 'orderId',
-      align: 'center',
-    },
-    {
-      title: '资金流动类型 (10佣金收入 20提现支出 30转账支出 40转账收入)',
+      title: '流动类型',
       dataIndex: 'flowType',
       key: 'flowType',
       align: 'center',
+      width: 120,
+      customRender: ({ text }) => {
+        const typeMap = {
+          10: { text: '佣金收入', color: 'success' },
+          20: { text: '提现支出', color: 'warning' },
+          30: { text: '转账支出', color: 'error' },
+          40: { text: '转账收入', color: 'processing' }
+        };
+        const type = typeMap[text] || { text: '未知', color: 'default' };
+        return { type: 'tag', props: { color: type.color }, children: type.text };
+      }
     },
     {
       title: '金额',
       dataIndex: 'money',
       key: 'money',
       align: 'center',
+      width: 120,
+      customRender: ({ text, record }) => {
+        const amount = parseFloat(text || '0').toFixed(2);
+        const isIncome = record.flowType === 10 || record.flowType === 40;
+        return {
+          type: 'span',
+          props: {
+            style: {
+              color: isIncome ? '#52c41a' : '#ff4d4f',
+              fontWeight: 'bold'
+            }
+          },
+          children: `${isIncome ? '+' : '-'}¥${amount}`
+        };
+      }
+    },
+    {
+      title: '关联订单',
+      dataIndex: 'orderId',
+      key: 'orderId',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => text || '-'
+    },
+    {
+      title: '对方用户',
+      dataIndex: 'toUserId',
+      key: 'toUserId',
+      align: 'center',
+      width: 100,
+      customRender: ({ text }) => text ? `ID: ${text}` : '-'
     },
     {
       title: '描述',
       dataIndex: 'describe',
       key: 'describe',
-      align: 'center',
-    },
-    {
-      title: '对方用户ID',
-      dataIndex: 'toUserId',
-      key: 'toUserId',
-      align: 'center',
+      align: 'left',
+      width: 200,
+      ellipsis: true,
+      customRender: ({ text }) => text || '-'
     },
     {
       title: '创建时间',