渲染个人中心页列表

@@ -11,7 +11,7 @@
 <script>
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapActions} = createNamespacedHelpers('home/mine');
+const {mapState, mapActions} = createNamespacedHelpers('home/mine');
 
 export default {
   name: 'scroll',
@@ -21,26 +21,27 @@ export default {
   data() {
     return {
       animate:false,
-        lists:[
-            {name:'公告1'},  
-            {name:'公告2'}
-        ],
+        // lists:[
+        //     {name:'公告1'},  
+        //     {name:'公告2'}
+        // ],
     };
   },
   computed: {
-
+      ...mapState({
+          lists: state => state.rollNoticeList
+      })
     },
   mounted() {
-
+      this.fetchRollBoardList()
   },
   created(){
       if(this.lists.length > 1) {
           setInterval(this.showMarquee, 3000)
-      }
-       
+      } 
 },
   methods: {
-    ...mapActions([]),
+    ...mapActions(['fetchRollBoardList']),
      showMarquee() {
         let that = this
         that.animate = true;
@@ -48,7 +49,7 @@ export default {
             that.lists.push(that.lists[0]);
             that.lists.shift();
             that.animate = false;
-        },500)
+        },800)
     },
   }
 }

 <template>
   <div class="tab-item" :class="itemClass">
-      <div class="title" :class="titleClass">标题</div>
-      <slot><div class="text">文字</div></slot>
+      <div class="title" :class="titleClass">{{data.title}}</div>
+      <slot><div class="text">{{data.num}}</div></slot>
       <i class="cubeic-arrow"></i>
   </div>
 </template>
@@ -14,6 +14,10 @@ const {mapActions} = createNamespacedHelpers('home/mine');
 export default {
   name: 'tabItem',
   props: {
+      data: {
+          type: Object,
+          default: {}
+      },
       noLine: {
           type: Boolean,
           default: false
@@ -86,7 +90,7 @@ export default {
     flex: 1;
     font-size: 32px;
     color: black;
-    min-width: 65px;
+    min-width: 100px;
 }
 .title-bold {
     font-weight: bold;

 <template>
   <LayoutApp :show-back="true">
     <div class="body" ref="body">
-      <tab-item noLine titleBold titleSmall small grey>
-        <scroll></scroll>
-      </tab-item>
-
-      <tab-item noLine titleBold></tab-item>
-      <order></order>
-      <tab-item></tab-item>
-
+      <div v-for="item in tabList" :key="item.name">
+        <tab-item v-if="item.name === 'board'" :data="item" noLine titleBold titleSmall small grey>
+          <scroll></scroll>
+        </tab-item>
+        <order v-else-if="item.name === 'order'"></order>
+        <tab-item v-else-if="item.name === 'sale'" :data="item" noLine titleBold></tab-item>
+        <tab-item v-else :data="item"></tab-item>
+      </div>
     </div>
   </LayoutApp>
 </template>
@@ -22,16 +22,29 @@ import { createNamespacedHelpers } from 'vuex';
 
 const {mapState} = createNamespacedHelpers('home/mine');
 export default {
+    data() {
+      return {
+        tabList: [
+          {name: 'board', title: '公告栏'},
+          {name:'sale', title: '出售中', num: 1},
+          {name: 'order'},
+          {name: 'income', title: '交易收入', num: 1},
+          {name: 'buyOrder', title: '我购买的订单', num: 1},
+          {name: 'buy', title: '我的求购', num: 1},
+          {name: 'collect', title: '我的收藏', num: 1}
+        ]
+      }
+    },
     computed:{
         ...mapState({
           username: state => state.username
         })
     },
-  components: {
-    tabItem,
-    order,
-    scroll
-  }
+    components: {
+      tabItem,
+      order,
+      scroll
+    }
 };
 </script>
 

@@ -2,9 +2,21 @@ export default function() {
   return {
     namespaced: true,
     state: {
-      username: 'bss'
+      rollNoticeList: [],
+    },
+    mutations: {
+      addList(state, { list }) {
+        state.rollNoticeList = state.rollNoticeList.concat(list);
+      },
+    },
+    actions: {
+      async fetchRollBoardList({ commit }) {
+        const result = await this.$api.get('/api/ufo/mine/rollBoardList', {});
+
+        if (result.code === 200) {
+          commit('addList', { list: result.data.list });
+        }
+      }
     },
-    mutations: {},
-    actions: {},
   };
 }

 module.exports = {
+  '/api/ufo/mine/rollBoardList': {
+    ufo: true,
+    api: 'ufo.users.rollNoticeList',
+    params: {}
+  },
+  '/api/ufo/mine/orderSummary': {
+    ufo: true,
+    api: 'ufo.seller.orderSummary',
+    params: {}
+  },
+  '/api/ufo/mine/favoriteNum': {
+    ufo: true,
+    api: 'ufo.user.favoriteNum',
+    params: {}
+  },
+  '/api/ufo/mine/depositNum': {
+    ufo: true,
+    api: 'ufo.deposit.queryUserStorageCount',
+    params: {}
+  },
+  '/api/ufo/mine/asssets': {
+    ufo: true,
+    api: 'ufo.asssets.details',
+    params: {}
+  },
 };