开发我的邀请页面

components/empty/index.less

@@ -9,7 +9,7 @@
     height: 280rpx;
   }
 
-  .message {
+  .empty-message {
     width: 500rpx;
     text-align: center;
     margin-top: 30rpx;

components/empty/index.wxml

@@ -1,4 +1,4 @@
 <view class="empty">
     <image src="/static/null.png" class="nullImg" mode="" />
-    <view class="message">{{message}}</view>
+    <view class="empty-message">{{message}}</view>
 </view>

components/empty/index.wxss

@@ -8,7 +8,7 @@
   width: 364rpx;
   height: 280rpx;
 }
-.empty .message {
+.empty .empty-message {
   width: 500rpx;
   text-align: center;
   margin-top: 30rpx;

salesperson/pages/history/index.js

@@ -1,11 +1,9 @@
-// salesperson/pages/history/index.js
-Page({
+import reachBottom from '~/mixins/reachBottom';
 
-    /**
-     * 页面的初始数据
-     */
+Page({
+    behaviors: [reachBottom],
     data: {
-
+        date: '2023-09',
     },
 
     /**
@@ -14,53 +12,15 @@ Page({
     onLoad(options) {
 
     },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
-
+    bindDateChange: function (e) {
+        console.log('picker发送选择改变，携带值为', e.detail.value)
+        this.setData({
+            date: e.detail.value
+        })
     },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
+    loadMore() {
+        /*  this.getData(getCategoryWorks, {
+             columnId
+         }); */
     },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload() {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh() {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage() {
-
-    }
 })

salesperson/pages/history/index.json

@@ -1,4 +1,6 @@
 {
-    "usingComponents": {},
+    "usingComponents": {
+        "emptyBg": "/components/empty/index"
+    },
     "navigationBarTitleText": "我的邀请"
 }

salesperson/pages/history/index.less

@@ -0,0 +1,76 @@
+.container {
+    padding: 0 14rpx;
+
+    .message {
+        padding: 14rpx 0;
+        text-align: center;
+        font-size: 24rpx;
+        color: #FE9221;
+        background: #FFFAEA;
+    }
+
+    .total {
+        margin: 16rpx 0 0;
+        background: #FFFFFF;
+        border-radius: 20rpx;
+
+        .box {
+            padding: 27rpx 31rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 24rpx;
+        }
+    }
+
+    .historyList {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        padding-top: 250rpx;
+        box-sizing: border-box;
+        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+
+        .user {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20rpx;
+            padding: 20rpx 28rpx;
+            background: #FFFFFF;
+            border-radius: 20rpx;
+
+            .avatar {
+                width: 64rpx;
+                height: 64rpx;
+                background: #D8D8D8;
+                border-radius: 50%;
+                border: 1rpx solid #979797;
+            }
+
+            .info {
+                flex: 1;
+                margin-left: 30rpx;
+
+                .nickName {
+                    margin-bottom: 6rpx;
+                    font-size: 30rpx;
+                }
+
+                .addTime {
+                    font-size: 26rpx;
+                    color: #7B7B7B;
+                }
+            }
+        }
+    }
+}
+
+.empty {
+    margin-top: 190rpx;
+
+    .nullImg {
+        transform: scale(0.8);
+    }
+}

salesperson/pages/history/index.wxml

@@ -1,3 +1,31 @@
 <view class="container">
-    
+    <view class="message">被邀请用户为首次登录的用户</view>
+    <view class="total">
+        <view class="box">
+            <view class="label">统计日期</view>
+            <picker mode="date" value="{{date}}" fields="month" start="2023-09" end="2100-09"
+                bindchange="bindDateChange">
+                <view class="picker">
+                    {{date}} >
+                </view>
+            </picker>
+        </view>
+        <view class="box">
+            <view class="label">成功邀请</view>
+            <view>10人</view>
+        </view>
+    </view>
+    <scroll-view class="historyList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
+        bindscrolltolower='loadMore'>
+        <view class="user" wx:for="{{20}}" wx:key='{{index}}'>
+            <image src="https://reader-wx.ai160.com/reader/resource/20230215/1676472360368723.jpg" class="avatar" />
+            <view class="info">
+                <view class="nickName">刘聪{{index}}</view>
+                <view class="addTime">
+                    加入时间 ：20230-08-27 14:00
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+    <emptyBg wx:if="{{nullList}}" message="暂无成功邀请记录"></emptyBg>
 </view>

salesperson/pages/history/index.wxss

@@ -0,0 +1,65 @@
+.container {
+  padding: 0 14rpx;
+}
+.container .message {
+  padding: 14rpx 0;
+  text-align: center;
+  font-size: 24rpx;
+  color: #FE9221;
+  background: #FFFAEA;
+}
+.container .total {
+  margin: 16rpx 0 0;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.container .total .box {
+  padding: 27rpx 31rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 24rpx;
+}
+.container .historyList {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  padding-top: 250rpx;
+  box-sizing: border-box;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.container .historyList .user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding: 20rpx 28rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.container .historyList .user .avatar {
+  width: 64rpx;
+  height: 64rpx;
+  background: #D8D8D8;
+  border-radius: 50%;
+  border: 1rpx solid #979797;
+}
+.container .historyList .user .info {
+  flex: 1;
+  margin-left: 30rpx;
+}
+.container .historyList .user .info .nickName {
+  margin-bottom: 6rpx;
+  font-size: 30rpx;
+}
+.container .historyList .user .info .addTime {
+  font-size: 26rpx;
+  color: #7B7B7B;
+}
+.empty {
+  margin-top: 190rpx;
+}
+.empty .nullImg {
+  transform: scale(0.8);
+}