更新记录

1.0.1（2024-03-15）

优化示例

1.0.0（2024-03-14）

初次发布

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

依赖组件：

本组件依赖uni-ui扩展组件，使用前请提前引入uni-forms、uni-data-checkbox、uni-data-select、uni-datetime-picker、uni-easyinput等，详细依赖请查看示例项目

代码示例：

<template>
    <view class="container">
        <view >
            <!-- 筛选弹框 -->
            <cxk-cloud-condition-screen ref='condition' popupType="bottom" @touchmove.stop :color="conditionColor" :list="screenList" :defaultValue="defaultValue" @result="resultConditon" />
        </view>
        <view class="filter-bar" >
            <view class="filter-item" >
            </view>
            <view class="filter-item" @click="open">
                <button size="mini" type="default"
                    style="color:#ffffff;backgroundColor:#007aff;borderColor:#000000">筛选</button>
            </view>
            <view class="filter-item" >
            </view>
        </view>
        <view class="data-list" >
        </view>
    </view>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                //筛选弹框
                conditionColor: '#4D7BFE',
                hasChoose: false,
                screenList: [],
                defaultValue: {},
                queryParams:{}
            }
        },
        onLoad () {
            //设置筛选条件
            setTimeout(() => {
                this.setScreenData();
            },500)
        },
        mounted() {
        },
        methods: {
            //打开筛选面板
            open(){
                this.$refs.condition.openPopup()
            },
            //确认筛选条件并开始搜索
            resultConditon(obj) {
                for (var key in obj.str_result) {
                    this.queryParams[key] = obj.str_result[key];
                }
                console.log(obj);
            },
            //设置筛选数据
            setScreenData(){
                    this.screenList = [
                        {
                        'title': '部门',
                        'type': 'selectTree',
                        'key': 'deptId',
                        'detailList': [
                                        {
                                            "id": 100,
                                            "label": "科技公司",
                                            "children": [
                                                {
                                                    "id": 101,
                                                    "label": "深圳总公司"
                                                },
                                                {
                                                    "id": 102,
                                                    "label": "石家庄分公司"
                                                }
                                            ]
                                        }
                                    ]
                    },
                    {
                        'title': '状态',
                        'type': 'select',
                        'key': 'status1',
                        'detailList':[{
                            text: '正常',
                            value: "0",
                        }, {
                            text: '停用',
                            value: "1",
                        }],
                    },
                    {
                        'title': '用户名',
                        'type': 'input',
                        'key': 'userName',
                    }, 
                    {
                        'title': '手机号',
                        'type': 'input',
                        'key': 'phonenumber',
                    },
                     {
                        'title': '状态',
                        'type': 'checkbox',
                        'key': 'status',
                        'detailList': [{
                            text: '正常',
                            value: "0",
                        }, {
                            text: '停用',
                            value: "1",
                        }],
                    }, 
                    ]
            },
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .container{
        height: 100%;
        display: flex; 
        flex-direction: column;
    }
    /* 筛选栏样式开始 */
    .filter-bar{
        /* height: 100rpx; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        padding: 0 10px;
        /* position: sticky; */
    }
    .filter-item {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #333;
      position: relative;
      cursor: pointer;
    }
    .filter-item.active {
      color: #5500ff;
    }
    /* 筛选栏样式结束 */
</style>

组件属性说明：

筛选条件数据list属性说明：

result点击确认返回数据属性说明：

各位觉得好用的话，动动发财的小手给个五星好评!!!