Skip to content

Commit

Permalink
feat: search filter drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Memoyu
Memoyu committed Mar 6, 2023
1 parent ae9c735 commit ae91183
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 24 deletions.
185 changes: 164 additions & 21 deletions src/src/pages/bill/search.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,118 @@
:width="drawerWidth"
@change="onChangeFilterDrawer"
>
<view class="close">
<button @click="onCloseFilterDrawer">
<text class="word-btn-white">关闭Drawer</text>
</button>
<view class="search-options">
<view class="search-options-btn x-bc">
<view @click="onCloseFilterDrawer">确认</view>
<view @click="onResetFilter">重置</view>
</view>
<view class="search-options-container">
<!-- 账单类型 -->
<view class="search-options-cell">
<i class="iconfont icon-select search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>类型</text>
<view class="search-options-cell-item-content">
<text>全部</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单分类 -->
<view class="search-options-cell">
<i class="iconfont icon-category search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>分类</text>
<view class="search-options-cell-item-content">
<text>全部</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单账户 -->
<view class="search-options-cell">
<i class="iconfont icon-bankcard search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>账户</text>
<view class="search-options-cell-item-content">
<text>全部</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单时间 -->
<view class="search-options-cell">
<i class="iconfont icon-time search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>时间</text>
<view class="search-options-cell-item-content">
<text>全部时间</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单金额 -->
<view class="search-options-cell">
<i class="iconfont icon-money search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>金额</text>
<view class="search-options-cell-item-content">
<text>10</text>
<text>-</text>
<text>20</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单地址 -->
<view class="search-options-cell">
<i class="iconfont icon-dizhi search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>地址</text>
<view class="search-options-cell-item-content">
<text>白云</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
<view class="search-options-cell-bottom-line" />
</view>
</view>

<!-- 账单备注 -->
<view class="search-options-cell">
<i class="iconfont icon-note-text search-options-cell-icon" />
<view class="search-options-cell-item">
<view class="search-options-cell-item-title x-bc">
<text>备注</text>
<view class="search-options-cell-item-content">
<text>账单备注</text>
<i class="iconfont icon-to search-options-cell-to-icon" />
</view>
</view>
</view>
</view>
</view>
</view>
</uni-drawer>
</view>
Expand All @@ -54,24 +162,11 @@ export default {
begin: datetime.getCurDate(),
end: datetime.getCurDate(),
},
drawerWidth: 250,
drawerWidth: 300,
};
},
onLoad() {
this.getDrawerWidth();
},
onLoad() {},
methods: {
// // 动态获取Drawer宽度
// getDrawerWidth() {
// let that = this;
// uni.getSystemInfo({
// success(res) {
// that.drawerWidth = res.windowWidth * 0.9;
// console.log("宽", that.drawerWidth);
// },
// });
// },
// 搜索框清除
onSearchInputClear() {},
Expand All @@ -85,11 +180,15 @@ export default {
onShowFilterDrawer() {
this.$refs["filterDrawer"].open();
},
// 关闭窗口
onCloseFilterDrawer() {
this.$refs["filterDrawer"].close();
},
// 重置筛选项
onResetFilter() {},
// 抽屉状态发生变化触发
onChangeFilterDrawer(e) {
console.log(e);
Expand All @@ -110,7 +209,7 @@ export default {
}
.search {
&-filter {
margin: 20rpx 20rpx;
margin: 30rpx 20rpx;
&-date-picker {
font-weight: bold;
align-items: baseline;
Expand All @@ -124,12 +223,56 @@ export default {
color: $primary-color;
.icon-filter {
font-size: 35rpx;
margin-right: 10rpx;
margin-right: 5rpx;
}
}
&-text {
font-size: 30rpx;
}
}
&-options {
margin: 40rpx 25rpx;
&-btn {
font-weight: bold;
font-size: 30rpx;
color: $primary-color;
}
&-container {
margin-top: 50rpx;
}
&-cell {
display: flex;
align-items: center;
font-size: 32rpx;
margin: 45rpx 0;
&-icon {
margin-right: 10rpx;
font-size: 40rpx;
}
&-to-icon {
margin-left: 20rpx;
font-size: 20rpx;
display: flex;
align-items: center;
}
&-item {
width: 100%;
&-title {
margin-bottom: 20rpx;
}
&-content {
display: flex;
}
}
&-bottom-line {
height: 2rpx;
background: $bright-color;
width: 100%;
}
}
}
}
</style>
34 changes: 31 additions & 3 deletions src/src/static/font/iconfont.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@font-face {
font-family: "iconfont";
/* Project id 2203375 */
src: url('//at.alicdn.com/t/c/font_2203375_tjavpndofbp.woff2?t=1677986067746') format('woff2'),
url('//at.alicdn.com/t/c/font_2203375_tjavpndofbp.woff?t=1677986067746') format('woff'),
url('//at.alicdn.com/t/c/font_2203375_tjavpndofbp.ttf?t=1677986067746') format('truetype');
src: url('//at.alicdn.com/t/c/font_2203375_wydm0np7ggj.woff2?t=1678117645634') format('woff2'),
url('//at.alicdn.com/t/c/font_2203375_wydm0np7ggj.woff?t=1678117645634') format('woff'),
url('//at.alicdn.com/t/c/font_2203375_wydm0np7ggj.ttf?t=1678117645634') format('truetype');
}

.iconfont {
Expand All @@ -14,6 +14,34 @@
-moz-osx-font-smoothing: grayscale;
}

.icon-note-text:before {
content: "\e69c";
}

.icon-dizhi:before {
content: "\e814";
}

.icon-time:before {
content: "\e6e0";
}

.icon-money:before {
content: "\e65b";
}

.icon-bankcard:before {
content: "\e693";
}

.icon-select:before {
content: "\e630";
}

.icon-category:before {
content: "\e627";
}

.icon-filter:before {
content: "\e6b9";
}
Expand Down

0 comments on commit ae91183

Please sign in to comment.