(#36) Add popups

miniprogram/modular/Popups/Popups.scss

@@ -0,0 +1,49 @@
+@import "../../app.scss";
+
+view.popups {
+    position: fixed;
+    width: 75%;
+    height: 75%;
+    margin:auto;
+    left:0;
+    right:0;
+    top:0;
+    bottom:0;
+    background-color: $theme-color-light-layout;
+    border-radius: 15px;
+    z-index: 2;
+}
+view.popups.block {
+    display: block;
+}
+view.popups.none {
+    display: none;
+}
+
+view.popups.show {
+    animation-duration: 0.5s;
+    animation-name: show;
+}
+
+view.popups.hide {
+    animation-duration: 0.5s;
+    animation-name: hide;
+}
+
+@keyframes show{
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes hide{
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}

miniprogram/modular/Popups/Popups.ts

@@ -0,0 +1,58 @@
+import { Modular, Manager } from "../../core/Module";
+
+class Popups<M extends Manager> extends Modular<M> {
+
+     /**
+     * 动画运行时间
+     */
+    public static readonly animateTime: number = 100;
+
+    public data? = {
+        
+        /**
+		 *  弹出层是否显示
+		 */
+        display:false,
+
+        /**
+         * 弹出层动画
+         */
+        isShow:false
+    };
+    
+    disappearTimer: number | undefined;
+
+    /**
+	 * 显示弹出层
+	 */
+	public showPopups() {
+    this.setData({
+      isShow:true,
+      display:true
+    });
+	}
+
+	/**
+	 * 隐藏弹出层
+	 */
+	public hidePopups() {
+		this.setData({
+            isShow:false
+        });
+        
+        this.disappearTimer = setTimeout(() => {
+            this.setData({ 
+                display: false
+            });
+        }, Popups.animateTime);
+
+	}
+	
+	public override onLoad() {
+        // Do something
+    }
+
+}
+
+export { Popups };
+export default Popups;

miniprogram/pages/Account/Account.scss

@@ -2,6 +2,7 @@
 @import "./MainFunction.scss";
 @import "./FunctionList.scss";
 @import "../../modular/Mask/Mask.scss";
+@import "../../modular/Popups/Popups.scss";
 
 view.container{
     padding-top: 50rpx;

miniprogram/pages/Account/Account.ts

@@ -3,6 +3,7 @@ import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
 import { Mask } from "../../modular/Mask/Mask";
+import {Popups} from "../../modular/Popups/Popups"
 
 (async () => {
 
@@ -12,8 +13,10 @@ import { Mask } from "../../modular/Mask/Mask";
     // 添加蒙版 Modular
     const mask = manager.addModule(Mask, "mask");
 
+    const popups = manager.addModule(Popups,"popups")
+
     // 添加 UserCard Modular
-    manager.addModule(UserCard, "userCard", { mask });
+    manager.addModule(UserCard, "userCard", { mask, popups });
 
     // 添加 MainFunction Modular
     manager.addModule(MainFunction, "mainFunction");

miniprogram/pages/Account/Account.wxml

@@ -2,6 +2,9 @@
 <view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
     bindtap="mask$handleClickMask"></view>
 
+<!-- 弹出层 -->
+<view class="popups" style="display:{{popups$isShow ? 'block' : 'none'}}"></view>
+
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>
 

miniprogram/pages/Account/UserCard.ts

@@ -1,8 +1,10 @@
+import Popups from "modular/Popups/Popups";
 import { Modular, Manager } from "../../core/Module";
 import { Mask } from "../../modular/Mask/Mask";
 
 type IUserCardDependent<M extends Manager> = {
     mask: Mask<M>
+    popups: Popups<M>
 }
 
 type IUserCardEvent = {
@@ -23,6 +25,7 @@ class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>, IUse
      * 处理主题更换
      */
     private handleChangeTheme() {
+        this.depends?.popups.showPopups();
         this.depends?.mask.emit("show", void 0);
         this.emit("clickChangeTheme", void 0);
     }

project.private.config.json

@@ -1,4 +1,5 @@
 {
+  "setting": {},
   "condition": {
     "plugin": {
       "list": []
@@ -16,6 +17,12 @@
           "pathName": "pages/Account/Account",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "pages/Account/Account",
+          "pathName": "pages/Account/Account",
+          "query": "",
+          "scene": null
         }
       ]
     }