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

- 在课程模块中新增购课明细页面，支持查看课程购买详情
- 更新路由配置，添加购课明细的路由路径
- 在课程列表中添加“查看购课明细”按钮，优化用户操作体验
- 更新状态管理，支持动态更新主标签的查询和参数信息

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 } },

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
     }

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;

src/views/modules/content/psychologicalForum-add-or-update.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     width="1260px"
-    :title="!dataForm.id ? '新增' : '修改'"
+    title="修改"
     :close-on-click-modal="false"
     :visible.sync="visible"
     @close="handlereset"
@@ -16,13 +16,6 @@
         ref="dataForm"
         label-width="80px"
       >
-        <el-form-item label="链接地址" prop="url">
-          <el-input
-            v-model="dataForm.url"
-            placeholder="链接地址"
-            :rows="3"
-          ></el-input>
-        </el-form-item>
         <el-form-item label="分类" prop="type">
           <el-select v-model="dataForm.type" placeholder="请选择分类" clearable>
             <el-option
@@ -45,7 +38,7 @@
 </template>
 
 <script>
-import global from "../../common/common.vue"; //引入共用组间
+import global from "../../common/common.vue";
 export default {
   data() {
     return {
@@ -56,21 +49,15 @@ export default {
       typeList: [],
       dataForm: {
         id: null,
-        title: '',
-        url: '',
-        type: ''
+        type: ""
       },
       dataRule: {
         type: [
           { required: true, message: "分类不能为空", trigger: "change" }
-        ],
-        url: [
-          { required: true, message: "链接地址不能为空", trigger: "change" }
         ]
       },
       urlList: {
         info: "/master/message/getMessageById",
-        add: "/common/wxPublicAccount/addWxPublicAccountArticle",
         update: "/common/wxPublicAccount/updateWxPublicAccountArticle"
       }
     };
@@ -92,8 +79,7 @@ export default {
       this.getTypeList();
       this.dataForm = {
         id: row && row.id || null,
-        url: row && row.url || '',
-        type: row && row.type != null ? String(row.type) : ''
+        type: row && row.type != null ? String(row.type) : ""
       };
       this.visible = true;
       this.$nextTick(() => {
@@ -102,22 +88,24 @@ export default {
         }
       });
     },
-    // 表单提交
     dataFormSubmit() {
       this.$refs["dataForm"].validate(valid => {
         if (valid) {
-          // 这里应该是提交数据的逻辑
+          const loading = this.$loading({
+            lock: true,
+            fullscreen: true
+          });
           this.$http
             .request({
-              url: this.dataForm.id ? this.$http.adornUrl(this.urlList.update) : this.$http.adornUrl(this.urlList.add),
+              url: this.$http.adornUrl(this.urlList.update),
               method: "POST",
               data: this.dataForm,
               header: {
-                //默认 无 说明：请求头
                 "Content-Type": "application/json"
               }
             })
             .then(({ data }) => {
+              loading.close();
               if (data && data.code === 0) {
                 this.$message({
                   message: "操作成功",
@@ -131,6 +119,9 @@ export default {
               } else {
                 this.$message.error(data.msg);
               }
+            })
+            .catch(() => {
+              loading.close();
             });
         }
       });

src/views/modules/content/psychologicalForum-add.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    width="1260px"
+    title="同步"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="handlereset"
+    style="height: auto;"
+  >
+    <div style="margin-bottom: 60px;">
+      <el-form
+        style="height: auto;"
+        class="addFormBox"
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="80px"
+      >
+        <el-form-item label="token" prop="token">
+          <el-input
+            v-model="dataForm.token"
+            type="textarea"
+            :rows="4"
+            placeholder="token"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="cookie" prop="cookie">
+          <el-input
+            v-model="dataForm.cookie"
+            type="textarea"
+            :rows="4"
+            placeholder="cookie"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handlereset">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import global from "../../common/common.vue";
+export default {
+  data() {
+    return {
+      baseUrl: global.baseUrl,
+      visible: false,
+      dataForm: {
+        token: "",
+        cookie: ""
+      },
+      dataRule: {
+        token: [
+          { required: true, message: "token不能为空", trigger: "blur" }
+        ],
+        cookie: [
+          { required: true, message: "cookie不能为空", trigger: "blur" }
+        ]
+      },
+      urlList: {
+        add: "/common/wxPublicAccount/addWxPublicAccountArticle"
+      }
+    };
+  },
+  methods: {
+    init() {
+      this.dataForm = {
+        token: "",
+        cookie: ""
+      };
+      this.visible = true;
+      this.$nextTick(() => {
+        if (this.$refs["dataForm"]) {
+          this.$refs["dataForm"].clearValidate();
+        }
+      });
+    },
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            fullscreen: true
+          });
+          this.$http
+            .request({
+              url: this.$http.adornUrl(this.urlList.add),
+              method: "POST",
+              data: this.dataForm,
+              header: {
+                "Content-Type": "application/json"
+              }
+            })
+            .then(({ data }) => {
+              loading.close();
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false;
+                    this.$emit("refreshDataList");
+                  }
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            })
+            .catch(() => {
+              loading.close();
+            });
+        }
+      });
+    },
+    handlereset() {
+      if (this.$refs["dataForm"]) {
+        this.$refs["dataForm"].clearValidate();
+      }
+      this.visible = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .addFormBox.el-form-item {
+  margin-bottom: 10px !important;
+}
+</style>

src/views/modules/content/psychologicalForum.vue

@@ -32,7 +32,7 @@
           "
           >查询</el-button
         >
-        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        <el-button type="primary" @click="syncHandle()">同步</el-button>
       </el-form-item>
     </el-form>
     <div style="height: calc(100% - 80px );">
@@ -131,7 +131,13 @@
       </el-pagination>
     </div>
 
-    <!-- 弹窗, 新增 / 修改 -->
+    <!-- 弹窗：同步 -->
+    <psychological-forum-add
+      v-if="addVisible"
+      ref="psychologicalForumAdd"
+      @refreshDataList="getDataList"
+    ></psychological-forum-add>
+    <!-- 弹窗：修改 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdate"
@@ -142,6 +148,7 @@
 
 <script>
 import AddOrUpdate from "./psychologicalForum-add-or-update";
+import PsychologicalForumAdd from "./psychologicalForum-add";
 export default {
   data() {
     return {
@@ -162,6 +169,7 @@ export default {
       totalPage: 0,
       dataListLoading: false,
       dataListSelections: [],
+      addVisible: false,
       addOrUpdateVisible: false,
       urlList: {
         list: "/common/wxPublicAccount/getWxPublicAccountArticleList"
@@ -169,7 +177,8 @@ export default {
     };
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
+    PsychologicalForumAdd
   },
   activated() {
     if (this.$route.query.upPageInde != null) {
@@ -242,7 +251,13 @@ export default {
     selectionChangeHandle(val) {
       this.dataListSelections = val;
     },
-    // 新增 / 修改
+    syncHandle() {
+      this.addVisible = true;
+      this.$nextTick(() => {
+        this.$refs.psychologicalForumAdd.init();
+      });
+    },
+    // 修改
     addOrUpdateHandle(row) {
       this.addOrUpdateVisible = true;
       this.$nextTick(() => {

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

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>