list+com_card+shop all list page,add store shop menu

src/assets/css/index.css

@@ -464,4 +464,14 @@ width: 620px!important;
 }
 .bread_crumb .is-link {
   color: #626de9 !important;
+}
+.bread_crumb1 {
+  margin: 20px;
+  font-size: 14px;
+}
+.bread_crumb1 .el-breadcrumb__inner {
+  color: #242c43 !important;
+}
+.bread_crumb1 .is-link {
+  color: #898d9e !important;
 }
\ No newline at end of file

src/components/commodity-card.vue

+<template>
+  <div class="com_card">
+    <img
+      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+      class="com_card_img"
+    />
+    <div class="com_card_msg">
+      <div class="com_card_msg_name">ApaasApaas</div>
+      <div class="com_card_msg_version">v1.876</div>
+      <div class="com_card_msg_other">
+        <div class="com_card_msg_time">2019-12-04</div>
+        <div class="com_card_msg_num">部署次数：44444</div>
+      </div>
+    </div>
+    <div class="com_card_btn">
+        <el-button size="small">加入购物车</el-button>
+        <el-button size="small">查看详情</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    url: { type: String, default: "" },
+    cellData: { type: Object, default: {} }
+  },
+  data: () => ({}),
+  computed: {},
+  watch: {},
+  methods: {
+    goUrl(parame) {
+      if (this.url != "") {
+        this.$router.push(this.url + parame);
+      }
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.com_card {
+  width: 200px;
+  height: 300px;
+  padding: 10px;
+  background-color: #ddd;
+  margin: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.com_card_img {
+  width: 160px;
+  height: 160px;
+}
+.com_card_msg {
+  width: 180px;
+  text-align: center;
+}
+.com_card_msg_name {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+.com_card_msg_version {
+    font-size: 14px;
+}
+.com_card_msg_other {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+}
+.com_card_msg_time {
+}
+.com_card_msg_num {
+}
+.com_card_btn {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file

src/components/commodity-cell.vue

@@ -9,6 +9,7 @@
     <div class="com_cell_message">
       <div class="com_cell_msg_title">
         {{ cellData.title }}
+        <span v-if="cellData.mapService" class="tags map_service">mapService</span>
         <span v-if="cellData.state == 1" class="tags shared">共享</span>
         <span v-else-if="cellData.state ==  2" class="tags restricted">受限</span>
         <span v-else class="tags sensitive">敏感</span>
@@ -48,7 +49,7 @@
         <span class="com_cell_right_time_tit">本月获取次数：</span>
         <span class="com_cell_right_time">{{ cellData.numberOfMonth }}次</span>
       </div>
-      <el-button class="com_cell_right_btn" @click="goUrl('ssurl')">查看详情</el-button>
+      <el-button class="com_cell_right_btn" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -145,13 +146,17 @@ export default {
 .tags {
   display: inline-block;
   margin-left: 10px;
-  padding: 1px 8px;
+  padding: 1px 8px 2px;
   font-size: 12px;
   font-weight: 500;
   border-radius: 15px;
   position: relative;
   top: -2px;
 }
+.map_service {
+  background-color: #626DE9;
+  color: #fff;
+}
 .shared {
   background-color: #e7fdfc;
   border: solid 1px #8bd6d0;

src/components/commodity-list.vue

 <template>
   <div>
-    <commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
+    <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>
+    </div>
+    <div v-else class="commodity_cell">
+      <commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
+    </div>
     <!-- 分页 -->
     <section class="com-pagination" v-if="paginationShow">
       <div class="com_page_total">共 {{ pagination.total }} 个条目</div>
@@ -52,9 +60,11 @@
 
 <script>
 import CommodityCell from "@/components/commodity-cell.vue";
+import CommodityCard from "@/components/commodity-card.vue";
 export default {
   components: {
-    "commodity-cell": CommodityCell
+    "commodity-cell": CommodityCell,
+    "commodity-card": CommodityCard
   },
   props: {
     datas: { type: Array, default: [] },
@@ -66,7 +76,8 @@ export default {
     pageSizeShow: {
       type: Boolean,
       default: false
-    }
+    },
+    name: { type: String, default: "" }
   },
   data: () => ({
     pagination: {
@@ -102,10 +113,24 @@ export default {
     },
     getTotal() {
       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";
+      console.log(this.$refs.commodityCardIn);
     }
   },
   mounted() {
     this.getTotal();
+    if (this.name == "应用商店") {
+      this.pageResize();
+      window.onresize = () => {
+        this.pageResize();
+      };
+    }
   }
 };
 </script>
@@ -138,6 +163,12 @@ export default {
   justify-content: flex-end;
   align-items: center;
 }
+.commodity_card {
+}
+.commodity_card_list {
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>
 <style>
 .com_page_control .el-button {

src/components/service_list.vue

 <template>
+  <!-- 
+    name: page type
+    url: detail page url
+    urlList: get list data from this url
+    urlFilter: get filter data from this url
+    author: dixin
+    This component only for service shop list, so the explanation only look by me
+  -->
   <div>
     <div class="head_flex">
-      <el-breadcrumb separator="/" class="bread_crumb bread_left">
-        <el-breadcrumb-item :to="{ path: '/fwcs' }">服务超市</el-breadcrumb-item>
-        <el-breadcrumb-item>数据服务</el-breadcrumb-item>
+      <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
+        <el-breadcrumb-item :to="{ path: '/shop' }">服务超市</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
       </el-breadcrumb>
-      <div class="input_right">
+      <div v-if="urlList" class="input_right">
         <el-input
           v-model="search"
           prefix-icon="el-icon-search"
@@ -14,8 +22,9 @@
         ></el-input>
       </div>
     </div>
-    <block-radius>
-      <div class="classification">
+    <block-radius v-if="urlList">
+      <!-- filter -->
+      <div v-if="urlFilter" class="classification">
         <div v-for="(item, index) in filterLists" :key="'cd' + index" class="classification_line">
           <div class="classification_line_title">{{ item.name }}：</div>
           <div
@@ -34,6 +43,7 @@
                     <span
                       :class="activeOptions[index] == items.id ? 'classification_act':''"
                     >{{ items.name }}</span>
+                    <!-- if item have children, we will use an arrow to prompt -->
                     <i
                       v-if="items.children && openChildren[index].state == true && openChildren[index].index == indexs"
                       class="el-icon-caret-top"
@@ -46,6 +56,7 @@
                   </div>
                 </li>
               </ul>
+              <!-- if the word over the width, we will supply a button for show all word -->
               <div
                 v-if="item.showOpen"
                 class="classification_line_items_open"
@@ -57,6 +68,7 @@
                 <i v-if="openList[index] == 'up'" class="el-icon-caret-bottom"></i>
               </div>
             </div>
+            <!-- filter children -->
             <div v-if="openChildren[index].state">
               <ul class="classification_children_ul">
                 <li
@@ -76,14 +88,25 @@
         </div>
       </div>
       <div class="gray_line"></div>
-      <el-button
-        v-for="(item, index) in buttonFilter"
-        :key="item.name"
-        size="small"
-        :class="item.state == false ? 'button_filter':'button_filter_act'"
-        @click="clickButtonFilter(index)"
-      >{{ item.name }}</el-button>
-      <commodity-list :datas="lists" url="urlssss" :paginationShow="true" :pageSizeShow="true" @refresh="getNewList()"></commodity-list>
+      <!-- filter button -->
+      <div>
+        <el-button
+          v-for="(item, index) in buttonFilter"
+          :key="item.name"
+          size="small"
+          :class="item.state == false ? 'button_filter':'button_filter_act'"
+          @click="clickButtonFilter(index)"
+        >{{ item.name }}</el-button>
+      </div>
+      <!-- the list -->
+      <commodity-list
+        :datas="lists"
+        :url="url"
+        :name="name"
+        :paginationShow="true"
+        :pageSizeShow="true"
+        @refresh="getNewList"
+      ></commodity-list>
     </block-radius>
   </div>
 </template>
@@ -104,7 +127,9 @@ export default {
     urlFilter: {
       type: String,
       default: ""
-    }
+    },
+    url: { type: String, default: "" },
+    name: { type: String, default: "" }
   },
   data: () => ({
     search: "",
@@ -146,7 +171,8 @@ export default {
         serviceType: "数据服务 专题数据服务 企业专题数据服务",
         updateTime: "2020-03-12 18:31:12",
         numberOfMonth: "2698755",
-        rate: 3
+        rate: 3,
+        mapService: 1
       },
       {
         id: 1,
@@ -330,15 +356,14 @@ export default {
     dataField: "",
     dataSourceOrganization: "",
     page: 1,
-    limit: 10,
+    limit: 10
   }),
   mounted() {
-    this.getFwcsList();
-    this.getFwcsFilter();
-    this.setTout();
+    this.getShopList();
+    this.getShopFilter();
   },
   methods: {
-    getFwcsList() {
+    getShopList() {
       //   dataServiceType: "",
       // dataField: "",
       // dataSourceOrganization: ""
@@ -356,25 +381,25 @@ export default {
           this.error = true;
         });
     },
-    getFwcsFilter() {
-      let url = `${this.urlFilter}`;
-      this.$http
-        .get(url)
-        .then(response => {
-          if (response.data.message == "success") {
-            this.filterList = response.data.data;
-          } else {
-            console.log(response.data.message);
-          }
-        })
-        .catch(function(response) {
-          this.error = true;
-        });
-    },
-    setTout() {
+    getShopFilter() {
       setTimeout(() => {
-        this.judgeHeight();
-      }, 500);
+        if (this.urlFilter) {
+          this.judgeHeight();
+        }
+      }, 0);
+      //   let url = `${this.urlFilter}`;
+      //   this.$http
+      //     .get(url)
+      //     .then(response => {
+      //       if (response.data.message == "success") {
+      //         this.filterList = response.data.data;
+      //       } else {
+      //         console.log(response.data.message);
+      //       }
+      //     })
+      //     .catch(function(response) {
+      //       this.error = true;
+      //     });
     },
     judgeHeight() {
       let list = this.filterLists;
@@ -397,7 +422,6 @@ export default {
         this.$set(this.openList, index, "up");
       }
       //   这里不能像上面那样整体更新，因为啥我也不知道，我太菜
-      console.log(index);
     },
     clickItem(index, indexs, items) {
       this.activeOptions[index] = items.id;
@@ -426,7 +450,7 @@ export default {
     },
     clickButtonFilter(index) {
       this.buttonFilter[index].state = !this.buttonFilter[index].state;
-      this.getFwcsList();
+      this.getShopList();
     },
     clickChildren(id, index) {
       this.$set(this.activeOptions, index, id);
@@ -446,19 +470,19 @@ export default {
         default:
           break;
       }
-      this.getFwcsList();
+      this.getShopList();
     },
     // search debonce 500ms
     searchVal() {
       if (this.times !== null) clearTimeout(this.times);
       this.times = setTimeout(() => {
-        this.getFwcsList();
+        this.getShopList();
       }, 500);
     },
     getNewList(val) {
-        this.page = val.page;
-        this.limit = val.rowsPerPage;
-        this.getFwcsList();
+      this.page = val.page;
+      this.limit = val.rowsPerPage;
+      this.getShopList();
     }
   }
 };
@@ -472,7 +496,7 @@ export default {
   width: 300px;
 }
 .input_right {
-  width: 300px;
+  width: 360px;
 }
 .gray_line {
   width: 100%;
@@ -492,6 +516,7 @@ export default {
   width: 130px;
   padding: 15px 0;
   text-align: right;
+  color: #8890a7;
 }
 .classification_line_items {
   width: calc(100% - 100px);
@@ -553,6 +578,7 @@ export default {
 .button_filter {
   background-color: #e6eefe;
   color: #626de9;
+  font-size: 10px;
 }
 .button_filter_act {
   background-color: #515fe7;
@@ -570,4 +596,10 @@ export default {
 .el-input__suffix {
   left: 10px;
 }
+.input_right .el-input--prefix .el-input__inner {
+  outline: none;
+}
+.input_right .el-input__inner:focus-within {
+  border: 1px solid #626DE9;
+}
 </style>
\ No newline at end of file

src/components/service_shop_menu.vue

 <template>
   <div class="service_shop_menu">
     <ul class="service_shop_menu_list">
-      <li v-for="(item, index) in menuList" :key="index" @click="active(item.id)">
+      <li v-for="(item, index) in menuList" :key="index" @click="active(item.router)">
         <img
-          v-if="item.id == actives"
+          v-if="item.router == actives"
           :src="require('../assets/imgs/' + item.active + '.png')"
           class="menu_img"
         />
         <img v-else :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" />
-        <span :class="item.id == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span>
+        <span :class="item.router == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span>
       </li>
     </ul>
   </div>
@@ -19,47 +19,54 @@ export default {
   props: {},
   data() {
     return {
-      actives: 0,
+      actives: "",
       menuList: [
         {
           id: 0,
           label: "数据服务",
+          router: "/shop/data_service_list",
           active: "tool_ic_shujufw_sel",
           default: "tool_ic_shujufw"
         },
         {
           id: 1,
           label: "时空服务",
+          router: "/shop/space_time_service_list",
           active: "tool_ic_shikongfw_sel",
           default: "tool_ic_shikongfw"
         },
         {
           id: 2,
           label: "视频服务",
+          router: "/shop/video_service_list",
           active: "tool_ic_shipinfw_sel",
           default: "tool_ic_shipinfw"
         },
         {
           id: 3,
           label: "感知服务",
+          router: "/shop/perception_service_list",
           active: "tool_ic_ganzhifw_sel",
           default: "tool_ic_ganzhifw"
         },
         {
           id: 4,
           label: "综合应用服务",
+          router: "/shop/comprehensive_app_list",
           active: "tool_ic_zongheyyfw_sel",
           default: "tool_ic_zongheyyfw"
         },
         {
           id: 5,
           label: "云资源服务",
+          router: "/shop/cloud",
           active: "tool_ic_yunziyuanfw_sel",
           default: "tool_ic_yunziyuanfw"
         },
         {
           id: 6,
           label: "应用商店",
+          router: "/shop/app_store_list",
           active: "tool_ic_yingyongsd_sel",
           default: "tool_ic_yingyongsd"
         }
@@ -76,12 +83,17 @@ export default {
       this.getActiveMenu(newVal);
     }
   },
+  mounted() {
+    this.$store.commit("serviceShopMenuAct", this.$route.path);
+    this.actives = this.$store.state.serviceShopMenu;
+  },
   methods: {
-    active(id) {
-      this.$store.commit("serviceShopMenuAct", id);
+    active(val) {
+      this.$store.commit("serviceShopMenuAct", val);
     },
     getActiveMenu(val) {
       this.actives = val;
+      this.$router.push(val);
     }
   }
 };

src/pages/shop.vue

+<template>
+  <div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/data_service_list.vue → src/pages/shop_cloud.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="云资源"></service-list>
       </el-main>
     </el-container>
   </div>
@@ -21,9 +21,7 @@ export default {
   },
   data: () => ({}),
   mounted() {},
-  methods: {
-
-  }
+  methods: {}
 };
 </script>
 <style scoped>

src/pages/shop_list_app_store.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/shop_list_comprehensive_app.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/shop_list_data.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/shop_list_perception.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="感知服务"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/shop_list_space_time.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/pages/shop_list_video.vue

+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <service-list name="视频服务"></service-list>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import ServiceShopMenu from "@/components/service_shop_menu";
+import ServiceList from "@/components/service_list";
+export default {
+  components: {
+    ServiceShopMenu,
+    ServiceList
+  },
+  data: () => ({}),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/router/index.js

@@ -91,14 +91,45 @@ export default new Router({
           ],
         },
         {
-          path: "/fwcs", // 服务超市
-          name: "fwcs",
-          component: () => import("@/pages/data_service_list"),
+          path: "/shop", // 服务超市
+          name: "shop",
+          redirect: "/shop/data_service_list",
+          component: () => import("@/pages/shop"),
           children: [
             {
-              path: "/data_service_list", // 服务超市列表页
-              name: "fwcsDataList",
-              component: () => import("@/pages/data_service_list"),
+              path: "/shop/data_service_list", // 数据服务列表页
+              name: "shopDataList",
+              component: () => import("@/pages/shop_list_data"),
+            },
+            {
+              path: "/shop/space_time_service_list", // 时空服务列表页
+              name: "shopSpaceTimeList",
+              component: () => import("@/pages/shop_list_space_time"),
+            },
+            {
+              path: "/shop/video_service_list", // 视频服务列表页
+              name: "shopVideoList",
+              component: () => import("@/pages/shop_list_video"),
+            },
+            {
+              path: "/shop/perception_service_list", // 感知服务列表页
+              name: "shopPerceptionList",
+              component: () => import("@/pages/shop_list_perception"),
+            },
+            {
+              path: "/shop/comprehensive_app_list", // 综合应用列表页
+              name: "shopComAppList",
+              component: () => import("@/pages/shop_list_comprehensive_app"),
+            },
+            {
+              path: "/shop/cloud", // 云资源服务
+              name: "shopCloud",
+              component: () => import("@/pages/shop_cloud"),
+            },
+            {
+              path: "/shop/app_store_list", // 应用商店列表页
+              name: "shopAppStoreList",
+              component: () => import("@/pages/shop_list_app_store"),
             },
           ],
         },

src/store/index.js

@@ -6,7 +6,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   state: {
     role: 1,//0：普通用户，1：组织管理员，2：超级管理员
-    serviceShopMenu: 0, // 服务超市侧边栏
+    serviceShopMenu: "shopDataList", // 服务超市侧边栏
   },
   modules: {
   },