Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components

‘chensiAb’

2025-03-25 3b03f87a02458f719e2eb4bf112a13441b427d14

 forms/switch/CSwitchRadio.vue

@@ -1,5 +1,5 @@
/**
 * CSwitchRadio
 * CSwitchRadio 开关式单选框
 * @author Tevin
 */

@@ -8,38 +8,67 @@
        class="c-switch c-switch-radio"
        :class="className"
    >
        <AtSwitch :title="itemRes.label" />
        <radio-group @change="evt => handleChange(evt.detail.value)">
            <label>
                <radio
                    value="true"
                    :checked="itemRes.formData[itemRes.name]"
                >{{checkedLabel}}</radio>
            </label>
            <label>
                <radio
                    value="false"
                    :checked="!itemRes.formData[itemRes.name]"
                >{{uncheckedLabel}}</radio>
            </label>
        </radio-group>
        <AtSwitch
            :title="itemRes.label"
            ref="switch"
        />
        <view
            class="c-switch-radio-group"
            ref="radio"
        >
            <view
                class="c-switch-radio-item"
                @tap="evt => handleChange(true)"
            >
                <view
                    class="c-switch-radio-icon"
                    :class="current === true ? 'checked' : ''"
                >
                    <AtIcon value="check" />
                </view>
                <view class="c-switch-radio-label">{{checkedLabel}}</view>
            </view>
            <view
                class="c-switch-radio-item"
                @tap="evt => handleChange(false)"
            >
                <view
                    class="c-switch-radio-icon"
                    :class="current === false ? 'checked' : ''"
                >
                    <AtIcon value="check" />
                </view>
                <view class="c-switch-radio-label">{{uncheckedLabel}}</view>
            </view>
        </view>
    </view>
</template>

<script>
import { AtSwitch } from 'taro-ui-vue';
import { AtSwitch, AtIcon } from 'taro-ui-vue';
import { $ } from '@tarojs/extend';
import './cSwitch.scss';

export default {
    name: 'CSwitchRadio',
    components: { AtSwitch },
    components: {
        AtSwitch,
        AtIcon,
    },
    props: {
        // 表单数据资源（表单组件内部机制专用）
        itemRes: Object,
        // 选项对齐方式，left / right(默认)
        checkAlign: {
            type: String,
            default: 'right',
        },
        // 选中文字
        checkedLabel: {
            type: String,
            default: '是',
        },
        // 不选中文字
        uncheckedLabel: {
            type: String,
            default: '否',
@@ -51,6 +80,9 @@
    computed: {
        className() {
            let className = '';
            if (this.checkAlign === 'left') {
                className += 'c-switch-radio-left ';
            }
            if (this.itemRes.required) {
                className += 'c-switch-required ';
            }
@@ -59,11 +91,21 @@
            }
            return className;
        },
        current() {
            return this.itemRes.formData[this.itemRes.name];
        },
    },
    methods: {
        handleChange(value) {
            this.itemRes.onChange(JSON.parse(value));
            this.itemRes.onChange(value);
        },
    },
    mounted() {
        if (process.env.TARO_ENV === 'h5') {
            $(this.$refs.switch.$el).append(this.$refs.radio.$el);
        } else if (process.env.TARO_ENV === 'weapp') {
            $(this.$refs.switch.$el).find('.at-switch').append(this.$refs.radio);
        }
    },
};
</script>