Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

src/components/application-info.vue

+<template>
+  <div class="application_info" v-if="data">
+    <div class="application_title">
+      <span class="application_name" v-text="data.name"></span>
+    </div>
+    <div class="main_container">
+      <div class="main_container-left" v-if="data.img">
+        <img :src="data.img" width="460" />
+      </div>
+      <div class="main_container-right">
+        <ul class="application_base_info">
+          <li>
+            <span>应用开发者：</span>
+            <span v-text="data.providedBy"> </span>
+          </li>
+          <li>
+            <span>上线时间：</span>
+            <span v-text="data.publishTime"></span>
+          </li>
+          <li>
+            <span>部署次数：</span>
+            <span v-text="data.acquireCount"></span>
+          </li>
+          <li>
+            <span>应用类型：</span>
+            <span v-html="data.serviceType"></span>
+          </li>
+          <li>
+            <span>业务领域：</span>
+            <span v-text="data.dataField"></span>
+          </li>
+        </ul>
+        <div class="commodity_information">
+          <span>规&emsp;&emsp;格：</span>
+          <div class="btn_container">
+            <el-button
+              v-for="(item, index) in data.specifications"
+              :key="'specifications_' + index"
+              :type="
+                item.value === commodityData.specification
+                  ? 'primary'
+                  : 'default'
+              "
+              @click="changeSpecification(item)"
+            >
+              {{ item.name }}
+            </el-button>
+          </div>
+        </div>
+        <div class="commodity_action">
+          <el-button type="warning" plain @click="addToCart">
+            加入购物车
+          </el-button>
+          <el-button type="warning" @click="applyImmediately">
+            立即申请
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data: () => ({
+    commodityData: {
+      specification: 0,
+    },
+  }),
+  computed: {
+    specificationDescription() {
+      let obj =
+        this.data.specifications[this.commodityData.specification] || {};
+      return obj.description || "";
+    },
+  },
+  methods: {
+    changeSpecification({ value }) {
+      this.commodityData.specification = value;
+    },
+    addToCart() {
+      console.log("addToCart");
+      console.log(this.commodityData);
+    },
+    applyImmediately() {
+      console.log("applyImmediately");
+      console.log(this.commodityData);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.application_info {
+  padding: 20px;
+  background-color: #fff;
+  margin-bottom: 20px;
+}
+.main_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 25px;
+}
+.main_container-left {
+  padding: 3px;
+  background-color: #f9fafc;
+  margin-right: 30px;
+}
+.main_container-right {
+  flex-grow: 1;
+}
+.application_title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.application_title > .application_name {
+  font-size: 22px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 36px;
+}
+.application_base_info {
+  padding: 18px;
+  background-color: #f9fafc;
+}
+.application_base_info > li,
+.commodity_information {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: 14px;
+  color: #242c43;
+  line-height: 20px;
+}
+.application_base_info > li:not(:first-child) {
+  margin-top: 18px;
+}
+.application_base_info > li > span:first-child,
+.commodity_information > span:first-child {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: #8890a7;
+}
+.application_base_info > li > span:nth-child(2) {
+  color: #242c43;
+}
+.commodity_information {
+  margin-top: 30px;
+}
+.commodity_information > span:nth-child(2) {
+  color: #58617a;
+}
+.commodity_information > span:first-child {
+  line-height: 40px;
+}
+.commodity_information > .commodity_text {
+  flex-grow: 1;
+  padding: 13px 18px;
+  background-color: #f9fafc;
+  border-radius: 5px;
+}
+.commodity_information > .btn_container {
+  margin-bottom: -15px;
+}
+.commodity_information > .btn_container > .el-button,
+.commodity_information > .btn_container > .el-input-number {
+  margin: 0 20px 15px 0;
+}
+.commodity_action {
+  margin-top: 50px;
+  text-align: right;
+}
+.commodity_action > .el-button {
+  width: 220px;
+  margin-left: 20px;
+}
+.application_info .el-button--primary {
+  background-color: #515fe7;
+  border-color: #515fe7;
+}
+.application_info .el-button--warning.is-plain {
+  background-color: #fcefd6;
+  border-color: #fac266;
+  color: #e56600;
+}
+.application_info .el-button--warning {
+  background-color: #e56600;
+  border-color: #e56600;
+}
+</style>

src/components/comments-list.vue

@@ -55,6 +55,7 @@ export default {
   flex-shrink: 0;
   padding-top: 5px;
   margin-right: 27px;
+  margin-left: 10px;
 }
 .comment-right {
   font-size: 16px;

src/components/comments-pagination.vue

+<template>
+  <div class="comments_pagination">
+    <div class="total_info">
+      <span>{{ `共${total}个条目` }}</span>
+    </div>
+    <div class="page_size_action">
+      <span>每页行数：</span>
+      <el-select :value="pageSize" @change="sizeChange">
+        <el-option
+          v-for="item in pageSizes"
+          :label="item"
+          :value="item"
+          :key="item"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="page_action">
+      <a :class="{ disabled: preDisabled }" @click.prevent="prePage">
+        <i class="el-icon-arrow-left"></i>
+      </a>
+      <span>{{ `第${currentPage}页 / 共${totalPages}页` }}</span>
+      <a :class="{ disabled: nextDisabled }" @click.prevent="nextPage">
+        <i class="el-icon-arrow-right"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      required: true,
+    },
+    pageSizes: {
+      type: Array,
+      required: true,
+    },
+    pageSize: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  computed: {
+    totalPages() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+    preDisabled() {
+      return this.currentPage === 1;
+    },
+    nextDisabled() {
+      return this.currentPage === this.totalPages;
+    },
+  },
+  methods: {
+    sizeChange(value) {
+      this.$emit("size-change", value);
+    },
+    prePage() {
+      if (this.preDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage - 1);
+    },
+    nextPage() {
+      if (this.nextDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage + 1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.comments_pagination {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 25px;
+  color: #333;
+}
+.total_info {
+  flex-grow: 1;
+}
+.page_size_action {
+  margin-left: 50px;
+}
+.page_size_action > .el-select {
+  width: 70px;
+}
+.page_action {
+  user-select: none;
+  margin-left: 50px;
+}
+.page_action > a {
+  cursor: pointer;
+}
+.page_action > a > i {
+  font-weight: bold;
+}
+.page_action > a.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
+
+<style>
+.page_size_action > .el-select .el-input__inner,
+.page_size_action > .el-select .el-input.is-focus .el-input__inner {
+  border: 1px solid #fff;
+}
+</style>

src/components/commodity-card.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="com_card_btn">
         <el-button size="small">加入购物车</el-button>
-        <el-button size="small">查看详情</el-button>
+        <el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -42,11 +42,10 @@ export default {
 
 <style scoped>
 .com_card {
-  width: 200px;
+  width: 290px;
   height: 300px;
   padding: 10px;
   background-color: #ddd;
-  margin: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/components/commodity-cell.vue

@@ -67,7 +67,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -149,12 +149,14 @@ export default {
   padding: 1px 8px 2px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 12px;
   border-radius: 15px;
   position: relative;
   top: -2px;
 }
 .map_service {
   background-color: #626DE9;
+  border: solid 1px #626DE9;
   color: #fff;
 }
 .shared {

src/components/commodity-list.vue

@@ -2,8 +2,12 @@
   <div>
     <div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
       <div ref="commodityCardIn" class="commodity_card_list">
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
+        <div v-for="item in datas" :key="item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
+        <div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
       </div>
     </div>
     <div v-else class="commodity_cell">
@@ -115,11 +119,13 @@ export default {
       this.pagination.total = this.datas.length;
     },
     pageResize() {
-      let listWidth = this.$refs.commodityList.clientWidth;
-      let rowCardNum = Math.floor(listWidth / 220);
-      this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
-      this.$refs.commodityCardIn.style.marginLeft =
-        (listWidth - rowCardNum * 220) / 2 + "px";
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
+      }
       console.log(this.$refs.commodityCardIn);
     }
   },
@@ -166,9 +172,16 @@ export default {
 .commodity_card {
 }
 .commodity_card_list {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
 </style>
 <style>
 .com_page_control .el-button {

src/components/service-info.vue

 <template>
-  <div class="sevice_info" v-if="serviceData">
+  <div class="service_info" v-if="data">
     <div class="service_title">
-      <span class="service_name" v-text="serviceData.name"></span>
-      <span
-        class="service_type"
-        v-if="serviceData.type"
-        v-text="serviceData.type"
-      ></span>
-      <span class="service_level" v-text="serviceData.openLevel"></span>
+      <span class="service_name" v-text="data.name"></span>
+      <span class="service_type" v-if="data.type" v-text="data.type"></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"></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 +69,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 +104,7 @@
 <script>
 export default {
   props: {
-    serviceData: {
+    data: {
       type: Object,
       default: () => null,
     },
@@ -123,7 +119,7 @@ export default {
   computed: {
     specificationDescription() {
       let obj =
-        this.serviceData.specifications[this.commodityData.specification] || {};
+        this.data.specifications[this.commodityData.specification] || {};
       return obj.description || "";
     },
   },
@@ -147,7 +143,7 @@ export default {
 </script>
 
 <style scoped>
-.sevice_info {
+.service_info {
   padding: 20px;
   background-color: #fff;
   margin-bottom: 20px;
@@ -270,16 +266,16 @@ export default {
   width: 220px;
   margin-left: 20px;
 }
-.sevice_info .el-button--primary {
+.service_info .el-button--primary {
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.sevice_info .el-button--warning.is-plain {
+.service_info .el-button--warning.is-plain {
   background-color: #fcefd6;
   border-color: #fac266;
   color: #e56600;
 }
-.sevice_info .el-button--warning {
+.service_info .el-button--warning {
   background-color: #e56600;
   border-color: #e56600;
 }

src/components/service-step.vue → src/components/service-steps.vue

 <template>
-  <div class="service_step">
-    <ul class="step_items">
-      <li class="step_item">
+  <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>1</span>
+            <span v-text="index + 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>
+          <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() {},
+};
+</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;
   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 +59,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;

src/components/service-tab-comments.vue

 <template>
-  <div class="service_tab-comments">
+  <div class="service_tab-comments" v-if="data">
     <comments-score :data="data.baseInfo"></comments-score>
-    <comments-list :data="data.ffpjxxList"></comments-list>
-
-    <div class="comments_pages">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+    <comments-list :data="data.list"></comments-list>
+    <comments-pagination
       :total="data.baseInfo.total"
-        :page-sizes="[10, 50, 100]"
-        :current-page="1"
-        :page-size="10"
-        layout="total, sizes, prev, pager, next, jumper"
-      >
-      </el-pagination>
-    </div>
+      :page-sizes="pageSizes"
+      :page-size="pageSize"
+      :current-page="currentPage"
+      @size-change="changePageSize"
+      @current-change="changeCurrentPage"
+    ></comments-pagination>
   </div>
 </template>
 
 <script>
 import commentsScore from "@/components/comments-score";
 import commentsList from "@/components/comments-list";
+import commentsPagination from "@/components/comments-pagination";
 
 export default {
   components: {
     commentsScore,
     commentsList,
+    commentsPagination,
   },
   props: {
-    data: {
-      type: Object,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
+  data: () => ({
+    data: null,
+    pageSizes: [10, 50, 100],
+    pageSize: 10,
+    currentPage: 1,
+  }),
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].comments;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
     },
   },
-  created() {},
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
 <style scoped>
-.comments_pages {
-  text-align: center;
-  margin-top: 20px;
+.service_tab-comments > .comments_score,
+.service_tab-comments > .comments_list {
+  padding: 0 30px;
+}
+.service_tab-comments > .comments_pagination {
+  margin-top: 60px;
 }
 </style>

src/components/service-tab-detail.vue

 <template>
-  <ul class="service_tab-detail">
+  <ul class="service_tab-detail" v-if="data">
     <li
       class="detail-item"
       v-for="(item, index) in data"
-      :key="'detail-' + index"
+      :key="'detail_' + index"
     >
       <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"
-        :row-key="(row) => item.name + '_' + row.zdbm"
+        row-key="id"
         default-expand-all
         :border="false"
         :data="item.value.datas"
@@ -38,26 +33,50 @@
           :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: {
-      type: Array,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
-  methods: {},
-  created() {},
+  data: () => ({
+    data: null,
+  }),
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].detail;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
@@ -76,7 +95,4 @@ export default {
   line-height: 25px;
   color: #242c43;
 }
-.detail-item .detail-table {
-  width: 100%;
-}
 </style>

src/components/service-tab-provider.vue

 <template>
-  <div class="service_tab-provider">
+  <div class="service_tab-provider" v-if="data">
     <div class="provider-left">
       <el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
     </div>
@@ -22,14 +22,29 @@
 <script>
 export default {
   props: {
-    data: {
-      type: Object,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
-  methods: {},
-  created() {},
+  data: () => ({
+    data: null,
+  }),
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].provider;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 

src/components/service-tab-specification.vue

 <template>
-  <div class="service_tab-specification">
+  <div class="service_tab-specification" v-if="data">
     <div class="specification_header">
       <p>申请方式：</p>
       <type-group v-model="type" :types="types"></type-group>
@@ -19,12 +19,13 @@ export default {
     typeGroup,
   },
   props: {
-    data: {
-      type: Array,
+    url: {
+      type: String,
       required: true,
     },
   },
   data: () => ({
+    data: null,
     type: "",
     types: [],
   }),
@@ -33,7 +34,13 @@ export default {
       return this.types.length > 0 ? this.data[this.type].data : [];
     },
   },
-  mounted() {
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].specification;
+
           this.types = this.data.map((item, index) => ({
             name: item.name,
             value: index,
@@ -42,6 +49,14 @@ export default {
           if (this.types.length) {
             this.type = 0;
           }
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
   },
 };
 </script>

src/components/service-tabs.vue

@@ -2,35 +2,31 @@
   <el-tabs
     class="service_info_tab"
     type="border-card"
-    v-model="serviceTabsActiveName"
+    v-model="tabName"
     :stretch="true"
   >
-    <el-tab-pane label="服务详情信息" name="first">
+    <el-tab-pane :label="detailTitle" name="detail" v-if="detailUrl">
       <service-tab-detail
-        v-if="fwxqxx"
         class="service_info"
-        :data="fwxqxx"
+        :url="detailUrl"
       ></service-tab-detail>
     </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
+    <el-tab-pane :label="specificationTitle" name="specification" v-if="specificationUrl">
       <service-tab-specification
-        v-if="ggdj"
         class="service_info"
-        :data="ggdj"
+        :url="specificationUrl"
       ></service-tab-specification>
     </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
+    <el-tab-pane :label="providerTitle" name="provider" v-if="providerUrl">
       <service-tab-provider
-        v-if="tgjg"
         class="service_info"
-        :data="tgjg"
+        :url="providerUrl"
       ></service-tab-provider>
     </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
+    <el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
       <service-tab-comments
-        v-if="ffpjxx"
         class="service_info"
-        :data="ffpjxx"
+        :url="commentsUrl"
       ></service-tab-comments>
     </el-tab-pane>
   </el-tabs>
@@ -50,50 +46,43 @@ export default {
     serviceTabComments,
   },
   props: {
-    type: {
+    detailTitle: {
       type: String,
-      required: true,
+      default: () => "服务详情信息",
     },
+    specificationTitle: {
+      type: String,
+      default: () => "规格定价",
     },
-  data: () => ({
-    serviceTabsActiveName: "first",
-    fwxqxx: null, // 服务详情信息
-    ggdj: null, // 规格定价
-    tgjg: null, // 提供机构
-    ffpjxx: null, // 服务评价信息
-  }),
-  methods: {
-    getDataFromApi(_url) {
-      return new Promise((resolve, reject) => {
-        this.$http
-          .get(_url)
-          .then((response) => {
-            resolve(response.body);
-          })
-          .catch(function(error) {
-            reject(error);
-          });
-      });
+    providerTitle: {
+      type: String,
+      default: () => "提供机构",
     },
-    init() {
-      this.getDataFromApi(`/static/serviceInfo.json`).then(
-        (data) => {
-          let _data = data[this.type];
-
-          this.fwxqxx = _data.fwxqxx;
-          this.ggdj = _data.ggdj;
-          this.tgjg = _data.tgjg;
-          this.ffpjxx = _data.ffpjxx;
+    commentsTitle: {
+      type: String,
+      default: () => "服务评价信息",
     },
-        (error) => {
-          console.log(error);
-        }
-      );
+    detailUrl: {
+      type: String,
+      default: () => "",
     },
+    specificationUrl: {
+      type: String,
+      default: () => "",
+    },
+    providerUrl: {
+      type: String,
+      default: () => "",
+    },
+    commentsUrl: {
+      type: String,
+      default: () => "",
     },
-  created() {
-    this.init();
   },
+  data: () => ({
+    tabName: "detail",
+  }),
+  methods: {},
 };
 </script>
 
@@ -107,6 +96,9 @@ export default {
   padding: 35px 40px 40px;
   box-sizing: border-box;
 }
+.service_tab-comments {
+  padding: 35px 20px 20px !important;
+}
 </style>
 
 <style>
@@ -149,7 +141,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>

src/components/shopping-cart/shopping-cart-cell.vue

+<template>
+  <div class="shopping_cell">
+    <el-row class="shopping_cell_row">
+      <el-col :span="2" class="shopping_cell_check">
+        <el-checkbox v-if="!readOnly" v-model="checkedItem" @change="getState"></el-checkbox>
+        <div v-else class="shopping_cell_expired">
+          <span>已下架</span>
+        </div>
+      </el-col>
+      <el-col :span="9">
+        <div class="shopping_cell_item">
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="shopping_cell_img"
+          />
+          <div class="shopping_cell_msg">
+            <div class="shopping_cell_name">
+              {{ cellItem.name }}
+              <span
+                v-if="cellItem.mapService"
+                class="tags map_service"
+              >mapService</span>
+              <span v-if="cellItem.state == 1" class="tags shared">共享</span>
+              <span v-else-if="cellItem.state ==  2" class="tags restricted">受限</span>
+              <span v-else class="tags sensitive">敏感</span>
+            </div>
+            <div class="shopping_cell_msg_other">
+              <div class="shopping_cell_type">{{ cellItem.type }}</div>
+              <div class="shopping_cell_creator">{{ cellItem.creator }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="5">
+        <div class="shopping_cell_specification">
+          <div class="shopping_cell_specification_val">
+            <div class="shopping_cell_specification_val_specification">规格：{{ specificationBtns[specification] }}</div>
+            <div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div>
+            <div class="shopping_cell_specification_edit">
+              <el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop">
+                <div>
+                  <div class="shopping_cell_specification_title">规格：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationBtns"
+                      :key="'specification' + index"
+                      :class="specificationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                      @click="changeSpecification(index)"
+                    >{{ index + 1 + ". " + item }}</el-button>
+                  </div>
+                  <div class="shopping_cell_specification_title">申请方式：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationApplicationBtns"
+                      :key="'specification' + index"
+                      :class="specificationApplicationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                       @click="changeSpecificationApplication(index)"
+                    >{{ item }}购买</el-button>
+                  </div>
+                </div>
+                <div class="pop_footer">
+                  <el-button
+                    class="shopping_cell_specification_cancel"
+                    size="mini"
+                    type="text"
+                    @click="visible = false"
+                  >取消</el-button>
+                  <el-button
+                    class="shopping_cell_specification_submit"
+                    size="mini"
+                    @click="submitPop"
+                  >确定</el-button>
+                </div>
+                <el-button v-if="!readOnly" circle size="mini" slot="reference">
+                  <img :src="specificationEdit" />
+                </el-button>
+              </el-popover>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_num">
+        <el-input-number :disabled="readOnly" v-model="numItem" size="mini" :min="1"></el-input-number>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_options">
+        <el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
+        <div class="shopping_cell_options_del">
+          <el-button size="mini">删除</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    cellItem: { type: Object, default: {} },
+    cellIndex: { type: Number, default: null },
+    cellCheck: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    cellCheck: function(val) {
+      this.checkedItem = val;
+    }
+  },
+  data: () => ({
+    checkedItem: false,
+    numItem: 1,
+    specificationEdit: require("../../assets/imgs/ic_edit.png"),
+    checkedSubscription: false,
+    visible: false,
+    specification: 1,
+    specificationApplication: 0,
+    specificationPop: 1,
+    specificationApplicationPop: 0,
+    specificationBtns: [
+      "访问次数：20/日  访问量：100/日",
+      "访问次数：200/日  访问量：1000/日",
+      "访问次数：无上限  访问量：无上限"
+    ],
+    specificationApplicationBtns: ["按月", "按年"]
+  }),
+  computed: {},
+  methods: {
+    getState(val) {
+      this.$emit("changeState", { state: val, index: this.cellIndex });
+    },
+    changeSpecification(val) {
+      this.specificationPop = val;
+    },
+    changeSpecificationApplication(val) {
+      this.specificationApplicationPop = val;
+    },
+    submitPop() {
+      this.specification = this.specificationPop;
+      this.specificationApplication = this.specificationApplicationPop;
+      this.visible = false;
+    },
+    setSpecificationPop() {
+      this.specificationPop = this.specification;
+      this.specificationApplicationPop = this.specificationApplication;
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.shopping_cell {
+  height: 110px;
+  border-bottom: 2px #f4f7fc solid;
+  margin: 10px 0;
+}
+.shopping_cell:nth-last-child(1) {
+  border-bottom: 0;
+  margin: 10px 0;
+}
+.shopping_cell_row {
+}
+.shopping_cell_item {
+  display: flex;
+  justify-content: flex-start;
+}
+.shopping_cell_check {
+  text-align: center;
+  padding-top: 35px;
+}
+.shopping_cell_expired {
+  display: inline-block;
+  text-align: center;
+  padding: 2px 6px;
+  width: 50px;
+  background-color: #e3e5ef;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #8890a7;
+}
+.shopping_cell_img {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+}
+.shopping_cell_msg {
+  width: calc(100% - 120px);
+  margin-left: 10px;
+  position: relative;
+}
+.shopping_cell_name {
+  width: 100%;
+  line-height: 24px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+}
+.shopping_cell_msg_other {
+  position: absolute;
+  bottom: 0;
+}
+.shopping_cell_type {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.shopping_cell_creator {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px 2px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 15px;
+  position: relative;
+  top: -2px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.shopping_cell_specification {
+  width: 80%;
+  height: 100px;
+  margin: 0 10%;
+  background-color: #f9fafc;
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.shopping_cell_specification_val {
+  color: #8890a7;
+  font-size: 14px;
+}
+.shopping_cell_specification_val_type {
+  margin-top: 10px;
+}
+.shopping_cell_num {
+  text-align: center;
+  padding-top: 32px;
+}
+.shopping_cell_options {
+  text-align: center;
+  padding-top: 20px;
+}
+.shopping_cell_specification_edit {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.shopping_cell_options_del {
+  margin-top: 15px;
+}
+.shopping_cell_specification_title {
+  margin: 10px 0;
+}
+.shopping_cell_specification_btn {
+  margin: 0 10px 10px;
+}
+.shopping_cell_specification_btn.active {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+.shopping_cell_specification_submit {
+  background-color: #e56600;
+  color: #f4f7fc;
+  margin-left: 20px;
+}
+.shopping_cell_specification_cancel {
+  color: #58617a;
+}
+.pop_footer {
+  text-align: right;
+  margin: 30px 5px 5px;
+}
+</style>
+<style>
+.shopping_cell_specification_edit .el-button {
+  border: 0;
+  width: 28px;
+  height: 28px;
+}
+.shopping_cell_num .el-input-number--mini {
+  width: 100px;
+}
+.shopping_cell_num .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_num .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_options .el-button {
+  border: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #77192d;
+}
+.shopping_cell_options .el-checkbox {
+  color: #8890a7;
+}
+.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #586077;
+}
+.shopping_cell_options .el-checkbox__inner:hover {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #d0d6f4;
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__inner::after {
+  border: 1px solid #666;
+  border-left: 0;
+  border-top: 0;
+}
+.shopping_cell_check .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.el-popover,
+.el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file

src/components/shopping-cart/shopping-cart-com.vue

+<template>
+  <div>
+    <div class="shopping_list shopping_list_all">
+      <div class="shopping_all_head">
+        <el-row>
+          <el-col :span="2" class="shopping_all_head_item">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
+          <el-col :span="5" class="shopping_all_head_item">规格</el-col>
+          <el-col :span="4" class="shopping_all_head_item">数量</el-col>
+          <el-col :span="4" class="shopping_all_head_item">操作</el-col>
+        </el-row>
+      </div>
+      <ShoppingCartList
+        ref="shoppingList"
+        :checkShopAll="checkShopAll"
+        :list="list"
+        :checkList="checkList"
+        :readOnly="false"
+        @changeState="changeState"
+        class="shopping_all_list"
+      />
+    </div>
+    <div class="shopping_list shopping_list_fail">
+      <div class="expired_service">已失效服务</div>
+      <ShoppingCartList :readOnly="true" class="shopping_all_list" />
+    </div>
+    <div class="shopping_list shopping_list_options">
+      <div class="shopping_cart_options">
+        <el-row>
+          <el-col :span="2" class="shopping_cart_options_cell">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="3" class="shopping_cart_options_del">
+            <span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
+            <span
+              v-else
+              @click="delSelectService"
+              class="shopping_cart_options_del_service_act"
+            >删除选中服务</span>
+          </el-col>
+          <el-col :span="15" class="shopping_cart_options_num">
+            共 {{ checkList.length }} 项服务，已选择
+            <span>{{ getNum }}</span> 项
+          </el-col>
+          <el-col :span="4" class="shopping_cart_options_cell">
+            <el-button v-if="getNum == 0" :disabled="true" class="shopping_cart_options_cell_btn">一键申请</el-button>
+            <el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
+export default {
+  components: {
+    ShoppingCartList
+  },
+  props: {},
+  data: () => ({
+    checkShopAll: false,
+    checkList: [false, false, false],
+    list: [
+      {
+        id: 0,
+        name: "水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅0",
+        state: 1,
+        mapService: 1
+      },
+      {
+        id: 1,
+        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅1",
+        state: 1
+      },
+      {
+        id: 2,
+        name: "水路货物周转量情况水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅2",
+        state: 1,
+        mapService: 1
+      }
+    ]
+  }),
+  mounted() {},
+  computed: {
+    getNum() {
+      let num = this.checkList.reduce(
+        (a, v) => (v === true ? a + 1 : a + 0),
+        0
+      );
+      return num;
+    }
+  },
+  methods: {
+    checkAll(val) {
+      this.$refs.shoppingList.setAllState(val);
+    },
+    changeState(val) {
+      console.log(val);
+      this.$set(this.checkList, val.index, val.state);
+      if (this.checkList.indexOf(false) == -1) {
+        this.checkShopAll = true;
+      } else {
+        this.checkShopAll = false;
+      }
+    },
+    delSelectService() {
+      this.checkList.forEach((item, index) => {
+        if (item === true) {
+          console.log(this.list[index]);
+        }
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.shopping_list {
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.shopping_list_all {
+}
+.shopping_list_fail {
+}
+.shopping_list_options {
+}
+.shopping_all_list {
+}
+.shopping_fail_head {
+  background-color: #eff1f8;
+  height: 40px;
+}
+.shopping_options {
+  height: 84px;
+}
+.expired_service {
+  height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px 50px;
+  line-height: 28px;
+  background-color: #eff1f8;
+}
+.shopping_cart_options {
+  height: 80px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 80px;
+}
+.shopping_cart_options_cell {
+  text-align: center;
+}
+.shopping_cart_options_del {
+}
+.shopping_cart_options_del_service {
+  color: #c8d0e7;
+}
+.shopping_cart_options_del_service_act {
+  cursor: pointer;
+  color: #0f2683;
+}
+.shopping_cart_options_num {
+  text-align: right;
+  font-size: 14px;
+  font-weight: 500;
+  color: #58617a;
+}
+.shopping_cart_options_num span {
+  color: #e56600;
+}
+.shopping_cart_options_cell_btn {
+  width: 90%;
+  margin: 0 10%;
+}
+.shopping_cart_options_cell_btn_act {
+  width: 90%;
+  margin: 0 10%;
+  background-color: #e56600;
+  color: #fcefd6;
+}
+.shopping_all_head {
+  background-color: #e5f0ff;
+  height: 48px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 48px;
+}
+.shopping_all_head_item {
+  text-align: center;
+}
+.shopping_list_page {
+  padding: 10px 20px 0;
+}
+</style>
+<style>
+.shopping_cart_options_cell .el-checkbox {
+  font-weight: 700;
+}
+.shopping_cart_options_cell .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_cart_options_cell
+  .el-checkbox__input.is-checked
+  + .el-checkbox__label {
+  color: #626de9;
+}
+.shopping_all_head_item .el-checkbox {
+  font-weight: 700;
+}
+.shopping_all_head_item .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #626de9;
+}
+</style>

src/components/shopping-cart/shopping-cart-list.vue

+<template>
+  <div>
+    <div class="shopping_list_page">
+      <ShoppingCartCell
+        v-for="(item, index) in list"
+        :cellItem="item"
+        :cellIndex="index"
+        :cellCheck="checkLists[index]"
+        :key="item.id"
+        :readOnly="readOnly"
+        @changeState="changeState"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
+export default {
+  components: {
+    ShoppingCartCell
+  },
+  props: {
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    checkShopAll: {
+      type: Boolean
+    },
+    list: {
+      type: Array
+    },
+    checkList: {
+      type: Array,
+      default: ()=> {[]}
+    }
+  },
+  watch: {
+    checkList: {
+      immediate: true, // 这句重要
+      handler(val) {
+        console.log("ss")
+        this.checkLists = val;
+      }
+    }
+  },
+  data: () => ({
+    checkedAll: false,
+    checkLists: []
+  }),
+  mounted() {},
+  methods: {
+    changeState(val) {
+      this.$emit("changeState", val);
+    },
+    setAllState(val) {
+      for (let i = 0; i < this.checkLists.length; i++) {
+        this.$set(this.checkLists, i, val)
+      }
+    }
+  }
+};
+</script>

src/pages/shop_list_app_store.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>

src/pages/shop_list_comprehensive_app.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>

src/pages/shop_list_data.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>

src/pages/shop_list_space_time.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>

src/pages/shopping_cart.vue

+<template>
+  <div class="shopping">
+    <div class="shopping_title">我的购物车</div>
+    <ShoppingCart />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
+
+export default {
+  components: {
+    ShoppingCart
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping {
+  width: 1200px;
+  margin: 0 auto;
+}
+.shopping_title {
+  height: 40px;
+  line-height: 40px;
+}
+</style>
\ No newline at end of file

src/pages/sjfwDetail.vue

@@ -8,9 +8,14 @@
       </el-breadcrumb>
     </div>
 
-    <service-info :service-data="serviceData"></service-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <service-tabs type="sjfw"></service-tabs>
+    <service-tabs
+      detail-url="sjfw"
+      specification-url="sjfw"
+      provider-url="sjfw"
+      comments-url="sjfw"
+    ></service-tabs>
   </div>
 </template>
 
@@ -24,7 +29,10 @@ export default {
     serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
+    detailData: null,
+    specification: null,
+    provider: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -40,9 +48,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,25 +8,28 @@
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="skfw"
+      specification-url="skfw"
+      provider-url="skfw"
+      comments-url="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,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +45,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/yysdDetail.vue

@@ -3,30 +3,37 @@
     <div class="sevice_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>服务超市</el-breadcrumb-item>
-        <el-breadcrumb-item>数据服务</el-breadcrumb-item>
-        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
+        <el-breadcrumb-item>应用商店</el-breadcrumb-item>
+        <el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <application-info :data="baseInfo"></application-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="yysd"
+      provider-url="yysd"
+      comments-url="yysd"
+      detail-title="应用详情信息"
+      comments-title="应用评价信息"
+    ></service-tabs>
   </div>
 </template>
 
 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import applicationInfo from "@/components/application-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    applicationInfo,
+    serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
+    detailData: null,
+    specification: null,
+    provider: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +49,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ yysd }) => {
-          this.serviceData = yysd;
+          this.baseInfo = yysd;
         },
         (error) => {
           console.log(error);

src/pages/zhyyfwDetail.vue

@@ -8,25 +8,28 @@
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="zhyyfw"
+      specification-url="zhyyfw"
+      provider-url="zhyyfw"
+      comments-url="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,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +45,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);

src/router/index.js

@@ -111,25 +111,30 @@ export default new Router({
               name: "shopAppStoreList",
               component: () => import("@/pages/shop_list_app_store"),
             },
+            {
+              path: "/shop/shopping_cart", // 购物车页
+              name: "shoppingCart",
+              component: () => import("@/pages/shopping_cart"),
+            },
           ],
         },
         {
-          path: "/sjfwDetail",
+          path: "/sjfwDetail/:id",
           name: "sjfwDetail",
           component: () => import("@/pages/sjfwDetail"),
         }, // 数据服务详情
         {
-          path: "/skfwDetail",
+          path: "/skfwDetail/:id",
           name: "skfwDetail",
           component: () => import("@/pages/skfwDetail"),
         }, // 时空服务详情
         {
-          path: "/zhyyfwDetail",
+          path: "/zhyyfwDetail/:id",
           name: "zhyyfwDetail",
           component: () => import("@/pages/zhyyfwDetail"),
         }, // 综合应用服务详情
         {
-          path: "/yysdDetail",
+          path: "/yysdDetail/:id",
           name: "yysdDetail",
           component: () => import("@/pages/yysdDetail"),
         }, // 应用详情

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": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "mapvideos V1.0",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "acquireCount": "9999",
+    "serviceType": "综合应用服务",
+    "dataField": "经济建设",
+    "specifications": [
+      {
+        "name": "申请获取应用镜像部署权限",
+        "value": 0
+      },
+      {
+        "name": "申请获取应用二次开发权限（需要先行升级为开发者用户）",
+        "value": 1
+      }
+    ]
+  }
+}

static/serviceInfo.json

 {
   "sjfw": {
-    "fwxqxx": [
+    "detail": [
       {
         "name": "获取流程",
-        "type": "step"
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
       },
       {
         "name": "服务描述",
@@ -26,6 +27,7 @@
         "value": {
           "datas": [
             {
+              "id": 10000,
               "zdbm": "errcode",
               "zdlx": "字符串",
               "zdmc": "错误码",
@@ -34,6 +36,7 @@
               "slz": "xxx"
             },
             {
+              "id": 20000,
               "zdbm": "errmsg",
               "zdlx": "对象",
               "zdmc": "错误信息",
@@ -42,6 +45,7 @@
               "slz": "xxx"
             },
             {
+              "id": 30000,
               "zdbm": "data",
               "zdlx": "字符串",
               "zdmc": "数据项",
@@ -50,6 +54,7 @@
               "slz": "xxx",
               "children": [
                 {
+                  "id": 30010,
                   "zdbm": "rows",
                   "zdlx": "对象",
                   "zdmc": "对象",
@@ -99,42 +104,49 @@
         "value": {
           "datas": [
             {
+              "id": 50000,
               "zdbm": "errcode",
               "zdlx": "字符串",
               "zdmc": "错误码",
               "zdsm": "显示字段信息显示字段信息"
             },
             {
+              "id": 60000,
               "zdbm": "errmsg",
               "zdlx": "对象",
               "zdmc": "错误信息",
               "zdsm": "显示字段信息显示字段信息"
             },
             {
+              "id": 70000,
               "zdbm": "data",
               "zdlx": "字符串",
               "zdmc": "数据项",
               "zdsm": "显示字段信息显示字段信息",
               "children": [
                 {
+                  "id": 70010,
                   "zdbm": "rows",
                   "zdlx": "字符串",
                   "zdmc": "数据项",
                   "zdsm": "显示字段信息显示字段信息",
                   "children": [
                     {
+                      "id": 70011,
                       "zdbm": "time",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70012,
                       "zdbm": "count",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70013,
                       "zdbm": "item",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
@@ -143,18 +155,21 @@
                   ]
                 },
                 {
+                  "id": 70020,
                   "zdbm": "city",
                   "zdlx": "字符串",
                   "zdmc": "数据项",
                   "zdsm": "显示字段信息显示字段信息",
                   "children": [
                     {
+                      "id": 70021,
                       "zdbm": "sPoint",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70022,
                       "zdbm": "ePoint",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
@@ -188,7 +203,7 @@
         }
       }
     ],
-    "ggdj": [
+    "specification": [
       {
         "name": "按月",
         "data": [
@@ -224,13 +239,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 +272,7 @@
           }
         ]
       },
-      "ffpjxxList": [
+      "list": [
         {
           "name": "禺彊",
           "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
@@ -331,13 +346,15 @@
       ]
     }
   },
-  "fwxqxx": [
+  "skfw": {
+    "detail": [
       {
         "name": "获取流程",
-      "type": "step"
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
       },
       {
-      "name": "服务说明",
+        "name": "服务描述",
         "type": "text",
         "value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
       },
@@ -358,8 +375,8 @@
             "value": "即用型"
           },
           {
-          "name": "空间范围（WGS84）",
-          "value": "未设置"
+            "name": "空间范围",
+            "value": "111.8915040799999, 114.25605481900004, 28.762848204000022"
           },
           {
             "name": "标签",
@@ -367,141 +384,205 @@
           },
           {
             "name": "制作单位",
-          "value": "应急管理厅"
+            "value": "贵州省应急管理应急管理厅"
           },
           {
             "name": "离线模式",
             "value": "禁用"
+          }
+        ]
+      }
+    ],
+    "specification": [
+      {
+        "name": "按月",
+        "data": [
+          {
+            "gg": "访问次数：20/日 访问量：100/日",
+            "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
           },
           {
-          "name": "附加代码",
-          "value": "无"
+            "gg": "访访问次数：200/日 访问量：1000/日",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
           }
         ]
       },
       {
-      "name": "字段说明",
-      "type": "table",
-      "value": {
-        "datas": [
+        "name": "按年",
+        "data": [
           {
-            "zdbm": "errcode",
-            "zdlx": "字符串",
-            "zdmc": "错误码",
-            "zdsm": "显示字段信息显示字段信息"
+            "gg": "访问次数：20/年 访问量：100/年",
+            "ggsm": "用户服务申请通过审核确认后，每年可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
           },
           {
-            "zdbm": "errmsg",
-            "zdlx": "对象",
-            "zdmc": "错误信息",
-            "zdsm": "显示字段信息显示字段信息"
+            "gg": "访访问次数：200/年 访问量：1000/年",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每年可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
           },
           {
-            "zdbm": "data",
-            "zdlx": "字符串",
-            "zdmc": "数据项",
-            "zdsm": "显示字段信息显示字段信息",
-            "children": [
+            "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": [
           {
-                "zdbm": "rows",
-                "zdlx": "字符串",
-                "zdmc": "数据项",
-                "zdsm": "显示字段信息显示字段信息",
-                "children": [
+            "star": 5,
+            "percent": 40
+          },
           {
-                    "zdbm": "time",
-                    "zdlx": "字符串",
-                    "zdmc": "数据项",
-                    "zdsm": "显示字段信息显示字段信息"
+            "star": 4,
+            "percent": 30
           },
           {
-                    "zdbm": "count",
-                    "zdlx": "字符串",
-                    "zdmc": "数据项",
-                    "zdsm": "显示字段信息显示字段信息"
+            "star": 3,
+            "percent": 20
           },
           {
-                    "zdbm": "item",
-                    "zdlx": "字符串",
-                    "zdmc": "数据项",
-                    "zdsm": "显示字段信息显示字段信息"
+            "star": 2,
+            "percent": 5
+          },
+          {
+            "star": 1,
+            "percent": 5
           }
         ]
       },
+      "list": [
         {
-                "zdbm": "city",
-                "zdlx": "字符串",
-                "zdmc": "数据项",
-                "zdsm": "显示字段信息显示字段信息",
-                "children": [
+          "name": "禺彊",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "这个应用非常实用，可以应用到多个业务领域！",
+          "time": " 2019-12-12"
+        },
         {
-                    "zdbm": "sPoint",
-                    "zdlx": "字符串",
-                    "zdmc": "数据项",
-                    "zdsm": "显示字段信息显示字段信息"
+          "name": "海纳",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          "time": " 2019-12-12"
         },
         {
-                    "zdbm": "ePoint",
-                    "zdlx": "字符串",
-                    "zdmc": "数据项",
-                    "zdsm": "显示字段信息显示字段信息"
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        "columns": [
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
         {
-            "prop": "zdbm",
-            "label": "字段编码",
-            "align": "center"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-            "prop": "zdlx",
-            "label": "字段类型",
-            "align": "center"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-            "prop": "zdmc",
-            "label": "字段名称"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-            "prop": "zdsm",
-            "label": "显示字段信息显示字段信息"
+          "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",
+              "name": "apaas-mapvideos-1",
               "description": "地图视频融合应用服务"
             },
             {
-            "name": "apaas-mapvideos",
+              "name": "apaas-mapvideos-2",
+              "description": "地图视频融合应用服务"
+            },
+            {
+              "name": "apaas-mapvideos-3",
               "description": "地图视频融合应用服务"
             }
           ],
           "columns": [
             {
               "prop": "name",
-            "label": "*微服务名称"
+              "label": "微服务名称"
             },
             {
               "prop": "description",
-            "label": "微服务描述",
-            "align": "center"
+              "label": "微服务描述"
             }
           ]
         }
       }
     ],
-  "ggdj": [
+    "specification": [
+      {
+        "name": "按月",
+        "data": [
           {
             "gg": "访问次数：20/日 访问量：100/日",
             "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
@@ -514,14 +595,198 @@
             "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"
+        }
+      ]
+    }
+  },
+  "yysd": {
+    "detail": [
+      {
+        "name": "获取流程",
+        "type": "step",
+        "value": ["应用申请", "信息填写", "审核确认", "应用获取"]
+      },
+      {
+        "name": "应用简介",
+        "type": "text",
+        "value": "本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作。"
+      },
+      {
+        "name": "功能简介",
+        "type": "list",
+        "value": [
+          {
+            "name": "1",
+            "value": "在地图上查找视频设备；"
+          },
+          {
+            "name": "2",
+            "value": "在地图上定位视频设备位置；"
+          },
+          {
+            "name": "3",
+            "value": "调用多路视频的实时视频数据；"
+          },
+          {
+            "name": "4",
+            "value": "操作球机视频设备。"
+          }
+        ]
+      },
+      {
+        "name": "应用场景",
+        "type": "text",
+        "value": "针对应急突发事件，基于地图准确定位应急事件发生地点后，指挥人员希望能够快速获取事件发生地点周围一定范围内的所有信息资源，快速掌握现场情况，通过视频地图融合应用能够快速找到应急事件周围的视频监控设备后直接在地图上调用和查看实时视频了解现场情况，"
+      },
+      {
+        "name": "应用参数",
+        "type": "list",
+        "value": [
+          {
+            "name": "repository",
+            "value": "\"hub.wodcloud.com/apaas/apaas-mapvideos\""
+          },
+          {
+            "name": "tag",
+            "value": "\"1.0.0\""
+          },
+          {
+            "name": "repository",
+            "value": "\"mapvideo.wodcloud.local\""
+          }
+        ]
+      }
     ],
-  "tgjg": {
-    "name": "贵州省交通运输厅",
+    "provider": {
+      "provider": "贵州省交通运输厅",
       "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-    "lxr": "张先生",
-    "lxdh": "010-66666666"
+      "person": "张先生",
+      "phone": "010-66666666"
     },
-  "ffpjxx": {
+    "comments": {
       "baseInfo": {
         "score": 3.5,
         "total": 23,
@@ -540,15 +805,15 @@
           },
           {
             "star": 2,
-          "percent": 10
+            "percent": 5
           },
           {
             "star": 1,
-          "percent": 0
+            "percent": 5
           }
         ]
       },
-    "ffpjxxList": [
+      "list": [
         {
           "name": "禺彊",
           "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
@@ -621,4 +886,5 @@
         }
       ]
     }
+  }
 }