wx-starlock/pages/realTimePicture/realTimePicture.vue

<template>
  <view>
    <view
      @click="select(0)"
      class="flex items-center bg-#ececec py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .realTimeMode === 0
          ? 'bg-#d9e8fd'
          : 'bg-#ececec'
      ]"
    >
      <view class="w-80 h-full flex items-center justify-center">
        <up-icon
          v-if="
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 0
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 0
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
          >发生事件时查看</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 0
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm">
            仅当门锁发生事件或有人按门铃时，才能在门锁首页查看实时画面。</view
          ></view
        >
      </view>
    </view>
    <view
      @click="select(1)"
      class="flex items-center bg-#ececec py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .realTimeMode === 1
          ? 'bg-#d9e8fd'
          : 'bg-#ececec'
      ]"
    >
      <view class="w-80 h-full flex items-center justify-center">
        <up-icon
          v-if="
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 1
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 1
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
        >
          实时查看</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 1
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm">
            指定时问内，无论门锁是否发生安全事件或有人按门铃，都能在门锁首页随时查看实时画面；电池续航时问将会缩短。</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, getCurrentInstance } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const $bluetooth = useBluetoothStore()

  const value = computed(() => {
    const list = []
    if ($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0]) {
      list.push($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode - 1)
      if ($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 4) {
        if (
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime === 0 &&
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime === 1440
        ) {
          list.push(1)
        } else {
          list.push(0)
        }
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime / 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime % 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime / 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime % 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordTime
            ? $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
                .recordTime
            : 0
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .detectionDistance
            ? $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
                .detectionDistance
            : 0
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .realTimeMode
        )
      } else {
        list.push(...[0, 0, 0, 0, 0, 0, 0, 0])
      }
    } else {
      list.push(...[0, 0, 0, 0, 0, 0, 0, 0, 0])
    }
    list.push($bluetooth.currentLockSetting.lockSettingInfo.autoLightScreen)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.autoLightScreenTime)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.stayWarn)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.abnormalWarn)
    return list
  })

  const select = data => {
    let array = value.value
    array[8] = data
    eventChannel.emit('update', {
      value: array,
      type: 'catEyeConfig',
      params: [
        {
          catEyeMode: $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode,
          catEyeModeConfig: {
            ...$bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig,
            realTimeMode: data
          }
        }
      ]
    })
  }
</script>

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