wx-starlock/pages/setting/notOpenDoor.vue

<template>
  <view>
    <view class="text-sm h-80rpx py-3 mx-4">
      经过以上设定的时间，锁没有被开启，系统会给指定对象发送提醒消息，该功能需要锁联网。
    </view>
    <view class="bg-white mx-4 rounded-md mt-4 text-base">
      <view class="flex items-center p-3">
        <view>N天未开门提醒</view>
        <switch
          @click="changeCheck()"
          :checked="check"
          class="transform-scale-90 ml-a"
          :disabled="true"
          color="#002ce5"
        />
      </view>
      <view
        v-if="check"
        @click="show = true"
        class="flex items-center p-3 border-t-1 border-t-solid border-t-gray-200"
      >
        <view>未开门时间</view>
        <view class="ml-a"> {{ value }}天 </view>
        <view class="ml-2"><up-icon name="arrow-right"></up-icon></view>
      </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 dayNotOpenDoorNoticeWayList" :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-#4777ee bottom-[calc(env(safe-area-inset-bottom)+48rpx)] w-686 mx-4 h-88 line-height-88rpx text-center text-white rounded-3xl"
      >保存
    </view>
    <up-picker
      :show="show"
      :columns="columns"
      :visibleItemCount="5"
      :defaultIndex="[value - 1]"
      @close="show = false"
      @cancel="show = false"
      @confirm="changeValue"
    ></up-picker>
  </view>
</template>

<script setup>
  import { onShow } from '@dcloudio/uni-app'
  import { onMounted, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'
  import { updateLockNoticeSettingRequest } from '@/api/setting'
  import { useUserStore } from '@/stores/user'

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

  const check = ref(false)
  const value = ref(0)
  const dayNotOpenDoorNoticeWayList = ref([])

  const show = ref(false)

  const pending = ref(false)

  const columns = ref([[]])

  const flag = ref(false)

  onShow(() => {
    if (flag.value) {
      $user.getUserInfo()
      flag.value = false
    }
  })

  onMounted(() => {
    columns.value = [
      Array.from({ length: 15 }, (_, i) => ({
        text: `${i + 1}天`,
        value: i + 1
      }))
    ]
    check.value = $bluetooth.currentLockNoticeSetting.dayNotOpenDoorState === 1
    value.value =
      $bluetooth.currentLockNoticeSetting.dayNotOpenDoorValue === 0
        ? 3
        : $bluetooth.currentLockNoticeSetting.dayNotOpenDoorValue
    dayNotOpenDoorNoticeWayList.value =
      $bluetooth.currentLockNoticeSetting.dayNotOpenDoorNoticeWayList
  })

  const changeValue = e => {
    value.value = columns.value[0][e.indexs[0]].value
    show.value = false
  }

  const update = async () => {
    if (pending.value) return
    if ($user.userInfo.isVip === 0) {
      uni.showModal({
        title: '提示',
        content: '该功能是高级功能，请开通后在使用',
        confirmText: '去开通',
        success: async res => {
          if (res.confirm) {
            const { code, data, message } = await $user.getWebUrl()
            if (code === 0) {
              $basic.routeJump({
                name: 'webview',
                params: {
                  url: encodeURIComponent(data.vip_buy_url)
                }
              })
              flag.value = true
            } else {
              uni.showToast({
                title: message,
                icon: 'none'
              })
            }
          }
        }
      })
      return
    }
    pending.value = true
    uni.showLoading({
      title: '更新中'
    })
    const data = {
      lockId: $bluetooth.currentLockInfo.lockId,
      dayNotOpenDoorState: check.value ? 1 : 0,
      dayNotOpenDoorValue: value.value,
      dayNotOpenDoorNoticeWayList: dayNotOpenDoorNoticeWayList.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:
          dayNotOpenDoorNoticeWayList.value.length === 0
            ? null
            : JSON.stringify({ noticeWay: dayNotOpenDoorNoticeWayList.value })
      },
      events: {
        confirm(data) {
          dayNotOpenDoorNoticeWayList.value = data.noticeWay
          uni.navigateBack()
        }
      }
    })
  }
</script>

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