重构超市

src/components/service-info/service-info.vue

 <template>
-  <div class="service_info apaas_button" v-if="data">
+  <div class="service_info apaas_button" v-if="data && showItem">
     <div class="service_title">
       <span class="service_name" v-text="data.name"></span>
       <span class="service_type" v-if="data.type" v-text="data.type"></span>
@@ -89,7 +89,13 @@
             class="commodity_text"
             >暂无</span
           >
-          <div v-else class="btn_container">
+          <div
+            v-else-if="
+              data.serviceRequestSpcs.spcs_type_1 &&
+              data.serviceRequestSpcs.spcs_type_1.length != 0
+            "
+            class="btn_container"
+          >
             <el-button
               v-for="(item, index) in data.serviceRequestSpcs.spcs_type_1"
               :key="'spcs_' + index"
@@ -191,6 +197,7 @@ export default {
     specification: {}, // 规格
     duration: 1, // 时长
     showTime: false,
+    showItem: false,
   }),
   computed: {
     actionDisabled() {
@@ -268,10 +275,15 @@ export default {
   mounted() {
     // 初始化购买方式
     if (this.data.serviceRequestSpcs && this.data.serviceRequestSpcs.length) {
+      if (!this.data.serviceRequestSpcs.spcs_type_1) {
+        this.data.serviceRequestSpcs.spcs_type_1 = [];
+      }
+      if (!this.data.serviceRequestSpcs.spcs_type_2) {
+        this.data.serviceRequestSpcs.spcs_type_2 = [];
+      }
       let types = Array.from(
         new Set(this.data.serviceRequestSpcs.map((item) => item.type))
       );
-
       if (types.indexOf(3) > -1) {
         this.types = [
           {
@@ -316,6 +328,7 @@ export default {
     ) {
       this.specification = this.data.serviceRequestSpcs.spcs_type_2[0];
     }
+    this.showItem = true;
   },
 };
 </script>

src/components/service-list/service_shop_menu.vue

@@ -65,32 +65,32 @@ export default {
             }
             switch (uri) {
               case "data_service_list":
-                item.active = "tool_ic_shujufw_sel";
-                item.default = "tool_ic_shujufw";
+                item.active = "shop_tool_ic_sjfw_sel";
+                item.default = "shop_tool_ic_sjfw";
                 break;
               case "space_time_service_list":
-                item.active = "tool_ic_shikongfw_sel";
-                item.default = "tool_ic_shikongfw";
+                item.active = "shop_tool_ic_skfw_sel";
+                item.default = "shop_tool_ic_skfw";
                 break;
               case "video_service_list":
-                item.active = "tool_ic_shipinfw_sel";
-                item.default = "tool_ic_shipinfw";
+                item.active = "shop_tool_ic_spfw_sel";
+                item.default = "shop_tool_ic_spfw";
                 break;
               case "perception_service_list":
-                item.active = "tool_ic_ganzhifw_sel";
-                item.default = "tool_ic_ganzhifw";
+                item.active = "shop_tool_ic_ganzhifw_sel";
+                item.default = "shop_tool_ic_ganzhifw";
                 break;
               case "comprehensive_app_list":
-                item.active = "tool_ic_zongheyyfw_sel";
-                item.default = "tool_ic_zongheyyfw";
+                item.active = "shop_tool_ic_zhyyfw_sel";
+                item.default = "shop_tool_ic_zhyyfw";
                 break;
               case "cloud":
-                item.active = "tool_ic_yunziyuanfw_sel";
-                item.default = "tool_ic_yunziyuanfw";
+                item.active = "shop_tool_ic_yzyfw_sel";
+                item.default = "shop_tool_ic_yzyfw";
                 break;
               case "app_store_list":
-                item.active = "tool_ic_yingyongsd_sel";
-                item.default = "tool_ic_yingyongsd";
+                item.active = "shop_ic_yysd_sel";
+                item.default = "shop_ic_yysd";
                 break;
               default:
                 item.active = "1";
@@ -111,24 +111,25 @@ export default {
 .service_shop_menu {
   background-color: #0d1847;
   position: fixed;
-  top: 58px;
-  left: 0;
+  top: 76px;
+  left: calc(50% - 600px);
   width: 180px;
-  height: 100%;
-  padding-top: 30px;
+  padding: 8px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		rgba(15, 19, 65, 0.04);
+	border-radius: 8px;
 }
 .service_shop_menu_list > li {
   padding: 16px 10px 8px 22px;
-  border-left: 5px solid #0d1847;
   font-size: 15px;
   line-height: 24px;
   cursor: pointer;
 }
 .service_shop_menu_list > li:hover,
 .service_shop_menu_list > li.current {
-  border-left: 5px solid #e56600;
-  background-color: #182665;
-  color: #e6ebfe;
+  background-color: rgba(242, 246, 253, 0.4);
+  color: #515fe7;
 }
 .menu_img {
   width: 25px;
@@ -136,12 +137,16 @@ export default {
 }
 .menu_item {
   position: relative;
-  color: #6573ae;
+  font-weight: bold;
+  font-size: 15px;
+  color: #96a0c5;
   top: -6px;
 }
 .menu_item_active {
   position: relative;
-  color: #e6ebfe;
+  font-weight: bold;
+  font-size: 15px;
+  color: #515fe7;
   top: -6px;
 }
 </style>

src/pages/service_shop/shop_list.vue

 <template>
-  <div>
+  <div class="shop_list_cont">
     <el-container>
       <el-aside width="180px">
         <service-shop-menu></service-shop-menu>
@@ -123,4 +123,9 @@ export default {
   background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
     center;
 }
+.shop_list_cont {
+  width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
 </style>
\ No newline at end of file

src/pages/service_shop/skfwDetail.vue

@@ -14,7 +14,6 @@
 
     <service-tabs
       :detail-data="detailData"
-      :specification-data="specificationData"
       :provider-data="providerData"
       :comments-data="commentsData"
       :comments-url="commentsUrl"
@@ -34,7 +33,6 @@ export default {
   data: () => ({
     baseInfo: null,
     detailData: null,
-    specificationData: null,
     providerData: null,
     commentsData: null,
   }),
@@ -61,17 +59,6 @@ export default {
         })
         .then(({ data }) => {
           let datas = data.data;
-          let specificationData =
-            (datas.serviceRequestSpcs &&
-              datas.serviceRequestSpcs.map((item) => ({
-                id: item.id,
-                type: item.type,
-                pv: item.pv,
-                count: item.count,
-                name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
-                descript: item.des,
-              }))) ||
-            [];
 
           this.baseInfo = {
             portal_id: datas.portal_id || "", // 时空服务id
@@ -93,9 +80,9 @@ export default {
               datas.data_service_type3_name,
             ],
             descript: datas.descript,
-            serviceRequestSpcs: specificationData,
             scoreDetail: datas.scoreDetail,
             month_sale: data.month_sale,
+            serviceRequestSpcs: datas.serviceRequestSpcs,
           };
 
           this.detailData = [
@@ -145,7 +132,6 @@ export default {
               ],
             }, */
           ];
-          this.specificationData = specificationData;
           this.providerData = {
             organization_name: datas.organization_name,
             picture_path: datas.organization_picture,

src/pages/service_shop/zhfwDetail.vue

@@ -14,7 +14,6 @@
 
     <service-tabs
       :detail-data="detailData"
-      :specification-data="specificationData"
       :provider-data="providerData"
       :comments-data="commentsData"
       :comments-url="commentsUrl"
@@ -34,7 +33,6 @@ export default {
   data: () => ({
     baseInfo: null,
     detailData: null,
-    specificationData: null,
     providerData: null,
     commentsData: null,
   }),
@@ -56,18 +54,6 @@ export default {
         })
         .then(({ data }) => {
           let datas = data.data;
-          let specificationData =
-            (datas.serviceRequestSpcs &&
-              datas.serviceRequestSpcs.map((item) => ({
-                id: item.id,
-                type: item.type,
-                pv: item.pv,
-                count: item.count,
-                name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
-                descript: item.des,
-              }))) ||
-            [];
-
           this.baseInfo = {
             service_id: this.id,
             app_id: 0,
@@ -88,7 +74,7 @@ export default {
               datas.data_service_type3_name,
             ],
             descript: datas.descript,
-            serviceRequestSpcs: specificationData,
+            serviceRequestSpcs: datas.serviceRequestSpcs,
             scoreDetail: datas.scoreDetail,
             month_sale: data.month_sale,
           };
@@ -141,7 +127,6 @@ export default {
               value: datas.workflows_id,
             });
           }
-          this.specificationData = specificationData;
           this.providerData = {
             organization_name: datas.organization_name,
             picture_path: datas.organization_picture,