From 33f45c5ca7befc63e20fa62061b03e1ece8cace1 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Thu, 29 Aug 2024 18:11:03 +0800
Subject: [PATCH] add tid1641 style && logic

---
 src/pages.json                                     |  12 ++
 .../device/pages/lighting_timie/list.vue           |  86 ++++++++
 .../device/pages/lighting_timie/setting.vue        | 217 +++++++++++++++++++++
 3 files changed, 315 insertions(+)
 create mode 100644 src/subpackage/device/pages/lighting_timie/list.vue
 create mode 100644 src/subpackage/device/pages/lighting_timie/setting.vue

diff --git a/src/pages.json b/src/pages.json
index 5dcf150..2eb219c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -438,6 +438,18 @@
 					"style": {
 						"navigationBarTitleText": ""
 					}
+				},
+				{
+					"path": "pages/lighting_timie/list",
+					"style": {
+						"navigationBarTitleText": "照明管理"
+					}
+				},
+				{
+					"path": "pages/lighting_timie/setting",
+					"style": {
+						"navigationBarTitleText": "照明管理"
+					}
 				}
 			]
 		},
diff --git a/src/subpackage/device/pages/lighting_timie/list.vue b/src/subpackage/device/pages/lighting_timie/list.vue
new file mode 100644
index 0000000..8522d70
--- /dev/null
+++ b/src/subpackage/device/pages/lighting_timie/list.vue
@@ -0,0 +1,86 @@
+<template>
+    <view class="lt-list">
+        <view class="ll-title">1号馆照明定时</view>
+        <view class="ll-list">
+            <view class="ll-item" v-for="i in 12" :key="i">
+                <view class="li-line">
+                    <view class="ll-txt">指令：关闭</view>
+                    <image class="ll-icon"></image>
+                </view>
+                <view class="li-line">
+                    <view class="ll-txt">时间：08:00</view>
+                </view>
+                <view class="li-line">
+                    <view class="ll-txt">日期：周日、周一、周二、周三、周四、周五、周六</view>
+                </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 {
+            condition: {
+                
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .ll-title{
+        padding: 46upx 40upx 60upx;
+        @include flcw(44upx, 60upx, #1a1a1a, 500);
+        @include tHide;
+    }
+    .ll-list{
+        .ll-item{
+            padding: 24upx 30upx;
+            background: #fff;
+            &+.ll-item{
+                margin-top: 24upx;
+            }
+            .li-line{
+                @include ctf(space-between);
+                align-items: baseline;
+                &+.li-line{
+                    margin-top: 16upx;
+                }
+                .ll-txt{
+                    @include flcw(28upx, 40upx, #1a1a1a);
+                }
+                .ll-icon {
+                    flex-shrink: 0;
+                    margin-left: 12upx;
+                    width: 44upx;
+                    height: 44upx;
+                    background: skyblue;
+                }
+            }
+        }
+    }
+    .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>
\ No newline at end of file
diff --git a/src/subpackage/device/pages/lighting_timie/setting.vue b/src/subpackage/device/pages/lighting_timie/setting.vue
new file mode 100644
index 0000000..cb16a96
--- /dev/null
+++ b/src/subpackage/device/pages/lighting_timie/setting.vue
@@ -0,0 +1,217 @@
+<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>
\ No newline at end of file