替换原先积分排行

src/project/fengdu/AppMine/integralRank.vue

@@ -1,480 +0,0 @@
-<template>
-  <div class="integralRank" v-if="pageShow">
-    <div class="credit-points">
-      <div class="fixed-top">
-        <div class="header-tab">
-          <div class="tab-item" :class="{ active: tabIndex == index }" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}
-            <span class="active-line" v-if="tabIndex == index"></span>
-          </div>
-        </div>
-      </div>
-      <div class="rank">
-        <!-- <u-subsection :list="typeList" :current="typeCurrent" active-color="#4181FF" inactive-color="#666666" :bold="false" @change="typeChange"></u-subsection> -->
-        <div class="content-subsection">
-          <div class="type-subsection">
-            <div class="item" :class="index == typeCurrent ? 'item-active' : ''" v-for="(item, index) in typeList" :key="index" @click="typeChange(index)">{{ item }}</div>
-          </div>
-        </div>
-        <div class="faultage"></div>
-        <div class="header-content" v-if="userInfo.length">
-          <div class="item">
-            <span class="item-num">{{ inx + 1 }}</span>
-            <div class="user-img-content" v-if="userInfo[0].avatar_url">
-              <image :src="userInfo[0].avatar_url" alt="" class="user-img mar-b4" />
-            </div>
-            <div class="user-name-bg mar-b4 mar-r24" v-else>{{ formatName(userInfo[0].name) }}</div>
-            <span class="item-name">{{ userInfo[0].name }}</span>
-            <span class="item-point">{{ userInfo[0].integral }}</span>
-          </div>
-        </div>
-        <div class="faultage"></div>
-        <div v-if="list && list.length">
-          <div class="ranking-content">
-            <div class="item" v-if="list.length > 1">
-              <img src="https://cdn.cunwuyun.cn/dvcp/credit/2.png" alt="" class="top-img">
-              <img :src="list[1].avatar_url" alt="" class="user-img mar-b4" v-if="list[1].avatar_url">
-              <div class="user-name-bg mar-b4" v-else>{{ formatName(list[1].name) }}</div>
-              <p class="user-name mar-b8">{{ list[1].name }}</p>
-              <p class="item-num">{{ list[1].integral }}</p>
-            </div>
-            <div class="item-top item" v-if="list.length > 0">
-              <img src="https://cdn.cunwuyun.cn/dvcp/credit/1.png" alt="" class="top-img-one">
-              <img :src="list[0].avatar_url" alt="" class="user-img mar-b4" v-if="list[0].avatar_url">
-              <div class="user-name-bg mar-b4" v-else>{{ formatName(list[0].name) }}</div>
-              <p class="user-name mar-b8">{{ list[0].name }}</p>
-              <p class="item-num">{{ list[0].integral }}</p>
-            </div>
-            <div class="item" v-if="list.length > 2">
-              <img src="https://cdn.cunwuyun.cn/dvcp/credit/3.png" alt="" class="top-img">
-              <img :src="list[2].avatar_url" alt="" class="user-img mar-b4" v-if="list[2].avatar_url">
-              <div class="user-name-bg mar-b4" v-else>{{ formatName(list[2].name) }}</div>
-              <p class="user-name mar-b8">{{ list[2].name }}</p>
-              <p class="item-num">{{ list[2].integral }}</p>
-            </div>
-          </div>
-          <div class="ranking-list">
-            <div class="item" v-for="(item, index) in list" :key="index" v-if="index > 2">
-              <span class="item-num">{{ index+1 }}</span>
-              <img :src="item.avatar_url" alt="" class="user-img mar-b4" v-if="item.avatar_url">
-              <div class="user-name-bg mar-b4 mar-r24" v-else>{{ formatName(item.name) }}</div>
-              <span class="item-name">{{ item.name }}</span>
-              <span class="item-point">{{ item.integral }}</span>
-            </div>
-          </div>
-        </div>
-        <AiEmpty v-if="!list.length"/>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState } from 'vuex'
-export default {
-  name: "integralRank",
-  appName: "积分排行",
-  computed: {
-    ...mapState(['user', 'token'])
-  },
-  data() {
-    return {
-      // tabList: ['总榜','月榜','周榜'],
-      tabList: ['个人排行', '家庭排行'],
-      tabIndex: 0,
-      current: 1,
-      userInfo: {},
-      inx: 0,
-      pageShow: false,
-      list: [],
-      typeList: ['总榜', '月榜', '周榜'],
-      typeCurrent: 0
-    }
-  },
-  onLoad() {
-    this.getList()
-  },
-  computed: {
-    ...mapState(['user', 'token'])
-  },
-  methods: {
-    tabClick(index) {
-      this.tabIndex = index
-      this.typeCurrent = 0
-      this.getList()
-    },
-    getList() {// 积分排行
-      this.list = {}
-      var url = this.tabIndex == 1 ? `/app/appintegraluser/integralSortFDHouse` : `/app/appintegraluser/integralSortFD`  //tabIndex： 1家庭 0个人
-      this.$instance.post(url+`?type=${this.typeCurrent}&size=50&areaId=${this.user.areaId}`).then(res => {
-        if (res.code === 0) {
-          this.list = res.data.map(e=> ({...e, index: e.index}))
-          this.userInfo = res.data.filter(e => e.open_id === this.user.openId)
-          this.inx = res.data.findIndex(e=> e.open_id == this.user.openId)
-          this.pageShow = true
-        }
-      })
-    },
-    formatName(name) {
-      if (name == undefined) {
-        return
-      }
-      return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
-    },
-    typeChange(index) {
-      this.typeCurrent = index
-      this.getList()
-    }
-  },
-  onReachBottom() {
-    // if (this.list.length < 50) {
-    //   this.current++;
-    //   this.getList()
-    // }
-  },
-}
-</script>
-<style scoped lang="scss">
-@import "~dvcp-wui/common";
-
-.integralRank {
-  width: 100vw;
-  overflow-x: hidden;
-  background-color: #f3f6f9;
-
-  ::v-deep .header-tab {
-    background: #FFF;
-    height: 116px;
-    padding: 34px 0 42px 0;
-    border-bottom: 1px solid #eee;
-    .tab-item {
-      color: #222222;
-      font-size: 30px;
-      font-weight: 400;
-    }
-    .active {
-      font-size: 34px;
-      font-weight: 500;
-    }
-    .active-line {
-      background: #2D7DFF;
-      top: 82px;
-    }
-  }
-
-  .fixed-top {
-    z-index: 999;
-  }
-
-  .rank {
-    width: 100vw;
-    overflow-x: hidden;
-    height: calc(100% - 156px);
-    margin-top: 116px;
-    
-    .content-subsection {
-      width: 100%;
-      height: 116px;
-      padding: 22px 28px;
-      box-sizing: border-box;
-      background: #FFFF;
-      
-      .type-subsection {
-        width: 100%;
-        height: 100%;
-        padding: 4px;
-        box-sizing: border-box;
-        border-radius: 36px;
-        background-color: #f6f7f9;
-        display: flex;
-        .item {
-          flex: 1;
-          line-height: 64px;
-          text-align: center;
-          font-family: PingFangSC-Regular;
-          font-weight: 400;
-          font-size: 28px;
-          color: #666;
-        }
-        .item-active {
-          background: #FFF;
-          border-radius: 32px;
-          color: #4181FF;
-        }
-      }
-    }
-    
-
-    .header-content {
-      .item {
-        width: 100%;
-        height: 120px;
-        line-height: 120px;
-        background: #FFF;
-        padding: 0 64px;
-        box-sizing: border-box;
-        // border: 4px solid #2d7dffff;
-        display: flex;
-
-        .item-num {
-          display: inline-block;
-          width: 68px;
-          height: 112px;
-          line-height: 112px;
-          color: #858594;
-          font-size: 28px;
-          vertical-align: top;
-        }
-
-        .user-img-content {
-          display: inline-block;
-          width: 92px;
-          height: 92px;
-          padding: 4px;
-          box-sizing: border-box;
-          border-radius: 50%;
-          border: 1px solid #2D7DFF;
-          margin: 14px 24px 0 0;
-        }
-
-        .item-name {
-          color: #333;
-          font-size: 30px;
-          display: inline-block;
-          width: 240px;
-        }
-
-        .item-point {
-          display: inline-block;
-          width: calc(100% - 430px);
-          text-align: right;
-          font-size: 30px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #333;
-        }
-
-        .mar-r24 {
-          margin-right: 24px;
-        }
-      }
-    }
-
-    .faultage {
-      width: 100%;
-      height: 32px;
-      background: #f3f5f7;
-    }
-
-    .ranking-content {
-      padding: 94px 30px 0;
-      background: #fff;
-
-      .item {
-        display: inline-block;
-        width: 216px;
-        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
-        border-radius: 12px;
-        padding: 40px 0 76px 0;
-        text-align: center;
-        box-sizing: border-box;
-        position: relative;
-
-        .user-name {
-          font-size: 30px;
-          font-family: PingFang-SC-Medium, PingFang-SC;
-          font-weight: 500;
-          color: #333;
-          line-height: 42px;
-        }
-
-        .item-num {
-          font-size: 46px;
-          font-weight: 6000;
-          color: #2C51CE;
-          line-height: 54px;
-        }
-
-        .top-img {
-          width: 100%;
-          height: 34px;
-          position: absolute;
-          top: -11px;
-          left: 0;
-        }
-      }
-
-      .item-top {
-        margin: -46px 20px 0;
-        vertical-align: top;
-        height: 370px;
-
-        .user-img {
-          width: 104px;
-          height: 104px;
-        }
-
-        .user-name-bg {
-          width: 104px;
-          height: 104px;
-          border-radius: 50%;
-          background-color: #4E8EEE;
-          font-size: 28px;
-          line-height: 104px;
-          text-align: center;
-          color: #fff;
-        }
-
-        .top-img-one {
-          width: 100%;
-          position: absolute;
-          top: -22px;
-          left: 0;
-          height: 46px;
-        }
-      }
-    }
-
-    .ranking-list {
-      background-color: #fff;
-
-      .item {
-        width: 100%;
-        height: 120px;
-        line-height: 120px;
-        background: #FFF;
-        padding: 0 64px;
-        box-sizing: border-box;
-
-        .item-num {
-          display: inline-block;
-          width: 68px;
-          color: #858594;
-          font-size: 28px;
-          vertical-align: top;
-        }
-
-        .user-img {
-          margin-right: 24px;
-          vertical-align: middle;
-        }
-
-        .item-name {
-          color: #333;
-          font-size: 30px;
-          display: inline-block;
-          width: 240px;
-        }
-
-        .item-point {
-          display: inline-block;
-          width: 210px;
-          text-align: right;
-          font-size: 30px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: #333;
-        }
-
-        .mar-r24 {
-          margin-right: 24px;
-        }
-      }
-    }
-
-
-    .user-img {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-    }
-
-    .user-name-bg {
-      display: inline-block;
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background-color: #4E8EEE;
-      font-size: 28px;
-      line-height: 80px;
-      text-align: center;
-      color: #fff;
-    }
-
-    .mar-b4 {
-      margin-bottom: 8px;
-    }
-
-    .mar-b8 {
-      margin-bottom: 16px;
-    }
-
-    .detail-content {
-      width: 690px;
-      background: #FFF;
-      border-radius: 16px;
-      margin: 0 0 0 32px;
-      padding: 30px 30px 94px;
-      box-sizing: border-box;
-
-      .title {
-        font-size: 34px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #333;
-        line-height: 48px;
-        margin-bottom: 30px;
-      }
-
-      .item {
-        padding: 34px 0 32px 0;
-        border-bottom: 2px solid #ddd;
-        display: flex;
-
-        .item-info {
-          width: 500px;
-
-          p {
-            word-break: break-all;
-            font-size: 32px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #333;
-            line-height: 44px;
-          }
-
-          span {
-            display: inline-block;
-            margin-top: 8px;
-            font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #999;
-            line-height: 34px;
-          }
-        }
-
-        .item-num {
-          width: calc(100% - 500px);
-          text-align: right;
-          font-size: 36px;
-          font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
-          line-height: 50px;
-        }
-      }
-    }
-
-    .color-0 {
-      color: #2C51CE !important;
-    }
-
-    .color-1 {
-      color: #E6736E !important;
-    }
-
-    .fixed-top {
-      z-index: 999;
-    }
-}
-
-}
-</style>

