Merge pull request '(#37 ) Optimization function list' (#44 ) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/44
(#37 ) Optimization function list
2022-01-19 21:58:20 +08:00 · 2022-01-19 21:55:55 +08:00 · 2022-01-19 21:22:03 +08:00 · 2022-01-19 21:21:41 +08:00 · 2022-01-19 21:21:21 +08:00 · 2022-01-19 17:38:15 +08:00
10 changed files with 218 additions and 33 deletions
@@ -0,0 +1,8 @@
+
+view.mask {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background-color: rgba($color: #000000, $alpha: .2);
+	z-index: 1;
+}
@@ -0,0 +1,45 @@
+import { Modular, Manager } from "../../core/Module";
+
+class Mask<M extends Manager> extends Modular<M> {
+
+	public data? = {
+
+		/**
+		 * 蒙版的层级
+		 */
+		zIndex: 1,
+
+		/**
+		 * 蒙版是否显示
+		 */
+		isShow: false
+	};
+
+	private disappearTimer?: number;
+	
+	/**
+	 * 显示蒙版
+	 */
+	public showMask() {
+		this.setData({ isShow: true });
+	}
+
+	/**
+	 * 隐藏蒙版
+	 */
+	public hideMask() {
+		this.setData({ isShow: false });
+	}
+	
+	public override onLoad() {
+		this.setFunc(this.handleClickMask, "handleClickMask");
+        // Do something
+    }
+
+	private handleClickMask() {
+		this.hideMask();
+	}
+}
+
+export { Mask };
+export default Mask;
@@ -1,7 +1,10 @@
@import "./UserCard.scss";
@import "./MainFunction.scss";
@import "./FunctionList.scss";
+@import "../../modular/Mask/Mask.scss";

-view.container {
-    padding-top: 20px;
+view.container{
+    padding-top: 50rpx;
 }
+
+
@@ -2,9 +2,11 @@ import { Manager } from "../../core/Module";
 import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
+import { Mask } from "../../modular/Mask/Mask";

 Manager.Page((manager) => {
-    manager.addModule(UserCard, "userCard");
+    const mask = manager.addModule(Mask, "mask");
+    manager.addModule(UserCard, "userCard", { mask });
    manager.addModule(MainFunction, "mainFunction");
    manager.addModule(FunctionList, "functionList");
 });
@@ -1,3 +1,5 @@
+<!-- 蒙版 -->
+<view class="mask" bindtap="mask$handleClickMask" style="display:{{mask$isShow ? 'block' : 'none'}}"></view>

 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>
@@ -14,8 +16,10 @@

            <!-- 主题变换按钮 -->
            <view class="theme">
+                <view bindtap="userCard$changeTheme">
                    <image class="icon-sub" src="../../image/account/Account_Theme.svg" />
                </view>
+            </view>
            
            <!-- 用户昵称 -->
            <view class="nick h1">
@@ -27,7 +31,7 @@
                <view class="name">秦浩轩</view>
                <view class="certified">
                    <view class="certifi-info">已认证</view>
-                    <view class="text-icon">√</view>
+                    <image class="text-icon" src="../../image/account/Account_OK.svg"></image>
                </view>
            </view>

@@ -41,25 +45,43 @@

    <!--主要功能-->
    <view class="card main-function"><!--四个功能合在一起的容器-->
-        <view class="branch-funtion"><view><!--每个功能的容器-->
+        <view class="branch-funtion">
+            <view><!--每个功能的容器-->
                <image class="icon" src="../../image/account/Account_UserInfo.svg"></image><!--每个功能的图片-->
                <view>账号信息</view><!--每个功能的文字-->
-        </view></view>
+            </view>
+        </view>

-        <view class="branch-funtion"><view>
+        <view class="branch-funtion">
+            <view>
                <image class="icon" src="../../image/account/Account_DateList.svg"></image>
                <view>课表缓存</view>
-        </view></view>
+            </view>
+        </view>

-        <view class="branch-funtion"><view>
+        <view class="branch-funtion">
+            <view>
                <image class="icon" src="../../image/account/Account_Customer.svg"></image>
                <view>功能定制</view>
-        </view></view>
+            </view>
+        </view>

-        <view class="branch-funtion"><view style="border-right: 0px;">
+        <view class="branch-funtion">
+            <view style="border-right: 0px;">
                <image class="icon" src="../../image/account/Account_Settings.svg"></image>
                <view>更多设置</view>
-        </view></view>
+            </view>
+        </view>
+    </view>

+    <!-- 功能列表 -->
+    <view class="card function-list">
+        <view class="function" wx:for="{{functionList$functionList}}" wx:for-index="index" wx:key="id">
+            <view style="{{item.id == (functionList$functionList.length - 1) ? 'border-bottom: 0px' : ''}}">
+                <image class="icon func-icon" src="../../image/account/Account_{{item.iconUrl}}.svg" />
+                <view>{{item.displayName}}</view>
+                <image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
+            </view>
+        </view>
    </view>
 </view>
@@ -1 +1,43 @@
@import "../../app.scss";
+
+view.function-list {
+    margin-top: 50rpx;
+    margin-bottom: 50rpx;
+    padding: 0 0 !important;
+    width: 100% !important;
+
+    view.function {
+        padding: 0 20px;
+        width: calc( 100% - 40px );
+        height: 55px;
+        
+        > view {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
+
+            image.func-icon {
+                width: 26px;
+                height: 26px;
+            }
+
+            view {
+                margin-left: 15px;
+                flex-grow: 1;
+                font-size: .9em;
+            }
+
+            image.arrow {
+                width: 10px;
+                height: 10px;
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    view.function-list view.function > view {
+      border-bottom: 1px solid rgba($color: #ffffff, $alpha: .1);
+    }
+  }
@@ -1,9 +1,49 @@
 import { Modular, Manager } from "../../core/Module";

+interface IFunctionListItem {
+
+    /**
+     * id
+     */
+    id?: number
+
+    /**
+     * 显示名称
+     */
+    displayName: string;
+
+    /**
+     * 图标路径
+     */
+    iconUrl: string;
+}
+
+interface IFunctionListData {
+    functionList?: IFunctionListItem[];
+};
+
 class FunctionList<M extends Manager> extends Modular<M> {

+    public static readonly functionList: IFunctionListItem[] = [
+        { displayName: "赞助计划", iconUrl: "Sponsor" },
+        { displayName: "公众号", iconUrl: "PubilcAccount" },
+        { displayName: "自助问答", iconUrl: "FAQ" },
+        { displayName: "关于我们", iconUrl: "AboutUs" },
+        { displayName: "联系客服", iconUrl: "Support" }
+    ];
+
+    public data: IFunctionListData = {
+        functionList: undefined
+    };
+    
    public override onLoad() {
-        // Do something
+        console.log(FunctionList.functionList)
+        this.setData({
+            functionList: FunctionList.functionList.map((value, index) => {
+                value.id = index;
+                return value;
+            })
+        })
    }
 }

@@ -3,7 +3,7 @@
 //主要功能
 view.main-function {
  display: flex;
-  margin-top: 20px;
+  margin-top: 50rpx;
  padding: 0 !important;
  width: 100% !important;

@@ -26,7 +26,7 @@ view.main-function {
      view {
        text-align: center;
        margin-top: 5px;
-        font-size: .8em;
+        font-size: .9em;
      }
    }
  }
@@ -27,9 +27,17 @@ view.user-card {
            display: flex;
            justify-content: flex-end;

-            image {
+            view {
                width: 23px;
                height: 23px;
+                padding: 20px;
+                margin: -20px;
+                border-radius: 20px;
+                
+                image {
+                    width: 100%;
+                    height: 100%;
+                }
            }
        }
        
@@ -41,6 +49,7 @@ view.user-card {
            text-overflow: ellipsis;
        }

+        // 学生信息
        view.student {
            display: flex;
            align-items: center;
@@ -57,8 +66,10 @@ view.user-card {
                justify-content: center;
                align-items: center;

-                view.text-icon {
-                    margin-left: .3em;
+                image.text-icon {
+                    margin-left: .25em;
+                    width: 10px;
+                    height: 10px;
                }
            }
        }
@@ -1,9 +1,21 @@
 import { Modular, Manager } from "../../core/Module";
+import { Mask } from "../../modular/Mask/Mask";

-class UserCard<M extends Manager> extends Modular<M> {
+type IUserCardDependent<M extends Manager> = {
+    mask: Mask<M>
+}
+
+class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {

    public override onLoad() {
-        // Do something
+        this.setFunc(this.handleChangeTheme, "changeTheme")
+    }
+    
+    /**
+     * 处理主题更换
+     */
+    private handleChangeTheme() {
+        this.depends?.mask.showMask();
    }
 }
Author	SHA1	Message	Date
MrKBear	cf4dd727c5	Merge pull request '(#37 ) Optimization function list' (#44 ) from dev-mrkbear into master Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/44	2022-01-19 21:58:20 +08:00
MrKBear	49055e892c	(#37 ) Optimization function list	2022-01-19 21:55:55 +08:00
MrKBear	afedb81633	Merge pull request '(#37 ) Fix checkmark display' (#43 ) from dev-mrkbear into master Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/43	2022-01-19 21:22:03 +08:00
MrKBear	04b8bf365f	Merge branch 'dev-mrkbear' of http://git.mrkbear.com/MrKBear/mini-dlpu-v3 into dev-mrkbear	2022-01-19 21:21:41 +08:00
MrKBear	874c64829a	(#37 ) Add mask modular	2022-01-19 21:21:21 +08:00
MrKBear	82e1c0941e	(#37 ) Fix checkmark display	2022-01-19 17:38:15 +08:00
MrKBear	3119c862b1	Merge pull request '用户页面实现 #37 dev-sanaesy' (#40 ) from dev-sanaesy into master Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/40	2022-01-18 22:34:12 +08:00
MrKBear	23f46a24c9	(#37 )Add Function List	2022-01-18 22:30:05 +08:00
MrKBear	fc8aa19c67	Merge 'master' into dev-sanaesy	2022-01-18 21:36:37 +08:00
MrKBear	72448038d1	Merge pull request '用户界面实现(#37 )dev-gia_jie' (#41 ) from dev-gia_jie into master Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/41	2022-01-18 21:18:46 +08:00
sanaesy	95f1f6d484	(#37 )	2022-01-18 11:47:25 +08:00
sanaesy	54d87fc5db	(#37 )	2022-01-18 11:39:15 +08:00
sanaesy	f434ad531c	(#37 )	2022-01-18 11:06:11 +08:00
111	a92f2d06ea	(#37 )	2022-01-18 00:43:38 +08:00
111	45e8ef9322	(#37 )	2022-01-17 23:03:48 +08:00
sanae kochiya	7c1e4e441a	(#37 )	2022-01-17 22:57:05 +08:00