Skip to content

W
wxapp
Commit 133e2d7c by 汪睦雄
Options

1

parent 10f2a528
Showing with 193 additions and 41 deletions
components/search-filter/index.js
// components/search-filter/index.js // components/search-filter/index.js
import api from '../../utils/Api.js' import api from '../../utils/Api.js'
const app = getApp()
Component({ Component({
/** /**
...@@ -14,14 +13,23 @@ Component({ ...@@ -14,14 +13,23 @@ Component({
* 组件的初始数据 * 组件的初始数据
*/ */
data: { data: {
types: [],
catalogs: [],
regions: [],
tags: [],
filter_idx:0
}, },
/** /**
* 组件的初始数据 * 组件渲染完后的方法
*/ */
ready(){ ready(){
api.home.banner({token:app.globalData.token}).then(res=>{ api.search.filter().then(res=>{
console.log(res) this.setData({
types: res.data.type,
catalogs: res.data.catalog_id,
regions: res.data.city,
tags: res.data.tags
})
}) })
}, },
...@@ -29,10 +37,27 @@ Component({ ...@@ -29,10 +37,27 @@ Component({
* 组件的方法列表 * 组件的方法列表
*/ */
methods: { methods: {
firstTap: function (){ filterTap: function (event){
let idx = event.target.dataset.idx;
if(idx==this.data.filter_idx){
this.setData({ filter_idx: 0 })
}else{
this.setData({ filter_idx: idx })
}
if(idx==1){
} else if (idx == 2) {
}
var myEventDetail = {test:"helloworld"} // detail对象，提供给事件监听函数 var myEventDetail = {test:"helloworld"} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项 var myEventOption = {} // 触发事件的选项
this.triggerEvent('change', myEventDetail, myEventOption) this.triggerEvent('change', myEventDetail, myEventOption)
},
closeFilter: function(event){
this.setData({ filter_idx: 0 })
},
preventEvent: function (event) {
} }
} }
}) })
components/search-filter/index.wxml
<!--components/search-filter/index.wxml--> <!--components/search-filter/index.wxml-->
<i-row i-class='row-filter'> <view class='filter-wrapper'>
<i-col span="6"> <i-row i-class='row-filter'>
<view class="filter-item" bindtap='firstTap'> <i-col span="6">
<text class='active'>全部项目</text> <view class="filter-item">
<image class="search-icon" src='/images/icon-down-select.png'></image> <text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">全部项目</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==1?'ed':''}}.png"></image>
</view>
</i-col>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text class="{{filter_idx==2?'active':''}}" catchtap='filterTap' data-idx="2">分类</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==2?'ed':''}}.png"></image>
</view>
</i-col>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text class="{{filter_idx==3?'active':''}}" catchtap='filterTap' data-idx="3">地域</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==3?'ed':''}}.png"></image>
</view>
</i-col>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text class="{{filter_idx==4?'active':''}}" catchtap='filterTap' data-idx="4">标签</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==4?'ed':''}}.png"></image>
</view>
</i-col>
</i-row>
<view catchtap='closeFilter' class='filter-content-wrapper' wx:if="{{filter_idx>0}}">
<view class="row-content" catchtap='preventEvent'>
<view wx:if="{{filter_idx==1}}" class='filter-row' wx:for="{{types}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
<text>{{n.name}}</text>
<image class='f-selected' src='/images/icon_filter_selected.png'></image>
</view>
<view wx:if="{{filter_idx==2}}" class='filter-row' wx:for="{{catalogs}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
<text>{{n.name}}</text>
<image class='f-selected' src='/images/icon_filter_selected.png'></image>
</view>
<view wx:if="{{filter_idx==3}}" class='filter-row' wx:for="{{regions}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
<text>{{n.name}}</text>
<image class='f-selected' src='/images/icon_filter_selected.png'></image>
</view>
<view class="tags-wrapper" wx:if="{{filter_idx==4}}">
<view class="tag-item {{n.selected==1?'active':''}}" wx:for="{{tags}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
{{n.name}}
</view>
<view class="tag-btn-wrapper">
<button class="btn cancel">取消选择</button>
<button class="btn ensure">确定</button>
</view>
</view>
</view> </view>
</i-col> </view>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text>分类</text>
<image class="search-icon" src='/images/icon-down-select.png'></image>
</view>
</i-col>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text>地域</text>
<image class="search-icon" src='/images/icon-down-select.png'></image>
</view>
</i-col>
<i-col span="6" i-class="col-class">
<view class="filter-item">
<text>标签</text>
<image class="search-icon" src='/images/icon-down-select.png'></image>
</view>
</i-col>
</i-row>
<view>
</view> </view>
\ No newline at end of file
components/search-filter/index.wxss
/* components/search-filter/index.wxss */ /* components/search-filter/index.wxss */
.row-filter{
padding: 36rpx 0px; .filter-wrapper {
position: relative;
width: 100%;
}
.row-filter {
height: 56px;
line-height: 56px;
} }
.filter-item{
.filter-item {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.filter-item > image{
.filter-item > image {
width: 12rpx; width: 12rpx;
height: 10rpx; height: 10rpx;
margin-left: 12rpx; margin-left: 12rpx;
} }
.filter-item > text{
.filter-item > text {
color: rgb(51, 51, 51); color: rgb(51, 51, 51);
font-size: 28rpx; font-size: 28rpx;
} }
.filter-item > text.active{
.filter-item > text.active {
color: rgb(43, 163, 215);
}
.filter-content-wrapper {
position: fixed;
width: 100%;
top: 96px;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
.row-content {
position: relative;
border-top: 1px solid #f4f4f4;
background: white;
width: 100%;
padding: 34rpx 30rpx;
padding-right: 50rpx;
box-sizing: border-box;
}
.filter-row {
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
font-size: 28rpx;
color: rgb(191, 191, 191);
margin-bottom: 46rpx;
}
.filter-row:last-child {
margin-bottom: 0rpx;
}
.filter-row > .f-selected {
height: 27rpx;
width: 23rpx;
}
.tags-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.tag-item {
min-width: 120rpx;
padding: 0 10rpx 0 10rpx;
height: 75rpx;
border: 1px solid #f4f4f4;
color: rgb(102, 102, 102);
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 10rpx;
border-radius: 2rpx;
}
.tag-btn-wrapper {
display: block;
width: 100%;
margin-top: 30rpx;
text-align: center;
}
.tag-btn-wrapper > button.btn {
display: inline-block;
background: none;
font-size: 14px;
height: 60rpx;
border-radius: 30rpx;
line-height: 60rpx;
outline-style: none;
}
.tag-btn-wrapper > button.cancel {
border: 1px solid #eee;
color: rgb(102, 102, 102);
margin-right: 30rpx;
}
.tag-btn-wrapper > button.ensure {
border: 1px solid rgb(43, 163, 215);
color: rgb(43, 163, 215); color: rgb(43, 163, 215);
} }
pages/search/index.json
{ {
"navigationBarTitleText": "搜索",
"usingComponents": { "usingComponents": {
"search-filter": "/components/search-filter/index" "search-filter": "/components/search-filter/index"
} }
......
pages/search/index.wxml
<!--pages/search/index.wxml--> <!--pages/search/index.wxml-->
<view class="header"> <view class="page-wrapper">
<view class='search-wrapper'> <view class='search-wrapper'>
<image class="search-icon" src='/images/icon_search.png'></image> <image class="search-icon" src='/images/icon_search.png'></image>
<view class='search-input'>关键词如地名、游泳等</view> <view class='search-input'>关键词如地名、游泳等</view>
......
pages/search/index.wxss
/* pages/search/index.wxss */ /* pages/search/index.wxss */
.header{ .page-wrapper{
background: white; background: white;
} }
.search-wrapper{ .search-wrapper{
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
background: rgb(247, 247, 247); background: rgb(247, 247, 247);
box-sizing: border-box; box-sizing: border-box;
border: 4rpx; border: 4rpx;
height: 80rpx; height: 40px;
padding-left: 20rpx; padding-left: 20rpx;
} }
.search-icon{ .search-icon{
......
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