388 lines
13 KiB
Vue
388 lines
13 KiB
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-#4777ee 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>
|