src/project/fengdu/AppMine/myIntegral.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="bottom">
-        <div class="item" @click="toRank">
+        <div class="item">
           <div class="num">{{ info.serialNo || '0'}}</div>
           <div class="label">积分排行</div>
         </div>
@@ -77,9 +77,6 @@ export default {
         }
       })
     },
-    toRank() {
-      uni.navigateTo({url: `./integralRank`})
-    }
   },
   onReachBottom() {
     this.current++

src/project/fengdu/AppNewFarmerBank/integralRank.vue

@@ -3,23 +3,33 @@
     <div class="credit-points">
       <div class="fixed-top">
         <div class="header-tab">
-          <div class="tab-item" :class="{ active: tabIndex == index }" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}<span
+          <div class="tab-item" :class="{ active: tabIndex == index }" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}
-              class="active-line" v-if="tabIndex == index"></span></div>
+            <span class="active-line" v-if="tabIndex == index"></span>
+          </div>
         </div>
       </div>
       <div class="rank">
+        <!-- <u-subsection :list="typeList" :current="typeCurrent" active-color="#4181FF" inactive-color="#666666" :bold="false" @change="typeChange"></u-subsection> -->
+        <div class="content-subsection">
+          <div class="type-subsection">
+            <div class="item" :class="index == typeCurrent ? 'item-active' : ''" v-for="(item, index) in typeList" :key="index" @click="typeChange(index)">{{ item }}</div>
+          </div>
+        </div>
+        <div class="faultage"></div>
         <div class="header-content" v-if="userInfo.length">
           <div class="item">
             <span class="item-num">{{ inx + 1 }}</span>
