页面筛选组件，增加单项开关子组件

Tevin

2023-08-17 910572f2c2bbd678c3983db0ca4a293fa5c0dd33

页面筛选组件，增加单项开关子组件

 forms/switch/cSwitch.scss

@@ -56,7 +56,7 @@
        }
        .c-switch-radio-item {
            display: inline-block;
            padding-left: 18px;
            padding-left: 24px;
        }
        .c-switch-radio-icon {
            @include flexbox(inline, center center);
@@ -90,7 +90,7 @@
            padding-right: 0;
            .c-switch-radio-item {
                padding-left: 0;
                padding-right: 22px;
                padding-right: 24px;
            }
        }
    }

 plugins/filter/CFilter.vue

@@ -67,6 +67,13 @@
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                    />
                    <CFilterSwitchRadio
                        v-if="item.type==='switchRadio'"
                        type="item"
                        :label="item.label"
                        :value="filterRes[item.name]"
                        :onChange="evt=>handleItemChange(item.name, evt)"
                    />
                </view>
            </scroll-view>
            <view class="c-filter-drawer-btn">
@@ -92,6 +99,7 @@
import { CDrawer } from '@components/layout/drawer';
import CFilterSelect from './CFilterSelect';
import CFilterDateRange from './CFilterDateRange';
import CFilterSwitchRadio from './CFilterSwitchRadio';
import './cFilter.scss';

export default {
@@ -101,6 +109,7 @@
        AtButton,
        CFilterSelect,
        CFilterDateRange,
        CFilterSwitchRadio,
        CDrawer,
    },
    props: {

 plugins/filter/CFilterSelect.vue

@@ -35,6 +35,7 @@

<script>
import Taro from '@tarojs/taro';
import './cFilterSelect.scss';

export default {
    name: 'CFilterSelect',

 plugins/filter/CFilterSwitchRadio.vue

New file
@@ -0,0 +1,68 @@
/**
 * CFilterSwitchRadio - 筛选项目，单选
 * @author Tevin
 */

<template>
    <view
        class="c-filter-switch-radio"
        :class="'type-'+type"
    >
        <view
            class="label"
            v-if="type==='item'"
        >{{label}}</view>
        <CSwitchRadio
            :itemRes="{
                label: type==='bar' ? label : '',
                name: switchName,
                formData: switchData,
                onChange: evt => handleChange(evt),
            }"
            checkAlign="left"
            checkedLabel="在线"
            uncheckedLabel="离线"
        />
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { CSwitchRadio } from '@components/forms/switch';
import './cFilterSwitchRadio.scss';

export default {
    name: 'CFilterRadio',
    components: {
        CSwitchRadio,
    },
    props: {
        type: String,
        label: String,
        value: Boolean,
        onChange: Function,
    },
    data() {
        return {
            switchName: 'radio',
            switchData: {
                radio: '',
            },
        };
    },
    computed: {},
    watch: {
        value(newVal, oldVal) {
            this.switchData.radio = newVal;
        },
    },
    methods: {
        handleChange(value) {
            this.onChange(value);
        },
    },
    mounted() {
        this.switchData.radio = this.value;
    },
};
</script>

 plugins/filter/cFilter.scss

@@ -86,58 +86,4 @@
            }
        }
    }
}

.c-filter-select {
    .content {
        @include flexbox(flex, flex-start center);
        white-space: nowrap;
        .empty,
        .value {
            display: inline-block;
            vertical-align: middle;
            @include ellipsis();
        }
        .empty {
            color: #ccc;
        }
        .filled {
            color: #6190e8;
        }
        .at-icon {
            text-align: center;
            color: #666;
        }
    }
    &.type-bar {
        .content {
            height: 86px;
            .label {
                padding-right: 12px;
                color: #666;
            }
            .filled {
                letter-spacing: -2px;
            }
            .at-icon {
                padding-left: 4px;
                vertical-align: middle;
            }
        }
    }
    &.type-item {
        .label {
            color: #666;
            line-height: 40px;
        }
        .content {
            .empty,
            .filled {
                flex: 6;
            }
            .at-icon {
                flex: 1;
            }
        }
    }
}

 plugins/filter/cFilterSelect.scss

New file
@@ -0,0 +1,60 @@
/**
 * filter select
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-filter-select {
    .content {
        @include flexbox(flex, flex-start center);
        white-space: nowrap;
        .empty,
        .value {
            display: inline-block;
            vertical-align: middle;
            @include ellipsis();
        }
        .empty {
            color: #ccc;
        }
        .filled {
            color: #6190e8;
        }
        .at-icon {
            text-align: center;
            color: #666;
        }
    }
    &.type-bar {
        .content {
            height: 86px;
            .label {
                padding-right: 12px;
                color: #666;
            }
            .filled {
                letter-spacing: -2px;
            }
            .at-icon {
                padding-left: 4px;
                vertical-align: middle;
            }
        }
    }
    &.type-item {
        .label {
            color: #666;
            line-height: 40px;
        }
        .content {
            .empty,
            .filled {
                flex: 6;
            }
            .at-icon {
                flex: 1;
            }
        }
    }
}

 plugins/filter/cFilterSwitchRadio.scss

New file
@@ -0,0 +1,25 @@
/**
 * CFilterSwitchRadio
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-filter-switch-radio {
    .label {
        color: #666;
        line-height: 40px;
    }
    &.type-item {
        .c-switch-radio {
            .at-switch {
                display: none;
            }
            .c-switch-radio-group {
                position: sticky;
                padding: 0;
                transform: none;
            }
        }
    }
}