筛选弹窗
This commit is contained in:
WindowBird
parent
8d3fa58962
commit
bde55f1563
|
|
@ -93,6 +93,54 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="filterTag">捐款区间</view>
|
<view class="filterTag">捐款区间</view>
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 金额区间选择网格 -->
|
||||||
|
<view class="amount-grid">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in amountOptions"
|
||||||
|
:key="index"
|
||||||
|
:class="[
|
||||||
|
'amount-item',
|
||||||
|
selectedRange.key === item.key ? 'selected' : '',
|
||||||
|
]"
|
||||||
|
@click="selectRange(item)"
|
||||||
|
>
|
||||||
|
<text class="amount-text">{{ item.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="[amount-text,customAmount]"
|
||||||
|
@click="selectedRange.key = 'custom'"
|
||||||
|
>
|
||||||
|
<view class="customItem">
|
||||||
|
<input
|
||||||
|
v-model="filter.minAmount"
|
||||||
|
placeholder="自定义最低"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
-
|
||||||
|
<view class="customItem">
|
||||||
|
<input
|
||||||
|
v-model="filter.maxAmount"
|
||||||
|
placeholder="自定义最高"
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="optionColumn">
|
||||||
|
<view class="reset">
|
||||||
|
<text>清空选择</text>
|
||||||
|
</view>
|
||||||
|
<view class="confirm">
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
|
|
@ -123,9 +171,26 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 金额选项配置
|
||||||
|
amountOptions: [
|
||||||
|
{ key: "under100", label: "100元以下", min: 0, max: 100 },
|
||||||
|
{ key: "100to500", label: "100~500元", min: 100, max: 500 },
|
||||||
|
{ key: "501to1000", label: "501~1000元", min: 501, max: 1000 },
|
||||||
|
{ key: "over1000", label: "1000元以上", min: 1000, max: null },
|
||||||
|
],
|
||||||
|
|
||||||
|
// 当前选中的区间
|
||||||
|
selectedRange: {},
|
||||||
|
|
||||||
|
// 自定义金额输入
|
||||||
|
customMin: "",
|
||||||
|
customMax: "",
|
||||||
|
|
||||||
show: true,
|
show: true,
|
||||||
|
|
||||||
filter: {
|
filter: {
|
||||||
|
minAmount: "",
|
||||||
|
maxAmount: "",
|
||||||
sortAmount: "desc",
|
sortAmount: "desc",
|
||||||
sortTime: "desc",
|
sortTime: "desc",
|
||||||
},
|
},
|
||||||
|
|
@ -150,6 +215,22 @@ export default {
|
||||||
console.log("当前选择的排序方式:", order);
|
console.log("当前选择的排序方式:", order);
|
||||||
// 触发排序操作
|
// 触发排序操作
|
||||||
},
|
},
|
||||||
|
// 选择金额区间
|
||||||
|
selectRange(item) {
|
||||||
|
this.selectedRange = { ...item };
|
||||||
|
|
||||||
|
// 更新筛选条件
|
||||||
|
if (item.key !== "custom" && item.key !== "customMax") {
|
||||||
|
this.filter.minAmount = item.min;
|
||||||
|
this.filter.maxAmount = item.max;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果是自定义选项，初始化输入值
|
||||||
|
if (item.key === "custom") {
|
||||||
|
this.customMin = "";
|
||||||
|
this.customMax = "";
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -226,6 +307,159 @@ page {
|
||||||
border-color: #c0a580;
|
border-color: #c0a580;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #f8f4e9;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
|
||||||
|
.customAmount {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.customItem {
|
||||||
|
display: flex;
|
||||||
|
width: 327rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 150rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.amount-item {
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 2rpx solid #eeeeee;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: #c0a580;
|
||||||
|
border-color: #c0a580;
|
||||||
|
|
||||||
|
.amount-text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-hint {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-hint {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-input-area {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
|
||||||
|
.input-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
.input-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
width: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 60rpx;
|
||||||
|
border: 2rpx solid #ddd;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.optionColumn {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 34rpx;
|
||||||
|
width: 686rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #a24242;
|
||||||
|
border-radius: 13rpx 13rpx 13rpx 13rpx;
|
||||||
|
|
||||||
|
.reset {
|
||||||
|
width: 344rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #fff1dd;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
text {
|
||||||
|
height: 50rpx;
|
||||||
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #a24242;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm {
|
||||||
|
width: 344rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #a24242;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
text {
|
||||||
|
height: 50rpx;
|
||||||
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #fff1dd;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user