From 5a2749ec0e3ab97524ac9b77c4ca3041ce70d2b1 Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Fri, 29 Mar 2024 10:27:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0:=E5=BC=80=E9=97=A8=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../meeting/accessControl/accessControl.js    | 30 +++++++++++++++
 .../meeting/accessControl/accessControl.wxml  |  4 +-
 .../meeting/accessControl/accessControl.wxss  | 37 ++++++++++++++++++-
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/miniprogram/pages/meeting/accessControl/accessControl.js b/miniprogram/pages/meeting/accessControl/accessControl.js
index 934ceaf..babecad 100644
--- a/miniprogram/pages/meeting/accessControl/accessControl.js
+++ b/miniprogram/pages/meeting/accessControl/accessControl.js
@@ -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({
diff --git a/miniprogram/pages/meeting/accessControl/accessControl.wxml b/miniprogram/pages/meeting/accessControl/accessControl.wxml
index 00304a3..691f0b8 100644
--- a/miniprogram/pages/meeting/accessControl/accessControl.wxml
+++ b/miniprogram/pages/meeting/accessControl/accessControl.wxml
@@ -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>
 
diff --git a/miniprogram/pages/meeting/accessControl/accessControl.wxss b/miniprogram/pages/meeting/accessControl/accessControl.wxss
index 9acf3c2..44b8daa 100644
--- a/miniprogram/pages/meeting/accessControl/accessControl.wxss
+++ b/miniprogram/pages/meeting/accessControl/accessControl.wxss
@@ -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;
 }