epdc-office-mp-yushan/dist/filterbar/index.wxml

<view class="wux-class {{ classes.wrap }}">
    <wux-backdrop id="wux-backdrop" data-index="{{ index }}" bind:click="onClose" />
    <view class="{{ classes.bd }}">
        <block wx:for="{{ options }}" wx:key="">
            <view class="{{ classes.item }} {{ common.getItemCls(prefixCls, item) }}" bindtap="onClick" data-index="{{ index }}">
                <view class="{{ classes.text }}">
                    {{ item.type !== 'filter' ? displayValues[index] : item.label }}
                    <view class="{{ classes.icon }} {{ common.getIconCls(prefixCls, item) }}" wx:if="{{ item.type !== 'text' }}"></view>
                </view>
            </view>
        </block>
    </view>
    <block wx:for="{{ options }}" wx:key="">
        <wux-animation-group wux-class="{{ classes.pop }}" in="{{ item.visible }}" class-names="wux-animate--slideInRight" bind:enter="onEnter" bind:exit="onExit" wx:if="{{ item.type === 'filter' }}">
            <scroll-view class="{{ classes.scrollView }}" scroll-y bindscroll="onScroll">
                <block wx:for="{{ item.children }}" wx:for-item="p" wx:for-index="pIndex" wx:key="">
                    <view class="{{ classes.panel }}">
                        <view class="{{ classes.panelHd }}">
                            <div class="{{ classes.panelTitle }}">{{ p.label }}</div>
                            <div class="{{ classes.panelSelected }}">{{ displayValues[index] && displayValues[index][pIndex] }}</div>
                        </view>
                        <view class="{{ classes.panelBd }}">
                            <radio-group bindchange="onPopupSelectChange" data-parent-index="{{ index }}" data-index="{{ pIndex }}" wx:if="{{ p.type === 'radio' }}">
                                <view class="{{ classes.groups }}">
                                    <block wx:for="{{ p.children }}" wx:for-item="g" wx:for-index="cIndex" wx:key="">
                                        <view class="{{ classes.group }}">
                                            <radio
                                                class="{{ classes.radio }}"
                                                value="{{ g.value }}"
                                                checked="{{ common.getChecked(values[index] && values[index][pIndex], g.value) }}"
                                            />
                                            <view class="{{ classes.btn }} {{ common.getChecked(values[index] && values[index][pIndex], g.value) ? prefixCls + '__btn--checked' : '' }}">{{ g.label }}</view>
                                        </view>
                                    </block>
                                </view>
                            </radio-group>
                            <checkbox-group bindchange="onPopupSelectChange" data-parent-index="{{ index }}" data-index="{{ pIndex }}" wx:else="{{ p.type === 'checkbox' }}">
                                <view class="{{ classes.groups }}">
                                    <block wx:for="{{ p.children }}" wx:for-item="g" wx:for-index="cIndex" wx:key="">
                                        <view class="{{ classes.group }}">
                                            <checkbox
                                                class="{{ classes.check }}"
                                                value="{{ g.value }}"
                                                checked="{{ common.getChecked(values[index] && values[index][pIndex], g.value) }}"
                                            />
                                            <view class="{{ classes.btn }} {{ common.getChecked(values[index] && values[index][pIndex], g.value) ? prefixCls + '__btn--checked' : '' }}">{{ g.label }}</view>
                                        </view>
                                    </block>
                                </view>
                            </checkbox-group>
                        </view>
                    </view>
                </block>
            </scroll-view>
            <div class="{{ classes.btns }}">
                <view class="{{ classes.btn }}" data-index="{{ index }}" bindtap="onSelectReset">{{ cancelText }}</view>
                <view class="{{ classes.btn }} {{ prefixCls + '__btn--danger' }}" data-index="{{ index }}" bindtap="onSelectConfirm">{{ confirmText }}</view>
            </div>
        </wux-animation-group>
        <wux-animation-group wux-class="{{ classes.select }}" in="{{ item.visible }}" class-names="wux-animate--fadeIn" bind:enter="onEnter" bind:exit="onExit" wx:if="{{ item.type === 'radio' }}">
            <scroll-view class="{{ classes.scrollView }}" scroll-y>
                <wux-radio-group
                    value="{{ values[index] }}"
                    options="{{ common.getOptions(item.children) }}"
                    bind:change="onSelectChange"
                    data-index="{{ index }}"
                    data-type="{{ item.type }}"
                />
            </scroll-view>
        </wux-animation-group>
        <wux-animation-group wux-class="{{ classes.select }}" in="{{ item.visible }}" class-names="wux-animate--fadeIn" bind:enter="onEnter" bind:exit="onExit" wx:if="{{ item.type === 'checkbox' }}">
            <scroll-view class="{{ classes.scrollView }}" scroll-y>
                <wux-checkbox-group
                    value="{{ values[index] }}"
                    options="{{ common.getOptions(item.children) }}"
                    bind:change="onSelectChange"
                    data-index="{{ index }}"
                    data-type="{{ item.type }}"
                />
                <div class="{{ classes.btns }}">
                    <view class="{{ classes.btn }}" data-index="{{ index }}" bindtap="onSelectReset">{{ cancelText }}</view>
                    <view class="{{ classes.btn }} {{ prefixCls + '__btn--danger' }}" data-index="{{ index }}" bindtap="onSelectConfirm">{{ confirmText }}</view>
                </div>
            </scroll-view>
        </wux-animation-group>
    </block>
</view>

<wxs module="common">
    module.exports = {
        getOptions: function(options) {
            return options.map(function(option) {
                if (option.constructor === 'String') {
                    return {
                        title: option,
                        value: option
                    }
                }
                return {
                    title: option.label,
                    value: option.value
                }
            })
        },
        getChecked: function(values, value) {
            if (!values || !values.length) return false
            if (values.constructor === 'Array') {
                return values.indexOf(value) !== -1
            }
            return values === value
        },
        getItemCls: function(prefixCls, item) {
            var itemCls = []
            if (item.type !== 'text') {
                itemCls.push(prefixCls + '__item--has-icon')
            }
            if (item.checked) {
                itemCls.push(prefixCls + '__item--checked')
            }
            return itemCls.join(' ')
        },
        getIconCls: function(prefixCls, icon) {
            var iconCls = [prefixCls + '__icon--' + icon.type]
            if (icon.type === 'sort') {
                if (icon.sort === 1) {
                    iconCls.push(prefixCls + '__icon--sort-asc')
                } else if (icon.sort === -1) {
                    iconCls.push(prefixCls + '__icon--sort-desc')
                }
            }
            return iconCls.join(' ')
        },
    }
</wxs>