up

src/components/service-info.vue

 <template>
-  <div class="sevice_info" v-if="serviceData">
+  <div class="sevice_info" v-if="data">
     <div class="service_title">
-      <span class="service_name" v-text="serviceData.name"></span>
+      <span class="service_name" v-text="data.name"></span>
       <span
         class="service_type"
-        v-if="serviceData.type"
-        v-text="serviceData.type"
+        v-if="data.type"
+        v-text="data.type"
       ></span>
-      <span class="service_level" v-text="serviceData.openLevel"></span>
+      <span class="service_level" v-text="data.openLevel"></span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_liulan.png')" />
-        <span v-text="'浏览次数：' + serviceData.viewCount"></span>
+        <span v-text="'浏览次数：' + data.viewCount"></span>
       </span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_huoqu.png')" />
-        <span v-text="'获取次数：' + serviceData.acquireCount"></span>
+        <span v-text="'获取次数：' + data.acquireCount"></span>
       </span>
     </div>
     <div class="main_container">
-      <div class="main_container-left" v-if="serviceData.img">
-        <img :src="serviceData.img" width="460" />
+      <div class="main_container-left" v-if="data.img">
+        <img :src="data.img" width="460" />
       </div>
       <div class="main_container-right">
         <ul class="service_base_info">
           <li>
             <span>提供机构：</span>
-            <span v-text="serviceData.providedBy"> </span>
+            <span v-text="data.providedBy"> </span>
           </li>
           <li>
             <span>发布时间：</span>
-            <span v-text="serviceData.publishTime"></span>
+            <span v-text="data.publishTime"></span>
           </li>
           <li>
             <span>更新时间：</span>
-            <span v-text="serviceData.updatedTime"></span>
+            <span v-text="data.updatedTime"></span>
           </li>
           <li>
             <span>数据领域：</span>
-            <span v-text="serviceData.dataField"></span>
+            <span v-text="data.dataField"></span>
           </li>
           <li>
             <span>服务类型：</span>
-            <span v-html="serviceData.serviceType.join('&emsp;')"></span>
+            <span v-html="data.serviceType.join('&emsp;')"></span>
           </li>
           <li>
             <span>资源摘要：</span>
-            <span v-text="serviceData.resourceSummary"></span>
+            <span v-text="data.resourceSummary"></span>
           </li>
         </ul>
         <div class="commodity_information">
           <span>规&emsp;&emsp;格：</span>
           <div class="btn_container">
             <el-button
-              v-for="(item, index) in serviceData.specifications"
+              v-for="(item, index) in data.specifications"
               :key="'specifications_' + index"
               :type="
                 item.value === commodityData.specification
@@ -73,7 +73,7 @@
           <span>购买方式：</span>
           <div class="btn_container">
             <el-button
-              v-for="(item, index) in serviceData.ways"
+              v-for="(item, index) in data.ways"
               v-text="item.name"
               :key="'way_' + index"
               :type="item.value === commodityData.way ? 'primary' : 'default'"
@@ -108,7 +108,7 @@
 <script>
 export default {
   props: {
-    serviceData: {
+    data: {
       type: Object,
       default: () => null,
     },
@@ -123,7 +123,7 @@ export default {
   computed: {
     specificationDescription() {
       let obj =
-        this.serviceData.specifications[this.commodityData.specification] || {};
+        this.data.specifications[this.commodityData.specification] || {};
       return obj.description || "";
     },
   },

src/pages/sjfwDetail.vue

@@ -8,7 +8,7 @@
       </el-breadcrumb>
     </div>
 
-    <service-info :service-data="serviceData"></service-info>
+    <service-info :data="baseInfo"></service-info>
 
     <service-tabs type="sjfw"></service-tabs>
   </div>
@@ -24,7 +24,10 @@ export default {
     serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
+    detailData: null,
+    specification: null,
+    provider: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -40,9 +43,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ sjfw }) => {
-          this.serviceData = sjfw;
+          this.baseInfo = sjfw;
         },
         (error) => {
           console.log(error);

src/pages/skfwDetail.vue

@@ -8,7 +8,7 @@
       </el-breadcrumb>
     </div>
 
-    <service-info :service-data="serviceData"></service-info>
+    <service-info :data="baseInfo"></service-info>
 
     <service-tabs type="skfw"></service-tabs>
   </div>
@@ -24,7 +24,7 @@ export default {
     serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -40,9 +40,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ skfw }) => {
-          this.serviceData = skfw;
+          this.baseInfo = skfw;
         },
         (error) => {
           console.log(error);

src/pages/zhyyfwDetail.vue

@@ -8,7 +8,7 @@
       </el-breadcrumb>
     </div>
 
-    <service-info :service-data="serviceData"></service-info>
+    <service-info :data="baseInfo"></service-info>
 
     <service-tabs type="zhyyfw"></service-tabs>
   </div>
@@ -24,7 +24,7 @@ export default {
     serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -40,9 +40,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ zhyyfw }) => {
-          this.serviceData = zhyyfw;
+          this.baseInfo = zhyyfw;
         },
         (error) => {
           console.log(error);

static/serviceBaseInfo.json

+{
+  "sjfw": {
+    "name": "水路货物周转量情况",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省交通运输厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["专题数据服务", "企业专题数据服务"],
+    "resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "skfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "贵州应急资源地图微服务",
+    "type": "Map Service",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省应急管理厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["时空云服务", "专题地图服务"],
+    "resourceSummary": "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "zhyyfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "地图视频融合服务",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["综合应用服务"],
+    "resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "yysd": {
+    "name": "mapvideos V1.0",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["综合应用服务"],
+    "resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  }
+}