uni_mattress/sleep/pages/alertSetting/alertSetting.vue

<template>
  <view class="flex-col justify-start page">
    <cu-custom isBack="true" bgColor="#000000">
      <view slot="content" style="color: #FFFFFF">UU睡眠</view>
    </cu-custom>

<!--    <time-slot-->
<!--        ref="timeslot"-->
<!--        :title="'选择时间段'"-->
<!--        @confirm="confirmTime">-->
<!--    </time-slot>-->

    <view class="flex-col justify-start section">

      <view class="flex-col section_2 space-y-32">
        <view class="flex-col">
          <text class="self-start font_1 text_2">心率异常提醒</text>
          <view class="flex-col section_6 view space-y-10">
            <!--	          <view class="flex-row justify-between self-start equal-division">-->
            <!--	            <view class="flex-row items-end space-x-4 items-center">-->
            <!--				        <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
            <!--	              <text class="font_2">短信提醒</text>-->
            <!--	            </view>-->
            <!--	            <view class="flex-row items-end space-x-4 items-center">-->
            <!--	              <switch color="#1E09DE" style="transform:scale(0.7)"/>-->
            <!--	              <text class="font_2">电话语音</text>-->
            <!--	            </view>-->
            <!--	          </view>-->
            <view class="flex-col">
              <view class="flex-row justify-between items-center list-item">
                <text class="font_2 text_3">心率过速提醒值</text>
                <view class="flex-row items-center group_3 space-x-6">
                  <picker @change="pickerChange" :range="sleepWornList.rh_highList" data-target="1">
                    <view class="uni-input">
                      <text class="font_3">{{ sleepWorn.rh_high }}</text>
                      <text class="font_4">次/分钟</text>
                      <image
                          class="shrink-0 image_7"
                          src="../../static/iconRight.png"
                      />
                    </view>
                  </picker>
                </view>
              </view>
              <view class="flex-row justify-between items-center list-item">
                <text class="font_2 text_3">心率过缓提醒值</text>
                <view class="flex-row items-center group_3 space-x-6">
                  <picker @change="pickerChange" :range="sleepWornList.rh_lowList" data-target="2">
                    <view class="uni-input">
                      <text class="font_3">{{ sleepWorn.rh_low }}</text>
                      <text class="font_4">次/分钟</text>
                      <image
                          class="shrink-0 image_7"
                          src="../../static/iconRight.png"
                      />
                    </view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="flex-col group_5 space-y-14">
          <text class="self-start font_1">呼吸率异常提醒</text>
          <view class="flex-col section_6 space-y-10">
<!--            <view class="flex-row justify-between self-start equal-division">-->
<!--              <view class="flex-row items-end space-x-4 items-center">-->
<!--                <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">短信提醒</text>-->
<!--              </view>-->
<!--              <view class="flex-row items-end space-x-4 items-center">-->
<!--                <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">电话语音</text>-->
<!--              </view>-->
<!--            </view>-->
            <view class="flex-col">
              <view class="flex-row justify-between items-center list-item">
                <text class="font_2 text_3">呼吸率过速提醒值</text>
                <view class="flex-row items-center space-x-6">
                  <picker @change="pickerChange" :range="sleepWornList.hx_highList" data-target="3">
                    <view class="uni-input">
                      <text class="font_3">{{ sleepWorn.hx_high }}</text>
                      <text class="font_4">次/分钟</text>
                      <image
                          class="shrink-0 image_7"
                          src="../../static/iconRight.png"
                      />
                    </view>
                  </picker>
                </view>
              </view>
              <view class="flex-row justify-between items-center list-item">
                <text class="font_2 text_3">呼吸率过缓提醒值</text>
                <view class="flex-row items-center space-x-6">
                  <picker @change="pickerChange" :range="sleepWornList.hx_lowList" data-target="4">
                    <view class="uni-input">
                      <text class="font_3">{{ sleepWorn.hx_low }}</text>
                      <text class="font_4">次/分钟</text>
                      <image
                          class="shrink-0 image_7"
                          src="../../static/iconRight.png"
                      />
                    </view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="flex-col group_5">
          <view class="flex-row items-center group_6 space-x-30">
            <text class="font_1">离床预警提醒</text>
            <text class="font_5 text_4">注：离床预警生效需要用户在床超过1小时。</text>
          </view>
          <view class="flex-col section_7 space-y-24">
