cps：粉丝列表

htmldev/cps/src/views/fans/child/main.vue

@@ -25,13 +25,13 @@
         <div class="wrap">
           <div class="left">
             <div class="avatar">
-              <img src="" alt="">
+              <img :src="item.user_head_img_url" alt="">
             </div>
-            <p class="name">刘亚楠</p>
+            <p class="name">{{ item.user_nickname }}</p>
           </div>
           <p class="status">未激活</p>
         </div>
-        <p class="date">加入时间：2020-12-23 19:30</p>
+        <p class="date">加入时间：{{ item.created_at }}</p>
       </li>
       <li class="pullup-wrapper">
         <van-loading
@@ -58,6 +58,13 @@ export default {
   components: {
     'van-loading': Loading
   },
+  props: {
+    // 粉丝类型(1未激活2已激活)
+    fansType: {
+      type: Number,
+      default: 1
+    }
+  },
   data () {
     return {
       finished: false, // 所有数据是否加载完
@@ -103,9 +110,17 @@ export default {
       this.isFetchLock = true
       this.pagenum++
       try {
-        const { status, data, msg } = await apiFansList({ page: this.pagenum, page_size: this.pagesize })
+        const { status, data, msg } = await apiFansList({
+          page: this.pagenum,
+          page_size: this.pagesize,
+          type: this.fansType
+        })
         if (status) {
-          const { list } = data
+          const { list, total } = data
+          this.$emit('updateTotal', {
+            type: this.fansType,
+            total
+          })
           // 下拉刷新数据清空
           if (this.isRefresh) {
             this.isRefresh = false

htmldev/cps/src/views/fans/index.vue

@@ -7,45 +7,18 @@
       :color="'#FA4A4A'"
       :title-active-color="'rgba(51, 51, 51, 1)'"
       :title-inactive-color="'#666666'"
-      ref="myTabs">
-      <van-tab title="未激活(999999999)"></van-tab>
-      <van-tab title="有效(14)"></van-tab>
+      ref="myTabs"
+      @change="handleTabChange">
+      <van-tab :title="'未激活(' + total0 + ')'"></van-tab>
+      <van-tab :title="'有效(' +  total1 + ')'"></van-tab>
     </van-tabs>
-    <Main/>
-    <van-popup
-      class="fbt-van-popup"
-      v-model="showDetail"
-      position="bottom">
-      <div class="fbt-van-popup-body">
-        <h3>费用详情</h3>
-        <p>
-          <span class="label">支付类型：</span>
-          <span class="value">下单返</span>
-        </p>
-        <p>
-          <span class="label">支付时间：</span>
-          <span class="value">2021-8-12  09:23:04</span>
-        </p>
-        <p>
-          <span class="label">订单号：</span>
-          <span class="value">126452164518</span>
-        </p>
-        <p>
-          <span class="label">交易单号：</span>
-          <span class="value">1274554794</span>
-        </p>
-        <p>
-          <span class="label">备注：</span>
-          <span class="value">备注备注备注备注备注</span>
-        </p>
-        <p class="amont">+￥736.23</p>
-      </div>
-    </van-popup>
+    <Main :fansType="1" @updateTotal="updateTotal" ref="invalid"/>
+    <Main :fansType="2" @updateTotal="updateTotal" ref="valid"/>
   </div>
 </template>
 
 <script>
-import { Tabs, Tab, Popup } from 'vant'
+import { Tabs, Tab } from 'vant'
 import Main from './child/main'
 
 export default {
@@ -53,13 +26,13 @@ export default {
   components: {
     'van-tabs': Tabs,
     'van-tab': Tab,
-    Main,
-    'van-popup': Popup
+    Main
   },
   data () {
     return {
       numActiveTab: 0,
-      showDetail: false
+      total0: 0,
+      total1: 0
     }
   },
   async mounted () {
@@ -68,6 +41,23 @@ export default {
     setTimeout(() => {
       this.$refs.myTabs.resize()
     }, 500)
+  },
+  methods: {
+    handleTabChange (val) {
+      const allScrolls = ['invalid', 'valid']
+      this.$nextTick(() => {
+        const scroll = this.$refs[allScrolls[val]].scroll
+        scroll && scroll.refresh()
+      })
+    },
+    updateTotal (obj) {
+      const { type, total } = obj
+      this[`total${type}`] = total
+
+      setTimeout(() => {
+        this.$refs.myTabs.resize()
+      }, 500)
+    }
   }
 }
 </script>
@@ -124,67 +114,4 @@ h2 {
     bottom: 0;
   }
 }
-
-.fbt-van-popup {
-  background: transparent;
-
-  &-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 343px;
-    background: #FFFFFF;
-    border-radius: 8px;
-    padding-top: 24px;
-    margin: 0 auto 16px;
-
-    h3 {
-      width: 304px;
-      font-size: 24px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333333;
-      line-height: 33px;
-    }
-
-    p {
-      display: flex;
-      align-items: center;
-      width: 304px;
-      margin-top: 12px;
-
-      &:nth-of-type(1) {
-        margin-top: 20px;
-      }
-
-      span {
-        font-size: 14px;
-        line-height: 20px;
-      }
-
-      .label {
-        width: 100px;
-        color: #999999;
-      }
-
-      .value {
-        width: calc(100% - 100px);
-        text-align: right;
-        color: #333333;
-      }
-    }
-
-    .amont {
-      justify-content: flex-end;
-      padding: 15px 0 17px;
-      margin-top: 20px;
-      border-top: 1px solid rgba(31, 49, 74, 0.1);
-      font-size: 20px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333333;
-      line-height: 28px;
-    }
-  }
-}
 </style>