🎨 完善订单页面和文章页

src/api/article/index.js

@@ -1,7 +1,7 @@
 import service from '@/utils/request'
 
 // @tag Order
-// @summary 获取订单列表
+// @summary 获取文章列表
 // @param {object} params
 // @return {object} data
 // @router get /order/list

src/api/order/index.js

@@ -12,3 +12,15 @@ export const list = (params) => {
       params
     })
 }
+
+// @tag Order
+// @summary 获取订单详情
+// @param {object} params
+// @return {object} data
+// @router get /order/:id
+export const detail = (id) => {
+    return service({
+      url: '/order/' + id,
+      method: 'get',
+    })
+}

src/components/richtext/rich-edit.vue

@@ -48,7 +48,36 @@
   const toolbarConfig = {}
   const editorConfig = {
     placeholder: '请输入内容...',
-    MENU_CONF: {}
+    MENU_CONF: {
+      uploadImage: {
+        server: basePath + '/fileUploadAndDownload/upload?noSave=1',
+        fieldName: 'file',
+        maxFileSize: 1024 * 1024 * 10, // 限制图片大小为10MB
+        maxNumberOfFiles: 1,
+        customInsert(res, insertFn) {
+          if (res.code === 0) {
+            const urlPath = getUrl(res.data.file.url)
+            insertFn(urlPath, res.data.file.name)
+            return
+          }
+          ElMessage.error(res.msg)
+        }
+      },
+      uploadVideo: {
+        server: basePath + '/fileUploadAndDownload/upload?noSave=1',
+        fieldName: 'file',
+        maxFileSize: 1024 * 1024 * 100, // 限制视频大小为100MB
+        maxNumberOfFiles: 1,
+        customInsert(res, insertFn) {
+          if (res.code === 0) {
+            const urlPath = getUrl(res.data.file.url)
+            insertFn(urlPath, res.data.file.name)
+            return
+          }
+          ElMessage.error(res.msg)
+        }
+      }
+    }
   }
   editorConfig.MENU_CONF['uploadImage','uploadVideo'] = {
     fieldName: 'file',

src/config.js

@@ -3,16 +3,102 @@ export let userStatus = await getDict('user-status')
 export  const ORDER_SEARCH_CONFIG = [
   {
     type: 'input',
-    prop:'orderId',
+    prop:'order_no',
     label: '订单号',
-    placeholder: '请输入',
+    placeholder: '请输入订单号',
+  },
+  {
+    type: 'input',
+    prop:'title',
+    label: '商品名称',
+    placeholder: '请输入商品名称',
+  },
+  {
+    type: 'input',
+    prop:'name',
+    label: '用户姓名',
+    placeholder: '请输入用户姓名',
+  },
+  {
+    type: 'select',
+    prop:'order_type',
+    label: '订单类型',
+    placeholder: '请选择订单类型',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '课程',
+          value: 1
+        },
+        {
+          label: 'VIP',
+          value: 2
+        }
+      ]
+    },
+  },
+  {
+    type: 'select',
+    prop:'pay_type',
+    label: '支付方式',
+    placeholder: '请选择支付方式',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '微信',
+          value: 1
+        },
+        {
+          label: '支付宝',
+          value: 2
+        },
+        {
+          label: '余额',
+          value: 3
+        }
+      ]
+    },
+  },
+  {
+    type: 'select',
+    prop:'status',
+    label: '订单状态',
+    placeholder: '请选择订单状态',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '未付款',
+          value: 1
+        },
+        {
+          label: '已付款',
+          value: 2
+        },
+        {
+          label: '已过期',
+          value: 3
+        }
+      ]
+    },
   },
   {
     type: 'daterange',
     prop: 'times',
-    label: '申请时间',
+    label: '创建时间',
     valueFormat: 'YYYY-MM-DD',
-    placeholder: '请选择申请时间',
+    placeholder: '请选择创建时间',
     startPlaceholder: '开始日期',
     endPlaceholder: '结束日期',
     rangeSeparator: '-'
@@ -92,26 +178,40 @@ export  const USER_SEARCH_CONFIG = [
 export  const ARTICLE_SEARCH_CONFIG = [
   {
     type: 'input',
-    prop:'name',
+    prop:'title',
-    label: '名称',
+    label: '文章标题',
-    placeholder: '请输入',
+    placeholder: '请输入文章标题',
   },
   {
     type: 'select',
-    prop:'status',
+    prop:'categoryId',
-    label: '状态',
+    label: '文章分类',
-    placeholder: '请选择',
+    placeholder: '请选择分类',
     children:{
       list: [
         {
           label: '全部',
           value: ''
-        },
+        }
-        ...userStatus
       ]
     },
-  }
+  },
+  {
+    type: 'select',
+    prop:'teacherId',
+    label: '讲师',
+    placeholder: '请选择讲师',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        }
+      ]
+    },
+  },
 ]