<!--            <view class="flex-row justify-between self-start equal-division">-->
<!--              <view class="flex-row items-end space-x-4 items-center">-->
<!--                <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">短信提醒</text>-->
<!--              </view>-->
<!--              <view class="flex-row items-end space-x-4 items-center">-->
<!--                <switch color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">电话语音</text>-->
<!--              </view>-->
<!--            </view>-->
            <view class="flex-col group_7">
              <view class="flex-row justify-between items-center group_8">
                <text class="font_2 text_3">离床预警区间</text>
<!--                <view @click="handleTimeChoose" class="flex-row items-center group_9 space-x-20">-->
<!--                  <text class="font_3">22:00 - 6:00</text>-->
<!--                  <image-->
<!--                      class="shrink-0 image_7"-->
<!--                      src="../../static/iconRight.png"-->
<!--                  />-->
<!--                </view>-->
                <view class="action">
                  <picker mode="time" :value="sleepWorn.leave_start" start="00:00" end="23:59" @change="timeChange" data-target="leave_start">
                    <view class="uni-input font_3">
                      {{  sleepWorn.leave_start }}
                    </view>
                  </picker>
                </view>
                <text class="font_3">~</text>
                <view class="action">
                  <picker mode="time" :value="sleepWorn.leave_end" start="00:00" end="23:59" @change="timeChange"  data-target="leave_end">
                    <view class="uni-input font_3">
                      {{  sleepWorn.leave_end }}
                    </view>
                  </picker>
                </view>
              </view>
              <view class="flex-row justify-between items-center group_10">
                <text class="font_2 text_3">离床未归提醒</text>
                <view class="flex-row items-center group_11 space-x-8">
                  <picker @change="pickerChange" :range="sleepWornList.leave_durationList" data-target="5">
                    <view class="uni-input">
                      <text class="font_3">{{sleepWorn.leave_duration }}</text>
                      <text class="font_4">分钟</text>
                      <image
                          class="shrink-0 image_7"
                          src="../../static/iconRight.png"
                      />
                    </view>
                  </picker>

                </view>
              </view>
            </view>
          </view>
        </view>
<!--        <view class="flex-col group_5 space-y-14">-->
<!--          <text class="self-start font_1">紧急求助开关</text>-->
<!--          <view class="flex-col justify-start items-start section_8">-->
<!--            <view class="flex-row space-x-6">-->
<!--              <view class="flex-row items-center equal-division-item space-x-4">-->
<!--                <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">短信提醒</text>-->
<!--              </view>-->
<!--              <view class="flex-row items-center equal-division-item space-x-4">-->
<!--                <switch checked color="#1E09DE" style="transform:scale(0.7)"/>-->
<!--                <text class="font_2">电话语音</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
        <view class="flex-col group_5 space-y-20">
<!--          <view class="flex-col space-y-12">-->
<!--            <text class="self-start font_1 text_5">语音短信提示手机号码设置</text>-->
<!--            <view class="flex-col space-y-4">-->
<!--              <text class="font_5 text_6">-->
<!--                注：设置提醒手机号需注册“小U睡眠”小程序领取短信语言套餐包，才能发送短信语音提醒。-->
<!--              </text>-->
<!--              <view class="flex-col section_9">-->
<!--                <view class="flex-row justify-between items-center list-item">-->
<!--                  <text class="font_2 text_8">号码1</text>-->
<!--                  <view class="flex-row items-center space-x-8">-->
<!--                    <input class="uni-input" placeholder-style="color:rgba(255, 255, 255, 0.5);text-align:right"-->
<!--                           type="number" placeholder="输入手机号码"/>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <view class="flex-row justify-center items-center list-item space-x-6">-->
<!--                  <image-->
<!--                      class="image_9"-->
<!--                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16878800827365047681.png"-->
<!--                  />-->
<!--                  <text class="font_2">添加手机号码</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
          <view class="flex-col justify-start items-center self-center button">
            <text class="text_9" @click="saveSleepWarn">保存设置</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
import * as API_SLEEP_REPORT from '@/api/sleep_report'
import {pushSleepWarn} from "../../api/sleep_report";

