Skip to content

M
million
Commit c9d97d94 authored by 沈良进's avatar 沈良进
Browse files
Options

搜索页优化

parent 7ee4d251
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 155 deletions
src/components/searchdata/kkday.vue
View file @ c9d97d94
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</div> </div>
</div> </div>
</template> --> </template> -->
<q-tree <q-tree
ref="area" ref="area"
:nodes="areaList" :nodes="areaList"
...@@ -124,9 +124,9 @@ ...@@ -124,9 +124,9 @@
<div class="row items-center justify-center col"> <div class="row items-center justify-center col">
<span class="text-grey-8"> <span class="text-grey-8">
{{ {{
msg.startDate msg.startDate
? `${msg.startDate} - ${msg.endDate}` ? `${msg.startDate} - ${msg.endDate}`
: "篩選出發日期" : "篩選出發日期"
}} }}
</span> </span>
<q-popup-proxy :offset="[0, 0]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
...@@ -145,9 +145,9 @@ ...@@ -145,9 +145,9 @@
<q-card flat class="rounded-borders q-pa-md q-mt-lg"> <q-card flat class="rounded-borders q-pa-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div> <div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div>
<div <div class="q-mt-md text-grey-6 text-subtitle2 text-regular">
class="q-mt-md text-grey-6 text-subtitle2 text-regular" {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
>{{ msg.priceRange.min }} - {{ msg.priceRange.max }}</div> </div>
<q-range <q-range
v-model="msg.priceRange" v-model="msg.priceRange"
:min="1" :min="1"
...@@ -169,11 +169,16 @@ ...@@ -169,11 +169,16 @@
v-for="(y, yi) in dayArray" v-for="(y, yi) in dayArray"
:key="yi" :key="yi"
> >
<q-checkbox v-model="y.checked" size="xs" @input="changeTripDayHandler" /> <q-checkbox
<span class="col text-grey-8 text-subtitle2 text-regular q-mt-xs" style="font-weight: 400"> v-model="y.checked"
{{ size="xs"
y.text @input="changeTripDayHandler"
}} />
<span
class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
style="font-weight: 400"
>
{{ y.text }}
</span> </span>
</div> </div>
</q-expansion-item> </q-expansion-item>
...@@ -184,9 +189,7 @@ ...@@ -184,9 +189,7 @@
<div class="row q-col-gutter-sm items-center q-pa-md"> <div class="row q-col-gutter-sm items-center q-pa-md">
<div class="text-subtitle2 q-mr-md"> <div class="text-subtitle2 q-mr-md">
<span class="text-weight-bold text-primary q-mr-sm"> <span class="text-weight-bold text-primary q-mr-sm">
{{ {{ TotalCount }}
TotalCount
}}
</span> </span>
<span>項體驗行程</span> <span>項體驗行程</span>
</div> </div>
...@@ -200,7 +203,10 @@ ...@@ -200,7 +203,10 @@
:label="x.Name" :label="x.Name"
/> />
</div> </div>
<div class="q-pa-md row items-center" style="border-top: 1px solid #eee"> <div
class="q-pa-md row items-center"
style="border-top: 1px solid #eee"
>
<span class="f12">排序：</span> <span class="f12">排序：</span>
<q-chip <q-chip
square square
...@@ -215,12 +221,20 @@ ...@@ -215,12 +221,20 @@
v-for="(x, i) in sortArray" v-for="(x, i) in sortArray"
:key="i" :key="i"
@click="chosenSortHandler(x)" @click="chosenSortHandler(x)"
>{{ x.label }}</q-chip> >{{ x.label }}</q-chip
>
</div> </div>
</div> </div>
<div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length>0"> <div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length > 0">
<div <div
class="rounded-borders cursor-pointer overflow-hidden q-mb-md row bg-white" class="
rounded-borders
cursor-pointer
overflow-hidden
q-mb-md
row
bg-white
"
@click="GotoDetails(x)" @click="GotoDetails(x)"
v-for="(x, i) in DataList" v-for="(x, i) in DataList"
:key="i" :key="i"
...@@ -234,7 +248,9 @@ ...@@ -234,7 +248,9 @@
class="bg-grey-3" class="bg-grey-3"
/> />
<div class="q-pa-md col column"> <div class="q-pa-md col column">
<div class="text-subtitle1 text-weight-bold text-grey-9">{{ x.title }}</div> <div class="text-subtitle1 text-weight-bold text-grey-9">
{{ x.title }}
</div>
<div class="col"> <div class="col">
<div class="row items-center q-my-sm"> <div class="row items-center q-my-sm">
<q-chip <q-chip
...@@ -243,7 +259,8 @@ ...@@ -243,7 +259,8 @@
class="f12 rounded-borders text-secondary" class="f12 rounded-borders text-secondary"
label="急速確認" label="急速確認"
/> />
<q-chip v-if="x.ltName" <q-chip
v-if="x.ltName"
style="background: #26a69a1a" style="background: #26a69a1a"
size="sm" size="sm"
class="f12 rounded-borders text-secondary" class="f12 rounded-borders text-secondary"
...@@ -251,13 +268,26 @@ ...@@ -251,13 +268,26 @@
/> />
</div> </div>
<div <div
class="text-subtitle2 text-grey-6 text-weight-regular ellipsis-2-lines" class="
text-subtitle2 text-grey-6 text-weight-regular
ellipsis-2-lines
"
style="line-height: 1.6" style="line-height: 1.6"
>{{ x.productRecommend }}</div> >
{{ x.productRecommend }}
</div>
<div class="row items-center f12 text-grey-6 q-mt-md"> <div class="row items-center f12 text-grey-6 q-mt-md">
<q-icon size="12px" name="iconfont icondingweixiao" class="q-mr-sm" /> <q-icon
size="12px"
name="iconfont icondingweixiao"
class="q-mr-sm"
/>
<span class="q-mr-lg">{{ x.countryName }}</span> <span class="q-mr-lg">{{ x.countryName }}</span>
<q-icon size="12px" name="iconfont iconigw-l-date-trade" class="q-mr-sm"></q-icon> <q-icon
size="12px"
name="iconfont iconigw-l-date-trade"
class="q-mr-sm"
></q-icon>
<span>{{ x.startDate }}</span> <span>{{ x.startDate }}</span>
</div> </div>
</div> </div>
...@@ -269,24 +299,28 @@ ...@@ -269,24 +299,28 @@
style="border-right: 1px solid #efefef" style="border-right: 1px solid #efefef"
>{{ x.surplus }}</span> --> >{{ x.surplus }}</span> -->
<span>行程天數：</span> <span>行程天數：</span>
<span class="text-secondary text-weight-bold">{{ x.dayNum }} 天</span> <span class="text-secondary text-weight-bold"
>{{ x.dayNum }} 天</span
>
</div>
<div class="text-h6 product-price">
CNY：{{ x.b2CPrice }}<span class="price-stuff">元</span>
</div> </div>
<div class="text-h6 product-price">CNY：{{ x.b2CPrice }}<span class="price-stuff">元</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="!$q.loading.isActive && DataList.length==0" class="text-center q-mt-xl"> <div
v-else-if="!$q.loading.isActive && DataList.length == 0"
class="text-center q-mt-xl"
>
<div class="text-center inline-block"> <div class="text-center inline-block">
<p> <p>
<img <img src="~assets/sad.svg" style="width: 30vw; max-width: 150px" />
src="~assets/sad.svg"
style="width:30vw;max-width:150px;"
>
</p> </p>
<p class="text-faded"> <p class="text-faded">
我们找不到有关 我们找不到有关
<span v-if="msg.searchKey">\"{{msg.searchKey}}\"</span> <span v-if="msg.searchKey">\"{{ msg.searchKey }}\"</span>
的旅游体验，输入其他字眼重试或探索以下人气体验 的旅游体验，输入其他字眼重试或探索以下人气体验
</p> </p>
</div> </div>
...@@ -307,7 +341,7 @@ ...@@ -307,7 +341,7 @@
glossy glossy
ellipses ellipses
:max-pages="6" :max-pages="6"
boundary-numbers boundary-numbers
size="13px" size="13px"
padding="sm md" padding="sm md"
></q-pagination> ></q-pagination>
...@@ -327,7 +361,7 @@ export default { ...@@ -327,7 +361,7 @@ export default {
selected: [], selected: [],
searchAdd: { searchAdd: {
name: "", name: "",
value: 0 value: 0,
}, },
areaList: [], areaList: [],
chosenAddress: [], chosenAddress: [],
...@@ -339,77 +373,77 @@ export default { ...@@ -339,77 +373,77 @@ export default {
id: 1, id: 1,
min: 1, min: 1,
max: 1, max: 1,
text: "1天" text: "1天",
}, },
{ {
id: 2, id: 2,
min: 2, min: 2,
max: 2, max: 2,
text: "2天" text: "2天",
}, },
{ {
id: 3, id: 3,
min: 3, min: 3,
max: 3, max: 3,
text: "3天" text: "3天",
}, },
{ {
id: 4, id: 4,
min: 4, min: 4,
max: 4, max: 4,
text: "4天" text: "4天",
}, },
{ {
id: 5, id: 5,
min: 5, min: 5,
max: 5, max: 5,
text: "5天" text: "5天",
}, },
{ {
id: 6, id: 6,
min: 6, min: 6,
max: 6, max: 6,
text: "6天" text: "6天",
}, },
{ {
id: 7, id: 7,
min: 7, min: 7,
max: 8, max: 8,
text: "7-8天" text: "7-8天",
}, },
{ {
id: 8, id: 8,
min: 9, min: 9,
max: 10, max: 10,
text: "9-10天" text: "9-10天",
}, },
{ {
id: 9, id: 9,
min: 10, min: 10,
max: 1000, max: 1000,
text: "10天以上" text: "10天以上",
} },
], ],
dataList: [], dataList: [],
sortArray: [ sortArray: [
{ {
label: "默认排序", label: "默认排序",
value: 0, value: 0,
icon: "iconfont icongood" icon: "iconfont icongood",
}, },
{ {
label: "價格：低到高", label: "價格：低到高",
value: 1, value: 1,
icon: "iconfont iconmeiyuan" icon: "iconfont iconmeiyuan",
}, },
{ {
label: "價格：高到低", label: "價格：高到低",
value: 2, value: 2,
icon: "iconfont iconmeiyuan" icon: "iconfont iconmeiyuan",
} },
], ],
TotalCount: 0, TotalCount: 0,
PageCount: 0 PageCount: 0,
}; };
}, },
created() { created() {
...@@ -419,66 +453,63 @@ export default { ...@@ -419,66 +453,63 @@ export default {
this.initGoods(); this.initGoods();
this.msg.priceRange = { this.msg.priceRange = {
min: 1, min: 1,
max: 100000 max: 100000,
}; };
this.msg.minPrice = 0; this.msg.minPrice = 0;
this.msg.maxPrice = 100000; this.msg.maxPrice = 100000;
this.dayArray.forEach(x => { this.dayArray.forEach((x) => {
x.checked = false; x.checked = false;
}); });
this.dateRange = { from: this.msg.startDate, to: this.msg.endDate }; this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
this.goSearchHandler(); this.goSearchHandler();
console.log(this.msg)
}, },
methods: { methods: {
handleSelected(target) { handleSelected(target) {
console.log("handleSelected", target); console.log("handleSelected", target);
}, },
handleTicked(target) { handleTicked(target) {
console.log("handleTicked", target, this.ticked); this.ticked = target;
this.ticked = target
this.goSearchHandler(); this.goSearchHandler();
}, },
handleAreaTicked(target) { handleAreaTicked(target) {
this.areaTicked = target this.areaTicked = target;
this.goSearchHandler(); this.goSearchHandler();
}, },
initAreaList() { initAreaList() {
let jObj = JSON.parse(window.localStorage.getItem("baseifo")); let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
let arr = [] let arr = [];
jObj.AreaList.forEach(x => { jObj.AreaList.forEach((x) => {
x.children = x.SubList x.children = x.SubList;
x.children.forEach(y => { x.children.forEach((y) => {
y.checked = false; y.checked = false;
y.explsed = false; y.explsed = false;
y.isShow = true; y.isShow = true;
if(y.Id === this.msg.areaId) { if (y.Id === this.msg.areaId) {
arr.push(y.Id) arr.push(y.Id);
} }
if (y.SubList) { if (y.SubList) {
y.children = y.SubList y.children = y.SubList;
y.children.forEach(z => { y.children.forEach((z) => {
z.checked = false; z.checked = false;
z.explsed = false; z.explsed = false;
z.isShow = true; z.isShow = true;
if(z.Id === this.msg.areaId) { if (z.Id === this.msg.areaId) {
arr.push(z.Id) arr.push(z.Id);
} }
if(y.Id === this.msg.areaId) { if (y.Id === this.msg.areaId) {
arr.push(z.Id) arr.push(z.Id);
} }
}); });
} }
}); });
this.areaList = jObj.AreaList; this.areaList = jObj.AreaList;
this.areaListJSON = JSON.parse(JSON.stringify(this.areaList)) this.areaListJSON = JSON.parse(JSON.stringify(this.areaList));
}); });
console.log("this.areaList", this.areaList, this.msg)
if (this.msg.areaId) {
if(this.msg.areaId) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.area.setTicked([...new Set(arr)], true) this.$refs.area.setTicked([...new Set(arr)], true);
}) });
} }
}, },
changeExplesdHandler(x) { changeExplesdHandler(x) {
...@@ -500,19 +531,19 @@ export default { ...@@ -500,19 +531,19 @@ export default {
}, },
changeCheckHandler(x, p = null) { changeCheckHandler(x, p = null) {
if (p) { if (p) {
let t = p.SubList.filter(x => x.checked); let t = p.SubList.filter((x) => x.checked);
p.checked = p.checked =
t.length == p.SubList.length ? true : t.length == 0 ? false : "half"; t.length == p.SubList.length ? true : t.length == 0 ? false : "half";
this.changeChosenHandler(x); this.changeChosenHandler(x);
} else { } else {
x.SubList.forEach(item => { x.SubList.forEach((item) => {
item.checked = x.checked; item.checked = x.checked;
this.changeChosenHandler(item); this.changeChosenHandler(item);
}); });
} }
}, },
changeChosenHandler(x) { changeChosenHandler(x) {
let i = this.chosenAddress.findIndex(item => item.Id == x.Id) ?? -1; let i = this.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
if (!x.checked) { if (!x.checked) {
if (i > -1) { if (i > -1) {
this.chosenAddress.splice(i, 1); this.chosenAddress.splice(i, 1);
...@@ -522,17 +553,15 @@ export default { ...@@ -522,17 +553,15 @@ export default {
this.chosenAddress.push(x); this.chosenAddress.push(x);
} }
} }
this.msg.placeIds = this.getChoseAddressCity().join(','); this.msg.placeIds = this.getChoseAddressCity().join(",");
this.goSearchHandler(); this.goSearchHandler();
}, },
getChoseAddressCity() { getChoseAddressCity() {
console.log("this.chosenAddress", this.chosenAddress);
let result = []; let result = [];
this.chosenAddress.forEach(item => { this.chosenAddress.forEach((item) => {
let arr = item.DestinationList.map(item => item.ID); let arr = item.DestinationList.map((item) => item.ID);
result = result.concat(arr); result = result.concat(arr);
}); });
console.log("getChoseAddressCity", result);
return result; return result;
}, },
changeTripDayHandler() { changeTripDayHandler() {
...@@ -551,13 +580,13 @@ export default { ...@@ -551,13 +580,13 @@ export default {
// this.msg.minTripDay == "0" ? "" : this.msg.minTripDay; // this.msg.minTripDay == "0" ? "" : this.msg.minTripDay;
// this.msg.maxTripDay = // this.msg.maxTripDay =
// this.msg.maxTripDay == "0" ? "" : this.msg.maxTripDay; // this.msg.maxTripDay == "0" ? "" : this.msg.maxTripDay;
let arr = [] let arr = [];
this.dayArray.forEach(item => { this.dayArray.forEach((item) => {
if(item.checked) { if (item.checked) {
arr.push(item.id) arr.push(item.id);
} }
}) });
this.msg.dayNumList = arr this.msg.dayNumList = arr;
this.goSearchHandler(); this.goSearchHandler();
}, },
optionsFn(cd) { optionsFn(cd) {
...@@ -573,57 +602,84 @@ export default { ...@@ -573,57 +602,84 @@ export default {
this.goSearchHandler(); this.goSearchHandler();
}, },
dateRangeHandler(e) { dateRangeHandler(e) {
console.log('dateRangeHandler', e)
this.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`; this.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
this.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `; this.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
this.$refs.qDateProxy.hide(); this.$refs.qDateProxy.hide();
this.goSearchHandler(); this.goSearchHandler();
}, },
initGoods() { initGoods() {
let arr = [] let arr = [];
let jObj = JSON.parse(window.localStorage.getItem("baseifo")); let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
jObj.CategoryList.forEach(x => { jObj.CategoryList.forEach((x) => {
x.checked = false; x.checked = false;
x.explsed = false; x.explsed = false;
x.isShow = true; x.isShow = true;
x.children = x.SubList x.children = x.SubList;
x.children.forEach(y => { x.children.forEach((y) => {
y.checked = false; y.checked = false;
y.explsed = false; y.explsed = false;
y.isShow = true; y.isShow = true;
if(y.Id === this.msg.categoryId) { if (y.Id === this.msg.categoryId) {
arr.push(y.Id) arr.push(y.Id);
} }
if (y.SubList) { if (y.SubList) {
y.children = y.SubList y.children = y.SubList;
y.children.forEach(z => { y.children.forEach((z) => {
z.checked = false; z.checked = false;
z.explsed = false; z.explsed = false;
z.isShow = true; z.isShow = true;
if(z.Id === this.msg.categoryId) { if (z.Id === this.msg.categoryId) {
arr.push(z.Id) arr.push(z.Id);
} }
if(y.Id === this.msg.categoryId) { if (y.Id === this.msg.categoryId) {
arr.push(z.Id) arr.push(z.Id);
} }
}); });
} }
}); });
this.goodsType.push(x); this.goodsType.push(x);
console.log('this.goodsType', this.goodsType, this.ticked, arr)
}); });
if(this.msg.categoryId) { if (this.msg.categoryId) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.category.setTicked([...new Set(arr)], true) this.$refs.category.setTicked([...new Set(arr)], true);
}) });
} }
}, },
dfs (tree, ope, filter) {
const walkAndCopy = (tree, depth = 1) => {
if(filter(tree.Name)) {
const copy = {...tree}
ope(tree.Name, depth)
if(tree.children) {
copy.children = []
tree.children.forEach((node) => {
const subTree = walkAndCopy(node, depth + 1)
subTree && copy.children.push(subTree)
})
}
return copy
} else if(tree.children && tree.children.length) {
const copy = {...tree}
ope(tree.Name, depth)
copy.Name = tree.Name
if(tree.children) {
copy.children = []
tree.children.forEach((node) => {
const subTree = walkAndCopy(node, depth + 1)
subTree && copy.children.push(subTree)
})
}
return copy
}
}
return walkAndCopy(tree)
},
changeAddrSearchHandler(v) { changeAddrSearchHandler(v) {
this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON)); this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
this.filterAddress(this.areaListJSON, v); let tree = this.dfs({Name: '', children: this.areaListJSONTMP}, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
this.filterAddress2(this.areaListJSON, 1); tree = this.dfs(tree, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
this.areaList = this.areaListJSON.filter(item => item.canFilter || item.children.length) tree = this.dfs(tree, (name, depth) => {}, (name) => {return name.indexOf(v) !== -1})
console.log('areaList >>>', this.areaList) this.areaList = tree.children
// this.areaList.forEach(x => { // this.areaList.forEach(x => {
// x.isShow = x.Name.indexOf(v) != -1; // x.isShow = x.Name.indexOf(v) != -1;
// x.isShowChild = false; // x.isShowChild = false;
...@@ -635,40 +691,10 @@ export default { ...@@ -635,40 +691,10 @@ export default {
// } // }
// }); // });
// }); // });
},
filterAddress(addressList, v) {
addressList.forEach(item => {
if(item.Name.indexOf(v) != -1) {
item.canFilter = true
} else {
item.canFilter = false
}
if(item.children && item.children.length) {
this.filterAddress(item.children, v)
}
})
console.log('filterAddress',this.areaListJSON, addressList)
},
filterAddress2(addressList, index) {
if(index === 2) {
addressList.forEach(item => {
if(item.children && item.children.length) {
item.children = item.children.filter(i => i.canFilter)
}
})
}
addressList.forEach(item => {
if(item.children && item.children.length) {
this.filterAddress2(item.children, 2)
}
})
console.log('filterAddress2',this.areaListJSON, addressList)
}, },
goSearchHandler() { goSearchHandler() {
console.log(this.ticked) this.msg.webSiteCategoryIds = this.ticked.join(",");
this.msg.webSiteCategoryIds = this.ticked.join(',') this.msg.placeIds = this.areaTicked.join(",");
this.msg.placeIds = this.areaTicked.join(',')
this.$q.loading.show(); this.$q.loading.show();
this.DataList = []; this.DataList = [];
let minTripDay = -1, let minTripDay = -1,
...@@ -696,14 +722,14 @@ export default { ...@@ -696,14 +722,14 @@ export default {
this.msg.priceOrderByField = 2; this.msg.priceOrderByField = 2;
} }
} }
this.PageCount = 0 this.PageCount = 0;
this.TotalCount = 0 this.TotalCount = 0;
this.apipost( this.apipost(
"b2c_get_GetB2CMergeProductPageList", "b2c_get_GetB2CMergeProductPageList",
this.msg, this.msg,
res => { (res) => {
this.$q.loading.hide(); this.$q.loading.hide();
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.PageCount = res.data.data.pageCount; this.PageCount = res.data.data.pageCount;
this.TotalCount = res.data.data.count; this.TotalCount = res.data.data.count;
...@@ -726,7 +752,7 @@ export default { ...@@ -726,7 +752,7 @@ export default {
} }
} }
}, },
err => {} (err) => {}
); );
}, },
GotoDetails(item) { GotoDetails(item) {
...@@ -734,8 +760,8 @@ export default { ...@@ -734,8 +760,8 @@ export default {
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid, "/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
{} {}
); );
} },
} },
}; };
</script> </script>
......
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