创业指引详情

src/api/Login/index.js

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 14:58:23
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-17 11:52:22
+ * @LastEditTime: 2022-08-25 14:38:14
  * @FilePath: \veterans_client_web\src\api\Login\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */

src/api/WorkGuide/index.js

@@ -3,11 +3,11 @@
  * @Author: 空白格
  * @Date: 2022-08-12 13:03:10
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 13:43:09
+ * @LastEditTime: 2022-08-25 14:18:13
  * @FilePath: \veterans_client_web\src\api\WorkGuide\index.js
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
  */
-import request from '@/utils/request'
+import request from "@/utils/request";
 /**
  * 获取创业指导列表
  * @param {*} params
@@ -15,8 +15,21 @@ import request from '@/utils/request'
  */
 export function getWorkGuideData(params) {
   return request({
-    url: '/app/guidance',
-    method: 'get',
-    params
-  })
+    url: "/app/guidance",
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 获取创业指导详情
+ * @param {*} params
+ * @returns
+ */
+export function getWorkGuideDetails(params) {
+  return request({
+    url: "/app/guidance/getDetail/" + params.id,
+    method: "get",
+    params,
+  });
 }

src/assets/styles/common.scss

@@ -1,6 +1,6 @@
 .app-main {
   &-box {
-    width: calc(70% + 40px);
+    width:70%;
     min-width: 600px;
     margin: 23px auto 0;
     &-content {

src/components/BannerBreadcrumb/index.vue

@@ -2,8 +2,8 @@
  * @Description: 顶部广告图和面包屑
  * @Author: 空白格
  * @Date: 2022-08-11 13:44:08
- * @LastEditors: wangcc
- * @LastEditTime: 2022-08-24 16:19:32
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-25 13:46:59
  * @FilePath: \veterans_client_web\src\components\BannerBreadcrumb\index.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -16,10 +16,23 @@
     <!-- 面包屑 -->
     <template v-if="breadcrumb">
       <div class="banner-breadcrumb-breadcrumb">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
-        </el-breadcrumb>
+        <template v-if="isRouter">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item
+              v-for="(item, index) in breadcrumbList"
+              :key="index"
+              :to="'/' + item.path"
+              >{{ item.label }}</el-breadcrumb-item
+            >
+          </el-breadcrumb>
+        </template>
+        <template v-else>
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
+          </el-breadcrumb>
+        </template>
       </div>
     </template>
   </div>
@@ -37,6 +50,48 @@ export default {
       type: Boolean,
       default: true,
     },
+    isRouter: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      breadcrumbList: [],
+    };
+  },
+  mounted() {
+    if (this.isRouter) {
+      this.handleRouter();
+    }
+  },
+  methods: {
+    /**
+     * 根据路由获取面包屑
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    handleRouter() {
+      let path = this.$router.currentRoute.path.slice(1),
+        routerOptions = this.$router.options.routes[0].children,
+        breadcrumbList = [],
+        pathList;
+      if (path) {
+        pathList = path.split("/").filter((item) => item && item.trim());
+        pathList[pathList.length - 1] = path;
+        pathList.forEach((item) => {
+          routerOptions.forEach((jitem) => {
+            if (item === jitem.path) {
+              breadcrumbList.push({
+                path: jitem.path,
+                label: jitem.meta.title,
+              });
+            }
+          });
+        });
+        this.breadcrumbList = breadcrumbList;
+      }
+    },
   },
 };
 </script>
@@ -61,14 +116,14 @@ export default {
     }
   }
   &-breadcrumb {
-    background-color: #fff;
+    background-color: #f5f7fa;
     :deep(.el-breadcrumb) {
       width: 70%;
       height: 64px;
       line-height: 64px;
       min-width: 600px;
       margin: 0 auto;
-      font-size: 20px;
+      font-size: 16px;
     }
     :deep(.el-breadcrumb__inner.is-link) {
       color: #7e7e7e;

src/router/index.js

@@ -114,6 +114,14 @@ const routes = [
           title: '创业指引'
         }
       },
+      {
+        path: 'workguide/details',
+        name: 'WorkGuideDetailsIndex',
+        component: () => import('@/views/WorkGuide/WorkGuideDetails/WorkGuideDetailsIndex.vue'),
+        meta: {
+          title: '创业计划详情'
+        }
+      },
       {
         path: 'educationpromote',
         name: 'EducationPromoteIndex',

src/views/Home/HomeIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-10 11:26:40
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-23 15:22:06
+ * @LastEditTime: 2022-08-25 13:34:15
  * @FilePath: \veterans_client_web\src\views\Home\HomeIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -33,7 +33,12 @@
                     :key="index"
                   >
                     <el-image
-                    @click="jumpPage('newsdetails',{ id: item.artId,type:'news' })"
+                      @click="
+                        jumpPage('newsdetails', {
+                          id: item.artId,
+                          type: 'news',
+                        })
+                      "
                       class="image"
                       :src="
                         item.artImage ||
@@ -52,7 +57,15 @@
                         ></el-image>
                       </div>
                     </el-image>
-                    <div class="title" @click="jumpPage('newsdetails',{ id: item.artId,type:'news' })">
+                    <div
+                      class="title"
+                      @click="
+                        jumpPage('newsdetails', {
+                          id: item.artId,
+                          type: 'news',
+                        })
+                      "
+                    >
                       {{ item.artTitle || "" }}
                     </div>
                   </el-carousel-item>
@@ -65,7 +78,12 @@
                   <el-tab-pane label="新闻动态" name="first">
                     <ul class="news-infomation">
                       <li
-                        @click="jumpPage('newsdetails',{ id: item.artId,type:'news' })"
+                        @click="
+                          jumpPage('newsdetails', {
+                            id: item.artId,
+                            type: 'news',
+                          })
+                        "
                         class="news-infomation-item"
                         v-for="(item, index) in newsList"
                         :key="index"
@@ -80,7 +98,7 @@
                   <el-tab-pane label="通知公告" name="second">
                     <ul class="news-infomation">
                       <li
-                        @click="jumpPage('noticedetails',{ id: item.id })"
+                        @click="jumpPage('noticedetails', { id: item.id })"
                         class="news-infomation-item"
                         v-for="(item, index) in noticeList"
                         :key="index"
@@ -157,7 +175,12 @@
                           v-if="policyObj.policyList.length"
                         >
                           <div
-                          @click="jumpPage('newsdetails',{ id: item.artId,type:'policy' })"
+                            @click="
+                              jumpPage('newsdetails', {
+                                id: item.artId,
+                                type: 'policy',
+                              })
+                            "
                             class="hmpc-left-list-item"
                             v-for="(item, index) in policyObj.policyList"
                             :key="index"
@@ -426,9 +449,9 @@ export default {
      * @param {any} path
      * @returns {any}
      */
-    jumpPage(path,param) {
+    jumpPage(path, param) {
       if (path) {
-        this.$router.push({path:path,query:param});
+        this.$router.push({ path: path, query: param });
       }
     },
     /**
@@ -599,7 +622,7 @@ export default {
       }
     }
     &-policy-box {
-      background: #F7F7F7;
+      background: #f7f7f7;
     }
     &-policy {
       width: 70%;

src/views/WorkGuide/WorkGuideDetails/WorkGuideDetailsIndex.vue

@@ -0,0 +1,171 @@
+<!--
+ * @Description: 创业指引详情
+ * @Author: 空白格
+ * @Date: 2022-08-25 13:30:07
+ * @LastEditors: 空白格
+ * @LastEditTime: 2022-08-25 15:08:22
+ * @FilePath: \veterans_client_web\src\views\WorkGuide\WorkGuideDetails\WorkGuideDetailsIndex.vue
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
+-->
+<template>
+  <div class="app-main details">
+    <BannerBreadcrumb title="创业指引" :isRouter="true" />
+    <div class="app-main-box details-box">
+      <div class="app-main-box-content details-box-content">
+        <div class="details-box-content-title">
+          {{ detainsInfo.title || "-" }}
+        </div>
+        <div class="details-box-content-subtitle">
+          <span>{{ detainsInfo.createTime }}提交</span>
+          <span class="no-reply" v-if="detainsInfo.replyStatus === 0"
+            >待专家回复</span
+          >
+          <span class="has-reply" v-else>专家已回复</span>
+        </div>
+        <div class="details-box-content-des">
+          <div class="dbcd-label">描述</div>
+          <div class="dbcd-content" v-html="detainsInfo.description"></div>
+        </div>
+        <div class="details-box-content-pdf" v-if="detainsInfo.planBookName">
+          <div @click="previewPdf(detainsInfo.planBookUrl)">{{ detainsInfo.planBookName }}</div>
+        </div>
+        <div
+          class="details-box-content-reply"
+          v-if="detainsInfo.replyStatus === 1"
+        >
+          <div class="dbcr-label">专家建议</div>
+          <div class="dbcr-content" v-html="detainsInfo.replyContent"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
+import { getWorkGuideDetails } from "@/api/WorkGuide";
+export default {
+  name: "WorkGuideDetailsIndex",
+  components: {
+    BannerBreadcrumb,
+  },
+  data() {
+    return {
+      detainsInfo: {},
+      id: undefined,
+    };
+  },
+  created() {
+    const { id } = this.$route.query;
+    if (id) {
+      this.id = id;
+      this.getDetails();
+    }
+  },
+  methods: {
+    /**
+     * 获取详情
+     * @date 2022-08-25
+     * @returns {any}
+     */
+    getDetails() {
+      getWorkGuideDetails({ id: this.id }).then((res) => {
+        console.log(res);
+        if (res.code === 200) {
+          this.detainsInfo = res?.data;
+        }
+      });
+    },
+    /**
+     * 预览pdf
+     * @date 2022-08-25
+     * @param {any} pdfUrl
+     * @returns {any}
+     */
+    previewPdf(pdfUrl) {
+      if (pdfUrl) {
+        window.open('https://www.gjtool.cn/pdfh5/pdf.html?file=' + pdfUrl)
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.details {
+  &-box {
+    margin: 0 auto;
+    &-content {
+      &-title {
+        padding: 10px 0;
+        text-align: center;
+        font-size: 24px;
+        color: #1a1a1a;
+        border-bottom: 1px solid #d5d5d5;
+      }
+      &-subtitle {
+        text-align: center;
+        margin: 20px 0 40px;
+        font-size: 14px;
+        color: #999999;
+        span {
+          &:last-child {
+            margin-left: 40px;
+          }
+        }
+        .no-reply {
+          color: #ef6622;
+        }
+        .has-reply {
+          color: #3ca7fe;
+        }
+      }
+      &-des {
+        .dbcd-label {
+          font-size: 20px;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          font-family: SourceHanSansCN;
+        }
+        .dbcd-content {
+          color: #666666;
+          font-size: 14px;
+        }
+      }
+      &-pdf {
+        text-align: center;
+        margin: 20px auto 30px;
+        div {
+          display: inline-block;
+          padding: 0 100px;
+          max-width: 700px;
+          cursor: pointer;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          font-size: 14px;
+          color: #008fff;
+          border: dashed 1px #0091ff;
+          border-radius: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+        }
+      }
+      &-reply {
+        .dbcr-label {
+          font-size: 20px;
+          color: #1a1a1a;
+          margin-bottom: 20px;
+          font-family: SourceHanSansCN;
+        }
+        .dbcr-content {
+          color: #666666;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/WorkGuide/WorkGuideIndex.vue

@@ -3,7 +3,7 @@
  * @Author: 空白格
  * @Date: 2022-08-12 11:41:14
  * @LastEditors: 空白格
- * @LastEditTime: 2022-08-12 13:41:14
+ * @LastEditTime: 2022-08-25 13:34:56
  * @FilePath: \veterans_client_web\src\views\WorkGuide\WorkGuideIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
@@ -27,7 +27,10 @@
               v-for="(item, index) in guideList"
               :key="index"
             >
-              <div class="work-guide-list-item">
+              <div
+                class="work-guide-list-item"
+                @click="jumpPage('/workguide/details', { id: item.id })"
+              >
                 <div class="wgli-title">{{ item.title }}</div>
                 <div class="wgli-description" v-html="item.description"></div>
                 <div class="wgli-footer">
@@ -110,6 +113,18 @@ export default {
       this.queryParams.pageNum = page;
       this.getWorkGuideList();
     },
+    /**
+     * 跳转指定页面
+     * @date 2022-08-25
+     * @param {any} path
+     * @param {any} query
+     * @returns {any}
+     */
+    jumpPage(path, query) {
+      if (path) {
+        this.$router.push({ path, query });
+      }
+    },
   },
 };
 </script>