提交健康闹钟异常提醒

src/pagesA/healthAlarm/SwitchItem.vue

@@ -0,0 +1,215 @@
+<template>
+    <view class="switchBox">
+        <text class="name">{{ label }}</text>
+        <switch
+            :value="status"
+            @change="handleChange"
+            :active-value="1"
+            :inactive-value="0"
+            size="24px"
+            active-color="#07c160"
+            inactive-color="#eeeff1"
+            style="transform: scale(0.8)"
+        />
+
+        <!-- 时间范围选择 -->
+        <view class="timeRanges">
+            <view
+                v-for="(timeRange, index) in timeRanges"
+                :key="index"
+                class="timeRangeBox"
+            >
+                <view class="timeItem">
+                    <text class="timeLabel">开始时间</text>
+                    <picker
+                        mode="time"
+                        :value="timeRange.startTime"
+                        @change="handleStartTimeChange(index, $event)"
+                    >
+                        <view class="pickerButton">{{
+                            timeRange.startTime
+                        }}</view>
+                    </picker>
+                </view>
+                <view class="timeItem">
+                    <text class="timeLabel">结束时间</text>
+                    <picker
+                        mode="time"
+                        :value="timeRange.endTime"
+                        @change="handleEndTimeChange(index, $event)"
+                    >
+                        <view class="pickerButton">{{
+                            timeRange.endTime
+                        }}</view>
+                    </picker>
+                </view>
+                <view class="removeBtn" @click="removeTimeRange(index)"
+                    >删除</view
+                >
+            </view>
+        </view>
+
+        <!-- 单独保存按钮 -->
+        <view class="addTimeRangeBtn" @click="addTimeRange">+ 添加时间段</view>
+        <view class="saveBtn" @click="saveSettings">保存配置</view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "SwitchItem",
+    props: {
+        label: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: Number,
+            default: 1,
+        },
+        timeRanges: {
+            type: Array,
+            default: () => [{ startTime: "00:00", endTime: "00:00" }],
+        },
+    },
+    data() {
+        return {
+            status: this.value,
+        };
+    },
+    methods: {
+        handleChange(newValue) {
+            this.$emit("update:value", newValue.detail.value);
+        },
+
+        handleStartTimeChange(index, event) {
+            const newTimeRange = [...this.timeRanges];
+            newTimeRange[index].startTime = event.detail.value;
+            this.$emit("update:timeRanges", newTimeRange);
+        },
+
+        handleEndTimeChange(index, event) {
+            const newTimeRange = [...this.timeRanges];
+            newTimeRange[index].endTime = event.detail.value;
+            this.$emit("update:timeRanges", newTimeRange);
+        },
+
+        addTimeRange() {
+            const newTimeRange = [
+                ...this.timeRanges,
+                { startTime: "00:00", endTime: "00:00" },
+            ];
+            this.$emit("update:timeRanges", newTimeRange);
+        },
+
+        removeTimeRange(index) {
+            const newTimeRange = [...this.timeRanges];
+            newTimeRange.splice(index, 1);
+            this.$emit("update:timeRanges", newTimeRange);
+        },
+
+        saveSettings() {
+            console.log(`配置已保存：${this.label}`, {
+                status: this.status,
+                timeRanges: this.timeRanges,
+            });
+
+            uni.showToast({
+                title: `${this.label} 配置已保存`,
+                icon: "success",
+                duration: 2000,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.switchBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding-top: 20rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 2rpx solid #eef2f6;
+    background: #ffffff;
+    margin-bottom: 20rpx;
+
+    .name {
+        margin-left: 18rpx;
+        color: #111111;
+        font-size: 32rpx;
+        margin-bottom: 10rpx;
+    }
+}
+
+.timeRanges {
+    margin-top: 20rpx;
+    width: 100%;
+}
+
+.timeRangeBox {
+    padding: 10rpx;
+    background-color: #f4f4f4;
+    margin-bottom: 10rpx;
+    border-radius: 10rpx;
+}
+
+.timeItem {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+}
+
+.timeLabel {
+    font-size: 28rpx;
+    color: #333;
+}
+
+.pickerButton {
+    padding: 10rpx;
+    border: 1rpx solid #ccc;
+    border-radius: 5rpx;
+    font-size: 28rpx;
+    color: #666;
+}
+
+.removeBtn {
+    text-align: center;
+    color: #111111;
+    font-size: 32rpx;
+    padding: 20rpx;
+    margin-top: 20rpx;
+    background-color: #f9eee4;
+    border-radius: 28rpx;
+    transition: background-color 0.3s;
+}
+
+.addTimeRangeBtn {
+    width: 93%;
+    text-align: center;
+    color: #111111;
+    font-size: 32rpx;
+    padding: 20rpx;
+    cursor: pointer;
+    border: 2rpx solid #feece5;
+    border-radius: 28rpx;
+    background-color: #feece5;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.saveBtn {
+    width: 93%;
+    text-align: center;
+    color: #fff;
+    font-size: 32rpx;
+    padding: 20rpx;
+    margin-top: 20rpx;
+    cursor: pointer;
+    background-color: #7d5246;
+    border-radius: 28rpx;
+    transition: background-color 0.3s;
+}
+</style>

src/pagesA/healthAlarm/healthAlarm.vue

@@ -3,125 +3,70 @@
         <view class="nomalNotice">
             <view class="nomalTitle">异常提醒</view>
             <view class="nomal_contain">
-                <view class="nomalItem">
-                    <view class="switchBox">
-                        <view class="switchBox">
-                            <text class="name">起夜频次</text>
-                            <switch
-                                :value="statusLight"
-                                @change="handleLightChange"
-                                :active-value="1"
-                                :inactive-value="0"
-                                size="24px"
-                                active-color="#07c160"
-                                inactive-color="#eeeff1"
-                                style="transform: scale(0.8)"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <view class="nomalItem">
-                    <view class="switchBox">
-                        <view class="switchBox">
-                            <text class="name">如厕频次</text>
-                            <switch
-                                :value="statusLight"
-                                @change="handleLightChange"
-                                :active-value="1"
-                                :inactive-value="0"
-                                size="24px"
-                                active-color="#07c160"
-                                inactive-color="#eeeff1"
-                                style="transform: scale(0.8)"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <view class="nomalItem">
-                    <view class="switchBox">
-                        <view class="switchBox">
-                            <text class="name">卫生间频次</text>
-                            <switch
-                                :value="statusLight"
-                                @change="handleLightChange"
-                                :active-value="1"
-                                :inactive-value="0"
-                                size="24px"
-                                active-color="#07c160"
-                                inactive-color="#eeeff1"
-                                style="transform: scale(0.8)"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <view class="nomalItem">
-                    <view class="switchBox">
-                        <view class="switchBox">
-                            <text class="name">夜间如厕频次</text>
-                            <switch
-                                :value="statusLight"
-                                @change="handleLightChange"
-                                :active-value="1"
-                                :inactive-value="0"
-                                size="24px"
-                                active-color="#07c160"
-                                inactive-color="#eeeff1"
-                                style="transform: scale(0.8)"
-                            />
-                        </view>
-                    </view>
-                </view>
-                <view class="nomalItem">
-                    <view class="switchBox">
-                        <text class="name">如厕频次异常</text>
-                        <switch
-                            :value="statusLight"
-                            @change="handleLightChange"
-                            :active-value="1"
-                            :inactive-value="0"
-                            size="24px"
-                            active-color="#07c160"
-                            inactive-color="#eeeff1"
-                            style="transform: scale(0.8)"
-                        />
-                    </view>
-                </view>
-            </view>
-        </view>
-
-        <view class="box">
-            <view class="handle-btn">
-                <view class="btn2" @click="healthAlarm"> 保存设置 </view>
+                <SwitchItem
+                    v-for="(item, index) in switchItems"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                    :timeRanges="item.timeRanges"
+                    @update:value="handleSwitchChange(index, $event)"
+                    @update:timeRanges="updateTimeRanges(index, $event)"
+                />
             </view>
         </view>
     </view>
 </template>
+
 <script>
+import SwitchItem from "./SwitchItem.vue"; // 引入 SwitchItem 组件
+
 export default {
-    name: "my",
+    name: "MyPage",
+    components: {
+        SwitchItem,
+    },
     data() {
         return {
-            status_light: 1,
-            devInfo: "",
-            statusLight: 1,
-            timeOne: "23:00",
+            switchItems: [
+                {
+                    label: "起夜频次",
+                    value: 1,
+                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
+                },
+                {
+                    label: "如厕频次",
+                    value: 1,
+                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
+                },
+                {
+                    label: "卫生间频次",
+                    value: 1,
+                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
+                },
+                {
+                    label: "夜间如厕频次",
+                    value: 1,
+                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
+                },
+                {
+                    label: "如厕频次异常",
+                    value: 1,
+                    timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
+                },
+            ],
         };
     },
-    computed: {},
     methods: {
-        bindTimeChange(e) {
-            this.timeOne = e.detail.value;
+        handleSwitchChange(index, newValue) {
+            this.switchItems[index].value = newValue;
+        },
+        updateTimeRanges(index, newTimeRanges) {
+            this.switchItems[index].timeRanges = newTimeRanges;
         },
     },
-    onLoad(option) {
-        this.devInfo = JSON.parse(option.devInfo);
-        console.log(this.devInfo, 999999);
-    },
-    onShow() {},
-    onHide() {},
-    onUnload() {},
 };
 </script>
+
 <style lang="less" scoped>
 .container {
     height: 100vh;
@@ -134,10 +79,6 @@ export default {
         margin: 0 auto;
         box-sizing: border-box;
 
-        &.moreNotice {
-            margin-top: 56rpx;
-        }
-
         .nomalTitle {
             padding-left: 38rpx;
             font-family: MiSans;
@@ -150,73 +91,6 @@ export default {
             margin-top: 18rpx;
             background: #ffffff;
             border-radius: 37rpx;
-
-            .nomalItem {
-                display: flex;
-                justify-content: space-between;
-
-                .switchBox {
-                    width: 600rpx;
-                    height: 94rpx;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    padding-top: 20rpx;
-                    padding-bottom: 20rpx;
-                    border-bottom: 2rpx solid #eef2f6;
-                    background: #ffffff;
-
-                    .name {
-                        margin-left: 18rpx;
-                        color: #111111;
-                        font-size: 32rpx;
-                        margin-bottom: 10rpx;
-
-                        &.otherClass {
-                            color: #999999;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .box {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100vw;
-        height: 168rpx;
-        padding: 0 37rpx;
-        background: #ffffff;
-        box-sizing: border-box;
-
-        .handle-btn {
-            margin-top: 40rpx;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .btn2 {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 700rpx;
-                height: 94rpx;
-                background: linear-gradient(
-                    105.95deg,
-                    #a27867 0%,
-                    #74483d 100%
-                );
-                border-radius: 28rpx;
-                box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
-                    0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
-                    0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
-                font-family: MiSans;
-                font-weight: 500;
-                color: #ffffff;
-                font-size: 32rpx;
-            }
         }
     }
 }