筛选弹窗
This commit is contained in:
WindowBird
parent
8d3fa58962
commit
bde55f1563
|
|
@ -93,6 +93,54 @@
|
|||
</view>
|
||||
</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>
|
||||
</u-popup>
|
||||
|
|
@ -123,9 +171,26 @@ export default {
|
|||
},
|
||||
data() {
|
||||
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,
|
||||
|
||||
filter: {
|
||||
minAmount: "",
|
||||
maxAmount: "",
|
||||
sortAmount: "desc",
|
||||
sortTime: "desc",
|
||||
},
|
||||
|
|
@ -150,6 +215,22 @@ export default {
|
|||
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>
|
||||
|
|
@ -226,6 +307,159 @@ page {
|
|||
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