服务详情页面静态修改

c3b20249 · 徐一鸣 · 9425a2d0 · c3b20249 · c3b20249 · c3b20249
Commit c3b20249 authored May 13, 2020 by 徐一鸣
7 changed files
--- a/src/components/service-step.vue
+++ b/src/components/service-step.vue
 <template>
-  <div class="service_step">
-    <ul class="step_items">
-      <li class="step_item">
-        <div class="step_icon">
-          <span>1</span>
-        </div>
-        <p class="step_title">服务申请</p>
-      </li>
-      <li class="step_line"></li>
-      <li class="step_item">
-        <div class="step_icon">
-          <span>2</span>
-        </div>
-        <p class="step_title">审核确认</p>
-      </li>
-      <li class="step_line"></li>
-      <li class="step_item">
-        <div class="step_icon">
-          <span>3</span>
-        </div>
-        <p class="step_title">费用支付</p>
-      </li>
-      <li class="step_line"></li>
-      <li class="step_item">
-        <div class="step_icon">
-          <span>4</span>
-        </div>
-        <p class="step_title">服务获取</p>
-      </li>
+  <div class="service_steps">
+    <ul class="steps_list">
+      <template v-for="(step, index) in data">
+        <li class="step_item" :key="'step_' + index">
+          <div class="step_icon">
+            <span v-text="index + 1"></span>
+          </div>
+          <p class="step_title" v-text="step"></p>
+        </li>
+        <li
+          class="step_line"
+          :key="'step_line_' + index"
+          v-if="index + 1 < data.length"
+        ></li>
+      </template>
    </ul>
  </div>
 </template>

+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: ["服务申请", "信息填写", "审核确认", "服务获取"],
+    },
+  },
+  mounted() {
+    console.log(this.data);
+  },
+};
+</script>
+
 <style scoped>
