#36 Add basic popups

miniprogram/modular/Popups/Popups.scss

@@ -0,0 +1,15 @@
+@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;
+}

miniprogram/modular/Popups/Popups.ts

@@ -0,0 +1,36 @@
+import { Modular, Manager } from "../../core/Module";
+
+class Popups<M extends Manager> extends Modular<M> {
+
+    public data? = {
+        
+        /**
+		 *  弹出层是否显示
+		 */
+		isShow: false
+    };
+
+    private disappearTimer?: number;
+
+    /**
+	 * 显示弹出层
+	 */
+	public showPopups() {
+		this.setData({ isShow: true });
+	}
+
+	/**
+	 * 隐藏弹出层
+	 */
+	public hidePopups() {
+		this.setData({ isShow: false });
+	}
+	
+	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,10 +3,12 @@ import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
 import { Mask } from "../../modular/Mask/Mask";
+import {Popups} from "../../modular/Popups/Popups"
 
 Manager.Page((manager) => {
+    const popups = manager.addModule(Popups,"popups")
     const mask = manager.addModule(Mask, "mask");
-    manager.addModule(UserCard, "userCard", { mask });
+    manager.addModule(UserCard, "userCard", { mask,popups });
     manager.addModule(MainFunction, "mainFunction");
     manager.addModule(FunctionList, "functionList");
 });

miniprogram/pages/Account/Account.wxml

@@ -1,6 +1,9 @@
 <!-- 蒙版 -->
 <view class="mask" bindtap="mask$handleClickMask" style="display:{{mask$isShow ? 'block' : 'none'}}"></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>
 }
 
 class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {
@@ -16,6 +18,7 @@ class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {
      */
     private handleChangeTheme() {
         this.depends?.mask.showMask();
+        this.depends?.popups.showPopups();
     }
 }
 

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
         }
       ]
     }