wx-starlock/pages/setting/lowElecNotice.vue

<template>
  <view>
    <view class="text-sm h-80rpx py-3 mx-4">
      打开提醒后，当锁电量低于20%、10%、5%，系统会给指定对象发送提醒消息。电量读取方式：网关读取或APP读取。
    </view>
    <view class="bg-white mx-4 rounded-md mt-4 text-base">
      <view class="flex items-center p-3">
        <view>低电量提醒</view>
        <switch
          @click="changeCheck()"
          :checked="check"
          class="transform-scale-90 ml-a"
          :disabled="true"
          color="#002ce5"
        />
      </view>
    </view>
    <view v-if="check" class="bg-white mx-4 rounded-md mt-4 text-base" @click="toNoticeWay">
      <view class="flex items-center p-3">
        <view>提醒方式</view>
        <view class="ml-a"><up-icon name="arrow-right"></up-icon></view>
      </view>
      <view class="pb-4">
        <view class="flex items-center bg-#f4f4f4 mx-4 py-1 px-2 rounded-md">
          <view>APP推送</view>
          <view class="text-gray-500 ml-a">管理员</view>
        </view>
        <view v-for="(list, index) in lowElecNoticeWayList" :key="index">
          <view
            v-if="list.accounts.length > 0"
            class="flex items-center bg-#f4f4f4 mx-4 py-1 px-2 rounded-md mt-4"
          >
            <view>{{ list.type === 'mail' ? '邮件提醒' : '短信提醒' }}</view>
            <view class="text-sm ml-a text-right">
              <view
                class="text-gray-500"
                v-for="(item, ListIndex) in list.accounts"
                :key="ListIndex"
              >
                {{ item.account }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      @click="update"
      class="pos-fixed bg-#63b8af bottom-[calc(env(safe-area-inset-bottom)+48rpx)] w-686 mx-4 h-88 line-height-88rpx text-center text-white rounded-3xl"
      >保存
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'
  import { updateLockNoticeSettingRequest } from '@/api/setting'

  const $bluetooth = useBluetoothStore()
  const $basic = useBasicStore()

  const check = ref(false)
  const lowElecNoticeWayList = ref([])

  const pending = ref(false)

  onMounted(() => {
    check.value = $bluetooth.currentLockNoticeSetting.lowElecNoticeState === 1
    lowElecNoticeWayList.value = $bluetooth.currentLockNoticeSetting.lowElecNoticeWayList
  })

  const update = async () => {
    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '更新中'
    })
    const data = {
      lockId: $bluetooth.currentLockInfo.lockId,
      lowElecNoticeState: check.value ? 1 : 0,
      lowElecNoticeWayList: lowElecNoticeWayList.value
    }
    const { code, message } = await updateLockNoticeSettingRequest(data)
    pending.value = false
    uni.hideLoading()
    if (code === 0) {
      $bluetooth.updateCurrentLockNoticeSetting({
        ...$bluetooth.currentLockNoticeSetting,
        ...data
      })
      $basic.backAndToast('更新成功')
    } else if (code === 434) {
      uni.showModal({
        title: '提示',
        content: message,
        showCancel: false
      })
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }

  const changeCheck = () => {
    check.value = !check.value
  }

  const toNoticeWay = () => {
    $basic.routeJump({
      name: 'noticeWay',
      params: {
        info:
          lowElecNoticeWayList.value.length === 0
            ? null
            : JSON.stringify({ noticeWay: lowElecNoticeWayList.value })
      },
      events: {
        confirm(data) {
          lowElecNoticeWayList.value = data.noticeWay
          uni.navigateBack()
        }
      }
    })
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>