304 lines
9.4 KiB
Vue
304 lines
9.4 KiB
Vue
<template>
|
||
<view>
|
||
<view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base">
|
||
<view>常开模式</view>
|
||
<switch
|
||
@click="changeSwitch"
|
||
:checked="check"
|
||
class="transform-scale-90"
|
||
:disabled="true"
|
||
color="#002ce5"
|
||
/>
|
||
</view>
|
||
<view class="py-3 px-4 bg-white text-sm mt-4rpx">
|
||
你可以设置多个常开时间段，在设置的时间段内，锁被打开后一直处于打开状态。
|
||
</view>
|
||
<view class="font-bold text-base bg-white mt-2" v-if="check">
|
||
<view class="border-b-solid border-b-1 border-b-gray-200">
|
||
<view class="mx-3">
|
||
<view class="pt-2">常开日期</view>
|
||
<view class="mr-2 flex items-center justify-around py-2">
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
:class="[weekDays.includes(index + 1) ? 'bg-#4777ee text-white' : '']"
|
||
@click="changeSelect(index)"
|
||
class="rounded-50% border-solid border-3 border-gray-400 flex items-center justify-center w-70 h-70"
|
||
>{{ item }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="font-bold text-base bg-white mt-2" v-if="check">
|
||
<view class="border-b-solid border-b-1 border-b-gray-200">
|
||
<view class="mx-3 flex items-center h-100">
|
||
<view class="w-168">常开时间</view>
|
||
<view class="ml-a">
|
||
<view class="flex items-center" @click="isAllDay = isAllDay === 1 ? 0 : 1">
|
||
<view class="mr-2">全天</view>
|
||
<image
|
||
class="w-40 h-40"
|
||
v-if="isAllDay"
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
|
||
></image>
|
||
<image
|
||
v-else
|
||
class="w-40 h-40"
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="border-b-solid border-b-1 border-b-gray-200" @click="showStartTime = true">
|
||
<view class="mx-3 flex items-center h-100">
|
||
<view class="w-168">开始时间</view>
|
||
<view class="ml-a flex items-center">
|
||
<view v-if="startTimeText" class="mr-2">
|
||
<view>{{ startTimeText }}</view>
|
||
</view>
|
||
<up-icon name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="mx-3 flex items-center h-100" @click="showEndTime = true">
|
||
<view class="w-168">结束时间</view>
|
||
<view class="ml-a flex items-center">
|
||
<view v-if="endTimeText" class="mr-2">
|
||
<view>{{ endTimeText }}</view>
|
||
</view>
|
||
<up-icon name="arrow-right"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
@click="confirm"
|
||
:class="[canUpdate ? 'bg-#4777ee' : 'bg-#a3a3a3']"
|
||
class="pos-fixed 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-datetime-picker
|
||
:hasInput="false"
|
||
:show="showStartTime"
|
||
:visibleItemCount="5"
|
||
v-model="defaultStartTime"
|
||
mode="time"
|
||
closeOnClickOverlay
|
||
@close="showStartTime = false"
|
||
@confirm="confirmTime('start', $event)"
|
||
@cancel="showStartTime = false"
|
||
></up-datetime-picker>
|
||
<up-datetime-picker
|
||
:hasInput="false"
|
||
:show="showEndTime"
|
||
:visibleItemCount="5"
|
||
v-model="defaultEndTime"
|
||
mode="time"
|
||
closeOnClickOverlay
|
||
@close="showEndTime = false"
|
||
@confirm="confirmTime('end', $event)"
|
||
@cancel="showEndTime = false"
|
||
></up-datetime-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { useBluetoothStore } from '@/stores/bluetooth'
|
||
import { updateLockSettingRequest } from '@/api/setting'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const $bluetooth = useBluetoothStore()
|
||
const $basic = useBasicStore()
|
||
const $user = useUserStore()
|
||
|
||
const showStartTime = ref(false)
|
||
const showEndTime = ref(false)
|
||
|
||
const defaultStartTime = ref('')
|
||
const defaultEndTime = ref('')
|
||
|
||
const startTimeText = ref('00:00')
|
||
const endTimeText = ref('00:00')
|
||
|
||
const check = ref(false)
|
||
const weekDays = ref([])
|
||
const isAllDay = ref(0)
|
||
|
||
const list = ['一', '二', '三', '四', '五', '六', '日']
|
||
|
||
const autoUnlock = ref(0)
|
||
|
||
const pending = ref(false)
|
||
|
||
const canUpdate = computed(() => {
|
||
return (
|
||
!check.value ||
|
||
(check.value && weekDays.value.length > 0 && startTimeText.value && endTimeText.value)
|
||
)
|
||
})
|
||
|
||
onMounted(() => {
|
||
check.value = $bluetooth.currentLockSetting.lockSettingInfo.passageMode
|
||
if ($bluetooth.currentLockSetting.lockSettingInfo.passageModeConfig.length > 0) {
|
||
const {
|
||
weekDays: weekDaysResult,
|
||
isAllDay: isAllDayResult,
|
||
startDate,
|
||
endDate
|
||
} = $bluetooth.currentLockSetting.lockSettingInfo.passageModeConfig[0]
|
||
weekDays.value = weekDaysResult
|
||
isAllDay.value = isAllDayResult
|
||
startTimeText.value = `${
|
||
Math.floor(startDate / 60) < 10
|
||
? '0' + Math.floor(startDate / 60)
|
||
: Math.floor(startDate / 60)
|
||
}:${Math.floor(startDate % 60) < 10 ? '0' + Math.floor(startDate % 60) : Math.floor(startDate % 60)}`
|
||
endTimeText.value = `${Math.floor(endDate / 60) < 10 ? '0' + Math.floor(endDate / 60) : Math.floor(endDate / 60)}:${Math.floor(endDate % 60) < 10 ? '0' + Math.floor(endDate % 60) : Math.floor(endDate % 60)}`
|
||
defaultStartTime.value = `${
|
||
Math.floor(startDate / 60) < 10
|
||
? '0' + Math.floor(startDate / 60)
|
||
: Math.floor(startDate / 60)
|
||
}:${Math.floor(startDate % 60) < 10 ? '0' + Math.floor(startDate % 60) : Math.floor(startDate % 60)}`
|
||
defaultEndTime.value = `${Math.floor(endDate / 60) < 10 ? '0' + Math.floor(endDate / 60) : Math.floor(endDate / 60)}:${Math.floor(endDate % 60) < 10 ? '0' + Math.floor(endDate % 60) : Math.floor(endDate % 60)}`
|
||
} else {
|
||
startTimeText.value = '00:00'
|
||
endTimeText.value = '00:00'
|
||
defaultStartTime.value = '00:00'
|
||
defaultEndTime.value = '00:00'
|
||
}
|
||
})
|
||
|
||
const changeSelect = index => {
|
||
if (weekDays.value.includes(index + 1)) {
|
||
weekDays.value.splice(weekDays.value.indexOf(index + 1), 1)
|
||
} else {
|
||
weekDays.value.push(index + 1)
|
||
weekDays.value.sort()
|
||
}
|
||
}
|
||
|
||
const convertWeekdaysToNumber = weekDay => {
|
||
let weekStr = '0000000'.split('')
|
||
|
||
for (let i = 0; i < 7; i++) {
|
||
const index = weekDay[i] % 7
|
||
weekStr[index] = '1'
|
||
}
|
||
|
||
return parseInt(weekStr.reverse().join(''), 2)
|
||
}
|
||
|
||
const confirm = async () => {
|
||
if (!canUpdate.value) return
|
||
const data = {
|
||
weekDays: weekDays.value,
|
||
isAllDay: isAllDay.value,
|
||
startDate:
|
||
parseInt(startTimeText.value.split(':')[0], 10) * 60 +
|
||
parseInt(startTimeText.value.split(':')[1], 10),
|
||
endDate:
|
||
parseInt(endTimeText.value.split(':')[0], 10) * 60 +
|
||
parseInt(endTimeText.value.split(':')[1], 10),
|
||
autoUnlock: autoUnlock.value
|
||
}
|
||
|
||
if (check.value && data.startDate > data.endDate) {
|
||
uni.showToast({
|
||
title: '开始时间不能大于结束时间',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
const netWork = await $basic.getNetworkType()
|
||
if (!netWork) {
|
||
return
|
||
}
|
||
if (pending.value) return
|
||
pending.value = true
|
||
uni.showLoading({
|
||
title: '保存中'
|
||
})
|
||
|
||
const listData = [
|
||
check.value ? 1 : 0,
|
||
Math.floor(data.startDate / 256),
|
||
data.startDate % 256,
|
||
Math.floor(data.endDate / 256),
|
||
data.endDate % 256,
|
||
data.isAllDay,
|
||
convertWeekdaysToNumber(data.weekDays),
|
||
data.autoUnlock
|
||
]
|
||
const featureBit = 50
|
||
const { code } = await $bluetooth.updateSetting({
|
||
keyId: $bluetooth.keyId.toString(),
|
||
uid: $user.userInfo.uid.toString(),
|
||
featureBit,
|
||
params: listData,
|
||
withParams: true
|
||
})
|
||
$bluetooth.closeBluetoothConnection()
|
||
if (code === 0) {
|
||
const { code, message } = await updateLockSettingRequest({
|
||
lockId: $bluetooth.currentLockInfo.lockId,
|
||
passageMode: check.value ? 1 : 0,
|
||
passageModeConfig: [data]
|
||
})
|
||
pending.value = false
|
||
uni.hideLoading()
|
||
if (code === 0) {
|
||
$bluetooth.updateCurrentLockSetting({
|
||
...$bluetooth.currentLockSetting,
|
||
lockSettingInfo: {
|
||
...$bluetooth.currentLockSetting.lockSettingInfo,
|
||
passageMode: check.value ? 1 : 0,
|
||
passageModeConfig: [data]
|
||
}
|
||
})
|
||
$basic.backAndToast('更新成功')
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else if (code === -21) {
|
||
pending.value = false
|
||
uni.hideLoading()
|
||
} else {
|
||
pending.value = false
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '更新失败，请保持在锁附近',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const changeSwitch = () => {
|
||
check.value = !check.value
|
||
}
|
||
|
||
const confirmTime = (type, date) => {
|
||
if (type === 'start') {
|
||
startTimeText.value = date.value
|
||
showStartTime.value = false
|
||
} else {
|
||
endTimeText.value = date.value
|
||
showEndTime.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $uni-bg-color-grey;
|
||
}
|
||
</style>
|