开发全局从下弹出组件及成绩单

components/popUp/index.js

@@ -0,0 +1,62 @@
+Component({
+    data: {
+        //弹窗显示控制 
+        showModalStatus: false,
+        animationData: {},
+        height: 0
+    },
+    lifetimes: {
+        attached() {
+            wx.getSystemInfo({
+                success: (res) => {
+                    this.setData({
+                        height: res.windowHeight * 0.7
+                    })
+                }
+            })
+        }
+    },
+    methods: {
+        //底部弹出框
+        showModal() {
+            // 背景遮罩层
+            var animation = wx.createAnimation({
+                duration: 200,
+                timingFunction: "linear",
+                delay: 0
+            })
+            animation.translateY(this.data.height).step()
+            this.setData({
+                animationData: animation.export(),
+                showModalStatus: true
+            })
+            setTimeout(function () {
+                animation.translateY(0).step()
+                this.setData({
+                    animationData: animation.export()
+                })
+            }.bind(this), 200)
+        },
+
+        //点击背景面任意一处时，弹出框隐藏
+        hideModal: function () {
+            //弹出框消失动画
+            var animation = wx.createAnimation({
+                duration: 200,
+                timingFunction: "linear",
+                delay: 0
+            })
+            animation.translateY(this.data.height).step()
+            this.setData({
+                animationData: animation.export(),
+            })
+            setTimeout(function () {
+                animation.translateY(0).step()
+                this.setData({
+                    animationData: animation.export(),
+                    showModalStatus: false
+                })
+            }.bind(this), 200)
+        },
+    }
+})

components/popUp/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/popUp/index.less

@@ -0,0 +1,32 @@
+/*使屏幕变暗  */
+.background_screen {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.4;
+    overflow: hidden;
+    z-index: 99;
+    color: #fff;
+}
+
+/*对话框 */
+.attr_box {
+    width: 100%;
+    height: 80vh;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    border-radius: 40px 40px 0 0;
+    border-radius: 40px 40px 0px 0px;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+    box-sizing: border-box;
+    /*兼容 IOS<11.2*/
+    // padding-bottom: constant(safe-area-inset-bottom);
+    /*兼容 IOS>11.2*/
+    // padding-bottom: env(safe-area-inset-bottom);
+}

components/popUp/index.wxml

@@ -0,0 +1,8 @@
+<view class="half-screen" wx:if="{{showModalStatus}}">
+    <!--屏幕背景变暗的背景  -->
+    <view class="background_screen" bindtap="hideModal"></view>
+    <!--弹出框  -->
+    <view animation="{{animationData}}" class="attr_box">
+        <slot></slot>
+    </view>
+</view>

components/popUp/index.wxss

@@ -0,0 +1,29 @@
+/*使屏幕变暗  */
+.background_screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.4;
+  overflow: hidden;
+  z-index: 99;
+  color: #fff;
+}
+/*对话框 */
+.attr_box {
+  width: 100%;
+  height: 80vh;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  border-radius: 40px 40px 0 0;
+  border-radius: 40px 40px 0px 0px;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
+  box-sizing: border-box;
+  /*兼容 IOS<11.2*/
+  /*兼容 IOS>11.2*/
+}

pages/invite/index.json

@@ -1,4 +1,6 @@
 {
-    "usingComponents": {},
+    "usingComponents": {
+        "popUp": "/components/popUp/index"
+    },
     "navigationBarTitleText": "永久vip免费拿！"
 }

pages/invite/index.less

@@ -150,4 +150,80 @@
             font-size: 24rpx;
         }
     }
+}
+
+.popBox {
+    height: 100%;
+    overflow: hidden;
+    background-color: #722FD3;
+    color: white;
+    border-top-left-radius: 20rpx;
+    border-top-right-radius: 20rpx;
+
+    .header {
+        position: relative;
+        padding: 30rpx 0;
+        letter-spacing: 2rpx;
+        text-align: center;
+        font-size: 32rpx;
+        background-color: #2D1F64;
+
+        .close {
+            position: absolute;
+            right: 20rpx;
+            top: 26rpx;
+            width: 50rpx;
+            height: 50rpx;
+            background-color: #9F6DEB;
+            border-radius: 50%;
+        }
+    }
+
+    .list {
+        height: calc(100% - 100rpx);
+        padding: 40rpx 20rpx 0;
+        box-sizing: border-box;
+
+        .item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24rpx;
+            padding: 10rpx 30rpx;
+            border-radius: 20rpx;
+            background-color: #9F6DEB;
+
+            .left {
+                display: flex;
+                align-items: center;
+
+                .num {
+                    font-size: 30rpx;
+                    width: 60rpx;
+                }
+
+                .avatar {
+                    width: 68rpx;
+                    height: 68rpx;
+                    border-radius: 50%;
+                    background-color: white;
+                }
+
+                .nickName {
+                    width: 200rpx;
+                    margin-left: 16rpx;
+                }
+            }
+
+            .time {
+                font-size: 26rpx;
+            }
+        }
+
+        .inviteBtn {
+            padding: 30rpx 0;
+            width: 390rpx;
+            height: 68rpx;
+        }
+    }
 }

