关注列表数据绑定

zhiyangdu
1 parent 44ee2496
Showing 4 changed files with 57 additions and 20 deletions
src/components/dresserList/dresserList.vue
src/pages/dresser/dresser.less → src/pages/fansShopMessageList/fansShopMessageList.less
src/pages/dresser/dresser.vue → src/pages/fansShopMessageList/fansShopMessageList.vue
src/router/index.js
@@ -3,13 +3,13 @@
       <!--标题-->
       <textTitleBox :titles="null"></textTitleBox>
   <div class="item_box">
-      <img class="head_portrait" src="static/img/1.png" alt="网家家"/>
+      <img class="head_portrait"  v-lazy="dresserList.user_img" src="static/img/1.png" alt="网家家"/>
       <div class="user_info">
           <div class="name">
-              冯提莫
+             {{dresserList.title}}
           </div>
           <div class="desc">
-              冯提莫描述
+              {{dresserList.user_title}}
           </div>
       </div>
       <img class="arrow_right" src="static/img/icon_arrow_right.png" alt="网家家"/>
@@ -7,9 +7,9 @@
       <ul
           v-infinite-scroll="loadMore"
           infinite-scroll-disabled="loading"
-          infinite-scroll-distance="10">
-          <li v-for="item in list">
-              <dresserList></dresserList>
+          :infinite-scroll-distance="list.length">
+          <li v-for="item in list" @click="$parent.toDetail(item)">
+              <dresserList :dresserList="item"></dresserList>
           </li>
       </ul>
       </div>
@@ -18,11 +18,11 @@
 <script>
     import dresserList from "@/components/dresserList/dresserList";
+    import { Toast, Indicator } from 'mint-ui';
   export default {
     name: 'test',
     data () {
       return {
-          waitList: [],
           list: [],
           loading: false,
       }
@@ -32,23 +32,60 @@
       },
     created(){
         document.title = "已关注达人";
+        // 获取关注人列表
+        this.fansShopMessageList();
     },
     methods: {
+        /**
+         * 已关注达人列表
+         */
+        fansShopMessageList () {
+            // 加载中提示
+            Indicator.open('加载中...');
+            // 请求接口
+            this.http("/api/Dynamic/fansShopMessageList", {
+                uid:this.$route.query.uid
+            },this.fansShopMessageListCallback, {
+                method: "post"
+            });
+        },
+
+        /**
+         * 已关注达人列表回调
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        fansShopMessageListCallback(res, ext) {
+            // 加载完成
+            Indicator.close();
+            // 返回处理
+            if (res.code == 200) {
+
+                // 解构数据
+                let {data: datas} = res;
+
+                /*获取裂变数据*/
+
+                // 设置标题
+                this.$set(this, "list", datas.list);
+            }
+        },
         loadMore() {
-            this.loading = true;
-            setTimeout(() => {
-                let last = this.list[this.list.length - 1];
-                for (let i = 1; i <= 10; i++) {
-                    this.list.push(last + i);
-                }
-                this.loading = false;
-            }, 2500);
-        }
+//            this.loading = true;
+//            setTimeout(() => {
+//                let last = this.list[this.list.length - 1];
+//                for (let i = 1; i <= 10; i++) {
+//                    this.list.push(last + i);
+//                }
+//                this.loading = false;
+//            }, 2500);
+        },
+
     }
   }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import "dresser";
+    @import "fansShopMessageList";
 </style>
@@ -29,10 +29,10 @@ const router = new Router({
                 },
                 {
                     // 达人列表页
-                    path: "/dresser",
-                    name: "dresser",
+                    path: "/fansShopMessageList",
+                    name: "fansShopMessageList",
                     component: resolve => {
-                        require(["@/pages/dresser/dresser"], resolve);
+                        require(["@/pages/fansShopMessageList/fansShopMessageList"], resolve);
                     },
                     meta: {
                         requireAuth: false