ZhaoTongYao
4 years ago
10 changed files with 453 additions and 23 deletions
@ -0,0 +1,174 @@ |
|||||
|
Component({ |
||||
|
properties: { |
||||
|
// 是否显示底部弹出页面
|
||||
|
isShow: { |
||||
|
type: Boolean, |
||||
|
observer: function (newVal) { |
||||
|
if(newVal) { |
||||
|
this.show() |
||||
|
} else { |
||||
|
this.hide() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 返回给父组件的值是label还是value，默认value
|
||||
|
getTypeValue: { |
||||
|
type: Boolean, |
||||
|
value: true |
||||
|
}, |
||||
|
// 列表数据，转换为checkList
|
||||
|
listData: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
|
}, |
||||
|
// 默认数据，复显
|
||||
|
defaultList: { |
||||
|
type: Array, |
||||
|
value: [] |
||||
|
}, |
||||
|
// listData中的label 名，默认 label
|
||||
|
label: { |
||||
|
type: String, |
||||
|
value: 'label' |
||||
|
}, |
||||
|
// listData中的value 名，默认 value
|
||||
|
value: { |
||||
|
type: String, |
||||
|
value: 'value' |
||||
|
}, |
||||
|
// 单选还是多选，默认多选 (未实现)
|
||||
|
// isSingle: {
|
||||
|
// type: Boolean,
|
||||
|
// value: false
|
||||
|
// }
|
||||
|
}, |
||||
|
data: { |
||||
|
checkList: [], |
||||
|
checkedItemLabels: [], // 选中的label集合
|
||||
|
checkedItemValues: [], // 选中的value集合
|
||||
|
searchList: [], // 搜索结果列表
|
||||
|
searchKey: '', // 搜索的值
|
||||
|
searchFocus: false, |
||||
|
initAnimation: '', |
||||
|
}, |
||||
|
lifetimes: { |
||||
|
attached () { |
||||
|
this.animation = wx.createAnimation({ |
||||
|
duration: 600, |
||||
|
timingFunction: 'ease' |
||||
|
}) |
||||
|
this.hide() |
||||
|
|
||||
|
this.initData() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// pageLifetimes 无效
|
||||
|
show () { |
||||
|
this.animation.translateY(0).step() |
||||
|
this.setData({ |
||||
|
initAnimation: this.animation.export() |
||||
|
}) |
||||
|
this.initData() |
||||
|
}, |
||||
|
hide () { |
||||
|
this.animation.translateY(500).step() |
||||
|
this.setData({ |
||||
|
initAnimation: this.animation.export() |
||||
|
}) |
||||
|
}, |
||||
|
initData () { |
||||
|
this.data.checkList = [] |
||||
|
this.data.checkedItemLabels = [] |
||||
|
this.data.checkedItemValues = [] |
||||
|
this.data.listData.forEach((item, key) => { |
||||
|
let checkListItem = { |
||||
|
label: item[this.data.label], |
||||
|
value: item[this.data.value], |
||||
|
checked: false |
||||
|
} |
||||
|
this.data.checkList.push(checkListItem) |
||||
|
}) |
||||
|
if (this.data.defaultList.length > 0) { |
||||
|
this.data.defaultList.forEach(item => { |
||||
|
this.data.checkList.forEach(checkItem => { |
||||
|
if(item == checkItem.value) { |
||||
|
checkItem.checked = true |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
let checkedLabel = [] |
||||
|
let checkedValue = [] |
||||
|
this.data.checkList.forEach(item => { |
||||
|
if (item.checked) { |
||||
|
checkedLabel.push(item.label) |
||||
|
checkedValue.push(item.value) |
||||
|
} |
||||
|
}) |
||||
|
this.setData({ |
||||
|
checkList: this.data.checkList, |
||||
|
checkedItemLabels: checkedLabel, |
||||
|
checkedItemValues: checkedValue |
||||
|
}) |
||||
|
}, |
||||
|
changeCheckedItem(e) { |
||||
|
let changeItem = e.currentTarget.dataset.item |
||||
|
changeItem.checked = !changeItem.checked |
||||
|
this.data.checkList.forEach(item => { |
||||
|
if (changeItem.value == item.value) { |
||||
|
item.checked = changeItem.checked |
||||
|
} |
||||
|
}) |
||||
|
let checkedLabels = this.data.checkedItemLabels |
||||
|
let checkedValues = this.data.checkedItemValues |
||||
|
if (changeItem.checked) { |
||||
|
checkedLabels.push(changeItem.label) |
||||
|
checkedValues.push(changeItem.value) |
||||
|
} else { |
||||
|
let delIndex = checkedValues.indexOf(changeItem.value) |
||||
|
if (delIndex > -1) { |
||||
|
checkedLabels.splice(delIndex, 1) |
||||
|
checkedValues.splice(delIndex, 1) |
||||
|
} |
||||
|
} |
||||
|
this.setData({ |
||||
|
checkList: this.data.checkList, |
||||
|
checkedItemLabels: checkedLabels, |
||||
|
checkedItemValues: checkedValues, |
||||
|
searchList: [], |
||||
|
searchKey: '' |
||||
|
}) |
||||
|
}, |
||||
|
onInput (e) { |
||||
|
let value = e.detail.value.toLowerCase() |
||||
|
let list = [] |
||||
|
this.data.checkList.forEach(item => { |
||||
|
if (item.label.toLowerCase().indexOf(value) > -1) { |
||||
|
list.push(item) |
||||
|
} |
||||
|
}) |
||||
|
this.setData({ |
||||
|
searchList: list, |
||||
|
searchKey: value |
||||
|
}) |
||||
|
}, |
||||
|
onFocus () { |
||||
|
this.setData({ |
||||
|
searchFocus: true |
||||
|
}) |
||||
|
}, |
||||
|
onblur () { |
||||
|
this.setData({ |
||||
|
searchFocus: false |
||||
|
}) |
||||
|
}, |
||||
|
confirm () { |
||||
|
let values = this.data.getTypeValue ? this.data.checkedItemValues : this.data.checkedItemLabels |
||||
|
this.triggerEvent('onConfirm', { itemList: values }) |
||||
|
}, |
||||
|
cancel () { |
||||
|
this.triggerEvent('onCancel') |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
<view class="box" wx:if="{{isShow}}"> |
||||
|
<view class="bottom-box" animation="{{initAnimation}}"> |
||||
|
<view class="menu-box"> |
||||
|
<view class="menu-left" bindtap="cancel">取消</view> |
||||
|
<view class="menu-title">请选择</view> |
||||
|
<view class="menu-right" bindtap="confirm">确定</view> |
||||
|
</view> |
||||
|
<block wx:if="{{checkList.length > 0}}"> |
||||
|
<view class="input-box" bindtap="onFocus"> |
||||
|
<view class="select-item" wx:for="{{checkedItemLabels}}" wx:key="index">{{item}}</view> |
||||
|
<view class="input-item"> |
||||
|
<input class="input-content" type="text" bindinput="onInput" value="{{searchKey}}" focus="{{searchFocus}}" bindblur="onblur"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 正常状态显示 --> |
||||
|
<view class="check-box" wx:if="{{searchKey == ''}}"> |
||||
|
<view class="check-item {{item.checked ? 'check-item-active' : ''}}" wx:for="{{checkList}}" wx:key="index" bindtap="changeCheckedItem" data-item="{{item}}"> |
||||
|
<view class="check-title">{{item.label}}</view> |
||||
|
<view class="check-icon" wx:if="{{item.checked}}">√</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 搜索时显示 --> |
||||
|
<view class="check-box" wx:else> |
||||
|
<view class="check-item {{item.checked ? 'check-item-active' : ''}}" wx:for="{{searchList}}" wx:key="index" bindtap="changeCheckedItem" data-item="{{item}}"> |
||||
|
<view class="check-title">{{item.label}}</view> |
||||
|
<view class="check-icon" wx:if="{{item.checked}}">√</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,99 @@ |
|||||
|
/* components/nodata/nodata.wxss */ |
||||
|
.box{ |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: 9999; |
||||
|
background: rgba(50, 50, 50, 0.6); |
||||
|
} |
||||
|
.bottom-box-show { |
||||
|
} |
||||
|
.bottom-box-hide { |
||||
|
} |
||||
|
.bottom-box { |
||||
|
width: 100%; |
||||
|
max-height: 65%; |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
padding: 10rpx 30rpx 30rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bottom-box .menu-box { |
||||
|
width: 100%; |
||||
|
height: 60rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.bottom-box .menu-box .menu-left { |
||||
|
width: 15%; |
||||
|
text-align: left; |
||||
|
/* color: #16b64f; */ |
||||
|
} |
||||
|
.bottom-box .menu-box .menu-title { |
||||
|
width: 70%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.bottom-box .menu-box .menu-right { |
||||
|
width: 15%; |
||||
|
text-align: right; |
||||
|
color: #108af6; |
||||
|
} |
||||
|
.bottom-box .input-box { |
||||
|
width: 100%; |
||||
|
min-height: 100rpx; |
||||
|
max-height: 240rpx; |
||||
|
background: #f7f7f7; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
overflow: scroll; |
||||
|
flex-wrap: wrap; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.bottom-box .input-box .select-item { |
||||
|
padding: 4rpx 10rpx; |
||||
|
box-sizing: border-box; |
||||
|
/* background: #0fb0ee70; */ |
||||
|
background: #dddddd; |
||||
|
margin-right: 10rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
border-radius: 8rpx; |
||||
|
/* color: #fff; |
||||
|
border: 1px solid #0fb0ee; */ |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.bottom-box .input-box .input-item .input-content{ |
||||
|
width: 100rpx; |
||||
|
} |
||||
|
.bottom-box .check-box { |
||||
|
max-height: 400rpx; |
||||
|
overflow-y: scroll; |
||||
|
padding-right: 12rpx; |
||||
|
margin-bottom: 60rpx; |
||||
|
} |
||||
|
.check-box .check-item { |
||||
|
width: 100%; |
||||
|
min-height: 80rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
border-bottom: 1px solid #e7e7e7; |
||||
|
} |
||||
|
.check-box .check-item-active { |
||||
|
color: #108af6; |
||||
|
} |
||||
|
.check-box .check-item .check-title{ |
||||
|
width: 620rpx; |
||||
|
overflow: hidden; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.check-box .check-item .check-icon { |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue