From 1dcc09980c87142f4783c5440743912f3ad0521f Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Mon, 24 Jan 2022 16:55:58 +0800
Subject: [PATCH] (#36) Optimization popup layer modular.

---
 miniprogram/modular/PopupLayer.ts      | 102 ++++++++++++++++++++-----
 miniprogram/pages/Account/Account.ts   |   2 +-
 miniprogram/pages/Account/Account.wxml |   8 +-
 3 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/miniprogram/modular/PopupLayer.ts b/miniprogram/modular/PopupLayer.ts
index 4c11056..75fdbad 100644
--- a/miniprogram/modular/PopupLayer.ts
+++ b/miniprogram/modular/PopupLayer.ts
@@ -2,11 +2,56 @@ import { IAnyData } from "core/Api";
 import { Emitter } from "core/Emitter";
 import { Modular, Manager } from "../core/Module";
 
+/**
+ * 动画类型
+ */
+enum AnimateType {
+    fade = 1,
+    scale = 2,
+    none = 3,
+}
+
 /**
  * 显示层
  */
 class DisplayLayer {
 
+    /**
+     * 类名
+     */
+    public get className(): string {
+        let res = this.isDisplay ? "block" : "none";
+
+        switch (this.animateType) {
+            case AnimateType.fade:
+                res += " mask";
+                break;
+
+            case AnimateType.scale:
+                res += " layer";
+                break;
+
+            case AnimateType.none:
+                res += " occlude";
+                break;
+        }
+
+        switch (this.animateType) {
+            case AnimateType.fade:
+                res += this.isShow ? " show-fade" : " hide-fade";
+                break;
+
+            case AnimateType.scale:
+                res += this.isShow ? " show-scale" : " hide-scale";
+                break;
+
+            case AnimateType.none:
+                break;
+        }
+
+        return res;
+    }
+
 	/**
 	 * Layer 使用的 key
 	 */
@@ -15,7 +60,21 @@ class DisplayLayer {
 	/**
 	 * 使用的动画类型
 	 */
-	public animateTime: number = 300;
+	public animateType: AnimateType = AnimateType.scale;
+
+    /**
+     * 动画时间
+     */
+    public get animateTime(): number {
+        switch (this.animateType) {
+            case AnimateType.fade:
+                return 100;
+            case AnimateType.scale:
+                return 300;
+            case AnimateType.none:
+                return -1;
+        }
+    };
 	
 	/**
 	 * 是否显示
@@ -89,6 +148,16 @@ class PopupLayer<
 	 */
 	private layers: Map<L | commonLayerType, DisplayLayer> = new Map();
 
+    /**
+     * 初始化层
+     * @param key 初始化关键字
+     */
+    public initLayers(key: L[]) {
+        for (let i = 0; i < key.length; i++) {
+            this.render(this.getDisplayLayer(key[i]));
+        }
+    }
+
 	public onLoad(): void {
 		this.on("show", this.handleShowLayer);
 		this.on("hide", this.handleHideLayer);
@@ -96,13 +165,22 @@ class PopupLayer<
 
         // 添加蒙版层
         const maskLayer = this.getDisplayLayer("mask");
-        maskLayer.animateTime = 100;
+        maskLayer.animateType = AnimateType.fade;
+        this.render(maskLayer);
 
         // 添加遮蔽层
         const occludeLayer = this.getDisplayLayer("occlude");
-        occludeLayer.animateTime = -1;
+        occludeLayer.animateType = AnimateType.none;
+        this.render(occludeLayer);
 	}
 
+    /**
+     * 渲染 Layers
+     */
+    private render(layer: DisplayLayer) {
+        this.setData({ [`${ layer.key }$className`]: layer.className });
+    }
+
 	/**
 	 * 获取显示层
 	 */
@@ -161,10 +239,7 @@ class PopupLayer<
 
         displayLayer.isShow = true;
         displayLayer.isDisplay = true;
-		this.setData({ 
-            [`${ e }$isShow`]: true,
-            [`${ e }$isDisplay`]: true
-        });
+        this.render(displayLayer);
 
         this.emit("change", displayLayer);
 	};
@@ -182,16 +257,11 @@ class PopupLayer<
 
             displayLayer.isShow = false;
             displayLayer.isDisplay = false;
-            this.setData({ 
-                [`${ e }$isShow`]: false,
-                [`${ e }$isDisplay`]: false
-            });
+            this.render(displayLayer);
         } else {
 
             displayLayer.isShow = false;
-            this.setData({ 
-                [`${ e }$isShow`]: false 
-            });
+            this.render(displayLayer);
 
             // 开启遮蔽
             if (this.showOccludeWhenHide) {
@@ -200,9 +270,7 @@ class PopupLayer<
 
             displayLayer.disappearTimer = setTimeout(() => {
                 displayLayer.isDisplay = false;
-                this.setData({ 
-                    [`${ e }$isDisplay`]: false
-                });
+                this.render(displayLayer);
 
                 // 取消 timer
                 displayLayer.disappearTimer = undefined;
diff --git a/miniprogram/pages/Account/Account.ts b/miniprogram/pages/Account/Account.ts
index 8b8d035..b4206f4 100644
--- a/miniprogram/pages/Account/Account.ts
+++ b/miniprogram/pages/Account/Account.ts
@@ -17,7 +17,7 @@ import { TestLayerA } from "./TestLayerA";
     const userCard = manager.addModule(UserCard, "userCard");
 
     //#region test layer
-    // popupLayer.hideOtherWhenShow = false;
+    popupLayer.initLayers(["layerA", "layerB"]);
     const testLayerA = manager.addModule(TestLayerA, "testLayerA");
     userCard.on("clickChangeTheme", () => {
         popupLayer.emit("show", "layerA");
diff --git a/miniprogram/pages/Account/Account.wxml b/miniprogram/pages/Account/Account.wxml
index 99d4fc5..7dd5a9d 100644
--- a/miniprogram/pages/Account/Account.wxml
+++ b/miniprogram/pages/Account/Account.wxml
@@ -1,16 +1,16 @@
 <!-- 层遮蔽层 -->
-<view class="occlude {{  mask$occlude$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$occlude$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
+<view class="{{ mask$occlude$className }}" bindtap="mask$clickMask"></view>
 
 <!-- 蒙版 -->
-<view class="mask {{  mask$mask$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$mask$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
+<view class="{{ mask$mask$className }}" bindtap="mask$clickMask"></view>
 
 <!-- 层A -->
-<view class="layer {{  mask$layerA$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerA$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
+<view class="{{ mask$layerA$className }}" bindtap="mask$clickMask">
     <view class="card" style="height: 300px; line-height: 300px; text-align:center" catchtap="testLayerA$click">layerA(点击显示layerB)</view>
 </view>
 
 <!-- 层B -->
-<view class="layer {{  mask$layerB$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerB$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
+<view class="{{ mask$layerB$className }}" bindtap="mask$clickMask">
     <view class="card" style="height: 200px; line-height: 200px; text-align:center" catchtap>layerB</view>
 </view>