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