个人中心接口数据渲染

 <template>
   <div class="orders">
-    <div v-for="(item, index) in orders" :key="index" class="order-cell">
-        <p class="order-num">{{item.num}}</p>
-        <p class="order-text">{{item.name}}</p>
+    <div v-for="(value, key) in getOrderNums" :key="key" class="order-cell">
+        <p class="order-num">{{value.num}}</p>
+        <p class="order-text">{{value.name}}</p>
     </div>   
   </div>
 </template>
@@ -10,7 +10,7 @@
 <script>
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapActions} = createNamespacedHelpers('home/mine');
+const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
 
 export default {
   name: 'order',
@@ -19,16 +19,11 @@ export default {
   },
   data() {
     return {
-      orders: [
-        {name: '待发货',num:1},
-        {name: '已发货',num:1},
-        {name: '交易成功',num:2},
-        {name: '交易失败',num:2}
-      ]
+     
     };
   },
   computed: {
-
+    ...mapGetters(['getOrderNums'])
     },
   mounted() {
 

+<template>
+  <div class="single-image">
+     <a :href="data.url" class="link">
+         <img :src="data.src" :alt="data.title"  class="img" :style="style">
+     </a>
+  </div>
+</template>
+
+<script>
+import {mapState, mapMutations} from 'vuex';
+
+export default {
+  name: 'single-image',
+  props: {
+      data: {
+          type: Object,
+          default: {}
+      }
+  },
+  data() {
+    return {
+     
+    };
+  },
+  computed: {
+    ...mapState({
+      style:(state) => {
+          return { height:`${state.yoho.window.clientWidth*240/1000}px` }
+      }
+    })
+    },
+    created() {
+        let clientWidth = document.body.clientWidth
+        this.SET_WINDOW_SIZE({clientWidth})
+    },
+
+  methods: {
+    ...mapMutations(['SET_WINDOW_SIZE']),
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.single-image {
+  width: 100%;
+  margin: 20px 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .link {
+    flex: 1;
+  }
+  .img {
+      display: block;
+      margin: 0 auto;
+  }
+}
+</style>

@@ -72,7 +72,6 @@ export default {
 <style lang="scss" scoped>
 .tab-item {
     display: flex;
-    width: 100%;
     height: 120px;
     line-height: 120px;
 }
@@ -82,6 +81,8 @@ export default {
 }
 .grey {
     background-color: #F5F7F9;
+    margin: 0 -40px;
+    padding: 0 40px;
 }
 .line {
     border-bottom: solid 1px #eee;

 <template>
   <LayoutApp :show-back="true">
     <div class="body" ref="body">
-      <div v-for="item in tabList" :key="item.name">
-        <tab-item v-if="item.name === 'board'" :data="item" noLine titleBold titleSmall small grey>
+      <template v-for="(value, key) in getMineList">
+        <tab-item :key="key" v-if="key === 'board'" :data="value" 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>
+        <template v-else-if="key === 'resource1' || key === 'resource2'">
+          <div :key="key" v-if="value.data.template_name ==='single_image'">
+            <singleImage  :data="value.data.data[0]"></singleImage>
           </div>
+        </template>
+        
+        <order :key="key" v-else-if="key === 'order'"></order>
+        <tab-item :key="key" v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
+        <tab-item :key="key" v-else :data="value"></tab-item>
+      </template>
     </div>
   </LayoutApp>
 </template>
@@ -17,29 +23,18 @@
 import tabItem from './components/tabItem';
 import order from './components/order';
 import scroll from './components/scroll';
-
+import singleImage from './components/singleImage';
 import { createNamespacedHelpers } from 'vuex';
 
-const {mapState, mapActions} = createNamespacedHelpers('home/mine');
+const {mapGetters, mapActions} = 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([
-          'favoriteNum',
-          'buyNum'
-        ])
+        ...mapGetters(['getMineList'])
     },
     created() {
       this.fetchResource()
@@ -58,7 +53,8 @@ export default {
     components: {
       tabItem,
       order,
-      scroll
+      scroll,
+      singleImage
     }
 };
 </script>

 import { parseAssetList, maskAccount } from '../../utils/mine-handler';
 import { get, set } from 'lodash';
 import { getImgUrl } from '../../common/utils';
-const uid = '600046428';
+
+// const uid = '600046428';
+const uid = '75339977';
 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10';
 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec';
 
@@ -11,13 +13,11 @@ export default function() {
     state: {
       animate: false,
       rollNoticeList: [],
-      orderSum: {
       sellerNum: 0,
       readyNum: 0,
       sentNum: 0,
       finishNum: 0,
-        failNum: 0
-      },
+      failNum: 0,
       favoriteNum: 0,
       buyNum: 0,
       assetData: {
@@ -31,6 +31,34 @@ export default function() {
       resource1: {},
       resource2: {}
     },
+    getters: {
+      getOrderNums(state) {
+        let orderSum = {
+          ready: {name: '待发货', num: state.readyNum},
+          sent: {name: '已发货', num: state.sentNum},
+          finish: {name: '交易成功', num: state.finishNum},
+          fail: {name: '交易失败', num: state.failNum}
+        };
+
+        return orderSum;
+      },
+      getMineList(state) {
+        let tabList = {
+          board: { title: '公告栏'},
+          sale: { title: '出售中', num: state.sellerNum},
+          order: {name: 'order'},
+          resource1: {name: 'resource1', data: state.resource1},
+          income: {title: '交易收入', num: state.assetData.totalIncome},
+          buyOrder: {title: '我购买的订单', num: state.buyNum},
+
+          // buy: {name: 'buy', title: '我的求购', num: 1},
+          collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum},
+          resource2: {name: 'resource2', data: state.resource2}
+        };
+
+        return tabList;
+      }
+    },
     mutations: {
       addList(state, { list }) {
         state.rollNoticeList = state.rollNoticeList.concat(list);
@@ -44,30 +72,28 @@ export default function() {
         state.animate = false;
       },
       addSellerOrder(state, { orderSumList }) {
-        let orderSum = {};
 
         orderSumList.forEach((item) => {
           switch (item.listType) {
             case 1:
-              orderSum.sellerNum = item.sum;
+              state.sellerNum = item.sum;
               break;
             case 2:
-              orderSum.readyNum = item.sum;
+              state.readyNum = item.sum;
               break;
             case 3:
-              orderSum.sentNum = item.sum;
+              state.sentNum = item.sum;
               break;
             case 5:
-              orderSum.finishNum = item.sum;
+              state.finishNum = item.sum;
               break;
             case 6:
-              orderSum.failNum = item.sum;
+              state.failNum = item.sum;
               break;
             default:
               break;
           }
         });
-        state.orderSum = Object.assign({}, state.orderSum, orderSum);
       },
 
       addFavoriteNum(state, {count}) {
@@ -112,20 +138,20 @@ export default function() {
         });
 
         if (result.code === 200) {
-          let src = getImgUrl(get(result, 'data[0].data[0].src') || '', 1000, 1000);
+          let src = getImgUrl(get(result, 'data[0].data[0].src') || '', 1000, 240);
 
           set(result, 'data[0].data[0].src', src);
           commit('addResource', {resource1: result.data[0]});
         }
         if (result1.code === 200) {
-          let src = getImgUrl(get(result1, 'data[0].data[0].src') || '', 1000, 1000);
+          let src = getImgUrl(get(result1, 'data[0].data[0].src') || '', 1000, 240);
 
           set(result1, 'data[0].data[0].src', src);
           commit('addResource', {resource2: result1.data[0]});
         }
       },
       async fetchSellerOrder({ commit }) {
-        const result = await this.$api.get('/api/ufo/mine/seller/orderSummary', {uid, debug: 'XYZ'});
+        const result = await this.$api.get('/api/ufo/mine/seller/orderSummary', {uid});
 
         if (result.code === 200) {
           commit('addSellerOrder', { orderSumList: result.data });
@@ -141,7 +167,7 @@ export default function() {
         return result.data || [];
       },
       async fetchOrderSummary({ commit }) {
-        const result = await this.$api.get('/api/ufo/mine/order/summary', {uid, debug: 'XYZ'});
+        const result = await this.$api.get('/api/ufo/mine/order/summary', {uid});
 
         if (result.code === 200) {
           commit('addOrderSummary', { count: result.data.buyCount });
@@ -150,13 +176,15 @@ export default function() {
       },
 
       async fetchAssets({ commit }) {
-        const result = await this.$api.get('/api/ufo/mine/assets', {page: 1, limit: 20, uid, debug: 'XYZ'});
+        const result = await this.$api.get('/api/ufo/mine/assets', {page: 1, limit: 20, uid});
 
         if (result.code === 200) {
           let assetData = parseAssetList(result.data);
 
+          if (typeof assetData.totalIncome !== 'undefined') {
             commit('addAssets', assetData);
           }
+        }
         return result.data || [];
       },
     },

@@ -36,7 +36,7 @@ module.exports = {
   },
   '/api/ufo/mine/order/summary': {
     ufo: true,
-    url: '/shopping',
+    path: '/shopping',
     api: 'ufo.order.summary',
     params: {
       uid: {type: Number}