uni_mattress/sleep/pages/user/alertSetting/index.vue

<template>
  <view class="flex-col justify-start page">
    <cu-custom isBack="true" bgColor="#000000">
      <view slot="content" style="color: #FFFFFF">报警设置</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="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms"/>
                <text class="font_2">短信提醒</text>
              </view>
              <view class="flex-row items-end space-x-4 items-center">
                <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
                <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="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms" />
                <text class="font_2">短信提醒</text>
              </view>
              <view class="flex-row items-end space-x-4 items-center">
                <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
                <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="switchFrom.falling_bed" color="#1E09DE" style="transform:scale(0.7)" @change="switchFallingBed" />-->
<!--                <text class="font_2">坠床预警</text>-->
<!--              </view>-->
<!--            </view>-->
            <view class="flex-row justify-between self-start equal-division">
              <view class="flex-row items-end space-x-4 items-center">
                <switch :checked="switchFrom.out_of_bed_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutSms" />
                <text class="font_2">短信提醒</text>
              </view>
              <view class="flex-row items-end space-x-4 items-center">
                <switch :checked="switchFrom.out_of_bed_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutVoice" />
                <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 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="switchFrom.sos_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosSms" />
                <text class="font_2">短信提醒</text>
              </view>
              <view class="flex-row items-center equal-division-item space-x-4">
                <switch :checked="switchFrom.sos_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosVoice" />
                <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">
                注：设置提醒手机号需注册“UU睡眠”小程序,前往“我的”-“购买套餐”中领取短信语言套餐包，才能发送短信语音提醒。
              </text>
              <view class="flex-col section_9">
                <view class="flex-row justify-center items-center list-item space-x-6" @click="handleShareClick">
                  <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 class="cu-modal" :class="updateShow?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view style="color: black" class="content">编辑昵称</view>
          <view class="action" @tap="updateShow=false">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="">
          <form>
            <view class="cu-form-group solid-bottom">
              <view class="title">昵称</view>
              <input type="text" v-model="userInfo.nickname" class="text-left" placeholder="请输入昵称"/>
            </view>
            <view class="cu-form-group">
              <view class="text-df text-gray">设置昵称,以便播报,6字以内</view>
            </view>
          </form>
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn bg-green margin-left" @tap="updateNickName">确定</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import Storage from '@/utils/storage'
import * as API_SLEEP_REPORT from '@/api/sleep_report'
import * as API_MEMBER_WARN_SWITCH from '@/api/member_warn_switch'

export default {
  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: []
      },
      switchFrom: {
        sign_sms_switch: false,
        sign_voice_switch: false,
        out_of_bed_sms_switch: false,
        out_of_bed_voice_switch: false,
        sos_sms_switch: false,
        sos_voice_switch: false,
        // falling_bed: false
      },
      userInfo: null,
      updateShow: false
    }
  },
  onLoad(options) {
    const { imei } = options
    this.sleepWorn.sn = imei
    console.log('imei===', imei)
    this.API_getWartResult()
    this.setWarn()
    this.userInfo = Storage.getItem('userInfo')
    if (this.userInfo) {
      this.API_getSwitch()
      this.switchFrom.member_union_id = this.userInfo.union_id
      if (this.userInfo.nickname.length > 6 || this.userInfo.mobile === this.userInfo.nickname || this.userInfo.nickname === '微信用户') {
        const _this = this
        uni.showModal({
          title: '提示',
          content: "您还未设置昵称，是否设置呢?",
          confirmText: "确定",
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              _this.updateShow = true
            }
          }
        })
      }
    }
  },
  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
        }
      })
    },
    API_getSwitch() {
      const _this = this
      API_MEMBER_WARN_SWITCH.getByMemberUnionId(this.userInfo.union_id).then(res => {
        if (res) {
          _this.switchFrom = res
        }
      })
    },
    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:"保存成功"
              })
            })
            if (_this.switchFrom.id) {
              // 修改
              API_MEMBER_WARN_SWITCH.edit(_this.switchFrom, _this.switchFrom.id)
            } else {
              // 新增
              API_MEMBER_WARN_SWITCH.add(_this.switchFrom)
            }
          }
        }
      })
    },
    switchTzSms(e) {
      this.switchFrom.sign_sms_switch = e.detail.value
    },
    switchTzVoice(e) {
      this.switchFrom.sign_voice_switch = e.detail.value
    },
    switchFallingBed(e) {
      this.switchFrom.falling_bed = e.detail.value
      console.log(this.switchFrom.falling_bed)
    },
    switchOutSms(e) {
      this.switchFrom.out_of_bed_sms_switch = e.detail.value
    },
    switchOutVoice(e) {
      this.switchFrom.out_of_bed_voice_switch = e.detail.value
    },
    switchSosSms(e) {
      this.switchFrom.sos_sms_switch = e.detail.value
    },
    switchSosVoice(e) {
      this.switchFrom.sos_voice_switch = e.detail.value
    },
    updateNickName() {
      if (this.userInfo.nickname === '') {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      if (this.nickname.length > 6) {
        uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
        return
      }
      this.updateShow = false
      const _this = this
      this.saveUserInfo({nickname: this.userInfo.nickname}).then(() => {
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
        this.$store.dispatch('getUserDataAction').then((res)=>{
          _this.userInfo = res
        })
      })
    },
    handleShareClick() {
      uni.navigateTo({
        url: '/pages/user/shareUser/index'
      })
    },
    ...mapActions({
      saveUserInfo: 'saveUserInfoAction'
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background-image: url('http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png');
  background-repeat: no-repeat;
  background-size: cover ;
  background-attachment: fixed ;
  background-position: center center;
  .section {


    .section_2 {
      padding-bottom: 1.25rem;
      background-image: linear-gradient(180deg, rgba(103, 103, 226, 0.95) 0%, rgba(12, 117, 246, 0.61) 100%);
      backdrop-filter: blur(0.19rem);
	  height: 100%;


      .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;
        }
      }
      .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;
}

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


</style>