积分排行

src/apps/AppCreditPoints/AppCreditPoints.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="page">
     <div class="credit-points">
-      <div class="fixed-top">
-        <div class="header-tab" style="background-color: #197df0">
+      <AiTopFixed>
+        <div class="header-tab">
           <div
             class="tab-item"
             v-for="(item, index) in tabList"
@@ -12,42 +12,17 @@
             {{ item }}<span class="active-line" v-if="tabIndex == index"></span>
           </div>
         </div>
-        <div class="bg-blue"></div>
-        <div class="header-content">
-          <div class="item">
-            <div class="num color-5AAD6A">
-              {{
-                tabIndex == 0
-                  ? info["家庭积分"] || "0"
-                  : Number(info["个人积分"]) || "0"
-              }}
-            </div>
-            <div class="label">{{ tabIndex == 0 ? "家庭" : "个人" }}总分</div>
-          </div>
-          <div class="item" v-if="tabIndex != 1">
-            <div class="num color-4185F5">
-              {{
-                tabIndex == 0
-                  ? info["剩余总分"] || "0"
-                  : info["个人积分"] || "0"
-              }}
-            </div>
-            <div class="label">剩余总分</div>
-          </div>
-          <div class="item">
-            <div class="num color-CD413A">
-              {{
-                tabIndex == 0
-                  ? info["家庭排行"] || "0"
-                  : info["个人排行"] || "0"
-              }}
-            </div>
-            <div class="label">{{ tabIndex == 0 ? "家庭" : "个人" }}排名</div>
-          </div>
-          <img src="https://cdn.cunwuyun.cn/dvcp/credit/head.png" alt="" />
+        <div class="area-content">
+          <AiAreaPicker :areaId="user.areaId" :value="areaId" @select="areaSelect" :name.sync="areaName">
+            <img src="./components/img/local-icon.png" alt="">
+            <span class="label" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-down" color="#666" size="24"/>
+          </AiAreaPicker>
         </div>
-      </div>
-      <div v-if="!showDetail" style="padding-top: 432rpx">
+      </AiTopFixed>
+      <div class="line-bg"></div>
+      <div v-if="list.length">
         <div class="ranking-content" v-if="info['列表'] && info['列表'].length">
           <div class="item" v-if="info['列表'].length > 1">
             <img
@@ -125,7 +100,7 @@
               v-if="item.photo"
             />
             <div class="user-name-bg mar-b4 mar-r24" v-else>
-              {{ $formatName(item.name) }}
+              {{ formatName(item.name) }}
             </div>
             <span class="item-name"
               >{{ item.name }}{{ tabIndex == 0 ? "家" : "" }}</span
@@ -134,28 +109,7 @@
           </div>
         </div>
       </div>
-      <div class="detail-content" v-if="showDetail && list.length">
-        <div class="title">积分明细</div>
-        <div class="item" v-for="(item, index) in list" :key="index">
-          <div class="item-info">
-            <p>
-              {{ tabIndex == 0 ? item.residentName + ":" : ""
-              }}{{ item.description }}
-            </p>
-            <span>&nbsp;&nbsp;&nbsp;{{ item.doTime }}</span>
-          </div>
-          <div
-            class="item-num"
-            :class="'color-' + (item.changeIntegral >= 0 ? 0 : 1)"
-          >
-            {{
-              item.changeIntegral > 0
-                ? "+" + item.changeIntegral
-                : item.changeIntegral
-            }}
-          </div>
-        </div>
-      </div>
+      <AiEmpty v-else />
     </div>
   </div>
 </template>
@@ -166,39 +120,33 @@ export default {
   name: "AppCreditPoints",
   appName: '积分排行',
   computed: {
-    ...mapState(["user", "token"]),
+    ...mapState(["user"]),
   },
   data() {
     return {
       tabList: ["家庭积分", "个人积分"],
       tabIndex: 0,
-      showDetail: false, //是否显示积分明细
       info: {},
-      current: 1,
-      list: [],
-      areaId: "",
+      areaId: '',
+      areaName: '',
+      list: []
     };
   },
-  onLoad(options) {
-    // if (uni.getStorageSync("areaId")) {
-    //   this.areaId = uni.getStorageSync("areaId");
-    // } else {
-    //   this.areaId = this.$areaId;
-    // }
-    // if (options.type == "detail") {
-    //   this.showDetail = true;
-    //   this.getList();
-    // }
-    // uni.setNavigationBarTitle({
-    //   title: options.title,
-    // });
+  onLoad() {
+    this.areaName = this.user.areaName || ''
     this.getInfo();
   },
+  onShow() {
+    document.title = '积分排行'
+  },
   methods: {
+    areaSelect(e) {
+      this.areaId = e
+      this.getInfo()
+    },
     tabClick(index) {
       this.tabIndex = index;
       this.getInfo();
-      this.getList();
     },
     // 积分排行
     getInfo() {
@@ -211,29 +159,13 @@ export default {
         }
       });
     },
-    // 积分明细列表
-    getList() {
-      // var url = `/app/appvillagerintegraldetail/IntegralList?residentId=00255e188d1225f3fe022cb4eed44a84&type=${this.tabIndex}&current=${this.current}&size=10`  //积分明细
-      var url = `/app/appvillagerintegraldetail/IntegralList?residentId=${this.user.residentId}&type=${this.tabIndex}&current=${this.current}&size=10`; //积分明细
-      this.$http.post(url).then((res) => {
-        if (res.code === 0) {
-          if (this.current > res.data.pages) {
-            return;
-          }
-          const records =
-            this.current > 1
-              ? [...this.list, ...res.data.records]
-              : res.data.records;
-          this.list = records;
-        }
-      });
+    formatName(name) {
+      if (name == undefined) {
+        return
+      }
+      return name.substr(name.length - 2, name.length > 2 ? (name.length - 1) : name.length)
     },
   },
-  onReachBottom() {
-    if (!this.showDetail) return;
-    this.current = this.current + 1;
-    this.getList();
-  },
 };
 </script>
 <style scoped lang="scss">
@@ -244,7 +176,7 @@ export default {
     .bg-blue {
       width: 100%;
       height: 176rpx;
-      background-color: #197df0;
+      background-color: #3975C6;
     }
     .header-content {
       width: 690rpx;
@@ -471,7 +403,7 @@ export default {
   }
   .header-tab {
     height: 96rpx;
-    background-color: #4181FF;
+    background-color: #3975C6;
     padding: 20rpx 0;
     display: flex;
     align-items: center;
@@ -500,5 +432,28 @@ export default {
     transform: translate(-50%, -50%);
   }
 
+  .area-content {
+    width: 100%;
+    padding: 32px;
+    background-color: #fff;
+
+    img {
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+
+    .u-icon {
+      margin-left: 6px;
+    }
+  }
+  .line-bg{
+    width: 100%;
+    height: 6px;
+    background-color: #f3f6f9;
+  }
+  ::v-deep .content{
+    padding: 0;
+  }
 }
 </style>