Skip to content

A
apaas-ui
Commit 372d835c authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务超市列表筛选展开收起异常

parent d33837f3
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 77 deletions
src/components/service-list/service_list.vue
View file @ 372d835c
......@@ -9,7 +9,9 @@
<div>
<div class="head_flex">
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item :to="{ path: '/shop' }">{{ $t('lang.service_shop') }}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/shop' }">{{
$t("lang.service_shop")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
</el-breadcrumb>
<div class="input_right">
......@@ -24,45 +26,81 @@
<block-radius>
<!-- filter -->
<div v-if="urlFilter" class="classification">
<div v-for="(item, index) in filterLists" :key="'cd' + index" class="classification_line">
<div
v-for="(item, index) in filterLists"
:key="'cd' + index"
class="classification_line"
>
<div
class="classification_line_if"
v-if="item.childDomains && item.childDomains.length != 0"
>
<div class="classification_line_title">{{ item.name }}：</div>
<div
:class="index == filterLists.length - 1 ? 'classification_line_items':'classification_line_items classification_line_items_border'"
:class="
index == filterLists.length - 1
? 'classification_line_items'
: 'classification_line_items classification_line_items_border'
"
>
<div
:class="openList[index] == 'up' ? 'classification_line_hid':'classification_line_show'"
:class="
openList[index] == 'up'
? 'classification_line_hid'
: 'classification_line_show'
"
>
<ul :id="item.id" class="classification_line_items_ul">
<li class="classification_line_items_li" :key="'cda' + index">
<div class="classification_span">
<span
@click="clickAll(index)"
:class="activeOptions[index].length == 0 ? 'classification_act':''"
>全部</span>
:class="
activeOptions[index].length == 0
? 'classification_act'
: ''
"
>全部</span
>
</div>
</li>
<li
v-for="(items, indexs) in item.childDomains"
:class="items.childDomains && openChildren[index].state == true && openChildren[index].index == items.id ? 'classification_line_items_li_act classification_line_items_li':'classification_line_items_li'"
:class="
items.childDomains &&
openChildren[index].state == true &&
openChildren[index].index == items.id
? 'classification_line_items_li_act classification_line_items_li'
: 'classification_line_items_li'
"
:key="'cds' + indexs"
>
<div class="classification_span">
<span
@click="clickItem(index, indexs, items)"
:class="activeOptions[index].indexOf(items.id) != -1 ? 'classification_act':''"
>{{ items.name }}</span>
:class="
activeOptions[index].indexOf(items.id) != -1
? 'classification_act'
: ''
"
>{{ items.name }}</span
>
<!-- if item have children, we will use an arrow to prompt -->
<i
v-if="items.childDomains && openChildren[index].state == true && openChildren[index].index == items.id"
v-if="
items.childDomains &&
openChildren[index].state == true &&
openChildren[index].index == items.id
"
@click="clickItemChild(index, indexs, items)"
class="el-icon-caret-top"
></i>
<i
v-else-if="items.childDomains && openChildren[index].state == false && openChildren[index].index == items.id"
v-else-if="
items.childDomains &&
openChildren[index].state == false &&
openChildren[index].index == items.id
"
@click="clickItemChild(index, indexs, items)"
class="el-icon-caret-bottom"
></i>
......@@ -82,8 +120,14 @@
>
<span v-if="openList[index] == 'down'">收起</span>
<span v-if="openList[index] == 'up'">展开</span>
<i v-if="openList[index] == 'down'" class="el-icon-caret-top"></i>
<i v-if="openList[index] == 'up'" class="el-icon-caret-bottom"></i>
<i
v-if="openList[index] == 'down'"
class="el-icon-caret-top"
></i>
<i
v-if="openList[index] == 'up'"
class="el-icon-caret-bottom"
></i>
</div>
</div>
<!-- filter children -->
......@@ -96,11 +140,23 @@
>
<div
class="classification_span"
@click="clickChildren(itemChildren.id, index, openChildren[index].index)"
@click="
clickChildren(
itemChildren.id,
index,
openChildren[index].index
)
"
>
<span
:class="activeChildOptions[index].indexOf(itemChildren.id) != -1 ? 'classification_act':''"
>{{ itemChildren.name }}</span>
:class="
activeChildOptions[index].indexOf(itemChildren.id) !=
-1
? 'classification_act'
: ''
"
>{{ itemChildren.name }}</span
>
</div>
</li>
</ul>
......@@ -111,7 +167,11 @@
</div>
<div
class="gray_line"
v-if="filterLists[0].childDomains.length != 0 || filterLists[1].childDomains.length != 0 || filterLists[2].childDomains.length != 0"
v-if="
filterLists[0].childDomains.length != 0 ||
filterLists[1].childDomains.length != 0 ||
filterLists[2].childDomains.length != 0
"
></div>
<!-- filter button -->
<div class="btn_group">
......@@ -119,11 +179,14 @@
v-for="(item, index) in buttonFilter"
:key="item.name"
size="small"
:class="index == activeBtn ? 'button_filter_act':'button_filter'"
:class="index == activeBtn ? 'button_filter_act' : 'button_filter'"
@click="clickButtonFilter(index)"
>{{ item.name }}</el-button>
>{{ item.name }}</el-button
>
<div v-if="urlFilter == 'app'" class="btn_right_check">
<el-checkbox v-model="couldTwice" @change="changeTwice">支持二次开发</el-checkbox>
<el-checkbox v-model="couldTwice" @change="changeTwice"
>支持二次开发</el-checkbox
>
</div>
</div>
<!-- the list -->
......@@ -146,12 +209,12 @@ import BlockRadius from "@/components/general/block-radius";
export default {
components: {
"commodity-list": CommodityList,
BlockRadius
BlockRadius,
},
props: {
urlFilter: {
type: String,
default: ""
default: "",
},
url: { type: String, default: "" },
name: { type: String, default: "" },
......@@ -159,8 +222,8 @@ export default {
type: Array,
default: () => {
[];
}
}
},
},
},
data: () => ({
search: "",
......@@ -169,23 +232,23 @@ export default {
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null }
{ index: null, state: false, act: null },
],
activeOptions: [[], [], [], []],
activeChildOptions: [[], [], [], []],
buttonFilter: [
{
name: "综合排序"
name: "综合排序",
},
{
name: "最新更新"
name: "最新更新",
},
{
name: "最高人气"
name: "最高人气",
},
{
name: "最好评价"
}
name: "最好评价",
},
],
activeBtn: 0,
lists: [],
......@@ -195,26 +258,26 @@ export default {
id: 110,
name: "",
prop: "",
childDomains: []
childDomains: [],
},
{
id: 10,
name: "",
prop: "serviceTypeInfo",
childDomains: []
childDomains: [],
},
{
id: 11,
name: "",
prop: "serviceDomain",
childDomains: []
childDomains: [],
},
{
id: 100,
name: "",
prop: "organizations",
childDomains: []
}
childDomains: [],
},
],
page: 1,
limit: 10,
......@@ -223,12 +286,13 @@ export default {
refresh_app_2: false,
refresh_app_3: false,
time_app: null,
times: null
times: null,
}),
mounted() {
window.onresize = () => {
this.judgeHeight();
};
window.addEventListener("resize", this.judgeHeight);
},
destroyed() {
window.removeEventListener("resize", this.judgeHeight);
},
watch: {
urlFilter: {
......@@ -238,7 +302,7 @@ export default {
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null }
{ index: null, state: false, act: null },
];
this.activeOptions = [[], [], [], []];
this.activeChildOptions = [[], [], [], []];
......@@ -252,27 +316,27 @@ export default {
id: 2,
name: "平台应用",
prop: "",
childDomains: null
childDomains: null,
},
{
id: 1,
name: "开发者应用",
prop: "",
childDomains: null
}
]
childDomains: null,
},
],
});
} else {
this.$set(this.filterLists, 0, {
id: 110,
name: "",
prop: "",
childDomains: []
childDomains: [],
});
}
this.getShopFilter();
}
}
},
},
filterNames: {
handler(val) {
......@@ -280,8 +344,8 @@ export default {
this.filterLists[i + 1].name = val[i];
}
console.log(this.filterLists);
}
}
},
},
},
methods: {
getShopList() {
......@@ -302,9 +366,9 @@ export default {
: "evaluation",
page: this.page,
limit: this.limit,
search: this.search
search: this.search,
};
this.$api.serviceShop.getAppList(query).then(response => {
this.$api.serviceShop.getAppList(query).then((response) => {
if (response.data.success == "1") {
this.lists = response.data.data;
this.total = response.data.total;
......@@ -322,9 +386,9 @@ export default {
organizeIds: this.activeOptions[3].join(","),
orderBy: this.activeBtn,
Page: this.page,
Size: this.limit
Size: this.limit,
};
this.$api.serviceShop.getServiceShopList(query).then(response => {
this.$api.serviceShop.getServiceShopList(query).then((response) => {
if (response.data.success == "1") {
this.lists = response.data.data;
this.total = response.data.total;
......@@ -348,9 +412,9 @@ export default {
}, 50);
} else {
let query = {
type: this.urlFilter
type: this.urlFilter,
};
this.$api.serviceShop.getServiceShopFilter(query).then(response => {
this.$api.serviceShop.getServiceShopFilter(query).then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.filterLists[1].childDomains = data.serviceTypeInfo
......@@ -373,19 +437,21 @@ export default {
}
},
judgeHeight() {
let list = this.filterLists;
for (let i = 0; i < list.length; i++) {
if (list[i].childDomains.length != 0) {
let offHeight = document.getElementById(list[i].id).offsetHeight;
if (offHeight > 60) {
list[i].showOpen = true;
this.openList[i] = "up";
} else {
list[i].showOpen = false;
this.$nextTick(() => {
let list = this.filterLists;
for (let i = 0; i < list.length; i++) {
if (list[i].childDomains.length != 0) {
let offHeight = Math.ceil(document.getElementById(list[i].id).offsetHeight);
if (offHeight > 60) {
list[i].showOpen = true;
this.openList[i] = "up";
} else {
list[i].showOpen = false;
}
}
}
}
this.filterLists = [...list];
this.filterLists = [...list];
});
},
clickOpen(index) {
let list = this.openList;
......@@ -403,7 +469,7 @@ export default {
} else {
this.activeOptions[index].splice(i, 1);
if (items.childDomains) {
items.childDomains.forEach(e => {
items.childDomains.forEach((e) => {
let i = this.activeChildOptions[index].indexOf(e.id);
if (i != -1) {
this.activeChildOptions[index].splice(i, 1);
......@@ -419,20 +485,20 @@ export default {
this.$set(this.openChildren, index, {
index: indexs,
state: !this.openChildren[index].state,
act: items.childDomains
act: items.childDomains,
});
} else {
this.$set(this.openChildren, index, {
index: items.id,
state: true,
act: items.childDomains
act: items.childDomains,
});
}
} else {
this.$set(this.openChildren, index, {
index: null,
state: false,
act: null
act: null,
});
}
},
......@@ -477,7 +543,7 @@ export default {
this.getShopList();
},
getAppArea() {
this.$api.serviceShop.getAppArea().then(response => {
this.$api.serviceShop.getAppArea().then((response) => {
if (response.data.success == 1) {
this.filterLists[2].childDomains = response.data.data;
this.refresh_app_2 = true;
......@@ -487,7 +553,7 @@ export default {
});
},
getAppType() {
this.$api.serviceShop.getAppType().then(response => {
this.$api.serviceShop.getAppType().then((response) => {
if (response.data.success == 1) {
this.filterLists[1].childDomains = response.data.data;
this.refresh_app_1 = true;
......@@ -497,7 +563,7 @@ export default {
});
},
getAppOrg() {
this.$api.serviceShop.getAppOrg().then(response => {
this.$api.serviceShop.getAppOrg().then((response) => {
if (response.data.success == 1) {
this.filterLists[3].childDomains = response.data.data;
this.refresh_app_3 = true;
......@@ -505,8 +571,8 @@ export default {
console.log(response.data.errMsg);
}
});
}
}
},
},
};
</script>
<style scoped>
......@@ -526,8 +592,6 @@ export default {
height: 1px;
background-color: #e9ecf3;
}
.classification {
}
.classification_line {
width: 100%;
}
......@@ -564,10 +628,12 @@ export default {
.classification_line_items_ul {
display: inline-block;
width: calc(100% - 50px);
font-size: 0;
}
.classification_line_items_li {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
}
.classification_line_items_li_act {
background-color: #fbfbfb;
......@@ -647,4 +713,4 @@ export default {
.btn_right_check .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
</style>
\ No newline at end of file
</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