bug

src/project/tianfuxing/AppMy/AppMy.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="my">
     <div class="user" @click="toSetting">
-      <image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
+      <image :src="user.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
       <div class="right" v-if="isLogin">
-        <h2>张三</h2>
-        <p>文明天府星市民 Lv.1</p>
+        <h2>{{ user.nickName }}</h2>
+        <p v-if="user.levelTitle">{{ user.levelTitle }}</p>
       </div>
       <div class="right" v-else @click="toLogin">
         <h2>登录</h2>
@@ -14,27 +14,30 @@
     <div class="info">
       <div class="info-item">
         <h3>积分总额</h3>
-        <span>32</span>
+        <span>{{ user.integral }}</span>
+        <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/nav2.png" />
       </div>
       <div class="info-item">
         <h3>积分排名</h3>
-        <span>32</span>
+        <span>{{ user.integralOrder }}</span>
+        <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/nav1.png" />
       </div>
     </div>
     <div class="my-list">
       <h2>积分明细</h2>
       <div class="list">
-        <div class="item" v-for="(item, index) in 10" :key="index">
+        <div class="item" v-for="(item, index) in list" :key="index">
           <div class="left">
-            <h2>随手拍</h2>
-            <p>2022-07-21  10:10:13</p>
+            <h2>{{ item.detail }}</h2>
+            <p>{{ item.createTime }}</p>
           </div>
           <div class="right">
-            <i>+</i>
-            <span>5</span>
+            <i>{{ item.calcType === '0' ? '-' : '+' }}</i>
+            <span>{{ item.integral || 0 }}</span>
             <em>积分</em>
           </div>
         </div>
+        <AiEmpty v-if="!list.length"></AiEmpty>
       </div>
     </div>
   </div>
@@ -48,7 +51,9 @@
 
     data () {
       return {
-
+        list: [],
+        current: 1,
+        isMore: false
       }
     },
 
@@ -61,10 +66,9 @@
     },
 
     onLoad () {
-      console.log(this.user)
-      console.log(this.token)
       if (this.token) {
         this.getUserInfo()
+        this.getList()
       }
     },
 
@@ -85,8 +89,44 @@
         } else {
           this.getUserInfo()
         }
+      },
+
+      getList () {
+        if (this.isMore) return
+
+        this.$instance.post(`/appwechatintegraldetail/list`, null, {
+          params: {
+            current: this.current,
+            size: 10
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.$hideLoading()
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            this.isMore = true
+          }
+        }).catch(() => {
+          this.$hideLoading()
+        })
+      }
+    },
+
+      onReachBottom () {
+        this.getList()
       }
-    }
   }
 </script>
 
@@ -95,6 +135,10 @@
     padding-top: 32px;
     padding-bottom: 30px;
 
+    div {
+      box-sizing: border-box;
+    }
+
     .user, .info {
       display: flex;
       align-items: center;
@@ -194,16 +238,33 @@
 
       .info-item {
         display: flex;
+        position: relative;
         align-items: center;
         justify-content: space-between;
         font-size: 28px;
-        width: 192px;
+        width: 318px;
         height: 112px;
+        padding: 0 24px;
         color: #4D5596;
+        box-sizing: border-box;
 
-        div:last-child {
+        &:last-child {
           color: #316568;
         }
+
+        h3, span {
+          position: relative;
+          z-index: 2;
+        }
+
+        image {
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1;
+          width: 318px;
+          height: 112px;
+        }
       }
     }
   }