489 lines
12 KiB
Vue
489 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="common-filter">
|
|||
|
|
<!-- 筛选触发按钮（服务时间 + 主筛选） -->
|
|||
|
|
<view class="filter-btns-wrap">
|
|||
|
|
<!-- 服务时间按钮 -->
|
|||
|
|
<view class="filter-trigger time-trigger" @click="toggleTimePopup">
|
|||
|
|
<text class="filter-text" :class="{ active: timePopupShow }">
|
|||
|
|
{{ timeBtnText }}
|
|||
|
|
</text>
|
|||
|
|
<image
|
|||
|
|
:src="!timePopupShow ? sqIcon : zkIcon"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
class="time-icon"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 原筛选按钮 -->
|
|||
|
|
<view class="filter-trigger main-filter-trigger time-trigger" @click="toggleMainPopup">
|
|||
|
|
<text class="filter-text" :class="{ active: mainPopupShow }">
|
|||
|
|
{{ filterBtnText }}
|
|||
|
|
</text>
|
|||
|
|
<image
|
|||
|
|
:src="!mainPopupShow ? sqIcon : zkIcon"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
class="time-icon"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<filterPopup
|
|||
|
|
ref="filterPopupRef"
|
|||
|
|
v-model="mainPopupShow"
|
|||
|
|
:filterList="filterList"
|
|||
|
|
@reset="resetFilter"
|
|||
|
|
@sure="$emit('search')"
|
|||
|
|
>
|
|||
|
|
<filterCard
|
|||
|
|
v-for="info in filterList"
|
|||
|
|
:info="info"
|
|||
|
|
v-model="value"
|
|||
|
|
@selectDetail="(value) => selectDetail(info.type, value)"
|
|||
|
|
:isSingle="true"
|
|||
|
|
:infoDetailList="info"
|
|||
|
|
>
|
|||
|
|
<view class="price-input" v-if="info.type == 'price'">
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
:value="value.start_price"
|
|||
|
|
@input="(e) => selectDetail('start_price', [e.detail.value])"
|
|||
|
|
placeholder="最低价"
|
|||
|
|
class="price-input-field"
|
|||
|
|
/>
|
|||
|
|
<text class="price-separator"></text>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
:value="value.end_price"
|
|||
|
|
@input="(e) => selectDetail('end_price', [e.detail.value])"
|
|||
|
|
placeholder="最高价"
|
|||
|
|
class="price-input-field"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</filterCard>
|
|||
|
|
</filterPopup>
|
|||
|
|
<view class="time-filter-popup" :class="{ show: timePopupShow }">
|
|||
|
|
<view class="time-filter-content">
|
|||
|
|
<view
|
|||
|
|
class="time-option"
|
|||
|
|
v-for="(item, index) in timeOptions"
|
|||
|
|
:key="index"
|
|||
|
|
:class="{ active: selectedTimeOption === index }"
|
|||
|
|
@click="changeTime(index)"
|
|||
|
|
>
|
|||
|
|
<text class="time-text">{{ item.text }}</text>
|
|||
|
|
<!-- <text class="time-discount" v-if="item.discount">{{ item.discount }}</text> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import filterPopup from "@/components/filter-popup/filter-popup.vue";
|
|||
|
|
import filterCard from "@/components/filterCard/filterCard.vue";
|
|||
|
|
export default {
|
|||
|
|
name: "CommonFilter",
|
|||
|
|
props: {
|
|||
|
|
// 服务时间按钮文本
|
|||
|
|
timeBtnText: {
|
|||
|
|
type: String,
|
|||
|
|
default: "服务时间",
|
|||
|
|
},
|
|||
|
|
// 服务时间展开/收起图标
|
|||
|
|
sqIcon: {
|
|||
|
|
type: String,
|
|||
|
|
default:
|
|||
|
|
"https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/sq_icon.png",
|
|||
|
|
},
|
|||
|
|
zkIcon: {
|
|||
|
|
type: String,
|
|||
|
|
default:
|
|||
|
|
"https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/zk_icon.png",
|
|||
|
|
},
|
|||
|
|
// 主筛选按钮文本
|
|||
|
|
filterBtnText: {
|
|||
|
|
type: String,
|
|||
|
|
default: "筛选",
|
|||
|
|
},
|
|||
|
|
// 主筛选图标
|
|||
|
|
filterIcon: {
|
|||
|
|
type: String,
|
|||
|
|
default:
|
|||
|
|
"https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/filter_icon.png",
|
|||
|
|
},
|
|||
|
|
filterDetailsLists: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: "价格",
|
|||
|
|
type: "price",
|
|||
|
|
details: [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: "0-10元",
|
|||
|
|
value: "0-10",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: "10-30元",
|
|||
|
|
value: "10-30",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: "30-50元",
|
|||
|
|
value: "30-50",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: "50-100元",
|
|||
|
|
value: "50-100",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
name: "100-300元",
|
|||
|
|
value: "100-300",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 6,
|
|||
|
|
name: "300+",
|
|||
|
|
value: "300-",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
title: "排序",
|
|||
|
|
type: "ordersort",
|
|||
|
|
details: [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: " 销量最高",
|
|||
|
|
value: "1",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: "价格最高",
|
|||
|
|
value: "2",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: "价格最低",
|
|||
|
|
value: "3",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
title: "服务类型",
|
|||
|
|
type: "server_kind",
|
|||
|
|
details: [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: " 到家",
|
|||
|
|
value: "1",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: "到店",
|
|||
|
|
value: "2",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => {},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
components: { filterPopup, filterCard },
|
|||
|
|
computed: {
|
|||
|
|
filterList() {
|
|||
|
|
return this.filterDetailsLists.map((item) => {
|
|||
|
|
if (item.type == "price") {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
defaultValue: [
|
|||
|
|
`${this.value.start_price || ""}-${this.value.end_price || ""}`,
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
defaultValue: [this.value[item.type]],
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
timePopupShow: false, // 服务时间弹框显示状态（当前模板未实现弹框内容）
|
|||
|
|
mainPopupShow: false, // 主筛选弹框显示状态（当前模板未实现弹框内容）
|
|||
|
|
timeOptions: [
|
|||
|
|
{ text: "今日可约" },
|
|||
|
|
{ text: "近两日可约", discount: "64.31%" },
|
|||
|
|
{ text: "近三日可约" },
|
|||
|
|
],
|
|||
|
|
selectedTimeOption: undefined,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeTime(index) {
|
|||
|
|
this.selectedTimeOption = index;
|
|||
|
|
this.selectDetail("date", [this.getDate(index)]);
|
|||
|
|
this.$emit("search");
|
|||
|
|
this.timePopupShow = false;
|
|||
|
|
},
|
|||
|
|
getDate(index) {
|
|||
|
|
//今天的时间
|
|||
|
|
var day1 = new Date();
|
|||
|
|
day1.setTime(day1.getTime());
|
|||
|
|
var m1 = day1.getMonth() + 1;
|
|||
|
|
if (m1 <= 9) {
|
|||
|
|
m1 = "0" + m1;
|
|||
|
|
}
|
|||
|
|
var d1 = day1.getDate();
|
|||
|
|
if (d1 <= 9) {
|
|||
|
|
d1 = "0" + d1;
|
|||
|
|
}
|
|||
|
|
var s1 = day1.getFullYear() + "-" + m1 + "-" + d1;
|
|||
|
|
|
|||
|
|
//明天的时间
|
|||
|
|
var day2 = new Date();
|
|||
|
|
day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000);
|
|||
|
|
var m2 = day2.getMonth() + 1;
|
|||
|
|
if (m2 <= 9) {
|
|||
|
|
m2 = "0" + m2;
|
|||
|
|
}
|
|||
|
|
var d2 = day2.getDate();
|
|||
|
|
if (d2 <= 9) {
|
|||
|
|
d2 = "0" + d2;
|
|||
|
|
}
|
|||
|
|
var s2 = day2.getFullYear() + "-" + m2 + "-" + d2;
|
|||
|
|
|
|||
|
|
//后天的时间
|
|||
|
|
var day3 = new Date();
|
|||
|
|
day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000 * 2);
|
|||
|
|
var m3 = day3.getMonth() + 1;
|
|||
|
|
if (m3 <= 9) {
|
|||
|
|
m3 = "0" + m3;
|
|||
|
|
}
|
|||
|
|
var d3 = day3.getDate();
|
|||
|
|
if (d3 <= 9) {
|
|||
|
|
d3 = "0" + d3;
|
|||
|
|
}
|
|||
|
|
var s3 = day3.getFullYear() + "-" + m3 + "-" + d3;
|
|||
|
|
|
|||
|
|
if (index == 0) {
|
|||
|
|
return [`${s1}`];
|
|||
|
|
} else if (index == 1) {
|
|||
|
|
return [`${s1}`, `${s2}`];
|
|||
|
|
} else if (index == 2) {
|
|||
|
|
return [`${s1}`, `${s2}`, `${s3}`];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resetFilter() {
|
|||
|
|
const resetObj = {};
|
|||
|
|
this.filterDetailsLists.forEach((it) => {
|
|||
|
|
if (it.type === "price") {
|
|||
|
|
resetObj.start_price = undefined;
|
|||
|
|
resetObj.end_price = undefined;
|
|||
|
|
} else {
|
|||
|
|
resetObj[it.type] = undefined;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.$emit("input", {
|
|||
|
|
...this.value,
|
|||
|
|
...resetObj,
|
|||
|
|
});
|
|||
|
|
this.$emit("search");
|
|||
|
|
},
|
|||
|
|
// 切换服务时间弹框（弹框内容需后续补充）
|
|||
|
|
toggleTimePopup() {
|
|||
|
|
this.timePopupShow = !this.timePopupShow;
|
|||
|
|
if (this.timePopupShow) this.mainPopupShow = false; // 互斥显示
|
|||
|
|
},
|
|||
|
|
// 切换主筛选弹框（弹框内容需后续补充）
|
|||
|
|
toggleMainPopup() {
|
|||
|
|
if (this.$refs.filterPopupRef) {
|
|||
|
|
if (!this.mainPopupShow) {
|
|||
|
|
this.timePopupShow = false;
|
|||
|
|
this.mainPopupShow = true;
|
|||
|
|
} else {
|
|||
|
|
this.timePopupShow = false; // 互斥显示
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectDetail(type, value) {
|
|||
|
|
console.log(type, value);
|
|||
|
|
if (type == "price") {
|
|||
|
|
if (value[0]) {
|
|||
|
|
let priceList = value[0].split("-");
|
|||
|
|
this.$emit("input", {
|
|||
|
|
...this.value,
|
|||
|
|
start_price: priceList[0],
|
|||
|
|
end_price: priceList[1],
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$emit("input", {
|
|||
|
|
...this.value,
|
|||
|
|
start_price: undefined,
|
|||
|
|
end_price: undefined,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$emit("input", {
|
|||
|
|
...this.value,
|
|||
|
|
[type]: value[0],
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.common-filter {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 900;
|
|||
|
|
background-color: #fff;
|
|||
|
|
height: 102rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
/* 服务时间弹框样式 */
|
|||
|
|
.time-filter-popup {
|
|||
|
|
width: 750rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
height: 0;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
visibility: hidden;
|
|||
|
|
border-radius: 0 0 20rpx 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 10;
|
|||
|
|
top: 102rpx;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-filter-popup.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
height: 320rpx;
|
|||
|
|
visibility: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-filter-content {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-option {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-option:not(:last-child)::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
left: 32rpx;
|
|||
|
|
right: 32rpx;
|
|||
|
|
bottom: 0;
|
|||
|
|
height: 1rpx;
|
|||
|
|
background-color: #eeeeee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-option.active {
|
|||
|
|
background-color: #fff5f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-option.active .time-text {
|
|||
|
|
color: #E8101E;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-discount {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #E8101E;
|
|||
|
|
padding: 4rpx 12rpx;
|
|||
|
|
background-color: #fff5f6;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 筛选按钮容器：横向排列两个按钮，控制间距和内边距 */
|
|||
|
|
.filter-btns-wrap {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 基础筛选按钮样式：统一按钮的flex布局、对齐方式和行高 */
|
|||
|
|
.filter-trigger {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 按钮文本样式：默认灰色，选中时高亮 */
|
|||
|
|
.filter-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
color: #E8101E; /* 选中态主题色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 服务时间按钮专属：控制下拉图标尺寸 */
|
|||
|
|
.time-trigger .time-icon {
|
|||
|
|
width: 16rpx;
|
|||
|
|
height: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 主筛选按钮专属：控制筛选图标尺寸 */
|
|||
|
|
.main-filter-trigger .filter-icon {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
}
|
|||
|
|
//价格区间样式
|
|||
|
|
.price-input {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 370rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #f3f6f8;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
|
|||
|
|
.price-input-field {
|
|||
|
|
width: 166rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #3d3d3d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-separator {
|
|||
|
|
height: 3rpx;
|
|||
|
|
width: 38rpx;
|
|||
|
|
background-color: #dddddd;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|