diff --git a/src/api/mall/trade/brokerage/user/index.ts b/src/api/mall/trade/brokerage/user/index.ts
index 95f3a6a1..1fed3bfa 100644
--- a/src/api/mall/trade/brokerage/user/index.ts
+++ b/src/api/mall/trade/brokerage/user/index.ts
@@ -8,6 +8,9 @@ export interface BrokerageUserVO {
   brokerageTime: Date
   price: number
   frozenPrice: number
+
+  nickname: string
+  avatar: string
 }
 
 // 查询分销用户列表
@@ -19,3 +22,18 @@ export const getBrokerageUserPage = async (params: any) => {
 export const getBrokerageUser = async (id: number) => {
   return await request.get({ url: `/trade/brokerage-user/get?id=` + id })
 }
+
+// 修改推广员
+export const updateBindUser = async (data: any) => {
+  return await request.put({ url: `/trade/brokerage-user/update-bind-user`, data })
+}
+
+// 清除推广员
+export const clearBindUser = async (data: any) => {
+  return await request.put({ url: `/trade/brokerage-user/clear-bind-user`, data })
+}
+
+// 修改推广资格
+export const updateBrokerageEnabled = async (data: any) => {
+  return await request.put({ url: `/trade/brokerage-user/update-brokerage-enable`, data })
+}
diff --git a/src/api/mall/trade/brokerage/withdraw/index.ts b/src/api/mall/trade/brokerage/withdraw/index.ts
new file mode 100644
index 00000000..c93286a9
--- /dev/null
+++ b/src/api/mall/trade/brokerage/withdraw/index.ts
@@ -0,0 +1,39 @@
+import request from '@/config/axios'
+
+export interface BrokerageWithdrawVO {
+  id: number
+  userId: number
+  price: number
+  feePrice: number
+  totalPrice: number
+  type: number
+  name: string
+  accountNo: string
+  bankName: string
+  bankAddress: string
+  accountQrCodeUrl: string
+  status: number
+  auditReason: string
+  auditTime: Date
+  remark: string
+}
+
+// 查询佣金提现列表
+export const getBrokerageWithdrawPage = async (params: any) => {
+  return await request.get({ url: `/trade/brokerage-withdraw/page`, params })
+}
+
+// 查询佣金提现详情
+export const getBrokerageWithdraw = async (id: number) => {
+  return await request.get({ url: `/trade/brokerage-withdraw/get?id=` + id })
+}
+
+// 佣金提现 - 通过申请
+export const approveBrokerageWithdraw = async (id: number) => {
+  return await request.put({ url: `/trade/brokerage-withdraw/approve?id=` + id })
+}
+
+// 审核佣金提现 - 驳回申请
+export const rejectBrokerageWithdraw = async (data: BrokerageWithdrawVO) => {
+  return await request.put({ url: `/trade/brokerage-withdraw/reject`, data })
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 022d308c..6f3ded5c 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -299,3 +299,62 @@ export const BrokerageEnabledConditionEnum = {
     name: '指定分销'
   }
 }
+/**
+ * 佣金记录业务类型枚举
+ */
+export const BrokerageRecordBizTypeEnum = {
+  ORDER: {
+    type: 1,
+    name: '获得推广佣金'
+  },
+  WITHDRAW: {
+    type: 2,
+    name: '提现申请'
+  }
+}
+/**
+ * 佣金提现状态枚举
+ */
+export const BrokerageWithdrawStatusEnum = {
+  AUDITING: {
+    status: 0,
+    name: '审核中'
+  },
+  AUDIT_SUCCESS: {
+    status: 10,
+    name: '审核通过'
+  },
+  AUDIT_FAIL: {
+    status: 20,
+    name: '审核不通过'
+  },
+  WITHDRAW_SUCCESS: {
+    status: 11,
+    name: '提现成功'
+  },
+  WITHDRAW_FAIL: {
+    status: 21,
+    name: '提现失败'
+  }
+}
+/**
+ * 佣金提现类型枚举
+ */
+export const BrokerageWithdrawTypeEnum = {
+  WALLET: {
+    type: 1,
+    name: '钱包'
+  },
+  BANK: {
+    type: 2,
+    name: '银行卡'
+  },
+  WECHAT: {
+    type: 3,
+    name: '微信'
+  },
+  ALIPAY: {
+    type: 4,
+    name: '支付宝'
+  }
+}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index f898ed58..52b705b8 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -151,13 +151,6 @@ export enum DICT_TYPE {
   // ========== MALL - 会员模块 ==========
   MEMBER_POINT_BIZ_TYPE = 'member_point_biz_type', // 积分的业务类型
   MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
-  // TODO @疯狂：这块的枚举，是不是要挪到 TRADE 那啦
-  BROKERAGE_ENABLED_CONDITION = 'brokerage_enabled_condition', // 分佣模式
-  BROKERAGE_BIND_MODE = 'brokerage_bind_mode', // 分销关系绑定模式
-  BROKERAGE_BANK_NAME = 'brokerage_bank_name', // 佣金提现银行
-  BROKERAGE_WITHDRAW_TYPE = 'brokerage_withdraw_type', // 佣金冻结时间
-  BROKERAGE_RECORD_BIZ_TYPE = 'brokerage_record_biz_type', // 佣金业务类型
-  BROKERAGE_RECORD_STATUS = 'brokerage_record_status', // 佣金状态
 
   // ========== MALL - 商品模块 ==========
   PRODUCT_UNIT = 'product_unit', // 商品单位
@@ -172,6 +165,13 @@ export enum DICT_TYPE {
   TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
   TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
   TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
+  BROKERAGE_ENABLED_CONDITION = 'brokerage_enabled_condition', // 分佣模式
+  BROKERAGE_BIND_MODE = 'brokerage_bind_mode', // 分销关系绑定模式
+  BROKERAGE_BANK_NAME = 'brokerage_bank_name', // 佣金提现银行
+  BROKERAGE_WITHDRAW_TYPE = 'brokerage_withdraw_type', // 佣金冻结时间
+  BROKERAGE_RECORD_BIZ_TYPE = 'brokerage_record_biz_type', // 佣金业务类型
+  BROKERAGE_RECORD_STATUS = 'brokerage_record_status', // 佣金状态
+  BROKERAGE_WITHDRAW_STATUS = 'brokerage_withdraw_status', // 佣金提现状态
 
   // ========== MALL - 营销模块 ==========
   PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
diff --git a/src/views/infra/server/index.vue b/src/views/infra/server/index.vue
index 06c35d97..b9a157a5 100644
--- a/src/views/infra/server/index.vue
+++ b/src/views/infra/server/index.vue
@@ -16,6 +16,9 @@ const src = ref(import.meta.env.VITE_BASE_URL + '/admin/applications')
 /** 初始化 */
 onMounted(async () => {
   try {
+    // 友情提示：如果访问出现 404 问题：
+    // 1）boot 参考 https://doc.iocoder.cn/server-monitor/ 解决；
+    // 2）cloud 参考 https://cloud.iocoder.cn/server-monitor/ 解决
     const data = await ConfigApi.getConfigKey('url.spring-boot-admin')
     if (data && data.length > 0) {
       src.value = data
diff --git a/src/views/mall/trade/brokerage/record/index.vue b/src/views/mall/trade/brokerage/record/index.vue
index 0e62a778..f9cae4e1 100644
--- a/src/views/mall/trade/brokerage/record/index.vue
+++ b/src/views/mall/trade/brokerage/record/index.vue
@@ -65,6 +65,12 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" min-width="60" />
       <el-table-column label="用户编号" align="center" prop="userId" min-width="80" />
+      <el-table-column label="头像" align="center" prop="userAvatar" width="70px">
+        <template #default="scope">
+          <el-avatar :src="scope.row.userAvatar" />
+        </template>
+      </el-table-column>
+      <el-table-column label="昵称" align="center" prop="userNickname" min-width="80px" />
       <el-table-column label="业务类型" align="center" prop="bizType" min-width="85">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BROKERAGE_RECORD_BIZ_TYPE" :value="scope.row.bizType" />
@@ -72,7 +78,13 @@
       </el-table-column>
       <el-table-column label="业务编号" align="center" prop="bizId" min-width="80" />
       <el-table-column label="标题" align="center" prop="title" min-width="110" />
-      <el-table-column label="金额" align="center" prop="price" min-width="60" />
+      <el-table-column
+        label="金额"
+        align="center"
+        prop="price"
+        min-width="60"
+        :formatter="fenToYuanFormat"
+      />
       <el-table-column label="说明" align="center" prop="description" min-width="120" />
       <el-table-column label="状态" align="center" prop="status" min-width="85">
         <template #default="scope">
@@ -108,6 +120,7 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as BrokerageRecordApi from '@/api/mall/trade/brokerage/record'
+import { fenToYuanFormat } from '@/utils/formatter'
 
 defineOptions({ name: 'TradeBrokerageRecord' })
 
diff --git a/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
new file mode 100644
index 00000000..d2c0568f
--- /dev/null
+++ b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
@@ -0,0 +1,152 @@
+<template>
+  <Dialog v-model="dialogVisible" title="推广人列表" width="75%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="85px"
+      >
+        <el-form-item label="用户类型" prop="level">
+          <el-radio-group v-model="queryParams.level" @change="handleQuery">
+            <el-radio-button checked>全部</el-radio-button>
+            <el-radio-button label="1">一级推广人</el-radio-button>
+            <el-radio-button label="2">二级推广人</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="绑定时间" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="订单编号" align="center" prop="bizId" min-width="80px" />
+        <el-table-column label="用户编号" align="center" prop="sourceUserId" min-width="80px" />
+        <el-table-column label="头像" align="center" prop="sourceUserAvatar" width="70px">
+          <template #default="scope">
+            <el-avatar :src="scope.row.sourceUserAvatar" />
+          </template>
+        </el-table-column>
+        <el-table-column label="昵称" align="center" prop="sourceUserNickname" min-width="80px" />
+        <el-table-column
+          label="佣金"
+          align="center"
+          prop="price"
+          min-width="100px"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="状态" align="center" prop="status" min-width="85">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BROKERAGE_RECORD_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="170px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as BrokerageRecordApi from '@/api/mall/trade/brokerage/record'
+import { BrokerageRecordBizTypeEnum } from '@/utils/constants'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+/** 推广订单列表 */
+defineOptions({ name: 'BrokerageOrderListDialog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  bizType: BrokerageRecordBizTypeEnum.ORDER.type,
+  level: '',
+  createTime: [],
+  status: null
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 打开弹窗 */
+const dialogVisible = ref(false) // 弹窗的是否展示
+const open = async (userId: any) => {
+  dialogVisible.value = true
+  queryParams.userId = userId
+  resetQuery()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BrokerageRecordApi.getBrokerageRecordPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+</script>
diff --git a/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
new file mode 100644
index 00000000..2277cc01
--- /dev/null
+++ b/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
@@ -0,0 +1,137 @@
+<template>
+  <Dialog v-model="dialogVisible" title="推广人列表" width="75%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="85px"
+      >
+        <el-form-item label="用户类型" prop="level">
+          <el-radio-group v-model="queryParams.level" @change="handleQuery">
+            <el-radio-button checked>全部</el-radio-button>
+            <el-radio-button label="1">一级推广人</el-radio-button>
+            <el-radio-button label="2">二级推广人</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="绑定时间" prop="bindUserTime">
+          <el-date-picker
+            v-model="queryParams.bindUserTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="用户编号" align="center" prop="id" min-width="80px" />
+        <el-table-column label="头像" align="center" prop="avatar" width="70px">
+          <template #default="scope">
+            <el-avatar :src="scope.row.avatar" />
+          </template>
+        </el-table-column>
+        <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
+        <el-table-column
+          label="推广人数"
+          align="center"
+          prop="brokerageUserCount"
+          min-width="80px"
+        />
+        <el-table-column
+          label="推广订单数量"
+          align="center"
+          prop="brokerageOrderCount"
+          min-width="110px"
+        />
+        <el-table-column label="推广资格" align="center" prop="brokerageEnabled" min-width="80px">
+          <template #default="scope">
+            <el-tag v-if="scope.row.brokerageEnabled">有</el-tag>
+            <el-tag v-else type="info">无</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="绑定时间"
+          align="center"
+          prop="bindUserTime"
+          :formatter="dateFormatter"
+          width="170px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
+
+/** 推广人列表 */
+defineOptions({ name: 'BrokerageUserListDialog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  bindUserId: null,
+  level: '',
+  bindUserTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 打开弹窗 */
+const dialogVisible = ref(false) // 弹窗的是否展示
+const open = async (bindUserId: any) => {
+  dialogVisible.value = true
+  queryParams.bindUserId = bindUserId
+  resetQuery()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BrokerageUserApi.getBrokerageUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+</script>
diff --git a/src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue b/src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue
new file mode 100644
index 00000000..b4c04780
--- /dev/null
+++ b/src/views/mall/trade/brokerage/user/UpdateBindUserForm.vue
@@ -0,0 +1,127 @@
+<template>
+  <Dialog v-model="dialogVisible" title="修改上级推广人" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="推广人" prop="bindUserId">
+        <el-input
+          v-model="formData.bindUserId"
+          placeholder="请输入推广员编号"
+          v-loading="formLoading"
+        >
+          <template #append>
+            <el-button @click="handleGetUser"><Icon icon="ep:search" class="mr-5px" /></el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <el-descriptions v-if="bindUser" :column="1" border>
+      <el-descriptions-item label="头像">
+        <el-avatar :src="bindUser.avatar" />
+      </el-descriptions-item>
+      <el-descriptions-item label="昵称">{{ bindUser.nickname }}</el-descriptions-item>
+      <el-descriptions-item label="推广资格">
+        <el-tag v-if="bindUser.brokerageEnabled">有</el-tag>
+        <el-tag v-else type="info">无</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="成为推广员的时间">
+        {{ formatDate(bindUser.brokerageTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
+import { formatDate } from '@/utils/formatTime'
+
+/** 修改上级推广人表单 */
+defineOptions({ name: 'UpdateBindUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref()
+const formRef = ref() // 表单 Ref
+const formRules = reactive({
+  bindUserId: [{ required: true, message: '推广员人不能为空', trigger: 'blur' }]
+})
+
+/** 打开弹窗 */
+const open = async (row: BrokerageUserApi.BrokerageUserVO) => {
+  resetForm()
+  // 设置数据
+  formData.value.id = row.id
+  formData.value.bindUserId = row.bindUserId
+  // 反显上级推广人
+  if (row.bindUserId) {
+    await handleGetUser()
+  }
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+/** 修改上级推广人 */
+const submitForm = async () => {
+  if (formLoading.value) return
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  if (!bindUser.value) {
+    message.error('请先查询并确认推广人')
+    return
+  }
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 发起修改
+    await BrokerageUserApi.updateBindUser(formData.value)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: 0,
+    bindUserId: undefined
+  }
+  formRef.value?.resetFields()
+  bindUser.value = undefined
+}
+
+/** 查询推广员 */
+const bindUser = ref<BrokerageUserApi.BrokerageUserVO>()
+const handleGetUser = async () => {
+  if (formData.value.bindUserId == formData.value.id) {
+    message.error('不能绑定自己为推广人')
+    return
+  }
+
+  formLoading.value = true
+  bindUser.value = await BrokerageUserApi.getBrokerageUser(formData.value.bindUserId)
+  if (!bindUser.value) {
+    message.warning('推广员不存在')
+  }
+  formLoading.value = false
+}
+</script>
diff --git a/src/views/mall/trade/brokerage/user/index.vue b/src/views/mall/trade/brokerage/user/index.vue
index db59c52d..285c49ee 100644
--- a/src/views/mall/trade/brokerage/user/index.vue
+++ b/src/views/mall/trade/brokerage/user/index.vue
@@ -56,12 +56,7 @@
         </template>
       </el-table-column>
       <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
-      <el-table-column
-        label="推广用户数量（一级）"
-        align="center"
-        prop="brokerageUserCount"
-        min-width="110px"
-      />
+      <el-table-column label="推广人数" align="center" prop="brokerageUserCount" width="80px" />
       <el-table-column
         label="推广订单数量"
         align="center"
@@ -104,8 +99,8 @@
             active-text="有"
             inactive-text="无"
             inline-prompt
-            :disabled="!checkPermi(['trade:brokerage-user:update-brokerage-user'])"
-            @change="handleBrokerageEnabledChange(scope.row.id, !scope.row.brokerageEnabled)"
+            :disabled="!checkPermi(['trade:brokerage-user:update-bind-user'])"
+            @change="handleBrokerageEnabledChange(scope.row)"
           />
         </template>
       </el-table-column>
@@ -131,10 +126,14 @@
             v-hasPermi="[
               'trade:brokerage-user:user-query',
               'trade:brokerage-user:order-query',
-              'trade:brokerage-user:update-brokerage-user',
-              'trade:brokerage-user:clear-brokerage-user'
+              'trade:brokerage-user:update-bind-user',
+              'trade:brokerage-user:clear-bind-user'
             ]"
           >
+            <el-button link type="primary">
+              <Icon icon="ep:d-arrow-right" />
+              更多
+            </el-button>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
@@ -150,14 +149,16 @@
                   推广订单
                 </el-dropdown-item>
                 <el-dropdown-item
-                  command="openUpdateBindUser"
-                  v-if="checkPermi(['trade:brokerage-user:update-brokerage-user'])"
+                  command="openUpdateBindUserForm"
+                  v-if="checkPermi(['trade:brokerage-user:update-bind-user'])"
                 >
                   修改上级推广人
                 </el-dropdown-item>
                 <el-dropdown-item
-                  command="openClearBindUser"
-                  v-if="checkPermi(['trade:brokerage-user:clear-brokerage-user'])"
+                  command="handleClearBindUser"
+                  v-if="
+                    scope.row.bindUserId && checkPermi(['trade:brokerage-user:clear-bind-user'])
+                  "
                 >
                   清除上级推广人
                 </el-dropdown-item>
@@ -175,6 +176,12 @@
       @pagination="getList"
     />
   </ContentWrap>
+  <!-- 修改上级推广人表单 -->
+  <UpdateBindUserForm ref="updateBindUserFormRef" @success="getList" />
+  <!-- 推广人列表 -->
+  <BrokerageUserListDialog ref="brokerageUserListDialogRef" />
+  <!-- 推广订单列表 -->
+  <BrokerageOrderListDialog ref="brokerageOrderListDialogRef" />
 </template>
 
 <script setup lang="ts">
@@ -182,11 +189,13 @@ import { dateFormatter } from '@/utils/formatTime'
 import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { checkPermi } from '@/utils/permission'
 import { fenToYuanFormat } from '@/utils/formatter'
+import UpdateBindUserForm from '@/views/mall/trade/brokerage/user/UpdateBindUserForm.vue'
+import BrokerageUserListDialog from '@/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue'
+import BrokerageOrderListDialog from '@/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue'
 
 defineOptions({ name: 'TradeBrokerageUser' })
 
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -232,29 +241,62 @@ const handleCommand = (command: string, row: BrokerageUserApi.BrokerageUserVO) =
     case 'openBrokerageOrderTable':
       openBrokerageOrderTable(row.id)
       break
-    case 'openUpdateBindUser':
-      openUpdateBindUser(row.id)
+    case 'openUpdateBindUserForm':
+      openUpdateBindUserForm(row)
       break
-    case 'openClearBindUser':
-      openClearBindUser(row.id)
+    case 'handleClearBindUser':
+      handleClearBindUser(row)
       break
   }
 }
 
 /** 打开推广人列表 */
-const openBrokerageUserTable = (id: number) => {}
+const brokerageUserListDialogRef = ref()
+const openBrokerageUserTable = (id: number) => {
+  brokerageUserListDialogRef.value.open(id)
+}
 
 /** 打开推广订单列表 */
-const openBrokerageOrderTable = (id: number) => {}
+const brokerageOrderListDialogRef = ref()
+const openBrokerageOrderTable = (id: number) => {
+  brokerageOrderListDialogRef.value.open(id)
+}
 
 /** 打开表单：修改上级推广人 */
-const openUpdateBindUser = (id: number) => {}
+const updateBindUserFormRef = ref()
+const openUpdateBindUserForm = (row: BrokerageUserApi.BrokerageUserVO) => {
+  updateBindUserFormRef.value.open(row)
+}
 
-/** 打开表单：清除上级推广人 */
-const openClearBindUser = (id: number) => {}
+/** 清除上级推广人 */
+const handleClearBindUser = async (row: BrokerageUserApi.BrokerageUserVO) => {
+  try {
+    // 二次确认
+    await message.confirm(`确认要清除"${row.nickname}"的上级推广人吗？`)
+    // 发起修改
+    await BrokerageUserApi.clearBindUser({ id: row.id })
+    message.success('清除成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 
 /** 推广资格 开通/关闭 */
-const handleBrokerageEnabledChange = (id: number, enabled: boolean) => {}
+const handleBrokerageEnabledChange = async (row: BrokerageUserApi.BrokerageUserVO) => {
+  try {
+    // 二次确认
+    const text = row.brokerageEnabled ? '开通' : '关闭'
+    await message.confirm(`确认要${text}"${row.nickname}"的推广资格吗？`)
+    // 发起修改
+    await BrokerageUserApi.updateBrokerageEnabled({ id: row.id, enabled: row.brokerageEnabled })
+    message.success(text + '成功')
+    // 刷新列表
+    await getList()
+  } catch {
+    // 异常时，需要重置回之前的值
+    row.brokerageEnabled = !row.brokerageEnabled
+  }
+}
 
 /** 初始化 **/
 onMounted(() => {
diff --git a/src/views/mall/trade/brokerage/withdraw/BrokerageWithdrawRejectForm.vue b/src/views/mall/trade/brokerage/withdraw/BrokerageWithdrawRejectForm.vue
new file mode 100644
index 00000000..2a69b5b0
--- /dev/null
+++ b/src/views/mall/trade/brokerage/withdraw/BrokerageWithdrawRejectForm.vue
@@ -0,0 +1,73 @@
+<template>
+  <Dialog title="审核" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="驳回原因" prop="auditReason">
+        <el-input v-model="formData.auditReason" type="textarea" placeholder="请输入驳回原因" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as BrokerageWithdrawApi from '@/api/mall/trade/brokerage/withdraw'
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  auditReason: undefined
+})
+const formRules = reactive({
+  auditReason: [{ required: true, message: '驳回原因不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as BrokerageWithdrawApi.BrokerageWithdrawVO
+    await BrokerageWithdrawApi.rejectBrokerageWithdraw(data)
+    message.success('驳回成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    auditReason: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/trade/brokerage/withdraw/index.vue b/src/views/mall/trade/brokerage/withdraw/index.vue
new file mode 100644
index 00000000..89323f93
--- /dev/null
+++ b/src/views/mall/trade/brokerage/withdraw/index.vue
@@ -0,0 +1,264 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="用户编号" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="提现类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择提现类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="账号" prop="accountNo">
+        <el-input
+          v-model="queryParams.accountNo"
+          placeholder="请输入账号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="提现银行" prop="bankName">
+        <el-select
+          v-model="queryParams.bankName"
+          placeholder="请选择提现银行"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.BROKERAGE_BANK_NAME)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="申请时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="left" prop="id" min-width="60px" />
+      <el-table-column label="用户信息" align="left" min-width="120px">
+        <template #default="scope">
+          <div>编号：{{ scope.row.userId }}</div>
+          <div>昵称：{{ scope.row.userNickname }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="提现金额" align="left" prop="price" min-width="80px">
+        <template #default="scope">
+          <div>金　额：￥{{ fenToYuan(scope.row.price) }}</div>
+          <div>手续费：￥{{ fenToYuan(scope.row.feePrice) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="提现方式" align="left" prop="type" min-width="120px">
+        <template #default="scope">
+          <div
+            >{{ getDictLabel(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE, scope.row.type) }}账号：{{
+              scope.row.accountNo
+            }}</div
+          >
+          <template v-if="scope.row.type === BrokerageWithdrawTypeEnum.BANK.type">
+            <div>真实姓名：{{ scope.row.name }}</div>
+            <div>
+              银行名称：
+              <dict-tag :type="DICT_TYPE.BROKERAGE_BANK_NAME" :value="scope.row.bankName" />
+            </div>
+            <div>开户地址：{{ scope.row.bankAddress }}</div>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column label="收款码" align="left" prop="accountQrCodeUrl" width="70px">
+        <template #default="scope">
+          <el-image
+            :src="scope.row.accountQrCodeUrl"
+            class="w-40px h-40px"
+            :preview-src-list="[scope.row.accountQrCodeUrl]"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="申请时间"
+        align="left"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="170px"
+      />
+      <el-table-column label="备注" align="left" prop="remark" />
+      <el-table-column label="状态" align="left" prop="status" min-width="120px">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BROKERAGE_WITHDRAW_STATUS" :value="scope.row.status" />
+          <div v-if="scope.row.auditTime" class="text-xs">
+            时间：{{ formatDate(scope.row.auditTime) }}
+          </div>
+          <div v-if="scope.row.auditReason" class="text-xs">
+            原因：{{ scope.row.auditReason }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="110px" fixed="right">
+        <template #default="scope">
+          <template v-if="scope.row.status === BrokerageWithdrawStatusEnum.AUDITING.status">
+            <el-button
+              link
+              type="primary"
+              @click="handleApprove(scope.row.id)"
+              v-hasPermi="['trade:brokerage-withdraw:audit']"
+            >
+              通过
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="openForm(scope.row.id)"
+              v-hasPermi="['trade:brokerage-withdraw:audit']"
+            >
+              驳回
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BrokerageWithdrawRejectForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getDictLabel, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import * as BrokerageWithdrawApi from '@/api/mall/trade/brokerage/withdraw'
+import BrokerageWithdrawRejectForm from './BrokerageWithdrawRejectForm.vue'
+import { BrokerageWithdrawStatusEnum, BrokerageWithdrawTypeEnum } from '@/utils/constants'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { fenToYuan } from '@/utils'
+
+defineOptions({ name: 'BrokerageWithdraw' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  type: null,
+  name: null,
+  accountNo: null,
+  bankName: null,
+  status: null,
+  auditReason: null,
+  auditTime: [],
+  remark: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BrokerageWithdrawApi.getBrokerageWithdrawPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (id: number) => {
+  formRef.value.open(id)
+}
+
+/** 审核通过 */
+const handleApprove = async (id: number) => {
+  try {
+    loading.value = true
+    await message.confirm('确定要审核通过吗？')
+    await BrokerageWithdrawApi.approveBrokerageWithdraw(id)
+    await message.success(t('common.success'))
+    await getList()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index 40f2a664..e92fa82c 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -245,9 +245,9 @@ const { params } = useRoute() // 查询参数
 const getDetail = async () => {
   const id = params.orderId as unknown as number
   if (id) {
-    const res = (await TradeOrderApi.getOrder(66666)) as TradeOrderApi.OrderVO
+    const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
     // 没有表单信息则关闭页面返回
-    if (res == null) {
+    if (res === null) {
       message.error('交易订单不存在')
       close()
     }
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 61037d64..dca2fe85 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -101,6 +101,7 @@
         </el-select>
       </el-form-item>
       <!-- TODO puhui 聚合搜索等售后结束后实现-->
+      <!-- TODO puhui999：尽量不要用 .k 这样的参数，完整拼写，有完整的业务含义 -->
       <el-form-item label="聚合搜索">
         <el-input
           v-show="true"
@@ -356,6 +357,7 @@ const queryParams = ref({
 const queryType = reactive({ k: '' }) // 订单搜索类型 k
 
 // 订单聚合搜索 select 类型配置
+// TODO @puhui999：dynamicSearchList，动态搜索；其它相关的变量和方法，都可以朝着这个变量靠哈；这样更容易理解；
 const searchList = ref([
   { value: 'no', label: '订单号' },
   { value: 'userId', label: '用户UID' },