修改团队排名

pages/teamrank/index.js

@@ -10,16 +10,63 @@ Page({
         frameStyle: { useTop: true, name: '团队排名', leftArrow: true, useBar: false },
         // 主体高度
         infoHeight: '',
+        // 选项卡
+        tabs: {
+            active: 'a',
+            list: [
+                { title: '团队排名', name: 'a' },
+                { title: '团队积分', name: 'b' },
+            ],
+        },
+        //团队排名
+        ranking: [],
     },
     back: function () {
         wx.navigateBack({ url: '/pages/match/index' })
     },
+    // 选项卡
+    tabsChange: function (e) {
+        const that = this;
+        that.setData({ 'tabs.active': e.detail.name })
+    },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
         // 计算高度
-        this.searchHeight()
+        this.searchHeight();
+        // 监听用户是否登录
+        this.watchLogin();
+    },
+    // 监听用户是否登录
+    watchLogin: function () {
+        wx.getStorage({
+            key: 'token',
+            success: res => {
+                var that = this;
+                wx.request({
+                    url: `${app.globalData.publicUrl}/courtAdmin/api/matchteam`, //接口地址
+                    method: 'get',
+                    data: {},
+                    success(res) {
+                        if (res.data.errcode == 0) {
+                            that.setData({
+                                ranking: res.data.data,
+                            });
+                        } else {
+                            wx.showToast({
+                                title: res.data.errmsg,
+                                icon: 'none',
+                                duration: 2000
+                            })
+                        }
+                    }
+                })
+            },
+            fail: res => {
+                return wx.redirectTo({ url: '/pages/login/index', })
+            }
+        })
     },
     // 计算高度
     searchHeight: function () {

pages/teamrank/index.json

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

pages/teamrank/index.wxml

@@ -1,5 +1,45 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
   <view slot="info" class="main" style="height:{{infoHeight}}px;">
-    模板
+    <view class="one">
+      <e-tabs tabs="{{tabs}}" bind:tabsChange="tabsChange"></e-tabs>
+      <view wx:if="{{tabs.active=='a'}}" class="a">
+        <view class="head">
+          <view class="head1"><text>排名</text></view>
+          <view class="head2"><text>战队</text></view>
+          <view class="head3"><text>胜负</text></view>
+        </view>
+        <view class="list {{index < 3 ? 'select-item' : 'dis-select-item'}}" wx:key="item" wx:for="{{ranking}}">
+          <view class="item sortContent" v-for="(item,index) of list" :key="index">
+            <view class="pai {{index < 3 ? 'pai1' : 'pai'}}">{{index+1}}</view>
+            <image class="headtou1" src="{{item.logo[0].url}}"></image>
+            <view class="dui">
+              {{item.team_name}}
+            </view>
+            <view class="fen">
+              <text class="score1 {{index < 3 ? 'scorea' : 'scoreb'}}">{{item.win||0}}</text>/ <text>{{item.shu||0}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view wx:elif="{{tabs.active=='b'}}" class="b">
+        <view class="integral">
+          <text class="integral1">排名</text>
+          <text class="integral2">队伍</text>
+          <text class="integral3">总积分</text>
+        </view>
+        <view class="lists" wx:key="item" wx:for="{{ranking}}">
+          <view class="item sortContent" v-for="(item,index) of list" :key="index">
+            <view class="pai">{{index+1}}</view>
+            <image class="headtou2" src="{{item.logo[0].url}}"></image>
+            <view class="dui">
+              {{item.team_name}}
+            </view>
+            <view class="fen">
+              <text class="score1">{{item.integral||0}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </mobile-main>

pages/teamrank/index.wxss

@@ -1,4 +1,187 @@
 .main {
     position: relative;
     width: 100%;
+}
+
+.one .a .head {
+    background-color: rgb(43, 43, 43);
+    color: white;
+    width: 92%;
+    margin-left: 3%;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    border-bottom-right-radius: 0em;
+    border-bottom-left-radius: 0em;
+    padding: 0 0 32px 3.5px;
+    margin-top: 2%;
+}
+
+.one .a .head .head1 {
+    float: left;
+    width: 26%;
+    font-size: 14px;
+    margin-left: 19px;
+    margin-top: 6px;
+}
+
+.one .a .head .head2 {
+    float: left;
+    width: 40%;
+    font-size: 14px;
+    margin-left: 5px;
+    margin-top: 6px;
+}
+
+.one .a .head .head3 {
+    float: left;
+    width: 9%;
+    font-size: 14px;
+    margin-left: 29px;
+    margin-top: 6px;
+}
+
+.one .a .list {
+    width: 93%;
+    margin-left: 3%;
+    margin-bottom: 0.2%;
+}
+
+.select-item {
+    color: #ffff;
+}
+
+.dis-select-item {
+    margin-top: 3px;
+    background-color: white;
+    color: #000;
+}
+
+.one .a .list:nth-child(2) {
+    background-color: rgba(247, 31, 67);
+}
+
+.one .a .list:nth-child(3) {
+    background-color: rgba(245, 96, 133);
+}
+
+.one .a .list:nth-child(4) {
+    background-color: rgb(252, 172, 198);
+}
+
+.one .a .list .sortContent {
+    width: 88%;
+    height: 50upx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 3.5%;
+    margin-bottom: 0.2%;
+    padding: 10px 10px 10px 10px;
+}
+
+.one .a .list .sortContent .pai1 {
+    font-size: 20px;
+    font-style: italic;
+}
+
+.one .a .list .sortContent .headtou1 {
+    float: left;
+    margin-left: 35px;
+    width: 15%;
+    height: 46.04px;
+    overflow: hidden;
+    border-radius: 90px;
+}
+
+.one .a .list .sortContent .dui {
+    float: left;
+    width: 50%;
+    font-size: 14px;
+    margin-left: 7px;
+}
+
+.one .a .list .sortContent .fen {
+    float: left;
+    width: 15%;
+    font-weight: 500;
+}
+
+.one .a .list .sortContent .fen .scorea {
+    color: white;
+}
+
+.one .a .list .sortContent .fen .scoreb {
+    color: red;
+}
+
+.one .b .integral {
+    margin-top: 5px;
+    margin-bottom: 7px;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.one .b .integral {
+    margin-top: 5px;
+    margin-bottom: 7px;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.one .b .integral .integral1 {
+    padding: 0px 10px 0px 23px;
+}
+
+.one .b .integral .integral2 {
+    padding: 0px 10px 0px 43px;
+}
+
+.one .b .integral .integral3 {
+    padding: 0px 10px 0px 145px;
+}
+
+.one .b .lists {
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.one .b .lists:nth-child(even) {
+    background-color: rgb(255, 250, 250);
+}
+
+.one .b .lists .sortContent {
+    width: 88%;
+    height: 50upx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 3.5%;
+    margin-bottom: 0.2%;
+    padding: 10px 10px 10px 10px;
+}
+
+.one .b .lists .sortContent .pai {
+    margin-left: 5px;
+}
+
+.one .b .lists .sortContent .headtou2 {
+    float: left;
+    margin-left: 35px;
+    width: 15%;
+    height: 49.5px;
+    overflow: hidden;
+    border-radius: 90px;
+}
+
+.one .b .lists .sortContent .dui {
+    float: left;
+    width: 50%;
+    font-size: 14px;
+    margin-left: 7px;
+}
+
+.one .b .lists .sortContent .fen {
+    float: left;
+    width: 15%;
+    font-weight: 500;
 }