361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="view">
|
||
<view class="view-button">
|
||
<view style="width: 150rpx">名称</view>
|
||
<view class="view-button" style="padding: 20rpx 0">
|
||
<view class="info" style="line-height: 40rpx; word-break: break-all">{{
|
||
currentLockInfo.lockAlias
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="view-line"></view>
|
||
<view class="view-button">
|
||
<view>锁编号</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info">{{ currentLockInfo.name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="view-line"></view>
|
||
<view class="view-button">
|
||
<view>MAC/ID</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info">{{ currentLockInfo.mac }}/{{ currentLockInfo.lockId }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="view-line"></view>
|
||
<view class="view-button">
|
||
<view>电量</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info">{{ currentLockInfo.electricQuantity }}%</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view" v-if="currentLockInfo.userType === 110301">
|
||
<view class="view-button">
|
||
<view>开锁时是否需联网</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<up-switch
|
||
v-model="unlockApp"
|
||
:size="40"
|
||
activeColor="#63b8af"
|
||
:asyncChange="true"
|
||
@change="changeUnlockApp"
|
||
:activeValue="1"
|
||
:inactiveValue="0"
|
||
></up-switch>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view">
|
||
<view v-if="currentLockInfo.keyType === 4">
|
||
<view class="view-button">
|
||
<view>有效期</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info"
|
||
>{{ timeFormat(currentLockInfo.startDate, 'yyyy-mm-dd') }}～{{
|
||
timeFormat(currentLockInfo.endDate, 'yyyy-mm-dd')
|
||
}}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="view-line"></view>
|
||
<view class="view-button">
|
||
<view>有效日</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info">{{ convertWeekDaysToChineseString(currentLockInfo.weekDays) }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="view-line"></view>
|
||
<view class="view-button">
|
||
<view>有效时间</view>
|
||
<view class="view-button" style="padding: 0">
|
||
<view class="info"
|
||
>{{ timeFormat(currentLockInfo.startDate, 'h:M') }}～{{
|
||
timeFormat(currentLockInfo.endDate, 'h:M')
|
||
}}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="view-button">
|
||
<view>有效期</view>
|
||
<view class="view-button" style="padding: 10rpx 0">
|
||
<view class="info" v-if="currentLockInfo.keyType === 2" style="line-height: 40rpx">
|
||
<view>{{ timeFormat(currentLockInfo.startDate, 'yyyy-mm-dd h:M') }}</view>
|
||
<view>{{ timeFormat(currentLockInfo.endDate, 'yyyy-mm-dd h:M') }}</view>
|
||
</view>
|
||
<view class="info" v-if="currentLockInfo.keyType === 3">单次</view>
|
||
<view class="info" v-if="currentLockInfo.keyType === 1">永久</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button-logout" @click="deleteLock">删除</view>
|
||
<up-modal
|
||
:show="showModal"
|
||
title="是否删除授权管理员钥匙？"
|
||
:showCancelButton="true"
|
||
width="600rpx"
|
||
@cancel="cancelModal"
|
||
@confirm="confirmModal"
|
||
>
|
||
<view class="slot-content" @click="changeRadio">
|
||
<view style="display: flex; align-items: center">
|
||
<radio :checked="checked"></radio>
|
||
<view>同时删除其发送的所有钥匙，钥匙删除后不能恢复</view>
|
||
</view>
|
||
</view>
|
||
</up-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions, mapState } from 'pinia'
|
||
import { timeFormat } from 'uview-plus'
|
||
import { useBluetoothStore } from '@/stores/bluetooth'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { deleteLockRequest } from '@/api/lock'
|
||
import { useLockStore } from '@/stores/lock'
|
||
import { updateLockSettingRequest } from '@/api/lockSetting'
|
||
import { deleteKeyRequest } from '@/api/key'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
unlockApp: 0,
|
||
showModal: false,
|
||
checked: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(useUserStore, ['userInfo']),
|
||
...mapState(useBluetoothStore, ['keyId', 'currentLockInfo']),
|
||
...mapState(useLockStore, ['lockSearch'])
|
||
},
|
||
onLoad() {
|
||
this.unlockApp = this.currentLockInfo.lockSetting.appUnlockOnline
|
||
},
|
||
methods: {
|
||
timeFormat,
|
||
...mapActions(useBluetoothStore, ['resetDevice', 'updateCurrentLockInfo']),
|
||
...mapActions(useLockStore, [
|
||
'getLockList',
|
||
'updateLockSearch',
|
||
'convertWeekDaysToChineseString'
|
||
]),
|
||
...mapActions(useBasicStore, ['backAndToast', 'getNetworkType']),
|
||
changeRadio() {
|
||
this.checked = !this.checked
|
||
},
|
||
cancelModal() {
|
||
this.showModal = false
|
||
this.checked = false
|
||
},
|
||
async confirmModal() {
|
||
uni.showLoading({
|
||
title: '删除中',
|
||
mask: true
|
||
})
|
||
const that = this
|
||
const { code } = await deleteKeyRequest({
|
||
keyId: that.keyId,
|
||
includeUnderlings: that.checked ? 1 : 0
|
||
})
|
||
that.showModal = false
|
||
if (code === 0) {
|
||
uni.hideLoading()
|
||
that.updateLockSearch({
|
||
...that.lockSearch,
|
||
pageNo: 1
|
||
})
|
||
that.getLockList(that.lockSearch)
|
||
that.backAndToast('删除成功', 2)
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: 'message',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
async changeUnlockApp(value) {
|
||
const netWork = await this.getNetworkType()
|
||
if (!netWork) {
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '更新中',
|
||
mask: true
|
||
})
|
||
const { code, message } = await updateLockSettingRequest({
|
||
lockId: this.currentLockInfo.lockId,
|
||
appUnlockOnline: value
|
||
})
|
||
if (code === 0) {
|
||
this.unlockApp = value
|
||
const data = this.currentLockInfo
|
||
data.lockSetting.appUnlockOnline = value
|
||
this.updateCurrentLockInfo(data)
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '更新成功',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
async deleteLock() {
|
||
const netWork = await this.getNetworkType()
|
||
if (!netWork) {
|
||
return
|
||
}
|
||
const that = this
|
||
if (this.currentLockInfo.userType !== 110301 && this.currentLockInfo.keyRight === 1) {
|
||
this.showModal = true
|
||
return
|
||
}
|
||
const message =
|
||
that.currentLockInfo.userType === 110301
|
||
? '删除锁后，所有信息都会一起删除，确定删除锁吗？'
|
||
: '确定删除该钥匙吗？'
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: message,
|
||
async success(res) {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '删除中',
|
||
mask: true
|
||
})
|
||
if (that.currentLockInfo.userType === 110301) {
|
||
const { code: resetDeviceCode } = await that.resetDevice({
|
||
name: that.currentLockInfo.name,
|
||
authUid: that.userInfo.uid.toString(),
|
||
keyId: that.keyId.toString()
|
||
})
|
||
if (resetDeviceCode === 0 || resetDeviceCode === -2) {
|
||
const { code } = await deleteLockRequest({
|
||
lockId: that.currentLockInfo.lockId
|
||
})
|
||
if (code === 0) {
|
||
uni.hideLoading()
|
||
that.updateLockSearch({
|
||
...that.lockSearch,
|
||
pageNo: 1
|
||
})
|
||
that.getLockList(that.lockSearch)
|
||
that.backAndToast('删除成功', 2)
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: 'message',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else if (resetDeviceCode === -1) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '删除失败，请保持在锁附近',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else {
|
||
const { code } = await deleteKeyRequest({
|
||
keyId: that.keyId
|
||
})
|
||
if (code === 0) {
|
||
uni.hideLoading()
|
||
that.updateLockSearch({
|
||
...that.lockSearch,
|
||
pageNo: 1
|
||
})
|
||
that.getLockList(that.lockSearch)
|
||
that.backAndToast('删除成功', 2)
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: 'message',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $uni-bg-color-grey;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.button-logout {
|
||
position: absolute;
|
||
border-radius: 46rpx;
|
||
bottom: calc(env(safe-area-inset-bottom) + 30rpx);
|
||
width: 600rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
margin-left: 75rpx;
|
||
background: #ec433c;
|
||
color: #ffffff;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.view {
|
||
margin-top: 32rpx;
|
||
border-radius: 32rpx;
|
||
width: 710rpx;
|
||
margin-left: 20rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.view-button {
|
||
padding: 0 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: #292826;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.view-line {
|
||
width: 100%;
|
||
height: 3rpx;
|
||
background: #ebebeb;
|
||
}
|
||
|
||
radio .wx-radio-input.wx-radio-input-checked {
|
||
border: none;
|
||
background: #c1885a;
|
||
}
|
||
radio .wx-radio-input.wx-radio-input-checked::before {
|
||
border-radius: 50%; /* 圆角 */
|
||
width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
|
||
height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
|
||
line-height: 28rpx;
|
||
text-align: center;
|
||
font-size: 20rpx; /* 对勾大小 30rpx */
|
||
color: #fff; /* 对勾颜色 白色 */
|
||
background: #c1885a;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
</style>
|