wx-starlock/pages/setting/catEyeMode.vue

<template>
  <view>
    <view
      @click="updateCatEyeConfig(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] &&
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 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] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 0
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40rpx"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 0
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
          >{{ catEyeMode[0].name }}：</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 0
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm"> 适合门口较为安全的环境。</view>
          <view class="text-sm">仅发生特定事件才录像，并可查看实时画面。</view>
          <view class="text-sm">一般情况下，满电可使用7-8个月</view></view
        >
      </view>
      <view
        @click.stop="updateType(0)"
        class="text-gray-500 border-2 border-solid border-gray-500 py-1 px-1 text-sm rounded-3xl w-80 ml-1 text-center"
      >
        查看
      </view>
    </view>
    <view
      @click="updateCatEyeConfig(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] &&
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 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] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 1
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40rpx"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 1
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
        >
          {{ catEyeMode[1].name }}：</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 1
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm"> 有人逗留或发生特定事件才录像，可随时查看实时画面。</view>
          <view class="text-sm">一般情况下，满电可使用5~6个月。</view></view
        >
      </view>
      <view
        @click.stop="updateType(1)"
        class="text-gray-500 border-2 border-solid border-gray-500 py-1 px-1 text-sm rounded-3xl w-80 ml-1 text-center"
      >
        查看
      </view>
    </view>
    <view
      @click="updateCatEyeConfig(2)"
      class="flex items-center bg-#ececec py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 2
          ? 'bg-#d9e8fd'
          : 'bg-#ececec'
      ]"
    >
      <view class="w-80 h-full flex items-center justify-center">
        <up-icon
          v-if="
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 2
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40rpx"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 2
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
          >{{ catEyeMode[2].name }}：</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 2
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm"> 适合门口人员复杂、较不安全的环境。</view>
          <view class="text-sm">有人出现就录像，可随时查看实时画面。</view>
          <view class="text-sm">一般情况下，满电可使用2~4个月。</view></view
        >
      </view>
      <view
        @click.stop="updateType(2)"
        class="text-gray-500 border-2 border-solid border-gray-500 py-1 px-1 text-sm rounded-3xl w-80 ml-1 text-center"
      >
        查看
      </view>
    </view>
    <view
      @click="updateCatEyeConfig(3)"
      class="flex items-center bg-#ececec py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 3
          ? 'bg-#d9e8fd'
          : 'bg-#ececec'
      ]"
    >
      <view class="w-80 h-full flex items-center justify-center">
        <up-icon
          v-if="
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 3
          "
          name="checkbox-mark"
          color="#2a85ec"
          size="40rpx"
        ></up-icon>
      </view>
      <view class="flex-1">
        <view
          class="text-lg font-bold"
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 3
              ? 'text-#2a85ec'
              : 'text-black'
          ]"
          >{{ catEyeMode[3].name }}：</view
        >
        <view
          :class="[
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 3
              ? 'text-#2a85ec'
              : 'text-gray-500'
          ]"
        >
          <view class="text-sm"> 根据您家门口实际情况设置录像和实时画面功能。</view>
          <view class="text-sm">可使用时长由具体设置决定。</view>
        </view>
      </view>
      <view
        @click.stop="toCustom"
        class="text-gray-500 border-2 border-solid border-gray-500 py-1 px-1 text-sm rounded-3xl w-80 ml-1 text-center"
      >
        设置
      </view>
    </view>
    <up-popup
      round="32"
      :show="show"
      @close="show = false"
      mode="bottom"
      :closeOnClickOverlay="true"
      :safeAreaInsetBottom="false"
      bgColor="transparent"
    >
      <view
        class="bg-white text-lg font-bold rounded-t-2xl pb-[calc(env(safe-area-inset-bottom)+20rpx)]"
      >
        <view class="py-3 text-center text-xl">{{ catEyeMode[type].name }}</view>
        <view class="flex items-center justify-between mx-4 my-6">
          <view>录像时机</view>
          <view class="text-sm text-gray-500 max-w-250rpx">{{ catEyeMode[type].text1 }}</view>
        </view>
        <view class="flex items-center justify-between mx-4 my-6">
          <view>有人出现时录像</view>
          <view class="text-sm text-gray-500 max-w-250rpx">{{ catEyeMode[type].text2 }}</view>
        </view>
        <view class="flex items-center justify-between mx-4 my-6">
          <view>人体侦测距离</view>
          <view class="text-sm text-gray-500 max-w-250rpx">{{ catEyeMode[type].text3 }}</view>
        </view>
        <view class="flex items-center justify-between mx-4 my-6">
          <view>查看实时画面</view>
          <view class="text-sm text-gray-500 max-w-250rpx">{{ catEyeMode[type].text4 }}</view>
        </view>
        <view
          @click="show = false"
          class="w-686 mx-4 text-center h-88 line-height-88rpx mt-5 text-white bg-#63b8af rounded-44rpx"
          >我知道了</view
        >
      </view>
    </up-popup>
  </view>
</template>

<script setup>
  import { computed, getCurrentInstance, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { catEyeMode } from '@/constant/catEyeMode'
  import { useBasicStore } from '@/stores/basic'

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

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

  const show = ref(false)

  const value = computed(() => {
    const list = []
    if ($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0]) {
      list.push($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode)
      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 type = ref(0)

  const updateType = index => {
    type.value = index
    show.value = true
  }

  const toCustom = () => {
    if (
      !$bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] ||
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode !== 3
    ) {
      uni.showToast({
        title: '请先选择自定义模式',
        icon: 'none'
      })
      return
    }
    $basic.routeJump({
      name: 'customCatEye',
      events: {
        update: data => {
          eventChannel.emit('update', data)
        }
      }
    })
  }

  const updateCatEyeConfig = index => {
    if (
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0] &&
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === index
    ) {
      return
    }
    let array = value.value
    array[0] = index
    eventChannel.emit('update', {
      value: array,
      type: 'catEyeConfig',
      params: [
        {
          catEyeMode: index,
          catEyeModeConfig: $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0]
            ? $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            : {
                recordMode: 0,
                recordStartTime: 0,
                recordEndTime: 0,
                recordTime: 0,
                detectionDistance: 0,
                realTimeMode: 0
              }
        }
      ]
    })
  }
</script>

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