-.service_step {
+.service_steps {
  min-height: 68px;
  padding: 30px 0;
 }
-.service_step > .step_items {
+.service_steps > .steps_list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
 }
-.service_step .step_line {
+.service_steps .step_line {
  width: 168px;
-  border: 1px  solid #c0c8f8;
+  border: 1px solid #c0c8f8;
  margin: 33px 10px 0;
 }
-.service_step .step_item > .step_icon {
+.service_steps .step_item > .step_icon {
  width: 68px;
  height: 68px;
  background-color: #515fe7;
@@ -61,7 +61,7 @@
  font-weight: bold;
  color: #fff;
 }
-.service_step .step_item > .step_title {
+.service_steps .step_item > .step_title {
  font-size: 16px;
  line-height: 24px;
  color: #242c43;

--- a/src/components/service-tab-comments.vue
+++ b/src/components/service-tab-comments.vue
 <template>
  <div class="service_tab-comments">
    <comments-score :data="data.baseInfo"></comments-score>
-    <comments-list :data="data.ffpjxxList"></comments-list>
+    <comments-list :data="data.list"></comments-list>
    <comments-pagination
      :total="data.baseInfo.total"
      :page-sizes="pageSizes"

--- a/src/components/service-tab-detail.vue
+++ b/src/components/service-tab-detail.vue
@@ -7,20 +7,12 @@
    >
      <h3 class="detail-title" v-text="item.name + '：'"></h3>

-      <service-step v-if="item.type == 'step'"></service-step>
+      <service-steps v-if="item.type == 'step'" :data="item.value"></service-steps>
      <p
        v-else-if="item.type == 'text'"
        class="detail-text"
        v-text="item.value"
      ></p>
-      <ul v-else-if="item.type == 'list'">
-        <li v-for="(v, i) in item.value" :key="'detail-li_' + index + '_' + i">
-          <p class="detail-text">
-            <span v-text="v.name + '：'"></span>
-            <span v-text="v.value"></span>
-          </p>
-        </li>
-      </ul>
      <el-table
        v-else-if="item.type == 'table'"
        class="detail-table"
@@ -38,16 +30,32 @@
          :align="v.align || 'left'"
        ></el-table-column>
      </el-table>
+      <el-table
+        v-else-if="item.type == 'list'"
+        class="detail-table detail-list"
+        :border="false"
+        :data="item.value"
+      >
+        <el-table-column
+          prop="name"
+          label="name"
+          width="120"
+        ></el-table-column>
+        <el-table-column
+          prop="value"
+          label="value"
+        ></el-table-column>
+      </el-table>
    </li>
  </ul>
 </template>

 <script>
-import serviceStep from "@/components/service-step";
+import serviceSteps from "@/components/service-steps";

 export default {
  components: {
-    serviceStep,
+    serviceSteps,
  },
  props: {
    data: {
@@ -76,7 +84,4 @@ export default {
  line-height: 25px;
  color: #242c43;
 }
-.detail-item .detail-table {
-  width: 100%;
-}
 </style>
--- a/src/components/service-tabs.vue
+++ b/src/components/service-tabs.vue
@@ -5,32 +5,28 @@
    v-model="serviceTabsActiveName"
    :stretch="true"
  >
-    <el-tab-pane label="服务详情信息" name="first">
+    <el-tab-pane label="服务详情信息" name="first" v-if="detail">
      <service-tab-detail
-        v-if="fwxqxx"
        class="service_info"
-        :data="fwxqxx"
+        :data="detail"
      ></service-tab-detail>
    </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
+    <el-tab-pane label="规格定价" name="second" v-if="specification">
      <service-tab-specification
-        v-if="ggdj"
        class="service_info"
-        :data="ggdj"
+        :data="specification"
      ></service-tab-specification>
    </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
+    <el-tab-pane label="提供机构" name="third" v-if="provider">
      <service-tab-provider
-        v-if="tgjg"
        class="service_info"
-        :data="tgjg"
+        :data="provider"
      ></service-tab-provider>
    </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
+    <el-tab-pane label="服务评价信息" name="fourth" v-if="comments">
      <service-tab-comments
-        v-if="ffpjxx"
        class="service_info"
-        :data="ffpjxx"
+        :data="comments"
      ></service-tab-comments>
    </el-tab-pane>
  </el-tabs>
@@ -57,10 +53,10 @@ export default {
  },
  data: () => ({
    serviceTabsActiveName: "first",
-    fwxqxx: null, // 服务详情信息
-    ggdj: null, // 规格定价
-    tgjg: null, // 提供机构
-    ffpjxx: null, // 服务评价信息
+    detail: null, // 服务详情信息
+    specification: null, // 规格定价
+    provider: null, // 提供机构
+    comments: null, // 服务评价信息
  }),
  methods: {
    getDataFromApi(_url) {
@@ -80,10 +76,10 @@ export default {
        (data) => {
          let _data = data[this.type];

-          this.fwxqxx = _data.fwxqxx;
-          this.ggdj = _data.ggdj;
-          this.tgjg = _data.tgjg;
-          this.ffpjxx = _data.ffpjxx;
+          this.detail = _data.detail;
+          this.specification = _data.specification;
+          this.provider = _data.provider;
+          this.comments = _data.comments;
        },
        (error) => {
          console.log(error);
@@ -149,7 +145,26 @@ export default {
 .service_info_tab .el-table::before {
  display: none;
 }
+.service_info_tab .el-table {
+  width: 100%;
+}
 .service_info_tab .el-table__row:nth-child(odd) td {
  background-color: #f8f9fd;
 }
+.service_info_tab .detail-list .el-table__header-wrapper {
+  display: none;
+}
+.service_info_tab .detail-list .el-table__row td {
+  color: #58617a;
+}
+.service_info_tab .detail-list .el-table__row td:first-child {
+  font-weight: bold;
+  color: #1a2236;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(even) td {
+  background-color: #f8f9fd;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(odd) td {
+  background-color: #fff;
+}
 </style>
--- a/src/pages/skfwDetail.vue
+++ b/src/pages/skfwDetail.vue
@@ -8,22 +8,20 @@
      </el-breadcrumb>
    </div>

-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :service-data="serviceData"></service-info>

-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs type="skfw"></service-tabs>
  </div>
 </template>

 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";

 export default {
  components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    serviceInfo,
+    serviceTabs,
  },
  data: () => ({
    serviceData: null,

--- a/src/pages/zhyyfwDetail.vue
+++ b/src/pages/zhyyfwDetail.vue
@@ -8,22 +8,20 @@
      </el-breadcrumb>
    </div>

-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :service-data="serviceData"></service-info>

-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs type="zhyyfw"></service-tabs>
  </div>
 </template>

 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";

 export default {
  components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    serviceInfo,
+    serviceTabs,
  },
  data: () => ({
    serviceData: null,

--- a/static/serviceInfo.json
+++ b/static/serviceInfo.json
 {
  "sjfw": {
-    "fwxqxx": [
+    "detail": [
      {
        "name": "获取流程",
-        "type": "step"
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
      },
      {
        "name": "服务描述",
@@ -188,7 +189,7 @@
        }
      }
    ],
-    "ggdj": [
+    "specification": [
      {
        "name": "按月",
        "data": [
@@ -224,13 +225,13 @@
        ]
      }
    ],
-    "tgjg": {
+    "provider": {
      "provider": "贵州省交通运输厅",
      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "person": "张先生",
      "phone": "010-66666666"
    },
-    "ffpjxx": {
+    "comments": {
      "baseInfo": {
        "score": 3.5,
        "total": 23,
@@ -257,7 +258,7 @@
          }
        ]
      },
-      "ffpjxxList": [
+      "list": [
        {
          "name": "禺彊",
          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
@@ -331,10 +332,388 @@
      ]
    }
  },
-  "fwxqxx": [
+  "skfw": {
+    "detail": [
+      {
+        "name": "获取流程",
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
+      },
+      {
+        "name": "服务描述",
+        "type": "text",
+        "value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
+      },
+      {
+        "name": "服务属性",
+        "type": "list",
+        "value": [
+          {
+            "name": "大小",
+            "value": "66kb"
+          },
+          {
+            "name": "API",
+            "value": "Java"
+          },
+          {
+            "name": "用途",
+            "value": "即用型"
+          },
+          {
+            "name": "空间范围",
+            "value": "111.8915040799999, 114.25605481900004, 28.762848204000022"
+          },
+          {
+            "name": "标签",
+            "value": "T003 智能地图 T001"
+          },
+          {
+            "name": "制作单位",
+            "value": "贵州省应急管理应急管理厅"
+          },
+          {
+            "name": "离线模式",
+            "value": "禁用"
+          }
+        ]
+      }
+    ],
+    "specification": [
+      {
+        "name": "按月",
+        "data": [
+          {
+            "gg": "访问次数：20/日 访问量：100/日",
+            "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/日 访问量：1000/日",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      },
+      {
+        "name": "按年",
+        "data": [
+          {
+            "gg": "访问次数：20/年 访问量：100/年",
+            "ggsm": "用户服务申请通过审核确认后，每年可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/年 访问量：1000/年",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每年可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      }
+    ],
+    "provider": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
+    },
+    "comments": {
+      "baseInfo": {
+        "score": 3.5,
+        "total": 23,
+        "starInfo": [
+          {
+            "star": 5,
+            "percent": 40
+          },
+          {
+            "star": 4,
+            "percent": 30
+          },
+          {
+            "star": 3,
+            "percent": 20
+          },
+          {
+            "star": 2,
+            "percent": 5
+          },
+          {
+            "star": 1,
+            "percent": 5
+          }
+        ]
+      },
+      "list": [
+        {
+          "name": "禺彊",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "这个应用非常实用，可以应用到多个业务领域！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "海纳",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        }
+      ]
+    }
+  },
+  "zhyyfw": {
+    "detail": [
+      {
+        "name": "获取流程",
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
+      },
+      {
+        "name": "服务描述",
+        "type": "text",
+        "value": "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务"
+      },
+      {
+        "name": "微服务响应列表",
+        "type": "table",
+        "value": {
+          "datas": [
+            {
+              "name": "apaas-mapvideos",
+              "description": "地图视频融合应用服务"
+            },
+            {
+              "name": "apaas-mapvideos",
+              "description": "地图视频融合应用服务"
+            },
+            {
+              "name": "apaas-mapvideos",
+              "description": "地图视频融合应用服务"
+            }
+          ],
+          "columns": [
+            {
+              "prop": "name",
+              "label": "微服务名称"
+            },
+            {
+              "prop": "description",
+              "label": "微服务描述",
+              "align": "center"
+            }
+          ]
+        }
+      }
+    ],
+    "specification": [
+      {
+        "name": "按月",
+        "data": [
+          {
+            "gg": "访问次数：20/日 访问量：100/日",
+            "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/日 访问量：1000/日",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      },
+      {
+        "name": "按年",
+        "data": [
+          {
+            "gg": "访问次数：20/年 访问量：100/年",
+            "ggsm": "用户服务申请通过审核确认后，每年可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/年 访问量：1000/年",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每年可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      }
+    ],
+    "provider": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
+    },
+    "comments": {
+      "baseInfo": {
+        "score": 3.5,
+        "total": 23,
+        "starInfo": [
+          {
+            "star": 5,
+            "percent": 40
+          },
+          {
+            "star": 4,
+            "percent": 30
+          },
+          {
+            "star": 3,
+            "percent": 20
+          },
+          {
+            "star": 2,
+            "percent": 5
+          },
+          {
+            "star": 1,
+            "percent": 5
+          }
+        ]
+      },
+      "list": [
+        {
+          "name": "禺彊",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "这个应用非常实用，可以应用到多个业务领域！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "海纳",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        }
+      ]
+    }
+  },
+  "detail": [
    {
      "name": "获取流程",
-      "type": "step"
+      "type": "step",
+      "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
    },
    {
      "name": "服务说明",
@@ -501,7 +880,7 @@
      }
    }
  ],
-  "ggdj": [
+  "specification": [
    {
      "gg": "访问次数：20/日 访问量：100/日",
      "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
@@ -515,13 +894,13 @@
      "ggsm": ""
    }
  ],
-  "tgjg": {
+  "provider": {
    "name": "贵州省交通运输厅",
    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "lxr": "张先生",
    "lxdh": "010-66666666"
  },
-  "ffpjxx": {
+  "comments": {
    "baseInfo": {
      "score": 3.5,
      "total": 23,
@@ -548,7 +927,7 @@
        }
      ]
    },
-    "ffpjxxList": [
+    "list": [
      {
        "name": "禺彊",
        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",