feat: 产品详情

src/views/Goods/modules/ProtocolIframe.vue → src/components/ProtocolIframe.vue

@@ -11,14 +11,17 @@
       <div class="protocol-title">{{ title }}</div>
       <cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
     </div>
+    <!-- content -->
     <div
       class="protocol-content"
       v-if="content && scrollRefresh && !$slots.default"
       v-html="content"
     ></div>
+    <!-- iframe -->
     <div class="protocol-frame-wrap" v-if="url && scrollRefresh">
       <iframe class="protocol-frame" :src="url" frameborder="0" height="100%"></iframe>
     </div>
+    <!-- slot -->
     <div class="protocol-wrap" v-if="!content && scrollRefresh && $slots.default">
       <slot></slot>
     </div>

src/router/index.js

@@ -12,22 +12,22 @@ const routes = [
   {
     path: "/goods",
     name: "Goods",
-    component: () => import(/* webpackChunkName: "goods" */ "../views/Goods/index.vue")
+    component: () => import("../views/Goods/index.vue")
   },
   {
     path: "/goods/detail",
     name: "GoodsDetail",
-    component: () => import(/* webpackChunkName: "goodsDetail" */ "../views/Goods/detail.vue")
+    component: () => import("../views/Goods/Detail/index.vue")
   },
   {
     path: "/goods/plan",
     name: "GoodsPlan",
-    component: () => import(/* webpackChunkName: "GoodsPlan" */ "../views/Goods/plan.vue")
+    component: () => import("../views/Goods/Plan/index.vue")
   },
   {
     path: "/goods/inform",
     name: "GoodsInform",
-    component: () => import(/* webpackChunkName: "GoodsInform" */ "../views/Goods/inform.vue")
+    component: () => import("../views/Goods/Inform/index.vue")
   },
   {
     path: "/user",

src/views/Goods/detail.vue → src/views/Goods/Detail/index.vue

@@ -112,37 +112,37 @@ import intro02 from "@/assets/goods/detail/zhongjixian/intro-02.png";
 import intro03 from "@/assets/goods/detail/zhongjixian/intro-03.png";
 import intro04 from "@/assets/goods/detail/zhongjixian/intro-04.png";
 
-import detailHeader from "./modules/DetailHeader";
-import detailFooter from "./modules/DetailFooter";
-import compactCellGroup from "./modules/CompactCellGroup";
-import cpsDemo from "./modules/CpsDemo";
-import cpsProcess from "./modules/CpsProcess";
-import cpsQa from "./modules/CpsQA";
-import protocolIframe from "./modules/ProtocolIframe";
-import goInsureDialog from "./modules/GoInsureDialog";
+import DetailHeader from "./modules/DetailHeader";
+import DetailFooter from "./modules/DetailFooter";
+import CompactCellGroup from "../modules/CompactCellGroup";
+import CpsDemo from "./modules/CpsDemo";
+import CpsProcess from "./modules/CpsProcess";
+import CpsQa from "./modules/CpsQA";
+import ProtocolIframe from "../modules/ProtocolIframe";
+import GoInsureDialog from "../modules/GoInsureDialog";
 import cpsProcessDetail from "./process";
 import cpsRate from "./rate";
-import crRadioBtn from "@/components/CrRadioBtn";
-import card from "@/components/Card";
-import copyright from "@/components/Copyright";
-import goodAction from "@/components/GoodAction";
+import CrRadioBtn from "@/components/CrRadioBtn";
+import Card from "@/components/Card";
+import Copyright from "@/components/Copyright";
+import GoodAction from "@/components/GoodAction";
 import RecordLayer from "@/components/RecordLayer";
 
 export default {
   name: "GoodsDetail",
   components: {
-    detailHeader,
-    detailFooter,
-    compactCellGroup,
-    crRadioBtn,
-    card,
-    cpsDemo,
-    cpsProcess,
-    cpsQa,
-    copyright,
-    goInsureDialog,
-    goodAction,
-    protocolIframe,
+    DetailHeader,
+    DetailFooter,
+    CompactCellGroup,
+    CrRadioBtn,
+    Card,
+    CpsDemo,
+    CpsProcess,
+    CpsQa,
+    Copyright,
+    ProtocolIframe,
+    GoodAction,
+    GoInsureDialog,
     cpsProcessDetail,
     cpsRate,
     RecordLayer
@@ -287,4 +287,4 @@ export default {
   }
 };
 </script>
-<style lang="less" src="./detail.less" scoped></style>
+<style lang="less" src="./index.less" scoped></style>

src/views/Goods/modules/CpsDemo.vue → src/views/Goods/Detail/modules/CpsCase.vue

@@ -44,7 +44,7 @@
 <script>
 import card from "@/components/Card";
 export default {
-  name: "CpsDemo",
+  name: "CpsCase",
   components: {
     card
   },

src/views/Goods/process.less → src/views/Goods/Detail/modules/CpsProcessDetail.vue

+<template>
+  <div class="cps-process-list">
+    <div class="cps-process-list-item" v-for="(item, index) in detail" :key="index">
+      <div class="cps-process-list-item-title">{{ index + 1 }}</div>
+      <div class="cps-process-list-item-content">
+        <h6>{{ item.title }}</h6>
+        <small v-html="item.desc"></small>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import detail from "@/api/detail.process.mock";
+export default {
+  name: "CpsProcessDetail",
+  data() {
+    return {
+      detail
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
 @import "../../style/var.less";
 @import "../../style/mixins.less";
 .cps-process {
@@ -58,3 +83,4 @@
     }
   }
 }
+</style>

src/views/Goods/rate.vue → src/views/Goods/Detail/modules/CpsRate.vue

@@ -69,4 +69,90 @@ export default {
   methods: {}
 };
 </script>
-<style lang="less" src="./rate.less" scoped></style>
+<style lang="less" scoped>
+@import "../../style/var.less";
+
+.rate-container {
+  background-color: @white;
+}
+.rate-head {
+  width: 100% !important;
+  @{deep} & > div {
+    width: 100% !important;
+    z-index: 100;
+  }
+  @{deep} .cr-tabbar {
+    font-size: @font-size-16;
+    padding: @padding-lg+1 0;
+    &-item {
+      position: relative;
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        top: 26px;
+        // transition: width .2s linear;
+        content: " ";
+        display: block;
+        width: 0;
+        height: 4px;
+        background: @orange-light;
+        border-radius: @border-radius-lx;
+      }
+      &--active {
+        font-weight: 600;
+        &::after {
+          width: 32px;
+        }
+      }
+    }
+  }
+  .cr-radio-group {
+    margin-top: 10px;
+  }
+}
+
+.rate-body {
+  padding: 15px 0;
+}
+.rate-table {
+  margin: 0;
+  width: 100%;
+  thead {
+    th {
+      color: @gray-5;
+      font-size: @font-size-12;
+      font-weight: @font-weight-bold;
+      padding: @padding-sm + 2 @padding-md + 2;
+      text-align: left;
+      background-color: @gray-1;
+      &:first-child {
+        border-top-left-radius: @border-radius-lg;
+        border-bottom-left-radius: @border-radius-lg;
+        padding-left: 30px;
+      }
+      &:last-child {
+        border-top-right-radius: @border-radius-lg;
+        border-bottom-right-radius: @border-radius-lg;
+      }
+    }
+  }
+  tbody {
+    th {
+      color: @black;
+      font-size: @font-size-12;
+      font-weight: @font-weight-bold;
+      padding: @padding-sm + 2 @padding-md + 2;
+      text-align: left;
+      padding-left: 30px;
+    }
+    td {
+      color: @black;
+      font-size: @font-size-12;
+      padding: @padding-sm + 2 @padding-md + 2;
+      text-align: left;
+    }
+  }
+}
+</style>

src/views/Goods/inform.vue → src/views/Goods/Inform/index.vue

@@ -57,4 +57,4 @@ export default {
   }
 };
 </script>
-<style lang="less" src="./inform.less" scoped></style>
+<style lang="less" src="./index.less" scoped></style>

src/views/Goods/plan.vue → src/views/Goods/Plan/index.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 <script>
-import protocolIframe from "./modules/ProtocolIframe";
+import protocolIframe from "../modules/ProtocolIframe";
 import card from "@/components/Card";
 
 import detail from "@/api/detail.plan.mock";
@@ -51,4 +51,4 @@ export default {
   }
 };
 </script>
-<style lang="less" src="./plan.less" scoped></style>
+<style lang="less" src="./index.less" scoped></style>

src/views/Goods/process.vue

-<template>
-  <div class="cps-process-list">
-    <div class="cps-process-list-item" v-for="(item, index) in detail" :key="index">
-      <div class="cps-process-list-item-title">{{ index + 1 }}</div>
-      <div class="cps-process-list-item-content">
-        <h6>{{ item.title }}</h6>
-        <small v-html="item.desc"></small>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import detail from "@/api/detail.process.mock";
-export default {
-  name: "CpsProcessDetail",
-  data() {
-    return {
-      detail
-    };
-  }
-};
-</script>
-
-<style lang="less" src="./process.less" scoped></style>

src/views/Goods/rate.less

-@import "../../style/var.less";
-
-.rate-container {
-  background-color: @white;
-}
-.rate-head {
-  width: 100% !important;
-  @{deep} & > div {
-    width: 100% !important;
-    z-index: 100;
-  }
-  @{deep} .cr-tabbar {
-    font-size: @font-size-16;
-    padding: @padding-lg+1 0;
-    &-item {
-      position: relative;
-      &::after {
-        position: absolute;
-        left: 0;
-        right: 0;
-        margin: auto;
-        top: 26px;
-        // transition: width .2s linear;
-        content: " ";
-        display: block;
-        width: 0;
-        height: 4px;
-        background: @orange-light;
-        border-radius: @border-radius-lx;
-      }
-      &--active {
-        font-weight: 600;
-        &::after {
-          width: 32px;
-        }
-      }
-    }
-  }
-  .cr-radio-group {
-    margin-top: 10px;
-  }
-}
-
-.rate-body {
-  padding: 15px 0;
-}
-.rate-table {
-  margin: 0;
-  width: 100%;
-  thead {
-    th {
-      color: @gray-5;
-      font-size: @font-size-12;
-      font-weight: @font-weight-bold;
-      padding: @padding-sm + 2 @padding-md + 2;
-      text-align: left;
-      background-color: @gray-1;
-      &:first-child {
-        border-top-left-radius: @border-radius-lg;
-        border-bottom-left-radius: @border-radius-lg;
-        padding-left: 30px;
-      }
-      &:last-child {
-        border-top-right-radius: @border-radius-lg;
-        border-bottom-right-radius: @border-radius-lg;
-      }
-    }
-  }
-  tbody {
-    th {
-      color: @black;
-      font-size: @font-size-12;
-      font-weight: @font-weight-bold;
-      padding: @padding-sm + 2 @padding-md + 2;
-      text-align: left;
-      padding-left: 30px;
-    }
-    td {
-      color: @black;
-      font-size: @font-size-12;
-      padding: @padding-sm + 2 @padding-md + 2;
-      text-align: left;
-    }
-  }
-}
\ No newline at end of file