Skip to content

W
wxapp
Commit c57f617f by 汪睦雄
Options

123

parent d61900b3
Showing with 154 additions and 34 deletions
components/search-filter/index.js
......@@ -17,13 +17,24 @@ Component({
catalogs: [],
regions: [],
tags: [],
filter_idx:0
filter_idx: 0,
selected: {
type: '0',
catalog: '0',
region: '0',
tags: []
},
selected_titles: {
type: '全部项目',
catalog: '全部分类',
region: '全部地域'
}
},
/**
* 组件渲染完后的方法
*/
ready(){
api.search.filter().then(res=>{
ready() {
api.search.filter().then(res => {
this.setData({
types: res.data.type,
catalogs: res.data.catalog_id,
......@@ -37,26 +48,103 @@ Component({
* 组件的方法列表
*/
methods: {
filterTap: function (event){
// 点击筛选项
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 == this.data.filter_idx) {
this.setData({
filter_idx: 0
})
} else {
this.setData({
filter_idx: idx
})
}
if(idx==1){
} else if (idx == 2) {
},
// 选择项目、分类、地域的选择项
selectFilter: function(event) {
let idx = event.target.dataset.idx
let name = event.target.dataset.name
let _selected = this.data.selected
let _selected_titles = this.data.selected_titles
if (this.data.filter_idx == 1) {
_selected.type = idx
_selected_titles.type = name
} else if (this.data.filter_idx == 2) {
_selected.catalog = idx
_selected_titles.catalog = name
} else if (this.data.filter_idx == 3) {
_selected.region = idx
_selected_titles.region = name
}
var myEventDetail = {test:"helloworld"} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('change', myEventDetail, myEventOption)
this.setData({
selected: _selected,
selected_titles: _selected_titles
})
this.setData({
filter_idx: 0
})
this._submitFilter()
},
closeFilter: function(event){
this.setData({ filter_idx: 0 })
// 选择多个标签
selectTags: function(event) {
let tagIdx = event.target.dataset.idx
let selectedTags = this.data.selected.tags
if (selectedTags.indexOf(tagIdx) == -1) {
// 加入
selectedTags.push(tagIdx)
} else {
// 根据索引移除长度为1的数组元素
selectedTags.splice(selectedTags.indexOf(tagIdx), 1)
}
let _selected = this.data.selected
_selected.tags = selectedTags
this.setData({
selected: _selected
})
},
// 取消选择标签
cancelSelectTags: function(event) {
let _selected = this.data.selected
if (_selected.tags.length > 0) {
_selected.tags = []
this.setData({
selected: _selected
})
this.setData({
filter_idx: 0
})
this._submitFilter()
} else {
this.setData({
filter_idx: 0
})
}
},
// 确定选择标签
ensureSelectTags: function(event) {
this._submitFilter()
this.setData({
filter_idx: 0
})
},
// 提交筛选数据请求
_submitFilter() {
// console.log(this.data.selected )
let myEventDetail = {
filters: this.data.selected
} // detail对象，提供给事件监听函数
let myEventOption = {} // 触发事件的选项
this.triggerEvent('filter', myEventDetail, myEventOption)
},
// 点击蒙层关闭筛选弹框
closeFilter: function(event) {
this.setData({
filter_idx: 0
})
},
preventEvent: function (event) {
// 阻止子元素冒泡点击事件到付元素
preventEvent: function(event) {
}
}
......
components/search-filter/index.wxml
<!--components/search-filter/index.wxml-->
<wxs src="../../pages/common.wxs" module="common"></wxs>
<view class='filter-wrapper'>
<i-row i-class='row-filter'>
<i-col span="6">
<view class="filter-item">
<text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">全部项目</text>
<text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">{{selected_titles.type}}</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>
<text class="{{filter_idx==2?'active':''}}" catchtap='filterTap' data-idx="2">{{selected_titles.catalog}}</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>
<text class="{{filter_idx==3?'active':''}}" catchtap='filterTap' data-idx="3">{{selected_titles.region}}</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>
<text class="{{filter_idx==4?'active':''}}" catchtap='filterTap' data-idx="4">标签{{selected.tags.length>0?'('+selected.tags.length+')':''}}</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==4?'ed':''}}.png"></image>
</view>
</i-col>
......@@ -29,24 +30,26 @@
<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>
<text bindtap="selectFilter" data-idx="{{n.id}}" data-name="{{n.name}}" class="{{selected.type==n.id?'seled':''}}">{{n.name}}</text>
<image wx:if="{{selected.type==n.id}}" 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>
<text bindtap="selectFilter" data-idx="{{n.id}}" data-name="{{n.name}}">{{n.name}}</text>
<image wx:if="{{selected.catalog==n.id}}" 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>
<text bindtap="selectFilter" data-idx="{{n.id}}" data-name="{{n.name}}">{{n.name}}</text>
<image wx:if="{{selected.region==n.id}}" 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">
<block wx:for="{{tags}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
<view class="tag-item {{common.inArray(selected.tags, n.id)==true?'active':''}}" bindtap="selectTags" data-idx="{{n.id}}">
{{n.name}}
</view>
</block>
<view class="tag-btn-wrapper">
<button class="btn cancel">取消选择</button>
<button class="btn ensure">确定</button>
<button class="btn cancel" bindtap="cancelSelectTags">取消选择</button>
<button class="btn ensure" bindtap="ensureSelectTags">确定</button>
</view>
</view>
</view>
......
components/search-filter/index.wxss
......@@ -26,6 +26,10 @@
.filter-item > text {
color: rgb(51, 51, 51);
font-size: 28rpx;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
/* width:58px; */
}
.filter-item > text.active {
......@@ -59,7 +63,7 @@
box-sizing: border-box;
justify-content: space-between;
font-size: 28rpx;
color: rgb(191, 191, 191);
color: rgb(102, 102, 102);
margin-bottom: 46rpx;
}
......@@ -67,6 +71,14 @@
margin-bottom: 0rpx;
}
.filter-row > text {
width: 80%;
}
.filter-row > text.seled {
color: rgb(43, 163, 215);
}
.filter-row > .f-selected {
height: 27rpx;
width: 23rpx;
......@@ -93,6 +105,11 @@
border-radius: 2rpx;
}
.tag-item.active {
color: rgb(43, 163, 215);
border: 1px solid rgb(43, 163, 215);
}
.tag-btn-wrapper {
display: block;
width: 100%;
......
pages/common.wxs
......@@ -83,6 +83,13 @@ var nextLevel = function (n) {
return parseInt(n) + 1
}
/**
* 判断item是否在数组arr中
*/
var inArray = function (arr, item) {
return arr.indexOf(item) == -1 ? false : true;
}
module.exports = {
formatDate: formatDate,
formatDateTime: formatDateTime,
......@@ -90,5 +97,6 @@ module.exports = {
numFixed: numFixed,
getDistance: getDistance,
nextLevel: nextLevel,
secToMinu: secToMinu
secToMinu: secToMinu,
inArray: inArray
};
pages/search/index.js
......@@ -64,6 +64,9 @@ Page({
},
/**
* 用户进行了筛选操作
*/
filterChange: function (event){
console.log(event)
}
......
pages/search/index.wxml
......@@ -4,5 +4,5 @@
<image class="search-icon" src='/images/icon_search.png'></image>
<view class='search-input'>关键词如地名、游泳等</view>
</view>
<search-filter bind:change="filterChange" />
<search-filter bind:filter="filterChange" />
</view>
\ No newline at end of file
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