-            <image :src="userInfo[0].avatar_url" alt="" class="user-img mar-b4" v-if="userInfo[0].avatar_url" />
+            <div class="user-img-content" v-if="userInfo[0].avatar_url">
+              <image :src="userInfo[0].avatar_url" alt="" class="user-img mar-b4" />
+            </div>
             <div class="user-name-bg mar-b4 mar-r24" v-else>{{ formatName(userInfo[0].name) }}</div>
             <span class="item-name">{{ userInfo[0].name }}</span>
             <span class="item-point">{{ userInfo[0].integral }}</span>
           </div>
         </div>
         <div class="faultage"></div>
-        <div>
+        <div v-if="list && list.length">
-          <div class="ranking-content" v-if="list && list.length">
+          <div class="ranking-content">
             <div class="item" v-if="list.length > 1">
               <img src="https://cdn.cunwuyun.cn/dvcp/credit/2.png" alt="" class="top-img">
               <img :src="list[1].avatar_url" alt="" class="user-img mar-b4" v-if="list[1].avatar_url">
@@ -42,7 +52,7 @@
               <p class="item-num">{{ list[2].integral }}</p>
             </div>
           </div>
-          <div class="ranking-list" v-if="list && list.length">
+          <div class="ranking-list">
             <div class="item" v-for="(item, index) in list" :key="index" v-if="index > 2">
               <span class="item-num">{{ index+1 }}</span>
               <img :src="item.avatar_url" alt="" class="user-img mar-b4" v-if="item.avatar_url">
