比赛管理

pages/match/index.js

@@ -2,12 +2,79 @@ const app = getApp()
 Page({
     data: {
         frameStyle: { useTop: true, name: '比赛管理', leftArrow: false, useBar: true },
+        searchInfo: {},
+        typeList: [
+            { label: '其他', value: '0' },
+            { label: '羽毛球', value: '1' },
+            { label: '篮球', value: '2' },
+            { label: '足球', value: '3' },
+        ],
+        statusList: [
+            { label: '计划中', value: '0' },
+            { label: '报名中', value: '1' },
+            { label: '进行中', value: '2' },
+            { label: '已结束', value: '3' },
+        ],
+        list: [
+            {
+                id: '1',
+                title: '2021年中国中学生羽毛球总决赛',
+                time: '2022-8-12',
+                grade: '省市系列总决赛',
+                address: '吉林省长春市人民体育馆',
+                type: '3',
+                logo: [{ url: '/image/wechat.png' }],
+                status: '1'
+            },
+            {
+                id: '2',
+                title: '2021年中国中学生羽毛球总决赛',
+                time: '2022-8-12',
+                grade: '省市系列总决赛',
+                address: '吉林省长春市人民体育馆',
+                type: '1',
+                logo: [{ url: '/image/wechat.png' }],
+                status: '2'
+            },
+            {
+                id: '2',
+                title: '2021年中国中学生羽毛球总决赛',
+                time: '2022-8-12',
+                grade: '省市系列总决赛',
+                address: '吉林省长春市人民体育馆',
+                type: '1',
+                logo: [{ url: '/image/wechat.png' }],
+                status: '2'
+            },
+            {
+                id: '2',
+                title: '2021年中国中学生羽毛球总决赛',
+                time: '2022-8-12',
+                grade: '省市系列总决赛',
+                address: '吉林省长春市人民体育馆',
+                type: '1',
+                logo: [{ url: '/image/wechat.png' }],
+                status: '2'
+            }
+        ]
     },
     // 跳转菜单
     tabPath(e) {
         let { route } = e.detail.detail;
         if (route) wx.redirectTo({ url: `/${route}` })
     },
+    // 选择类型
+    typeChange: function (e) {
+        const that = this;
+        let data = that.data.typeList[e.detail.value];
+        if (data) that.setData({ 'searchInfo.type': data.value })
+    },
+    // 状态选择
+    statusChange: function (e) {
+        const that = this;
+        let data = that.data.statusList[e.detail.value];
+        that.setData({ 'searchInfo.status': data.value });
+    },
     /**
      * 生命周期函数--监听页面加载
      */

pages/match/index.less

@@ -30,6 +30,131 @@
     }
 
     .two {
-        background-color: #0000ff;
+        width: 96vw;
+        margin: 2vw;
+
+        .two_1 {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            padding: 2vw;
+            background-color: var(--f1Color);
+        }
+
+        .two_2 {
+            width: 96vw;
+            margin: 2vw 0;
+            min-height: 65vh;
+            position: relative;
+            background-color: var(--mainColor);
+
+            .list {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                background-color: var(--f1Color);
+                border-bottom: 1px dashed var(--f85Color);
+                width: 96vw;
+                padding: 2vw;
+                margin: 0 0 2vw 0;
+
+                .list_1 {
+                    position: relative;
+                    width: 92vw;
+                    height: 110px;
+
+                    .one_1 {
+                        height: 80px;
+                    }
+
+                    .one_2 {
+                        position: absolute;
+                        top: 10vw;
+                        width: 92vw;
+                        text-align: center;
+
+                        .image {
+                            width: 60px;
+                            height: 60px;
+                            border-radius: 90px;
+                            background-color: var(--mainColor);
+                        }
+                    }
+
+                }
+
+                .list_2 {
+                    width: 92vw;
+                    text-align: center;
+
+                    .title {
+                        font-size: var(--font18Szie);
+                        font-weight: bold;
+                        margin: 0 0 2vw 0;
+                    }
+                }
+
+                .list_3 {
+                    display: flex;
+                    flex-wrap: wrap;
+                    flex-direction: row;
+                    justify-content: space-between;
+
+                    .other {
+                        margin: 0 0 1vw 0;
+                        font-size: var(--font16Size);
+                        color: var(--f85Color);
+                    }
+                }
+
+                .list_4 {
+                    width: 92vw;
+                    text-align: center;
+                    padding: 2vw 0;
+
+                    .text {
+                        padding: 1vw 2vw;
+                        color: var(--mainColor);
+                        border-radius: 15px;
+                        font-size: var(--font14Size);
+                    }
+
+                    .color0 {
+                        background-color: #FFA500;
+                    }
+
+                    .color1 {
+                        background-color: #8B0000;
+                    }
+
+                    .color2 {
+                        background-color: #006400;
+                    }
+
+                    .color3 {
+                        background-color: #808080;
+                    }
+                }
+            }
+
+            .list:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .scroll-view {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            .list-scroll-view {
+                display: flex;
+                flex-wrap: wrap;
+                align-content: flex-start;
+                justify-content: space-between;
+            }
+        }
     }
 }

pages/match/index.wxml

@@ -9,7 +9,42 @@
             </view>
         </view>
         <view class="two">
-            比赛管理
+            <view class="two_1">
+                <picker mode="selector" bindchange="typeChange" value="{{searchInfo.type}}" name="type" range-key='label' range="{{typeList}}">
+                    <view class="input">{{searchInfo.type=='0'?'其他':searchInfo.type=='1'?'羽毛球':searchInfo.type=='2'?'篮球':searchInfo.type=='3'?'足球':'请选择运动类型'}}</view>
+                </picker>
+                <picker mode="selector" bindchange="statusChange" value="{{searchInfo.status}}" name="status" range-key='label' range="{{statusList}}">
+                    <view class="input">{{searchInfo.status=='0'?'计划中':searchInfo.status=='1'?'报名中':searchInfo.status=='2'?'进行中':searchInfo.status=='3'?'已结束':'请选择比赛状态'}}</view>
+                </picker>
+            </view>
+            <view class="two_2">
+                <scroll-view scroll-y="true" class="scroll-view" bindscrolltolower="toPage">
+                    <view class="list-scroll-view">
+                        <view class="list" wx:for="{{list}}" wx:key="item">
+                            <view class="list_1">
+                                <view class="one_1">
+                                    <image style="width: 100%;height: 100%; background-color: #eeeeee;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic01.1sucai.com%2F180213%2F330819-1P21310295866.jpg&refer=http%3A%2F%2Fpic01.1sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662879913&t=de473850e710092af364df8ad980c8b9"></image>
+                                </view>
+                                <view class="one_2">
+                                    <image class="image" src="{{item.logo&&item.logo.length>0?item.logo[0].url:''}}"></image>
+                                </view>
+                            </view>
+                            <view class="list_2">
+                                <view class="title">{{item.title}}</view>
+                            </view>
+                            <view class="list_3">
+                                <view class="other">时间：{{item.time}}</view>
+                                <view class="other">等级：{{item.grade}}</view>
+                                <view class="other">类型：{{item.type=='0'?'其他':item.type=='1'?'羽毛球':item.type=='2'?'篮球':'足球'}}</view>
+                                <view class="other">地点：{{item.address}}</view>
+                            </view>
+                            <view class="list_4">
+                                <text class="text color{{item.status}}">{{item.status=='0'?'计划中':item.status=='1'?'报名中':item.status=='2'?'进行中':'已结束'}}</text>
+                            </view>
+                        </view>
+                    </view>
+                </scroll-view>
+            </view>
         </view>
     </view>
 </mobile-main>

pages/match/index.wxss

@@ -25,5 +25,109 @@
   font-size: var(--font14Size);
 }
 .main .two {
-  background-color: #0000ff;
+  width: 96vw;
+  margin: 2vw;
+}
+.main .two .two_1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 2vw;
+  background-color: var(--f1Color);
+}
+.main .two .two_2 {
+  width: 96vw;
+  margin: 2vw 0;
+  min-height: 65vh;
+  position: relative;
+  background-color: var(--mainColor);
+}
+.main .two .two_2 .list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--f1Color);
+  border-bottom: 1px dashed var(--f85Color);
+  width: 96vw;
+  padding: 2vw;
+  margin: 0 0 2vw 0;
+}
+.main .two .two_2 .list .list_1 {
+  position: relative;
+  width: 92vw;
+  height: 110px;
+}
+.main .two .two_2 .list .list_1 .one_1 {
+  height: 80px;
+}
+.main .two .two_2 .list .list_1 .one_2 {
+  position: absolute;
+  top: 10vw;
+  width: 92vw;
+  text-align: center;
+}
+.main .two .two_2 .list .list_1 .one_2 .image {
+  width: 60px;
+  height: 60px;
+  border-radius: 90px;
+  background-color: var(--mainColor);
+}
+.main .two .two_2 .list .list_2 {
+  width: 92vw;
+  text-align: center;
+}
+.main .two .two_2 .list .list_2 .title {
+  font-size: var(--font18Szie);
+  font-weight: bold;
+  margin: 0 0 2vw 0;
+}
+.main .two .two_2 .list .list_3 {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.main .two .two_2 .list .list_3 .other {
+  margin: 0 0 1vw 0;
+  font-size: var(--font16Size);
+  color: var(--f85Color);
+}
+.main .two .two_2 .list .list_4 {
+  width: 92vw;
+  text-align: center;
+  padding: 2vw 0;
+}
+.main .two .two_2 .list .list_4 .text {
+  padding: 1vw 2vw;
+  color: var(--mainColor);
+  border-radius: 15px;
+  font-size: var(--font14Size);
+}
+.main .two .two_2 .list .list_4 .color0 {
+  background-color: #FFA500;
+}
+.main .two .two_2 .list .list_4 .color1 {
+  background-color: #8B0000;
+}
+.main .two .two_2 .list .list_4 .color2 {
+  background-color: #006400;
+}
+.main .two .two_2 .list .list_4 .color3 {
+  background-color: #808080;
+}
+.main .two .two_2 .list:last-child {
+  border-bottom: none;
+}
+.main .two .scroll-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.main .two .scroll-view .list-scroll-view {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: space-between;
 }