+
 // 订单列表
 export const ORDER_TABLE_CONFIG = {
   index: true,
@@ -126,6 +226,13 @@ export const ORDER_TABLE_CONFIG = {
     {
       attrs: {
         label: '商品名称',
+        prop: 'title',
+        align: 'center'
+      }
+    },
+    {
+      attrs: {
+        label: '用户姓名',
         prop: 'name',
         align: 'center'
       }
@@ -134,37 +241,41 @@ export const ORDER_TABLE_CONFIG = {
       attrs: {
         label: '价格',
         align: 'center',
-        prop: 'price'
+        prop: 'price',
+        slot: 'price'
       }
     },
     {
       attrs: {
-        label: '类型',
+        label: '订单类型',
         align: 'center',
-        prop: 'order_type'
+        prop: 'order_type',
+        slot: 'order_type'
       }
     },
     {
       attrs: {
-        label: '状态',
+        label: '支付方式',
+        align: 'center',
+        prop: 'pay_type',
+        slot: 'pay_type'
+      }
+    },
+    {
+      attrs: {
+        label: '订单状态',
         prop: 'status',
-        align: 'center'
+        align: 'center',
-      },
+        slot: 'status'
-      slot: 'status'
+      }
-    },{
+    },
+    {
       attrs: {
         label: '创建时间',
         prop: 'CreatedAt',
-        align: 'center'
+        align: 'center',
-      },
+        slot: 'CreatedAt'
-      slot: 'CreatedAt'
+      }
-    },{
-      attrs: {
-        label: '更新时间',
-        prop: 'UpdatedAt',
-        align: 'center'
-      },
-      slot: 'UpdatedAt'
     },
     {
       attrs: {
@@ -264,24 +375,35 @@ export const ARTICLE_TABLE_CONFIG = {
     },
     {
       attrs: {
-        label: '名称',
+        label: '标题',
         prop: 'title',
         align: 'center'
       }
-    },{
+    },
+    {
+      attrs: {
+        label: '讲师',
+        prop: 'teacherName',
+        align: 'center'
+      }
+    },
+    {
       attrs: {
         label: '价格',
         prop: 'price',
         align: 'center'
-      }
+      },
-    },{
+      slot: 'price'
+    },
+    {
       attrs: {
-        label: '创建时间',
+        label: '是否免费',
-        prop: 'CreatedAt',
+        prop: 'isFree',
         align: 'center'
       },
-      slot: 'CreatedAt'
+      slot: 'isFree'
-    },{
+    },
+    {
       attrs: {
         label: '更新时间',
         prop: 'UpdatedAt',

src/view/goods/article/edit.vue

@@ -9,43 +9,69 @@
     >
       <ColumnItem title="文章编辑">
         <el-row :gutter="20">
-          <el-col :span="8">
+          <el-col :span="12">
             <el-form-item label="标题" prop="title">
-              <el-input v-model="formData.title" />
+              <el-input v-model="formData.title" placeholder="请输入文章标题" />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="12">
-            <el-form-item label="价格" prop="price">
+            <el-form-item label="分类" prop="categoryId">
-              <el-input v-model="formData.price" type="number"  />
+              <el-select v-model="formData.categoryId" placeholder="请选择文章分类" clearable style="width: 100%">
-            </el-form-item>
+                <el-option
-          </el-col>
+                  v-for="item in articleCategoryList"
-        </el-row>
+                  :key="item.ID"
-
+                  :label="item.name"
-        <el-row  :gutter="20">
+                  :value="item.ID"
-          <el-col :span="8">
+                />
-            <el-form-item label="图片" prop="coverImg">
+              </el-select>
-              <SelectImage v-model="formData.coverImg" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="讲师" prop="teacherId">
-              <el-input v-model="formData.teacherName" readonly @click="() => userDialogRef.open()" />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="20">
+          <el-col :span="12">
-            <el-form-item label="详情" prop="content">
+            <el-form-item label="讲师" prop="teacherId">
+              <el-input v-model="formData.teacherName" readonly placeholder="点击选择讲师" @click="() => userDialogRef.open()" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否免费" prop="isFree">
+              <el-radio-group v-model="formData.isFree">
+                <el-radio :label="1">免费</el-radio>
+                <el-radio :label="0">付费</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" v-if="formData.isFree === 0">
+          <el-col :span="12">
+            <el-form-item label="价格(元)" prop="price">
+              <el-input v-model="formData.price" type="number" placeholder="请输入价格，单位：元" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="封面图片" prop="coverImg">
+              <SelectImage v-model="formData.coverImg" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="文章详情" prop="content">
               <RichEdit style="width: 100%" v-model="formData.content"/>
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="20">
+          <el-col :span="24">
             <el-form-item label="备注" prop="desc">
-              <el-input type="textarea"  v-model="formData.desc" />
+              <el-input type="textarea" v-model="formData.desc" placeholder="请输入文章备注信息" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -56,8 +82,6 @@
       <el-button @click="$router.back()">返回</el-button>
       <el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
     </div>
-
-
   </div>
   <!--    选择人员弹窗-->
   <userChoose
@@ -68,75 +92,124 @@
 </template>
 <script setup>
   import SelectImage from '@/components/selectImage/selectImage.vue'
-  import {onMounted, ref } from 'vue'
+  import {onMounted, ref, computed } from 'vue'
   import userChoose from '@/components/userChoose/index.vue'
   import { useRouter, useRoute} from 'vue-router'
   import { add, detail, edit } from '@/api/goods/index.js'
+  import { getCategoryList } from '@/api/category/category.js'
   import ColumnItem from '@/components/columnItem/ColumnItem.vue'
   import { ElMessage } from 'element-plus'
   import RichEdit from '@/components/richtext/rich-edit.vue'
+  
   const router = useRouter()
   const route = useRoute()
   const userDialogRef = ref()
   const isEdit = ref(false)
+  const categoryList = ref([])
 
-  const ruleFormRef = ref(null), formData = ref({}), rules = ref({
+  const ruleFormRef = ref(null), formData = ref({
+    isFree: 0, // 默认付费
+    price: 0
+  }), rules = ref({
     title: [
       { required: true, message: '请输入文章标题', trigger: 'blur' }
     ],
-    price: [
+    categoryId: [
-      { required: true, message: '请输入价格', trigger: 'blur' }
+      { required: true, message: '请选择文章分类', trigger: 'change' }
-    ],
-    coverImg: [
-      { required: true, message: '请上传封面', trigger: 'blur' }
     ],
     teacherId: [
       { required: true, message: '请选择讲师', trigger: 'blur' }
     ],
+    isFree: [
+      { required: true, message: '请选择是否免费', trigger: 'change' }
+    ],
+    price: [
+      { 
+        required: true, 
+        message: '请输入价格', 
+        trigger: 'blur',
+        validator: (rule, value, callback) => {
+          if (formData.value.isFree === 0 && (!value || value <= 0)) {
+            callback(new Error('付费文章请输入大于0的价格'))
+          } else {
+            callback()
+          }
+        }
+      }
+    ],
+    coverImg: [
+      { required: true, message: '请上传封面', trigger: 'blur' }
+    ],
     content: [
       { required: true, message: '请输入文章内容', trigger: 'blur' }
     ]
   })
 
+  // 计算属性：筛选出文章分类（url字段为空的分类）
+  const articleCategoryList = computed(() => {
+    return categoryList.value.filter(item => !item.url || item.url === '')
+  })
+
   onMounted(() => {
     console.log(route.query.id)
+    getCategoryData()
     if(route.query.id) {
       isEdit.value = true
       getDetail()
     }
   })
-  const handleAvatarSuccess = ( response,  uploadFile  ) => {
+
-    formData.value.coverImg = URL.createObjectURL(uploadFile.raw)
+  // 获取分类数据
-  }
+  async function getCategoryData() {
-  const beforeAvatarUpload= (rawFile) => {
+    try {
-    if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
+      const res = await getCategoryList()
-      ElMessage.error('请上传图片格式!')
+      if (res.code === 0) {
-      return false
+        categoryList.value = res.data.list || []
-    } else if (rawFile.size / 1024 / 1024 > 2) {
+      }
-      ElMessage.error('文件大小不能超过 2MB!')
+    } catch (error) {
-      return false
+      console.error('获取分类数据失败:', error)
     }
-    return true
   }
-  async  function getDetail() {
+
+  async function getDetail() {
     const res = await detail(route.query.id)
     if(res.code === 0) {
       formData.value = res.data
+      // 如果数据库存储的是分，转换为元显示
+      if (formData.value.price) {
+        formData.value.price = (formData.value.price / 100).toFixed(2)
+      }
+      // 确保isFree字段有值
+      if (formData.value.isFree === undefined || formData.value.isFree === null) {
+        formData.value.isFree = 0
+      }
     }
   }
+  
   function getStaffInfo(data) {
     console.log(formData)
     formData.value.teacherId = data.id
     formData.value.teacherName = data.nick_name
   }
+  
   function submit(formRef) {
     if(!formRef) return
     // 校验
     formRef.validate(async (valid) => {
       if(!valid) return
       let fn = isEdit.value ? edit : add
-      // price字段转为数字
+      
-      formData.value.price = Number(formData.value.price)
+      // 处理价格字段
+      if (formData.value.isFree === 1) {
+        // 免费文章，价格设为0
+        formData.value.price = 0
+      } else {
+        // 付费文章，价格转为分（数据库存储单位）
+        if (formData.value.price) {
+          formData.value.price = Math.round(Number(formData.value.price) * 100)
+        }
+      }
+      
       const res = await fn(formData.value)
       console.log(res)
       if(res.code === 0) {
@@ -154,7 +227,7 @@
     })
   }
 </script>
-<style  lang="scss" scoped>
+<style lang="scss" scoped>
   .avatar-uploader .el-upload {
     border: 1px dashed var(--el-border-color) !important;
     border-radius: 6px;
@@ -162,7 +235,6 @@
     position: relative;
     overflow: hidden;
     transition: var(--el-transition-duration-fast);
-    //border: 1px dashed red !important;
   }
 
   .avatar-uploader .el-upload:hover {
@@ -179,12 +251,19 @@
 
   :deep{
     .el-row {
-      justify-content: space-around;
+      margin-bottom: 20px;
     }
     .el-form{
-      flex: 1 ;
+      flex: 1;
       background: white;
       overflow: hidden;
     }
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__label {
+      font-weight: 500;
+      color: #606266;
+    }
   }
 </style>

src/view/goods/article/index.vue

@@ -2,7 +2,8 @@
   <div >
     <div class="searchForm">
       <searchForm
-        :search="ARTICLE_SEARCH_CONFIG"
+        :key="searchConfigVersion"
+        :search="finalSearchConfig"
         @searchData="searchData"
         @resetData="resetData"
         class="search-box searchForm"
@@ -37,10 +38,21 @@
             fit="cover"
           />
         </template>
-        <template #CreatedAt="{ row }">
+        <template #price="{ row }">
-          {{ formatDate(row.CreatedAt) }}
+          <span v-if="row.isFree === 1" class="text-green-600 font-bold">免费</span>
+          <span v-else>{{ formatPrice(row.price) }}</span>
+        </template>
+        <template #isFree="{ row }">
+          <el-switch
+            v-model="row.isFree"
+            :active-value="1"
+            :inactive-value="0"
+            :loading="row.loading"
+            :before-change="() => statusChangeBefore(row)"
+            active-text="免费"
+            inactive-text="付费"
+          />
         </template>
-
         <template #UpdatedAt="{ row }">
           {{ formatDate(row.UpdatedAt) }}
         </template>
@@ -69,12 +81,23 @@
             fit="cover"
           />
         </el-descriptions-item>
-        <el-descriptions-item label="商品名称">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
+        <el-descriptions-item label="文章标题">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="是否免费">
+          <el-tag :type="detailData.isFree === 1 ? 'success' : 'warning'">
+            {{ detailData.isFree === 1 ? '免费' : '付费' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="价格" v-if="detailData.isFree === 0">
+          {{ formatPrice(detailData.price) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="讲师">{{ detailData.teacherName || EMPTY_STR }}</el-descriptions-item>
         <el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
-        <el-descriptions-item label="商品描述" :span="2">
+        <el-descriptions-item label="文章内容" :span="2">
           <div v-html="detailData.content"></div>
         </el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">
+          {{ detailData.desc || EMPTY_STR }}
+        </el-descriptions-item>
       </el-descriptions>
     </el-dialog>
 
@@ -84,32 +107,117 @@
   import { ElMessage, ElMessageBox } from 'element-plus'
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import { del, list } from '@/api/goods/index.js'
+  import { del, list, edit } from '@/api/goods/index.js'
-  import { ref, onMounted } from 'vue'
+  import { getCategoryList } from '@/api/category/category.js'
+  import { getTechers } from '@/api/goods/index.js'
+  import { ref, onMounted, watch, nextTick } from 'vue'
   import {formatDate} from '@/utils/format'
   import { ARTICLE_SEARCH_CONFIG, ARTICLE_TABLE_CONFIG } from '@/config'
   import { InfoFilled } from '@element-plus/icons-vue'
-  import { useRouter, useRoute} from 'vue-router'
+  import { useRouter } from 'vue-router'
+  
   const router = useRouter()
-  const route = useRoute()
   const EMPTY_STR = '- -'
   // 在 script setup 中添加响应式数据
   const detailVisible = ref(false)
   const detailData = ref({})
+  const categoryList = ref([])
+  const teacherList = ref([])
+  const searchConfigVersion = ref(0) // 用于强制更新搜索配置
+  const finalSearchConfig = ref(JSON.parse(JSON.stringify(ARTICLE_SEARCH_CONFIG))) // 最终的搜索配置
 
   const tableLoading = ref(true),  tableData = ref([])
   const queryParams = ref({
     page: 1,
     pageSize: 10,
-    orderId: '',
+    title: '',
-    startTime: '',
+    categoryId: '',
-    endTime: ''
+    teacherId: '',
   }), total = ref(0)
+  
+  // 监听分类和讲师数据变化
+  watch([categoryList, teacherList], () => {
+    
+    searchConfigVersion.value++ // 强制更新搜索配置
+  }, { deep: true })
+  
+  // 监听搜索配置变化，强制更新searchForm组件
+  watch(finalSearchConfig, () => {
+   
+    // 强制触发searchForm组件的重新渲染
+    searchConfigVersion.value++
+  }, { deep: true })
+  
+  // 更新搜索配置的函数
+  const updateSearchConfig = () => {
+
+    
+    const config = JSON.parse(JSON.stringify(ARTICLE_SEARCH_CONFIG))
+    
+    // 更新分类选项
+    const categoryConfig = config.find(item => item.prop === 'categoryId')
+    if (categoryConfig) {
+      const filteredCategories = categoryList.value.filter(item => !item.url || item.url === '')
+      categoryConfig.children.list = [
+        { label: '全部', value: '' },
+        ...filteredCategories.map(item => ({
+          label: item.name,
+          value: item.ID
+        }))
+      ]
+      console.log('直接更新分类选项:', {
+        total: categoryList.value.length,
+        filtered: filteredCategories.length,
+        options: categoryConfig.children.list
+      })
+    }
+    
+    // 更新讲师选项
+    const teacherConfig = config.find(item => item.prop === 'teacherId')
+    if (teacherConfig) {
+      const teacherOptions = teacherList.value.map(item => {
+        const id = item.ID || item.id
+        const label = item.nick_name || item.username || item.name || `用户${id}`
+        console.log(`生成讲师选项: ID=${id}, Label=${label}`)
+        return { label, value: id }
+      })
+      
+      teacherConfig.children.list = [
+        { label: '全部', value: '' },
+        ...teacherOptions
+      ]
+      console.log('直接更新讲师选项:', {
+        total: teacherList.value.length,
+        options: teacherConfig.children.list
+      })
+    }
+    
+    // 强制更新搜索配置
+    finalSearchConfig.value = JSON.parse(JSON.stringify(config))
+    
+  }
+  
+  // 格式化价格显示（分转元）
+  const formatPrice = (price) => {
+    if (!price || price === 0) return '0.00元'
+    return (price / 100).toFixed(2) + '元'
+  }
+  
+  // 状态标签
+  const tag = (status) => {
+    const map = {
+      1: { extend: 'success', label: '已发布' },
+      0: { extend: 'info', label: '草稿' }
+    }
+    return map[status] || { extend: '', label: EMPTY_STR }
+  }
+  
   const searchData = (data) => {
     if (data.times) {
       data.startTime = data.times[0]
       data.endTime = data.times[1]
     }
+    
     queryParams.value.page = 1
     queryParams.value = { ...queryParams.value, ...data }
     delete queryParams.value.times
@@ -119,13 +227,94 @@
     queryParams.value = {
       page: 1,
       pageSize: 10,
+      title: '',
+      categoryId: '',
+      teacherId: '',
+      isFree: '',
+      status: ''
     }
     getList()
   }
-  onMounted(() => {
+  onMounted(async () => {
-    getList()
+    console.log('页面开始加载...')
+    
+    // 获取分类和讲师数据
+    await getCategoryData()
+    await getTeacherData()
+    
+    // 等待DOM更新和搜索配置计算
+    await nextTick()
+    
+    // 确保搜索配置已更新
+    updateSearchConfig()
+    
+    // 再次等待确保搜索配置完全更新
+    setTimeout(() => {
+      console.log('第一次延迟后再次更新搜索配置...')
+      updateSearchConfig()
+      
+      // 再次延迟确保搜索配置完全更新
+      setTimeout(() => {
+        console.log('第二次延迟后开始获取列表...')
+        getList()
+      }, 100)
+    }, 100)
   })
 
+  // 获取分类数据
+  async function getCategoryData() {
+    try {
+      const res = await getCategoryList()
+      if (res.code === 0) {
+        categoryList.value = res.data.list || []
+        console.log('获取到的分类数据:', categoryList.value.length, '条')
+        console.log('分类数据详情:', categoryList.value.map(item => ({ id: item.ID, name: item.name, url: item.url })))
+        
+        // 立即更新搜索配置
+        updateSearchConfig()
+        
+        // 强制触发响应式更新
+        await nextTick()
+        searchConfigVersion.value++
+        console.log('分类数据更新完成，版本号:', searchConfigVersion.value)
+      }
+    } catch (error) {
+      console.error('获取分类数据失败:', error)
+    }
+  }
+
+  // 获取讲师数据
+  async function getTeacherData() {
+    try {
+      const res = await getTechers({ pageSize: 1000 }) // 获取所有讲师
+      if (res.code === 0) {
+        teacherList.value = res.data.list || []
+        console.log('获取到的讲师数据:', teacherList.value.length, '条')
+        console.log('讲师数据详情:', teacherList.value.map(item => ({ 
+          id: item.ID || item.id, 
+          nick_name: item.nick_name, 
+          username: item.username,
+          name: item.name
+        })))
+        
+        // 调试：检查每个讲师对象的完整结构
+        teacherList.value.forEach((teacher, index) => {
+          console.log(`讲师${index + 1}完整数据:`, teacher)
+        })
+        
+        // 立即更新搜索配置
+        updateSearchConfig()
+        
+        // 强制触发响应式更新
+        await nextTick()
+        searchConfigVersion.value++
+        console.log('讲师数据更新完成，版本号:', searchConfigVersion.value)
+      }
+    } catch (error) {
+      console.error('获取讲师数据失败:', error)
+    }
+  }
+
   function handleDetail(row) {
     detailData.value = { ...row }
     detailVisible.value = true
@@ -134,6 +323,10 @@
     const res = await list(queryParams.value)
     if(res.code === 0) {
       tableData.value = res.data.list
+      // 为每行数据添加loading状态
+      for(let item of tableData.value) {
+        item.loading = false
+      }
       total.value = res.data.total
     }
   }
@@ -145,23 +338,35 @@
         }
       })
   }
-  async function handleDelete(row) {
+  
-    // 提醒
+  // 切换免费/付费状态
-    // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+  async function statusChangeBefore(row) {
-    //   confirmButtonText: '确定',
+    row.loading = true
-    //   cancelButtonText: '取消',
-    //   type: 'warning'
-    // }).then(() => {
-    //   // 删除
-    //   del(row.ID)
-    // }).catch(() => {
-    //   this.$message({
-    //     type: 'info',
-    //     message: '已取消删除'
-    //   });
-    // });
     try {
-      await ElMessageBox.confirm('此操作将永久删除该商品，是否继续？', '警告', {
+      const res = await edit({
+        ID: row.ID,
+        isFree: row.isFree === 1 ? 0 : 1
+      })
+      if(res.code === 0) {
+        ElMessage.success('状态更新成功')
+        row.isFree = row.isFree === 1 ? 0 : 1
+      } else {
+        ElMessage.error(res.msg || '状态更新失败')
+        // 恢复原状态
+        row.isFree = row.isFree === 1 ? 0 : 1
+      }
+    } catch {
+      ElMessage.error('状态更新失败')
+      // 恢复原状态
+      row.isFree = row.isFree === 1 ? 0 : 1
+    } finally {
+      row.loading = false
+    }
+  }
+  
+  async function handleDelete(row) {
+    try {
+      await ElMessageBox.confirm('此操作将永久删除该文章，是否继续？', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',

src/view/order/order/index.vue

@@ -9,51 +9,213 @@
           />
         </div>
         <div class="gva-table-box">
-            <Content
+          <div class="gva-btn-list">
-              @changePage="changePage"
+            <el-button type="info" @click="exportOrders">导出订单</el-button>
-              :total="total"
+          </div>
-              v-model:tabloading="tableLoading"
-              v-model:currentPage="queryParams.page"
-              v-model:pageSize="queryParams.pageSize"
-              :data="tableData"
-              :config="ORDER_TABLE_CONFIG"
-            >
-              <template #status="{ row }">
-                <el-tag :type="tag(row.status).type">{{ tag(row.status).label }}</el-tag>
-              </template>
-              <template #operate="{ row }">
-                <el-button type="text" @click="handleDetail(row)">详情</el-button>
-                <el-button type="text" @click="handleDelete(row)">删除</el-button>
-              </template>
-            </Content>
           
+          <!-- 订单统计信息 -->
+          <div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
+            <el-row :gutter="20">
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #409eff;">{{ getOrderStats().total }}</div>
+                  <div style="color: #666;">总订单数</div>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #e6a23c;">{{ getOrderStats().unpaid }}</div>
+                  <div style="color: #666;">未付款</div>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #67c23a;">{{ getOrderStats().paid }}</div>
+                  <div style="color: #666;">已付款</div>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #f56c6c;">{{ getOrderStats().expired }}</div>
+                  <div style="color: #666;">已过期</div>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #909399;">{{ getOrderStats().course }}</div>
+                  <div style="color: #666;">课程订单</div>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div style="text-align: center;">
+                  <div style="font-size: 24px; font-weight: bold; color: #e6a23c;">{{ getOrderStats().vip }}</div>
+                  <div style="color: #666;">VIP订单</div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 自定义订单表格 -->
+          <el-table
+            :data="tableData"
+            v-loading="tableLoading"
+            border
+            stripe
+            style="width: 100%"
+          >
+            <el-table-column type="index" label="序号" width="60" align="center" />
+            <el-table-column prop="order_no" label="订单号" align="center" min-width="180" />
+            <el-table-column prop="title" label="商品名称" align="center" min-width="150" />
+            <el-table-column prop="name" label="用户姓名" align="center" width="100" />
+            <el-table-column label="价格" align="center" width="100">
+              <template #default="{ row }">
+                <span class="text-green-600 font-bold">{{ formatPrice(row.price) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="订单类型" align="center" width="100">
+              <template #default="{ row }">
+                <el-tag :type="row.order_type === 1 ? 'primary' : 'success'">
+                  {{ row.order_type === 1 ? '课程' : 'VIP' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="支付方式" align="center" width="100">
+              <template #default="{ row }">
+                <el-tag :type="getPayTypeTag(row.pay_type).type">
+                  {{ getPayTypeTag(row.pay_type).label }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="订单状态" align="center" width="100">
+              <template #default="{ row }">
+                <el-tag :type="getStatusTag(row.status).type">
+                  {{ getStatusTag(row.status).label }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" width="180">
+              <template #default="{ row }">
+                {{ formatDate(row.CreatedAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="100">
+              <template #default="{ row }">
+                <el-button type="primary" link @click="handleDetail(row)">
+                  <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>详情
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <!-- 分页 -->
+          <div style="margin-top: 20px; text-align: right;">
+            <el-pagination
+              v-model:current-page="queryParams.page"
+              v-model:page-size="queryParams.pageSize"
+              :page-sizes="[10, 20, 50, 100]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="changePage"
+            />
+          </div>
         </div>
+
+        <!-- 订单详情弹窗 -->
+        <el-dialog
+          v-model="detailVisible"
+          title="订单详情"
+          width="70%"
+          destroy-on-close
+        >
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="订单号">{{ detailData.order_no || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="商品名称">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="用户姓名">{{ detailData.name || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="用户ID">{{ detailData.user_id || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="价格">{{ formatPrice(detailData.price) }}</el-descriptions-item>
+            <el-descriptions-item label="订单类型">
+              <el-tag :type="detailData.order_type === 1 ? 'primary' : 'success'">
+                {{ detailData.order_type === 1 ? '课程' : 'VIP' }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="支付方式">
+              <el-tag :type="getPayTypeTag(detailData.pay_type).type">
+                {{ getPayTypeTag(detailData.pay_type).label }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="订单状态">
+              <el-tag :type="getStatusTag(detailData.status).type">
+                {{ getStatusTag(detailData.status).label }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="手机号">{{ detailData.phone || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="讲师ID">{{ detailData.teacher_Id || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="VIP ID">{{ detailData.vip_id || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="微信OpenID">{{ detailData.open_id || EMPTY_STR }}</el-descriptions-item>
+            <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
+            <el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
+            <el-descriptions-item label="描述" :span="2">{{ detailData.desc || EMPTY_STR }}</el-descriptions-item>
+          </el-descriptions>
+        </el-dialog>
     </div>
 </template>
 <script setup>
 import searchForm from '@/components/searchForm/index.vue'
-import Content from '@/components/content/index.vue'
+import { list } from '@/api/order'
-import {list} from '@/api/order'
 import { ref, onMounted } from 'vue'
-import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
+import { ORDER_SEARCH_CONFIG } from '@/config'
-const tableLoading = ref(true),  tableData = ref([])
+import { formatDate } from '@/utils/format'
+import { InfoFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const tableLoading = ref(true), tableData = ref([])
+const detailVisible = ref(false)
+const detailData = ref({})
+
 const queryParams = ref({
     page: 1,
     pageSize: 10,
-    orderId: '',
+    order_no: '',
+    title: '',
+    name: '',
+    order_type: '',
+    pay_type: '',
+    status: '',
     startTime: '',
     endTime: ''
 }), total = ref(0)
+
 const EMPTY_STR = '- -'
-const tag = (status) => {
+
+// 获取订单状态标签
+const getStatusTag = (status) => {
     const map = {
-        1: { type: 'success', label: '已完成' },
+        1: { type: 'warning', label: '未付款' },
-        2: { type: 'info', label: '待处理' },
+        2: { type: 'success', label: '已付款' },
-        3: { type: 'warning', label: '处理中' },
+        3: { type: 'danger', label: '已过期' }
-        4: { type: 'danger', label: '已拒绝' }
     }
     return map[status] || { type: '', label: EMPTY_STR }
 }
+
+// 获取支付方式标签
+const getPayTypeTag = (payType) => {
+    const map = {
+        1: { type: 'success', label: '微信' },
+        2: { type: 'primary', label: '支付宝' },
+        3: { type: 'info', label: '余额' }
+    }
+    return map[payType] || { type: '', label: EMPTY_STR }
+}
+
+// 格式化价格显示（分转元）
+const formatPrice = (price) => {
+    if (price === null || price === undefined || price === '') return '0.00元'
+    if (price === 0) return '0.00元'
+    const yuan = (Number(price) / 100).toFixed(2)
+    return yuan + '元'
+}
+
 const searchData = (data) => {
   if (data.times) {
     data.startTime = data.times[0]
@@ -64,35 +226,129 @@ const searchData = (data) => {
   delete queryParams.value.times
   getList()
 }
+
 const resetData = () => {
   queryParams.value = {
     page: 1,
     pageSize: 10,
+    order_no: '',
+    title: '',
+    name: '',
+    order_type: '',
+    pay_type: '',
+    status: '',
+    startTime: '',
+    endTime: ''
   }
   getList()
 }
+
 onMounted(() => {
     getList()
 })
+
 async function getList() {
-    const res = await list(queryParams.value)
+    tableLoading.value = true
-    if(res.code === 0) {
+    try {
-        tableData.value = res.data.list
+        const res = await list(queryParams.value)
-        total.value = res.data.total
+        if(res.code === 0) {
+            tableData.value = res.data.list
+            total.value = res.data.total
+            console.log('订单数据获取成功:', {
+                total: res.data.total,
+                list: res.data.list,
+                firstItem: res.data.list[0]
+            })
+        } else {
+            ElMessage.error(res.msg || '获取订单列表失败')
+        }
+    } catch (error) {
+        console.error('获取订单列表失败:', error)
+        ElMessage.error('获取订单列表失败')
+    } finally {
+        tableLoading.value = false
     }
 }
 
-function handleDelete(row) {
-    console.log(row)
-}
 function handleDetail(row) {
-
+    detailData.value = { ...row }
+    detailVisible.value = true
 }
 
 function changePage(data) {
-  queryParams.value.pageNum = data
+  queryParams.value.page = data
   getList()
 }
+
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getList()
+}
+
+// 导出订单功能
+function exportOrders() {
+  ElMessage.success('导出功能开发中...')
+}
+
+// 获取订单统计信息
+function getOrderStats() {
+  const stats = {
+    total: total.value, // 总订单数（来自后端）
+    unpaid: tableData.value.filter(item => item.status === 1).length,
+    paid: tableData.value.filter(item => item.status === 2).length,
+    expired: tableData.value.filter(item => item.status === 3).length,
+    course: tableData.value.filter(item => item.order_type === 1).length,
+    vip: tableData.value.filter(item => item.order_type === 2).length
+  }
+  return stats
+}
 </script>
 <style lang="scss" scoped>
+.gva-table-box {
+  .gva-btn-list {
+    margin-bottom: 20px;
+  }
+  
+  .el-row {
+    .el-col {
+      .el-statistic {
+        text-align: center;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        
+        .el-statistic__number {
+          font-size: 24px;
+          font-weight: bold;
+        }
+        
+        .el-statistic__label {
+          color: #666;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+}
+
+.searchForm {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.el-dialog {
+  .el-descriptions {
+    .el-descriptions__body {
+      .el-descriptions__table {
+        .el-descriptions__cell {
+          padding: 12px 16px;
+        }
+      }
+    }
+  }
+}
 </style>