pages/invite/index.wxml

@@ -17,7 +17,7 @@
                 </view>
             </view>
             <view class="btns" wx:if="{{count<2}}">
-                <image src="/static/cjd.png" class="transcript" />
+                <image src="/static/cjd.png" class="transcript" bindtap="showTranscript" />
                 <button class="resetBtn" open-type="share">
                     <image src="/static/yqb.png" class="inviteBtn" />
                 </button>
@@ -39,7 +39,7 @@
                 </view>
             </view>
             <view class="btns" wx:if="{{count>=2&count<5}}">
-                <image src="/static/cjd.png" class="transcript" />
+                <image src="/static/cjd.png" class="transcript" bindtap="showTranscript" />
                 <button class="resetBtn" open-type="share">
                     <image src="/static/yqb.png" class="inviteBtn" />
                 </button>
@@ -61,7 +61,7 @@
                 </view>
             </view>
             <view class="btns" wx:if="{{count>=5&&count<10}}">
-                <image src="/static/cjd.png" class="transcript" />
+                <image src="/static/cjd.png" class="transcript" bindtap="showTranscript" />
                 <button class="resetBtn" open-type="share">
                     <image src="/static/yqb.png" class="inviteBtn" />
                 </button>
@@ -107,7 +107,7 @@
                 </view>
             </view>
             <view class="btns" wx:if="{{count>=10&count<30}}">
-                <image src="/static/cjd.png" class="transcript" />
+                <image src="/static/cjd.png" class="transcript" bindtap="showTranscript" />
                 <button class="resetBtn" open-type="share">
                     <image src="/static/yqb.png" class="inviteBtn" />
                 </button>
@@ -169,7 +169,7 @@
                 </view>
             </view>
             <view class="btns" wx:if="{{count>=30}}">
-                <image src="/static/cjd.png" class="transcript" />
+                <image src="/static/cjd.png" class="transcript" bindtap="showTranscript" />
                 <button class="resetBtn" open-type="share">
                     <image src="/static/yqb.png" class="inviteBtn" />
                 </button>
@@ -192,4 +192,25 @@
         </view>
         <view class="explain">新用户通过分享链接进到小程序，邀请成功。</view>
     </view>
-</view>
+</view>
+<popUp id="popUp">
+    <view class="popBox">
+        <view class="header">
+            成绩单
+            <image src="/static/lollipop.png" class="close"  bindtap="closeTranscript"/>
+        </view>
+        <scroll-view scroll-y="true" class="list" enhanced show-scrollbar='{{false}}'>
+            <view class="item" wx:for="{{20}}" wx:key="index">
+                <view class="left">
+                    <view class="num">{{index}}</view>
+                    <image src="/static/concern.png" class="avatar" />
+                    <view class="nickName textOver">郑茜郑茜娅郑茜娅娅</view>
+                </view>
+                <view class="time">2023.04.13 21:12:21</view>
+            </view>
+            <button class="resetBtn" open-type="share">
+                <image src="/static/yqb.png" class="inviteBtn" />
+            </button>
+        </scroll-view>
+    </view>
+</popUp>

pages/invite/index.wxss

@@ -127,3 +127,68 @@
   margin-top: 40rpx;
   font-size: 24rpx;
 }
+.popBox {
+  height: 100%;
+  overflow: hidden;
+  background-color: #722FD3;
+  color: white;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+}
+.popBox .header {
+  position: relative;
+  padding: 30rpx 0;
+  letter-spacing: 2rpx;
+  text-align: center;
+  font-size: 32rpx;
+  background-color: #2D1F64;
+}
+.popBox .header .close {
+  position: absolute;
+  right: 20rpx;
+  top: 26rpx;
+  width: 50rpx;
+  height: 50rpx;
+  background-color: #9F6DEB;
+  border-radius: 50%;
+}
+.popBox .list {
+  height: calc(100% - 100rpx);
+  padding: 40rpx 20rpx 0;
+  box-sizing: border-box;
+}
+.popBox .list .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+  padding: 10rpx 30rpx;
+  border-radius: 20rpx;
+  background-color: #9F6DEB;
+}
+.popBox .list .item .left {
+  display: flex;
+  align-items: center;
+}
+.popBox .list .item .left .num {
+  font-size: 30rpx;
+  width: 60rpx;
+}
+.popBox .list .item .left .avatar {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 50%;
+  background-color: white;
+}
+.popBox .list .item .left .nickName {
+  width: 200rpx;
+  margin-left: 16rpx;
+}
+.popBox .list .item .time {
+  font-size: 26rpx;
+}
+.popBox .list .inviteBtn {
+  padding: 30rpx 0;
+  width: 390rpx;
+  height: 68rpx;
+}