boyue2025/dbd-meeting-wx-small
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-wx-small.git synced 2025-06-21 04:59:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

描述:开门点击效果

Browse Source
This commit is contained in:
SelfRidicule 2024-03-29 10:27:25 +08:00
parent 3e1a99b229
commit 5a2749ec0e
3 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
miniprogram/pages/meeting/accessControl/accessControl.js
View File

@ -98,6 +98,10 @@ Page({
let deviceId = e.currentTarget.dataset.deviceid
let roomId = e.currentTarget.dataset.roomid
let status = e.currentTarget.dataset.status
let id = e.currentTarget.dataset.id
// 点击切换动画
_this.clickSwitchAnimation(id)
//
if (status != '在线') {
Notify({
type: 'danger',
@ -127,6 +131,32 @@ Page({
})
},
// 点击切换动画
clickSwitchAnimation(id) {
let _this = this;
// 切换样式
let equipmentDataList = _this.data.equipmentDataList.map(item => {
if (item.id == id) {
item.activity = true;
}
return item;
})
_this.setData({
equipmentDataList
})
setTimeout(() => {
equipmentDataList = _this.data.equipmentDataList.map(item => {
if (item.id == id) {
item.activity = false;
}
return item;
})
_this.setData({
equipmentDataList
})
}, 200);
},
// 跳转-开门记录
jumpOpenDoorRecord() {
wx.navigateTo({

4
miniprogram/pages/meeting/accessControl/accessControl.wxml
View File

@ -12,7 +12,9 @@
<view class="title">{{item.equipmentName}}</view>
<view class="status {{item.statusClass}}">{{item.equipmentStatus}}</view>
</view>
<image class="openCloseImg" src="{{IMG_NAME + '/profile/static/meeting/accessControl/openClose.png'}}" mode="aspectFill" data-deviceid="{{item.equipmentId}}" data-status="{{item.equipmentStatus}}" data-roomid="{{item.roomId}}" bind:tap="openDoor" />
<view class="closeView {{item.activity ? 'activity' : ''}}" data-deviceid="{{item.equipmentId}}" data-status="{{item.equipmentStatus}}" data-roomid="{{item.roomId}}" data-id="{{item.id}}" bind:tap="openDoor">
<image class="openCloseImg" src="{{IMG_NAME + '/profile/static/meeting/accessControl/openClose.png'}}" mode="aspectFill" />
</view>
</view>
</view>

37
miniprogram/pages/meeting/accessControl/accessControl.wxss
View File

@ -62,7 +62,42 @@
border-radius: 10rpx;
}
.controlView .controlItem .openCloseImg {
.controlView .controlItem .closeView {
position: relative;
overflow: hidden;
border-radius: 200rpx;
padding: 10rpx;
}
.controlView .controlItem .closeView::after {
box-sizing: border-box;
content: '';
display: block;
position: absolute;
border-radius: 200rpx;
background: rgba(255, 255, 255, 0.7);
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.controlView .controlItem .closeView.activity::after {
animation: selfAnimation 0.2s;
}
@keyframes selfAnimation {
0% {
width: 0;
height: 0;
}
100% {
width: 150%;
height: 150%;
}
}
.controlView .controlItem .closeView .openCloseImg {
display: block;
width: 69rpx;
height: 69rpx;
}