export default {
  // components: {
  //   timeSlot
  // },
  data() {
    return {
      title: 'picker',
      index: 0,
      sleepWorn : {
        rh_high: 110,
        rh_low: 60,
        hx_high: 30,
        hx_low: 10,
        leave_start: '22:00',
        leave_end: '06:00',
        leave_duration: 30,
        sn: ''
      },
      sleepWornList: {
        rh_highList: [],
        rh_lowList: [],
        hx_highList: [],
        hx_lowList: [],
        leave_durationList: []
      }
    }
  },
  onLoad(options) {
    const { imei } = options
    this.sleepWorn.sn = imei
    console.log('imei===', imei)
    this.API_getWartResult()
    this.setWarn()
  },
  methods: {
    // handleInput() {
    //   this.$refs.inputDialog.open()
    // },
    // confirmTime(val) {
    //   console.log(val)
    // },
    API_getWartResult() {
      const _this = this
      API_SLEEP_REPORT.getWarnResult(this.sleepWorn.sn).then(res => {
        if (res.data !== null) {
          res.data.leave_start = res.data.leave_start.substring(0, 5)
          res.data.leave_end = res.data.leave_end.substring(0, 5)
          _this.sleepWorn = res.data
        }
      })
    },
    setWarn() {
      this.sleepWornList.rh_highList = Array.from(Array(71).keys(), n => n + 1 + 89)
      this.sleepWornList.rh_lowList = Array.from(Array(31).keys(), n => n + 1 + 29)
      this.sleepWornList.hx_highList = Array.from(Array(21).keys(), n => n + 1 + 19)
      this.sleepWornList.hx_lowList = Array.from(Array(8).keys(), n => n + 1 + 4)
      this.sleepWornList.leave_durationList = Array.from(Array(51).keys(), n => n + 1 + 9)
    },
    pickerChange(e) {
      const index = e.detail.value
      switch (e.mp.target.dataset.target) {
        case '1':
          this.sleepWorn.rh_high = this.sleepWornList.rh_highList[index]
          break
        case '2':
          this.sleepWorn.rh_low = this.sleepWornList.rh_lowList[index]
          break
        case '3':
          this.sleepWorn.hx_high = this.sleepWornList.hx_highList[index]
          break
        case '4':
          this.sleepWorn.hx_low = this.sleepWornList.hx_lowList[index]
          break
        case '5':
          this.sleepWorn.leave_duration = this.sleepWornList.leave_durationList[index]
          break
        default:
          break
      }
    },
    timeChange(e) {
      switch (e.mp.target.dataset.target) {
        case 'leave_start':
          this.sleepWorn.leave_start = e.detail.value
          break
        case 'leave_end':
          this.sleepWorn.leave_end = e.detail.value
          break
        default:
          break
      }
    },
    saveSleepWarn() {
      const _this = this
      uni.showModal({
        title: '提示',
        content: "确定要提交设置吗?",
        confirmText: "确定",
        showCancel: true,
        success: function(res) {
          if (res.confirm) {
            API_SLEEP_REPORT.pushSleepWarn(_this.sleepWorn).then(res => {
              uni.showToast({
                title:"保存成功"
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    background-image: url('http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .section_2 {
      padding-bottom: 1.25rem;
      background-image: linear-gradient(180deg, #1e1ef7f2 0%, #1dbff79c 100%);
      backdrop-filter: blur(0.19rem);

      .section_3 {
        padding: 1.13rem 0.44rem 0.38rem;
        background-color: #ffffff4d;

        .group {
          padding: 0 0.5rem;

          .image {
            width: 1.06rem;
            height: 0.69rem;
          }

          .image_2 {
            width: 0.94rem;
            height: 0.69rem;
          }

          .image_3 {
            width: 1.5rem;
            height: 0.72rem;
          }
        }

        .space-x-6-reverse {
          & > view:not(:last-child),
          & > text:not(:last-child),
          & > image:not(:last-child) {
            margin-right: 0.38rem;
          }
        }

        .group_2 {
          padding: 0.63rem 0 0.38rem;

          .text {
            font-size: 1.16rem;
            line-height: 1.06rem;
          }

          .section_4 {
            padding: 0.38rem 0.75rem;
            background-color: #ffffff99;
            border-radius: 1rem;
            border: solid 0.031rem #00000014;

            .image-wrapper {
              width: 1.19rem;

              .image_5 {
                width: 1.19rem;
                height: 0.44rem;
              }

              .image_4 {
                width: 1.13rem;
                height: 1.06rem;
              }
            }

            .section_5 {
              background-color: #00000033;
              width: 0.063rem;
              height: 1.16rem;
            }
          }

          .space-x-11 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 0.69rem;
            }
          }

          .pos {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      .space-y-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.38rem;
        }
      }

      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.03rem;
        color: #ffffff;
      }

      .text_2 {
        margin-left: 1.25rem;
        margin-top: 1.38rem;
      }

      .section_6 {
        padding: 0.94rem 0.63rem 0.13rem;
        background-color: #ffffff33;
        border-radius: 1rem;
      }

      .view {
        margin: 0.88rem 1.25rem 0;
      }

      .space-y-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.63rem;
        }
      }

      .group_5 {
        padding: 0 1.25rem;

        .group_6 {
          padding-bottom: 0.88rem;

          .text_4 {
            line-height: 0.59rem;
          }
        }

        .space-x-30 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.3rem;
          }
        }

        .section_7 {
          padding: 0.94rem 0.63rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;

          .group_7 {
            border-bottom: solid 0.063rem #ffffff1a;

            .group_8 {
              padding-bottom: 0.88rem;
              border-bottom: solid 0.063rem #ffffff1a;

              .group_9 {
                margin-right: 0.19rem;
              }

              .space-x-20 {
                & > view:not(:first-child),
                & > text:not(:first-child),
                & > image:not(:first-child) {
                  margin-left: 1.25rem;
                }
              }
            }

            .group_10 {
              padding: 0.88rem 0;

              .group_11 {
                margin-right: 0.19rem;
              }
            }
          }
        }

        .space-y-24 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 1.5rem;
          }
        }

        .section_8 {
          padding: 0.63rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;
        }

        .space-y-12 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 0.75rem;
          }

          .text_5 {
            line-height: 1.06rem;
          }

          .space-y-4 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-top: 0.55rem;
            }

            .text_6 {
              line-height: 0.75rem;
            }

            .section_9 {
              padding: 0 0.63rem;
              background-color: #ffffff33;
              border-radius: 1rem;
            }
          }
        }

        .font_5 {
          font-size: 0.63rem;
          font-family: PingFangSC;
          color: red;
        }

        .space-x-8 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.5rem;
          }

          .text_7 {
            color: #ffffff80;
          }

          .image_8 {
            width: 1.13rem;
            height: 1.13rem;
          }
        }

        .button {
          padding: 0.5rem 0;
          background-image: linear-gradient(90deg, #5611f780 0%, #1e1ef7f2 100%);
          border-radius: 1rem;
          width: 8.69rem;

          .text_9 {
            color: #ffffff;
            font-size: 1rem;
            font-family: PingFangSC;
            line-height: 0.94rem;
          }
        }
      }

      .space-y-14 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.88rem;
        }
      }

      .equal-division {
        width: 12.5rem;
      }

      .font_2 {
        font-size: 0.88rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ffffff;
      }

      .text_3 {
        opacity: 0.8;
      }

      .font_3 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 0.81rem;
        color: #ffffff;
      }

      .image_7 {
        width: 0.38rem;
        height: 0.69rem;
      }

      .font_4 {
        font-size: 0.75rem;
        font-family: PingFangSC;
        line-height: 0.69rem;
        color: #ffffff;
      }

      .space-x-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.38rem;
        }

        .equal-division-item {
          padding: 0.25rem 0.63rem;
          width: 6.84rem;
        }
      }

      .space-x-4 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.25rem;
        }
      }

      .image_6 {
        width: 1.38rem;
        height: 0.88rem;
      }

      .space-y-20 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.25rem;
        }
      }

      .list-item {
        padding: 0.88rem 0;
        border-bottom: solid 0.063rem #ffffff1a;

        .group_3 {
          margin-right: 0.19rem;
        }

        .text_8 {
          line-height: 0.78rem;
        }

        .image_9 {
          width: 0.88rem;
          height: 0.88rem;
        }
      }
    }

    .space-y-32 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 2rem;
      }
    }
  }
}

@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}

.box {
  @include flex;
}

.button {
  @include flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
}

.example-body {
  background-color: #fff;
  padding: 10px 0;
}

.button-text {
  color: #fff;
  font-size: 12px;
}

.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}

.popup-height {
  @include height;
  width: 200px;
}

.text {
  font-size: 12px;
  color: #333;
}

.popup-success {
  color: #fff;
  background-color: #e1f3d8;
}

.popup-warn {
  color: #fff;
  background-color: #faecd8;
}

.popup-error {
  color: #fff;
  background-color: #fde2e2;
}

.popup-info {
  color: #fff;
  background-color: #f2f6fc;
}

.success-text {
  color: #09bb07;
}

.warn-text {
  color: #e6a23c;
}

.error-text {
  color: #f56c6c;
}

.info-text {
  color: #909399;
}

.dialog,
.share {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.dialog-box {
  padding: 10px;
}

.dialog .button,
.share .button {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  margin: 0;
  margin-top: 10px;
  padding: 3px 0;
  flex: 1;
}

.dialog-text {
  font-size: 14px;
  color: #333;
}


</style>