1

pages/my/index.wxml

@@ -13,7 +13,7 @@
                     </view>
                 </view>
                 <view class="r">
-                    <text bindtap="toCommon" data-route="my/userInfo">详细</text>
+                    <text bindtap="toCommon" data-route="user/info">详细</text>
                     <van-icon name="arrow" />
                 </view>
             </view>

pages/user/list.js

@@ -1,66 +1,101 @@
-// pages/user/list.js
+const app = getApp()
 Page({
-
-    /**
-     * 页面的初始数据
-     */
     data: {
-
+        frameStyle: { useTop: true, name: '比赛场地', leftArrow: false, useBar: false },
+        oldList: [],
+        list: [],
+        limit: 5,
+        skip: 0,
+        page: 0,
+    },
+    // 详细信息
+    toView: function (e) {
+        let { item } = e.currentTarget.dataset;
+        wx.navigateTo({ url: `/pages/user/info?id=${item._id}` })
+    },
+    // 分页
+    upcroll: function () {
+        const that = this;
+        let page = that.data.page + 1;
+        that.setData({ page })
+        const skip = page * that.data.limit;
+        that.setData({ skip });
+        that.watchLogin()
     },
-
     /**
      * 生命周期函数--监听页面加载
      */
-    onLoad(options) {
+    onLoad: function (options) { },
+    // 监听用户是否登录
+    watchLogin: async function () {
+        const that = this;
+        // 监听用户是否登录，
+        wx.getStorage({
+            key: 'user',
+            success: async res => {
+                let info = { skip: that.data.skip, limit: that.data.limit };
+                let arr;
+                arr = await app.$get(`/newCourt/api/user`, { ...info });
+                if (arr.errcode == '0') {
+                    if (arr.data && arr.data.length > 0) that.setData({ list: [...that.data.list, ...arr.data] })
+                    else wx.showToast({ title: `没有更多数据`, icon: 'success', duration: 2000 })
+                }
+                else { wx.showToast({ title: `${arr.errmsg}`, icon: 'error', duration: 2000 }) }
+            },
+            fail: async res => {
+                wx.redirectTo({ url: '/pages/index/index' })
+            }
+        })
 
     },
-
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
-    onReady() {
+    onReady: function () {
 
     },
 
     /**
      * 生命周期函数--监听页面显示
      */
-    onShow() {
-
+    onShow: function () {
+        const that = this;
+        // 监听用户是否登录
+        that.watchLogin();
     },
 
     /**
      * 生命周期函数--监听页面隐藏
      */
-    onHide() {
+    onHide: function () {
 
     },
 
     /**
      * 生命周期函数--监听页面卸载
      */
-    onUnload() {
+    onUnload: function () {
 
     },
 
     /**
      * 页面相关事件处理函数--监听用户下拉动作
      */
-    onPullDownRefresh() {
-
+    onPullDownRefresh: function () {
+        console.log('1');
     },
 
     /**
      * 页面上拉触底事件的处理函数
      */
-    onReachBottom() {
-
+    onReachBottom: function () {
+        console.log('2');
     },
 
     /**
      * 用户点击右上角分享
      */
-    onShareAppMessage() {
+    onShareAppMessage: function () {
 
     }
 })

pages/user/list.json

@@ -1,3 +1,6 @@
 {
-    "usingComponents": {}
-}
+    "component": true,
+    "usingComponents": {
+      "mobile-main": "/commpents/mobile-frame/index"
+    }
+  }

pages/user/list.less

@@ -0,0 +1,89 @@
+.main {
+    height: var(--twoHeight);
+    background-color: var(--bgColor);
+
+    .one {
+        display: flex;
+        flex-direction: row;
+        width: 96vw;
+        padding: 2vw;
+
+        .one_1 {
+            flex-grow: 1;
+
+            input {
+                padding: 1vw 2vw 2vw 2vw;
+                border-radius: 2px;
+                font-size: var(--txtSize);
+                background-color: var(--f1Color);
+            }
+        }
+    }
+
+    .two {
+        flex-grow: 1;
+        position: relative;
+        width: 100vw;
+
+        .list {
+            background-color: var(--f9Color);
+            padding: 2vw;
+            margin: 0 2vw 2vw 2vw;
+
+            .name {
+                font-size: var(--titleSize);
+                font-weight: bold;
+                margin: 0 0 1vw 0;
+            }
+
+            .other {
+                margin: 0 0 1vw 0;
+
+                .other_1 {
+                    font-size: var(--txtSize);
+                    margin: 0 0 1vw 0;
+
+                    text {
+                        color: var(--labelColor);
+                    }
+
+                    text:last-child {
+                        color: var(--txtColor);
+                    }
+                }
+            }
+
+            .btn {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                text-align: center;
+                flex-wrap: wrap;
+
+                .btn_1 {
+                    width: 20vw;
+                    margin: 0 1vw 1vw 1vw;
+
+                    button {
+                        width: 100%;
+                        font-size: var(--btnSize);
+                        padding: 2vw;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.scroll-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .list-scroll-view {
+        display: flex;
+        flex-direction: column;
+    }
+}

pages/user/list.wxml

@@ -1,2 +1,31 @@
-<!--pages/user/list.wxml-->
-<text>pages/user/list.wxml</text>
+<mobile-main frameStyle="{{frameStyle}}">
+    <view slot="info" class="container main">
+        <view class="one">
+            <view class="one_1">
+                <input type="text" placeholder="请输入关键词" />
+            </view>
+        </view>
+        <view class="two">
+            <scroll-view scroll-y="true" class="scroll-view" bindscrolltolower="upcroll">
+                <view class="list-scroll-view">
+                    <view class="list" wx:for="{{list}}" wx:key="item">
+                        <view class="name">{{item.name}}</view>
+                        <view class="other">
+                            <view class="other_1">
+                                <text>用户类型：</text>
+                                <text>{{item.type=='-1'?'管理员':item.type=='0'?'普通用户':item.type=='1'?'裁判用户':'暂无'}}</text>
+                            </view>
+                            <view class="other_1">
+                                <text>手机号：</text>
+                                <text>{{item.phone||'暂无'}}</text>
+                            </view>
+                        </view>
+                        <view class="btn">
+                            <view class="btn_1"><button type="primary" bindtap="toView" data-item="{{item}}">详细信息</button></view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</mobile-main>

pages/user/list.wxss

@@ -1 +1,74 @@
-/* pages/user/list.wxss */
+.main {
+  height: var(--twoHeight);
+  background-color: var(--bgColor);
+}
+.main .one {
+  display: flex;
+  flex-direction: row;
+  width: 96vw;
+  padding: 2vw;
+}
+.main .one .one_1 {
+  flex-grow: 1;
+}
+.main .one .one_1 input {
+  padding: 1vw 2vw 2vw 2vw;
+  border-radius: 2px;
+  font-size: var(--txtSize);
+  background-color: var(--f1Color);
+}
+.main .two {
+  flex-grow: 1;
+  position: relative;
+  width: 100vw;
+}
+.main .two .list {
+  background-color: var(--f9Color);
+  padding: 2vw;
+  margin: 0 2vw 2vw 2vw;
+}
+.main .two .list .name {
+  font-size: var(--titleSize);
+  font-weight: bold;
+  margin: 0 0 1vw 0;
+}
+.main .two .list .other {
+  margin: 0 0 1vw 0;
+}
+.main .two .list .other .other_1 {
+  font-size: var(--txtSize);
+  margin: 0 0 1vw 0;
+}
+.main .two .list .other .other_1 text {
+  color: var(--labelColor);
+}
+.main .two .list .other .other_1 text:last-child {
+  color: var(--txtColor);
+}
+.main .two .list .btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  flex-wrap: wrap;
+}
+.main .two .list .btn .btn_1 {
+  width: 20vw;
+  margin: 0 1vw 1vw 1vw;
+}
+.main .two .list .btn .btn_1 button {
+  width: 100%;
+  font-size: var(--btnSize);
+  padding: 2vw;
+}
+.scroll-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.scroll-view .list-scroll-view {
+  display: flex;
+  flex-direction: column;
+}