Skip to content

A
apaas-ui
Commit 4dc3e3b6 authored by 张俊's avatar 张俊
Browse files
Options

消息推送卡片选择

parent 0a5eb252
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 5 deletions
src/components/recommen/recommen-box.vue 0 → 100644
View file @ 4dc3e3b6
<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>
src/components/recommen/screen-type.vue 0 → 100644
View file @ 4dc3e3b6
<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>
src/pages/message-management/recommended/recommened-selected-list.vue
View file @ 4dc3e3b6
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
<span></span> <span></span>
推荐位管理 推荐位管理
</p> </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>
<div class="selected_box"> <div class="selected_box">
...@@ -21,14 +25,23 @@ ...@@ -21,14 +25,23 @@
</template> </template>
<script> <script>
import screenType from '@/components/recommen/screen-type'
import recommenBox from '@/components/recommen/recommen-box'
export default { export default {
props: [], props: [],
components: { components: {
screenType,
recommenBox,
}, },
data() { data() {
return { return {
filtdata:[],
filter_name_arr:{
organizations:'数据来源机构',
serviceDomain:'数据领域',
serviceTypeInfo:'数据服务类型'
},
select_able_arr:[],
}; };
}, },
watch: { watch: {
...@@ -38,13 +51,45 @@ export default { ...@@ -38,13 +51,45 @@ export default {
}, },
created() { created() {
this.get_select_data()
this.get_select_list()
}, },
mounted() { mounted() {
}, },
methods: { 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> </script>
...@@ -74,7 +119,7 @@ export default { ...@@ -74,7 +119,7 @@ export default {
} }
.selected_box{ .selected_box{
float: left; float: left;
width: 400px; width: 380px;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 3px 6px 0px box-shadow: 0px 3px 6px 0px
#f4f7fc; #f4f7fc;
...@@ -94,5 +139,23 @@ export default { ...@@ -94,5 +139,23 @@ export default {
background-color: #515fe7; background-color: #515fe7;
border-radius: 2px; border-radius: 2px;
display: inline-block; 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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment