CZKJ.XKJ.Supply/src/components/xuan-switch/xuan-switch.vue

<template>
    <view class="switch-container" :style="[{ background: bj_color }]">
        <view class="switch_view">
            <view
                class="switch-item"
                :class="{ checked_switch: isSwitch }"
                :style="isSwitch ? `color:${checked_color}` : ''"
                @click.prevent.stop="changeSwitch(true)"
                :animation="animationData2"
            >
                {{ switchList[0] }}
            </view>
            <view
                class="switch-item"
                :class="{ checked_switch: !isSwitch }"
                :style="!isSwitch ? `color:${checked_color}` : ''"
                @click.prevent.stop="changeSwitch(false)"
                :animation="animationData3"
            >
                {{ switchList[1] }}
            </view>
        </view>
        <view class="disabled" v-if="disabled"></view>
        <view
            class="position_view"
            :animation="animationData1"
            :style="[{ background: checked_bj_color }]"
        ></view>
    </view>
</template>

<script>
export default {
    props: {
        switchList: {
            type: Array,
            default: () => {
                return ["开", "关"];
            },
        },
        defaultSwitch: {
            type: Boolean,
            default: true,
        },
        isShowModal: {
            //改变开关时，是否弹框提醒
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        bj_color: {
            type: String,
            default: "#fff",
        },
        // checked_bj_color:{
        //   type:String,
        //   default:'rgb(0, 188, 38)',
        // },
        changeBgColor: {
            type: Boolean,
            default: true,
        },
        checked_color: {
            type: String,
            default: "#fff",
        },
    },
    data() {
        return {
            isSwitch: true,
            initAnimation: {},
            animationData1: {},
            animationData2: {},
            animationData3: {},
            checked_bj_color: "00bc26", //#f44336红 #00bc26绿
        };
    },
    created() {
        this.initAnimation = uni.createAnimation({
            duration: 500,
            timingFunction: "ease",
        });
        this.isSwitch = this.defaultSwitch;
        this.changeAnimation();
    },
    methods: {
        changeSwitch(isSwitch) {
            if (isSwitch == this.isSwitch || this.disabled) {
                return;
            }
            if (this.isShowModal) {
                let index = isSwitch ? 0 : 1;
                let text = this.switchList[index];
                uni.showModal({
                    title: "提示",
                    content: `您确定要将其调整为${text}吗？`,
                    success: (res) => {
                        if (res.confirm) {
                            this.isSwitch = isSwitch;
                            this.changeAnimation();
                            this.callParentEvent(isSwitch);
                        }
                    },
                });
            } else {
                this.isSwitch = isSwitch;
                this.changeAnimation();
                this.callParentEvent(isSwitch);
            }
        },
        changeAnimation() {
            if (this.isSwitch) {
                this.animationData1 = this.initAnimation
                    .left(0)
                    .width("60%")
                    .step()
                    .export();
                this.animationData2 = this.initAnimation
                    .width("60%")
                    .step()
                    .export();
                this.animationData3 = this.initAnimation
                    .width("40%")
                    .step()
                    .export();
            } else {
                this.animationData1 = this.initAnimation
                    .left("40%")
                    .width("60%")
                    .step()
                    .export();
                this.animationData2 = this.initAnimation
                    .width("40%")
                    .step()
                    .export();
                this.animationData3 = this.initAnimation
                    .width("60%")
                    .step()
                    .export();
            }
        },
        callParentEvent() {
            this.$emit("change", this.isSwitch);
        },
    },
    watch: {
        isSwitch(v) {
            if (this.changeBgColor) {
                if (v) {
                    this.checked_bj_color = "#00bc26";
                } else {
                    this.checked_bj_color = "#f44336";
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.switch-container {
    display: flex;
    flex-direction: row;
    width: 160upx;
    height: 60upx;
    border-radius: 100upx;
    border: 1upx solid #ccc;
    position: relative;
    .switch_view {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        border-radius: 100upx;
        .switch-item {
            color: #666;
            font-size: 24upx;
            height: 100%;
            width: 40%;
            border-radius: 100upx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .position_view {
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        border-radius: 100upx;
        background: rgb(0, 188, 38);
        transition: all 0.3s;
    }
    .disabled {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: #fff;
        opacity: 0.6;
        border-radius: 100upx;
    }
}
</style>