ox_zhiNengZhuShou/src/subpackage/device/pages/lighting_timie/setting.vue

<template>
    <view class="lt-setting">
        <view class="ll-title">1号馆照明定时</view>

        <view class="ls-container">
            <view class="lc-select">
                <view class="lc-name">指令</view>
                <view class="ls-options">
                    <view class="lp-item"  @click="condition.instruct = 'open'">
                        <view class="li-txt">开</view>
                        <image 
                            class="li-icon"
                            mode="aspectFit"
                            :class="{active: condition.instruct === 'open'}"
                            :src="condition.instruct === 'open' ? '/subpackage/device/static/images/selected_987.png' : ''"
                        ></image>
                    </view>
                    <view class="lp-item" @click="condition.instruct = 'close'">
                        <view class="li-txt">关</view>
                        <image 
                            class="li-icon"
                            mode="aspectFit"
                            :class="{active: condition.instruct === 'close'}"
                            :src="condition.instruct === 'close' ? '/subpackage/device/static/images/selected_987.png' : ''"
                        ></image>
                    </view>
                </view>
            </view>
            <view class="lc-picker">
                <view class="lc-name">时间点</view>
                <picker mode="time" @change="condition.time = $event.detail.value">
                    <view class="lp-box">
                        <input disabled type="text" class="lb-ipt" v-model="condition.time">
                        <image class="lb-icon" mode="aspectFit" src="/subpackage/device/static/images/arrow_b2.png"></image>
                    </view>
                </picker>
            </view>
            <view class="lc-switch">
                <view class="lc-name">日期</view>
                <view class="ls-right">
                    <switch class="lr-switch" color="#009874" @change="switchChange"></switch>
                    <view class="lr-txt">全选</view>
                </view>
            </view>

            <view class="lc-week-ls">
                <view 
                    class="lwl-item" 
                    v-for="(e, i) in weeks" 
                    :key="i"
                    :class="{active: condition.weekLs.includes(e)}"
                    @click="weekItemClick(e)"
                >{{ e }}</view>
            </view>
        </view>
        
        <view class="ll-fixed-space"></view>
        <view class="ll-fixed">
            <view class="lf-btn">添加定时任务</view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return {
            weeks: [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ],
            condition: {
                instruct: 'open', // 指令 open: 开, close: 关
                time: '', // 时间点
                weekLs: [], // 日期
            }
        }
    },
    methods: {
        switchChange(e){
            if(e.detail.value){
                this.condition.weekLs = [ ...this.weeks];
            }else{
                this.condition.weekLs = [];
            }
        },
        weekItemClick(e){
            let { weekLs } = this.condition;
            if(weekLs.includes(e)){
                weekLs.splice(weekLs.indexOf(e), 1);
            }else{
                weekLs.push(e);
            }
        }
    }
}
</script>

<style lang="scss">
    .ll-title{
        padding: 46upx 40upx 60upx;
        @include flcw(44upx, 60upx, #1a1a1a, 500);
        @include tHide;
    }
    .ls-container{
        margin: 0 auto;
        padding: 50upx 30upx 100upx;
        width: 678upx;
        border-radius: 10upx;
        background: #fff;
        .lc-name{
            flex-shrink: 0;
            @include flcw(32upx, 44upx, #1a1a1a);
        }
        .lc-select{
            @include ctf(space-between);
            .ls-options{
                width: 480upx;
                @include ctf;
                .lp-item{
                    width: 50%;
                    @include ctf;
                    .li-txt{
                        @include flcw(32upx, 44upx, #1a1a1a);
                    }
                    .li-icon{
                        margin-left: 22upx;
                        flex-shrink: 0;
                        width: 40upx;
                        height: 40upx;
                        border: 2upx solid #D8D8D8;
                        border-radius: 50%;
                        &.active{
                            border-width: 0upx;
                            border-color: transparent;
                        }
                    }
                }
                
            }
        }
        .lc-picker{
            margin-top: 50upx;
            @include ctf(space-between);
            .lp-box{
                @include ctf(space-between);
                width: 480upx;
                height: 96upx;
                border: 2upx solid #D8D8D8;
                border-radius: 10upx;
                padding: 0 20upx;
                .lb-ipt{
                    flex-grow: 1;
                    @include flcw(32upx, 44upx, #1a1a1a);
                }
                .lb-icon{
                    flex-shrink: 0;
                    width: 28upx;
                    height: 28upx;
                    transform: rotateZ(90deg);
                }
            }
        }
        .lc-switch{
            margin-top: 50upx;
            @include ctf(space-between);
            .ls-right{
                width: 480upx;
                @include ctf;
                .lr-switch{
                    transform: scale(.8);
                }
                .lr-txt{
                    margin-left: 20upx;
                    @include flcw(32upx, 44upx, #1a1a1a);
                }
            }
        }
        .lc-week-ls{
            margin-top: 60upx;
            display: flex;
            flex-wrap: wrap;
            .lwl-item{
                margin: 0 20upx;
                width: 160upx;
                height: 88upx;
                border-radius: 6upx;
                border: 2upx solid #979797;
                text-align: center;
                @include flcw(32upx, 84upx, #979797);
                &:nth-child(n + 4){
                    margin-top: 40upx;
                }
                &.active{
                    color: $mColor;
                    border-color: $mColor;
                    background: rgba($color: $mColor, $alpha: .12);
                }
            }
        }
        
    }
    .ll-fixed-space{
        padding-bottom: 132upx;
        @include isPd(132upx);
    }
    .ll-fixed{
        position: fixed;
        bottom: 0;
        padding: 10upx 24upx;
        width: 100%;
        @include isPd(10upx);
        .lf-btn{
            text-align: center;
            border-radius: 10upx;
            background: $mColor;
            @include flcw(32upx, 112upx, #fff, 500);
        }
    }
</style>