@@ -52,6 +62,7 @@
             </div>
           </div>
         </div>
+        <AiEmpty v-if="!list.length"/>
       </div>
     </div>
   </div>
@@ -66,13 +77,16 @@ export default {
   },
   data() {
     return {
-      tabList: ['总榜','月榜','周榜'],
+      // tabList: ['总榜','月榜','周榜'],
+      tabList: ['个人排行', '家庭排行'],
       tabIndex: 0,
       current: 1,
       userInfo: {},
       inx: 0,
       pageShow: false,
-      list: []
+      list: [],
+      typeList: ['总榜', '月榜', '周榜'],
+      typeCurrent: 0
     }
   },
   onLoad() {
@@ -84,12 +98,13 @@ export default {
   methods: {
     tabClick(index) {
       this.tabIndex = index
+      this.typeCurrent = 0
       this.getList()
     },
     getList() {// 积分排行
       this.list = {}
-      var url = `/app/appintegraluser/integralSortFD?type=${this.tabIndex}&size=50&areaId=${this.user.areaId}`  //积分排行  
+      var url = this.tabIndex == 1 ? `/app/appintegraluser/integralSortFDHouse` : `/app/appintegraluser/integralSortFD`  //tabIndex： 1家庭 0个人
-      this.$instance.post(url).then(res => {
+      this.$instance.post(url+`?type=${this.typeCurrent}&size=50&areaId=${this.user.areaId}`).then(res => {
         if (res.code === 0) {
           this.list = res.data.map(e=> ({...e, index: e.index}))
           this.userInfo = res.data.filter(e => e.open_id === this.user.openId)
@@ -104,6 +119,10 @@ export default {
       }
       return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
     },
+    typeChange(index) {
+      this.typeCurrent = index
+      this.getList()
+    }
   },
   onReachBottom() {
     // if (this.list.length < 50) {
@@ -123,6 +142,9 @@ export default {
 
   ::v-deep .header-tab {
     background: #FFF;
+    height: 116px;
+    padding: 34px 0 42px 0;
+    border-bottom: 1px solid #eee;
     .tab-item {
       color: #222222;
       font-size: 30px;
@@ -134,6 +156,7 @@ export default {
     }
     .active-line {
       background: #2D7DFF;
+      top: 82px;
     }
   }
 
@@ -144,8 +167,41 @@ export default {
   .rank {
     width: 100vw;
     overflow-x: hidden;
-    height: calc(100% - 136px);
+    height: calc(100% - 156px);
-    margin-top: 96px;
+    margin-top: 116px;
+    
+    .content-subsection {
+      width: 100%;
+      height: 116px;
+      padding: 22px 28px;
+      box-sizing: border-box;
+      background: #FFFF;
+      
+      .type-subsection {
+        width: 100%;
+        height: 100%;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: 36px;
+        background-color: #f6f7f9;
+        display: flex;
+        .item {
+          flex: 1;
+          line-height: 64px;
+          text-align: center;
+          font-family: PingFangSC-Regular;
+          font-weight: 400;
+          font-size: 28px;
+          color: #666;
+        }
+        .item-active {
+          background: #FFF;
+          border-radius: 32px;
+          color: #4181FF;
+        }
+      }
+    }
+    
 
     .header-content {
       .item {
@@ -155,7 +211,8 @@ export default {
         background: #FFF;
         padding: 0 64px;
         box-sizing: border-box;
-        border: 4px solid #2d7dffff;
+        // border: 4px solid #2d7dffff;
+        display: flex;
 
         .item-num {
           display: inline-block;
@@ -167,10 +224,15 @@ export default {
           vertical-align: top;
         }
 
-
+        .user-img-content {
-        .user-img {
+          display: inline-block;
-          margin-right: 24px;
+          width: 92px;
-          vertical-align: middle;
+          height: 92px;
+          padding: 4px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          border: 1px solid #2D7DFF;
+          margin: 14px 24px 0 0;
         }
 
         .item-name {
@@ -182,7 +244,7 @@ export default {
 
         .item-point {
           display: inline-block;
-          width: calc(100% - 420px);
+          width: calc(100% - 430px);
           text-align: right;
           font-size: 30px;
           font-family: PingFangSC-Medium, PingFang SC;