feat(课程模块): 添加购课明细功能及相关路由

- 在课程模块中新增购课明细页面，支持查看课程购买详情 - 更新路由配置，添加购课明细的路由路径 - 在课程列表中添加“查看购课明细”按钮，优化用户操作体验 - 更新状态管理，支持动态更新主标签的查询和参数信息
2026-04-09 09:29:24 +08:00
parent 822f42cd96
commit 3e1b8917a8
5 changed files with 254 additions and 10 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -65,6 +65,7 @@ const mainRoutes = {
    { path: '/course-courseCatalogue', component: _import('modules/course/courseCatalogue'), name: 'course-courseCatalogue', meta: { title: '课程目录列表', isTab: true } },
    { path: '/course-courseChapter', component: _import('modules/course/courseChapter'), name: 'course-courseChapter', meta: { title: '课程目录章节列表', isTab: true } },
    { path: '/course-courseVideo', component: _import('modules/course/courseVideo'), name: 'course-courseVideo', meta: { title: '课程目录章节视频列表', isTab: true } },
+    { path: '/course-coursePurchaseDetails', component: _import('modules/course/coursePurchaseDetails'), name: 'course-coursePurchaseDetails', meta: { title: '购课明细', isTab: true } },
    { path: '/course-sociologyList', component: _import('modules/course/sociologyList'), name: 'course-sociologyList', meta: { title: '国学标签列表', isTab: true } },
    { path: '/userCourse', component: _import('modules/user/userCourse'), name: 'userCourse', meta: { title: '用户课程列表', isTab: true } },
    { path: '/userCertificate', component: _import('modules/user/userCertificate'), name: 'userCertificate', meta: { title: '用户证书列表', isTab: true } },
--- a/src/store/modules/common.js
+++ b/src/store/modules/common.js
@@ -43,6 +43,16 @@ export default {
    updateMainTabs (state, tabs) {
      state.mainTabs = tabs
    },
+    updateMainTabRoute (state, { name, query, params }) {
+      const tabIndex = state.mainTabs.findIndex(item => item.name === name)
+      if (tabIndex === -1) return
+      const tab = state.mainTabs[tabIndex]
+      state.mainTabs.splice(tabIndex, 1, {
+        ...tab,
+        query: query != null ? query : tab.query,
+        params: params != null ? params : tab.params
+      })
+    },
    updateMainTabsActiveName (state, name) {
      state.mainTabsActiveName = name
    }
--- a/src/views/main-sidebar.vue
+++ b/src/views/main-sidebar.vue
@@ -132,15 +132,11 @@ export default {
          };
          this.mainTabs = this.mainTabs.concat(tab);
        } else {
-         
-          // this.mainTabs = this.mainTabs.concat({
-          //   ...tab,
-          //   params: route.params,
-          //   query: route.query
-          // });
-          this.mainTabs[tabIndex].query=route.query
-          this.mainTabs[tabIndex].params=route.query
-          console.log("at line 107:", "存在先添加",tab);
+          this.$store.commit("common/updateMainTabRoute", {
+            name: route.name,
+            query: route.query,
+            params: route.params
+          });
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
--- a/src/views/modules/course/courseList.vue
+++ b/src/views/modules/course/courseList.vue
@@ -210,7 +210,7 @@
        fixed="right"
        header-align="center"
        align="center"
-        width="280"
+        width="360"
        label="操作"
      >
        <template slot-scope="scope">
@@ -280,6 +280,13 @@
            <!-- </el-dropdown-menu>
            </el-dropdown> -->
          </div>
+          <div>
+            <el-button
+              type="text"
+              size="small"
+              @click="showCoursePurchaseDetails(scope.row)"
+            >查看购课明细</el-button>
+          </div>
        </template>
      </el-table-column>
    </el-table>
@@ -872,6 +879,31 @@ export default {
      this.$forceUpdate();
      // row ? (this.courseId = row.id) : "";
    },
+    showCoursePurchaseDetails(row) {
+      const list = (row && row.courseCatalogueEntityList) || [];
+      const catalogue = Array.isArray(list)
+        ? list.map(item => ({
+            id: item.id,
+            title: item.title
+          }))
+        : [];
+      if (!catalogue.length) {
+        this.$message.warning("该课程未设置目录，无法查看购买明细。");
+        return;
+      }
+      const firstCatalogueId =
+        catalogue && catalogue.length > 0 ? String(catalogue[0].id) : "";
+
+      this.$router.push({
+        name: "course-coursePurchaseDetails",
+        query: {
+          courseId: row.id,
+          courseName: row.title || "",
+          catalogueId: firstCatalogueId,
+          catalogue: encodeURIComponent(JSON.stringify(catalogue || []))
+        }
+      });
+    },
    // 删除
    deleteHandle(id) {
      var ids = id
--- a/src/views/modules/course/coursePurchaseDetails.vue
+++ b/src/views/modules/course/coursePurchaseDetails.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="mod-config">
+    <div class="tab-header">
+      <el-tabs
+        v-model="activeCatalogueId"
+        type="card"
+        @tab-click="onTabClick"
+      >
+        <el-tab-pane
+          v-for="item in catalogue"
+          :key="String(item.id)"
+          :label="item.title"
+          :name="String(item.id)"
+        />
+      </el-tabs>
+      <el-button
+        class="download-btn"
+        type="success"
+        size="small"
+        :loading="exportLoading"
+        :disabled="exportLoading"
+        @click="downloadReport"
+      >
+        {{ exportLoading ? "下载中..." : "下载报表" }}
+      </el-button>
+    </div>
+
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;"
+    >
+      <el-table-column prop="name" header-align="center" align="center" label="姓名" width="120" />
+      <el-table-column prop="tel" header-align="center" align="center" label="电话" width="140" />
+      <el-table-column prop="orderSn" header-align="center" align="center" label="订单编号" min-width="180" />
+      <el-table-column prop="payTime" header-align="center" align="center" label="支付时间" width="170" />
+      <el-table-column prop="allDays" header-align="center" align="center" label="总天数" width="90" />
+      <el-table-column prop="productName" header-align="center" align="center" label="商品名称" min-width="220" show-overflow-tooltip />
+      <el-table-column prop="type" header-align="center" align="center" label="开通渠道" width="100" />
+      <el-table-column prop="payType" header-align="center" align="center" label="支付方式" width="100" />
+      <el-table-column prop="days" header-align="center" align="center" label="天数" width="80" />
+      <el-table-column prop="fee" header-align="center" align="center" label="金额" width="90" />
+      <el-table-column prop="jf" header-align="center" align="center" label="积分" width="90" />
+      <el-table-column prop="come" header-align="center" align="center" label="来源" min-width="200" show-overflow-tooltip />
+      <el-table-column prop="remark" header-align="center" align="center" label="备注" min-width="160" show-overflow-tooltip />
+    </el-table>
+
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      style="padding: 30px 0; text-align: center;"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      courseId: "",
+      courseName: "",
+      catalogue: [],
+      activeCatalogueId: "",
+      dataListLoading: false,
+      exportLoading: false,
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0
+    };
+  },
+  activated() {
+    this.initFromRoute();
+    this.getDataList();
+  },
+  watch: {
+    $route() {
+      this.initFromRoute();
+      this.pageIndex = 1;
+      this.getDataList();
+    }
+  },
+  methods: {
+    initFromRoute() {
+      const q = (this.$route && this.$route.query) || {};
+      this.courseId = q.courseId || "";
+      this.courseName = q.courseName || "";
+
+      let catalogue = [];
+      try {
+        const raw = q.catalogue ? decodeURIComponent(q.catalogue) : "[]";
+        catalogue = JSON.parse(raw || "[]") || [];
+      } catch (e) {
+        catalogue = [];
+      }
+
+      this.catalogue = Array.isArray(catalogue) ? catalogue : [];
+
+      const routeCatalogueId = q.catalogueId ? String(q.catalogueId) : "";
+      if (routeCatalogueId) {
+        this.activeCatalogueId = routeCatalogueId;
+      } else if (this.catalogue.length > 0) {
+        this.activeCatalogueId = String(this.catalogue[0].id);
+      } else {
+        this.activeCatalogueId = "";
+      }
+    },
+    onTabClick() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    getDataList() {
+      if (!this.courseId || !this.activeCatalogueId) {
+        this.dataList = [];
+        this.totalPage = 0;
+        return;
+      }
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/master/course/getCoursePurchaseDetails"),
+        method: "post",
+        data: this.$http.adornData({
+          courseId: String(this.courseId),
+          catalogueId: String(this.activeCatalogueId),
+          limit: String(this.pageSize),
+          page: String(this.pageIndex)
+        })
+      })
+        .then(({ data }) => {
+          if (data && data.code === 0) {
+            this.dataList = data.coursePurchaseDetails || [];
+            this.totalPage = data.totalSize || 0;
+          } else {
+            this.dataList = [];
+            this.totalPage = 0;
+          }
+        })
+        .finally(() => {
+          this.dataListLoading = false;
+        });
+    },
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    async downloadReport() {
+      if (!this.courseId) return;
+      this.exportLoading = true;
+      try {
+        const response = await this.$http({
+          url: this.$http.adornUrl("/master/course/exportCoursePurchaseDetails"),
+          method: "post",
+          data: this.$http.adornData({
+            courseId: String(this.courseId)
+          }),
+          responseType: "blob"
+        });
+        const blob = new Blob([response.data]);
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        const safeCourseName = String(this.courseName || `课程_${this.courseId}`)
+          .replace(/[\\/:*?"<>|]/g, "_")
+          .trim();
+        link.download = `购课明细_${safeCourseName || this.courseId}.xlsx`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+      } catch (e) {
+        this.$message.error("下载失败，请稍后重试");
+      } finally {
+        this.exportLoading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.tab-header /deep/ .el-tabs {
+  flex: 1;
+  min-width: 0;
+}
+
+.download-btn {
+  margin-left: 12px;
+  margin-bottom: 20px;
+}
+</style>