新建定向推送

src/components/message-steps/select-service.vue

+<template>
+  <div class="select_service">
+    <screen-type
+      class="service_fliter"
+      :data="filterList"
+      @getselect="getFilters"
+    ></screen-type>
+    <div class="service_list apaas_scroll">
+      <recommen-box
+        v-for="(item, index) in serviceList"
+        :data="item"
+        :key="'sv_' + index"
+        :flag="true"
+        @change_value="changeValue"
+        class="service_item"
+      ></recommen-box>
+    </div>
+  </div>
+</template>
+
+<script>
+import screenType from "@/components/recommen/screen-type";
+import recommenBox from "@/components/recommen/recommen-box";
+
+export default {
+  components: {
+    screenType,
+    recommenBox,
+  },
+  data() {
+    return {
+      serviceType: 5, // 5：数据服务，6：时空服务，21：综合应用服务
+      filterList: [],
+      serviceList: [],
+      selected: [],
+    };
+  },
+  created() {
+    this.getFilterList();
+    this.getServiceList();
+  },
+  methods: {
+    getFilterList() {
+      let serviceType = this.serviceType;
+      let serviceTypeInfo = {
+        5: "数据服务类型",
+        6: "时空服务类型",
+        21: "服务类型",
+      };
+      let serviceDomain = {
+        5: "服务领域",
+        6: "服务领域",
+        21: "服务领域",
+      };
+      let organizations = {
+        5: "数据来源机构",
+        6: "服务来源组织",
+        21: "服务来源组织",
+      };
+      let filterSerise = {
+        serviceTypeInfo: serviceTypeInfo[serviceType],
+        serviceDomain: serviceDomain[serviceType],
+        organizations: organizations[serviceType],
+      };
+
+      this.filterList = [];
+
+      this.$http
+        .get("/apaas/serviceapp/v3/servicemarket/profileInfo", {
+          params: {
+            serviceType,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            let filters = data.data;
+
+            for (let key in filters) {
+              if (filters[key].childDomains) {
+                filters[key].flag = false;
+              }
+
+              this.filterList.push({
+                name: filterSerise[key],
+                arr: filters[key],
+                key: key,
+              });
+            }
+          }
+        });
+    },
+    getFilters(filters) {
+      this.getServiceList({
+        serviceName: filters.word,
+        serviceType2s: filters.serviceTypeInfo.join(),
+        dataDomains: filters.serviceDomain.join(),
+        organizeIds: filters.organizations.join(),
+      });
+    },
+    getServiceList(params = {}) {
+      this.$http
+        .get("/apaas/serviceapp/v3/servicemarket/list", {
+          params: {
+            serviceType1: this.serviceType,
+            ...params,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            this.serviceList = data.data || [];
+          }
+        });
+    },
+    changeValue(item) {
+      if (item.check) {
+        this.selected.push(item.data);
+      } else {
+        let temp = "";
+        this.selected.forEach((v, index) => {
+          if (v.id == item.id) {
+            temp = index;
+          }
+        });
+        this.selected.splice(temp, 1);
+      }
+
+      this.$emit("change", this.selected);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.select_service {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.service_list {
+  flex-grow: 1;
+  margin-top: 19px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.service_item {
+  width: calc((100% - 60px) / 4);
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 30px;
+}
+.service_item:nth-of-type(4n) {
+  margin-right: 0px;
+}
+</style>

src/components/recommen/screen-type.vue

@@ -151,7 +151,6 @@ export default {
 .type_header{
     width: 100%;
     overflow: hidden;
-    margin-bottom: 20px;
 }
 .openbox{
     width: 105px;
@@ -187,6 +186,9 @@ export default {
     padding-right: 50px;
     position: relative;
 }
+.type_select {
+    margin-top: 20px;
+}
 .type_select .line_data:nth-last-of-type(1) .select_arr_box{
     border-bottom:0;
 }

src/pages/message-management/directed-push/directed-push-add.vue

@@ -29,9 +29,11 @@
           :active-icon="require('@/assets/imgs/progress_ic_tuisongfw.png')"
           class="apaas_step"
         >
-          <div class="apaas_step_content">
-            <p style="padding: 50px;text-align: center;">选择推送服务</p>
-          </div>
+          <select-service
+            class="apaas_step_content"
+            @change="selectService"
+          ></select-service>
+
           <div class="apaas_button apaas_step_action">
             <el-button type="defalut" @click="backToList">
               取消
@@ -101,11 +103,17 @@
 <script>
 import Steps from "@/components/app-build-steps/app-build-steps";
 import Step from "@/components/app-build-steps/app-build-step";
+import SelectService from "@/components/message-steps/select-service";
+import SelectTemplate from "@/components/message-steps/select-template";
+import SelectUsers from "@/components/message-steps/select-users";
 
 export default {
   components: {
     Steps,
     Step,
+    SelectService,
+    SelectTemplate,
+    SelectUsers,
   },
   data() {
     return {
@@ -113,9 +121,11 @@ export default {
       done: false,
     };
   },
-  computed: {},
   created() {},
   methods: {
+    selectService(values) {
+      console.log(values.map((item) => item.id).join(","));
+    },
     backToList() {
       this.$router.push("/message/directed_push");
     },