From 4dc3e3b6e004de4bdc9280b424ea39c38bc90400 Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Tue, 21 Jul 2020 10:00:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8E=A8=E9=80=81=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/recommen/recommen-box.vue      | 122 +++++++++++
 src/components/recommen/screen-type.vue       | 207 ++++++++++++++++++
 .../recommended/recommened-selected-list.vue  |  73 +++++-
 3 files changed, 397 insertions(+), 5 deletions(-)
 create mode 100644 src/components/recommen/recommen-box.vue
 create mode 100644 src/components/recommen/screen-type.vue

diff --git a/src/components/recommen/recommen-box.vue b/src/components/recommen/recommen-box.vue
new file mode 100644
index 0000000..41c206d
--- /dev/null
+++ b/src/components/recommen/recommen-box.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="box">
+        <div class="box_header">
+            <img :src="data.cover" alt="">
+            <div class="box_title">
+                <p>{{data.name}} <span>共享</span></p>
+                <p>{{data.department_name}}</p>
+            </div>
+            <div class="star">
+                <i class="el-icon-star-on" style="color:#fac266;"></i>
+                <span>{{data.score}}</span>
+            </div>
+        </div>
+        <div class="box_body">
+            <p></p>
+            <p></p>
+            <p></p>
+            <p></p>
+            <p>
+                <span>
+                    <img src="" alt="">
+                    999
+                </span>
+                <span>
+                    <img src="" alt="">
+                    999
+                </span>
+            </p>
+        </div>
+         <el-checkbox v-model="checked" @change="change_check()"></el-checkbox>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['data','flag'],
+    components: {
+
+    },
+    data() {
+        return {
+            checked:false
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+        change_check(){
+            this.$emit('change_value',data)
+        }
+    },
+};
+</script>
+
+<style scoped>
+.box{
+    width: 100%;
+    height: 260px;
+    background-color: #ffffff;
+	box-shadow: 0px 3px 10px 0px 
+		rgba(3, 10, 37, 0.05);
+	border-radius: 10px;
+	border: solid 1px #f4f7fc;
+    position: relative;
+}
+.box_header{
+    width: 100%;
+    height: 93px;
+    overflow: hidden;
+    background-color: #f9fafc;
+    position: relative;
+}
+.box_header img{
+    width: 63px;
+    height: 63px;
+    float: left;
+}
+.box_header .box_title{
+    float: left;
+    width: calc(100% - 100px);
+    font-size: 16px;
+    color: #0d1847;
+}
+.box_title p:nth-of-type(2){
+    color: #58617a;
+    font-size: 14px;
+}
+.star{
+    position: absolute;
+    right: 18px;
+    bottom: 18px;
+    font-size: 18px;
+	color: #ea7d19;
+    font-weight: 600;
+}
+.box_body{
+    padding: 0 20px;
+}
+.box_body p{
+    font-size: 14px;
+    color: #8890a7;
+}
+.box_body p:nth-of-type(5){
+    border-top: 1px solid #e3e5ef;
+}
+.box_body p:nth-of-type(5) span{
+    float: left;
+}
+.box_body p:nth-of-type(5) span:nth-of-type(2){
+    float: right;
+}
+</style>
diff --git a/src/components/recommen/screen-type.vue b/src/components/recommen/screen-type.vue
new file mode 100644
index 0000000..dfaa7c3
--- /dev/null
+++ b/src/components/recommen/screen-type.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="type_contain">
+        <div class="type_header">
+            <div class="openbox" @click="openflag_func">
+                <span>{{openflag?'收起':'筛选'}}</span>
+                <i v-if="!openflag" class="el-icon-caret-bottom"></i>
+                <i v-if="openflag" class="el-icon-caret-top"></i>
+            </div>
+            <el-input
+                class="search"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                @input="post_value()"
+                v-model="input2">
+            </el-input>
+        </div>
+        <div class="type_select" v-show="openflag">
+            <div style="overflow:hidden;" class="line_data" v-for="(item,index) in data" :key="index+5000">
+                <div class="select_name">
+                    {{item.name}}：
+                </div>
+                <div :ref="'select_arr_box'+index" class="select_arr_box" :style="show_selected[index]?{}:{height:'52px',overflow:'hidden'}">
+                    <div :ref="'select_item'+index" style="overflow:hidden;">
+                        <div class="select_item" :style="selected_arr[index].length==0?{color:'#515fe7',fontWeight:600}:''" @click="set_select(0,index)">全部</div>
+                        <div class="select_item" :style="selected_arr[index].indexOf(it.id)!==-1?{color:'#515fe7',fontWeight:600}:{}" @click="set_select(1,index,it.id)" v-for="(it,idx) in item.arr" :key="idx+6000">
+                            {{it.name}} 
+                        </div>
+                    </div>
+                    <div v-show="show_open[index]" class="select_item_open" @click="set_open(index)">
+                        <span>{{show_selected[index]?'收起':'展开'}}</span>
+                        <i v-if="!show_selected[index]" class="el-icon-caret-bottom"></i>
+                        <i v-if="show_selected[index]" class="el-icon-caret-top"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['data'],
+    components: {
+
+    },
+    data() {
+        return {
+            input2:'',
+            openflag:false,
+            selected_arr:[
+                [],
+                [],
+                [],
+            ],
+            show_selected:[
+                false,
+                false,
+                false
+            ],
+            show_open:[
+                false,
+                false,
+                false
+            ]
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+        window.onresize = ()=>{
+            this.pageResize();
+        }
+    },
+    destroyed(){
+      window.onresize = null;
+    },
+    methods: {
+        openflag_func(){
+            this.openflag = !this.openflag;
+            setTimeout(()=>{
+                this.pageResize()
+            },100)
+        },
+        pageResize(){
+            if(this.$refs.select_item0[0].clientHeight>this.$refs.select_arr_box0[0].clientHeight+2){
+                this.$set(this.show_open,0,true)
+            }else{
+                this.$set(this.show_open,0,false)
+            }
+            if(this.$refs.select_item1[0].clientHeight>this.$refs.select_arr_box1[0].clientHeight+2){
+                this.$set(this.show_open,1,true)
+            }else{
+                this.$set(this.show_open,1,false)
+            }
+            if(this.$refs.select_item2[0].clientHeight>this.$refs.select_arr_box2[0].clientHeight+2){
+                this.$set(this.show_open,2,true)
+            }else{
+                this.$set(this.show_open,2,false)
+            }
+        },
+        set_select(n,index,id){
+            if(n==0){
+                this.$set(this.selected_arr,index,[])
+            }else{
+                if(this.selected_arr[index].indexOf(id)==-1){
+                    this.selected_arr[index].push(id)
+                }else{
+                    this.selected_arr.splice(this.selected_arr[index].indexOf(id), 1)
+                }
+            }
+            this.post_value()
+        },
+        set_open(index){
+            this.$set(this.show_selected,index,!this.show_selected[index])
+        },
+        post_value(){
+            var temp = {
+                word:this.input2,
+            }
+            this.data.forEach((e,idx) => {
+                temp[e.key] = this.selected_arr[idx]
+            });
+            this.$emit('getselect',temp)
+        }
+    },
+};
+</script>
+
+<style>
+.type_header .el-input__inner{
+    width: 240px;
+    background-color: #f7f8f9;
+}
+.type_header .el-input{
+    width: 240px;
+}
+</style>
+<style scoped>
+.type_contain{
+    width: 100%;
+    padding: 20px;
+    border-bottom: 1px solid #e9ecf3;
+}
+.type_header{
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+.openbox{
+    width: 105px;
+	height: 40px;
+    line-height: 40px;
+    text-align: center;
+	background-color: #f7f8f9;
+	border-radius: 8px;
+	border: solid 1px #e3e5ef;
+    float: left;
+    color: #58617a;
+    font-size: 14px;
+}
+.search{
+    float: right;
+}
+.select_name{
+    width: 100px;
+    text-align: right;
+    font-size: 14px;
+    color: #8890a7;
+    height: 52px;
+    line-height: 52px;
+    float: left;
+}
+.select_arr_box{
+    width: calc(100% - 100px);
+    float: left;
+    border-bottom: 1px solid #e9ecf3;
+    overflow: hidden;
+    padding-left: 20px;
+    padding-right: 50px;
+    position: relative;
+}
+.type_select .line_data:nth-last-of-type(1) .select_arr_box{
+    border-bottom:0;
+}
+.select_item,.select_item_open{
+    height: 52px;
+    line-height: 52px;
+    margin-right: 40px;
+    float: left;
+    color: #58617a;
+    cursor: pointer;
+}
+.select_arr_box .select_item_open{
+    position: absolute;
+    right:0;
+    margin-right: 10px;
+    top:0;
+}
+</style>
diff --git a/src/pages/message-management/recommended/recommened-selected-list.vue b/src/pages/message-management/recommended/recommened-selected-list.vue
index 92e99b0..80cf309 100644
--- a/src/pages/message-management/recommended/recommened-selected-list.vue
+++ b/src/pages/message-management/recommended/recommened-selected-list.vue
@@ -9,6 +9,10 @@
                 <span></span>
                 推荐位管理
             </p>
+            <screen-type :data="filtdata" @getselect="getselect"></screen-type>
+            <div class="select_box_contain">
+                <recommen-box :data="item" v-for="(item,index) in select_able_arr" :key="index+50000" class="select_box_in"></recommen-box>
+            </div>
         </div>
 
         <div class="selected_box">
@@ -21,14 +25,23 @@
 </template>
 
 <script>
+import screenType from '@/components/recommen/screen-type'
+import recommenBox from '@/components/recommen/recommen-box'
 export default {
     props: [],
     components: {
-
+        screenType,
+        recommenBox,
     },
     data() {
         return {
-
+            filtdata:[],
+            filter_name_arr:{
+                organizations:'数据来源机构',
+                serviceDomain:'数据领域',
+                serviceTypeInfo:'数据服务类型'
+            },
+            select_able_arr:[],
         };
     },
     watch: {
@@ -38,13 +51,45 @@ export default {
 
     },
     created() {
-
+        this.get_select_data()
+        this.get_select_list()
     },
     mounted() {
 
     },
     methods: {
-
+        get_select_data(){
+            this.$http
+            .get(`/apaas/serviceapp/v3/servicemarket/profileInfo?serviceType=5`)
+            .then((response) => {
+                this.filtdata = []
+                for (const key in response.data.data) {
+                    if(response.data.data[key].childDomains){
+                        response.data.data[key].flag = false
+                    }
+                    this.filtdata.push(
+                        {
+                            name:this.filter_name_arr[key],
+                            arr:response.data.data[key],
+                            key:key
+                        }
+                    )
+                }
+            })
+        },
+        getselect(val){
+            console.log(val);
+            this.get_select_list(val.word,val.serviceTypeInfo.join(),val.serviceDomain.join(),val.organizations.join())
+        },
+        get_select_list(word='',data_type='',sectors='',org=''){
+            this.$http
+            .get(`/apaas/service/v3/recommend/manage/featured/service/fliter?ad_type=hotdata&keyword=${word}&data_type=${data_type}&sectors=${sectors}&org=${org}`)
+            .then((response) => {
+                if(response.data.success){
+                    this.select_able_arr = response.data.data
+                }
+            })
+        },
     },
 };
 </script>
@@ -74,7 +119,7 @@ export default {
 }
 .selected_box{
     float: left;
-    width: 400px; 
+    width: 380px; 
     background-color: #ffffff;
 	box-shadow: 0px 3px 6px 0px 
 		#f4f7fc;
@@ -94,5 +139,23 @@ export default {
 	background-color: #515fe7;
 	border-radius: 2px;
     display: inline-block;
+    vertical-align: -2px;
+    margin-left: 30px;
+    margin-right: 10px;
+}
+.select_box_contain{
+    padding: 30px;
+    width: 100%;
+    overflow: hidden;
+}
+.select_box_in{
+    width: calc((100% - 40px)/3);
+    height: 100px;
+    float: left;
+    background-color: #ccc;
+    margin-right: 20px;
+}
+.select_box_contain .select_box_in:nth-of-type(3n){
+    margin-right: 0px;
 }
 </style>
-- 
2.26.0