持续集成分支

library/project/qianxinan/AppPointsRanking/AppPointsRanking.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="AppPointsRanking">
+    <AiTopFixed>
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="88" bg-color="#fff" font-size="28"
+        inactive-color="#666" :bar-style="barStyle" :active-item-style="activeStyle" active-color="#3399FF" @change="change">
+      </u-tabs>
+    </AiTopFixed>
+    <div class="list-data">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="flex-left">
+          <div class="item-rank">
+            <img :src="imgList[index]" alt="" v-if="index < 3">
+            <span v-else>{{index+1}}</span>
+          </div>
+          <div class="item-user">
+            <img :src="item.avatar" alt="">{{item.name}}
+          </div>
+        </div>
+        <div class="flex-right">{{item.score}}</div>
+      </div>
+    </div>
+    <AiEmpty description="暂无数据" v-if="!list.length"/>
+    <div class="list-data footer" v-if="currentTabs<1">
+      <div class="item">
+        <div class="flex-left">
+          <div class="item-rank">
+            <span>{{userNum}}</span>
+          </div>
+          <div class="item-user">
+            <img :src="userRank.avatar" alt="">{{userRank.name}}
+          </div>
+        </div>
+        <div class="flex-right">{{userRank.score}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    appName: '积分排行',
+    data() {
+      return {
+        list: [],
+        currentTabs: 0,
+        tabList: [
+          {
+            name: '总排行',
+          },
+          {
+            name: '县局排行',
+          },
+          {
+            name: '派出所排行',
+          },
+        ],
+        barStyle: {
+          'width': '24px',
+          'height': '3px',
+          'border-radius': '2px',
+          'bottom': '0px',
+          'background-color': '#3399FF'
+        },
+        activeStyle: {
+          'font-weight' : '400',
+          'color': '#000000'
+        },
+        imgList: [require('./img/top0.png'),require('./img/top1.png'),require('./img/top2.png')],
+        userRank: {},
+        userNum: ''
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+    },
+
+    created() {
+      this.getRanking()
+      this.getUserRank()
+    },
+
+    onShow() {
+      document.title = '积分排行'
+    },
+
+    methods: {
+      change(index) {
+        this.currentTabs = index
+        this.getRanking()
+      },
+      getRanking() {
+        this.$http.post(`/app/appscoredetail/scoreRanking?type=${this.currentTabs}&size=100`).then(res=> {
+          if(res?.data) {
+            this.list = res.data.records
+            this.list.map((item) => {
+              if(this.user.phone == item.phone) {
+                this.userRank = {...item}
+              }
+            })
+            if(this.currentTabs<1) {
+              this.getUserRank()
+            }
+          }
+        })
+      },
+      getUserRank() {
+        this.$http.post(`/app/appscoredetail/myScore`).then(res=> {
+          if(res?.data) {
+            this.userNum = res.data['积分排行']
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppPointsRanking {
+    min-height: 100%;
+    background-color: #F5F5F5;
+    padding-bottom: 32px;
+    ::v-deep .content {
+      padding: 0;
+      min-height: 0;
+    }
+    ::v-deep .fixed {
+      min-height: 0;
+    }
+    .list-data {
+      padding: 32px;
+      margin-bottom: 80px;
+      .item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 24px 48px 24px 32px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 32px;
+        margin-bottom: 16px;
+        .flex-left {
+          display: flex;
+          .item-rank {
+            width: 152px;
+            img {
+              padding-top: 12px;
+              width: 56px;
+              height: 56px;
+              vertical-align: middle;
+            }
+            span {
+              line-height: 80px;
+              font-family: SFPro-SNaNpxiboldItalic;
+              font-weight: SemiboldItalic;
+              font-size: 40px;
+              color: #DDD;
+            }
+          }
+          .item-user {
+            line-height: 80px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            font-size: 32px;
+            color: #333;
+            img {
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
+              margin-right: 16px;
+              vertical-align: middle;
+            }
+          }
+        }
+        .flex-right {
+          font-family: SFPro-SNaNpxibold;
+          font-weight: 600;
+          font-size: 36px;
+          color: #FF9343;
+          line-height: 42px;
+          padding-top: 20px;
+        }
+      }
+    }
+    .footer {
+      padding: 0;
+      margin-bottom: 0;
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      .item {
+        border-radius: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>