fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by baoss
Commit d3357008d8eb82a3d6c8c4238ad4504fd80f866d 1 parent 927dd40d

个人中心接口数据渲染

Inline Side-by-side
Showing 6 changed files with 136 additions and 56 deletions
1 <template> 1 <template>
2 <div class="orders"> 2 <div class="orders">
3 - <div v-for="(item, index) in orders" :key="index" class="order-cell">  
4 - <p class="order-num">{{item.num}}</p>  
5 - <p class="order-text">{{item.name}}</p> 3 + <div v-for="(value, key) in getOrderNums" :key="key" class="order-cell">
  4 + <p class="order-num">{{value.num}}</p>
  5 + <p class="order-text">{{value.name}}</p>
6 </div> 6 </div>
7 </div> 7 </div>
8 </template> 8 </template>
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 <script> 10 <script>
11 import {createNamespacedHelpers} from 'vuex'; 11 import {createNamespacedHelpers} from 'vuex';
12 12
13 -const {mapActions} = createNamespacedHelpers('home/mine'); 13 +const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
14 14
15 export default { 15 export default {
16 name: 'order', 16 name: 'order',
@@ -19,16 +19,11 @@ export default { @@ -19,16 +19,11 @@ export default {
19 }, 19 },
20 data() { 20 data() {
21 return { 21 return {
22 - orders: [  
23 - {name: '待发货',num:1},  
24 - {name: '已发货',num:1},  
25 - {name: '交易成功',num:2},  
26 - {name: '交易失败',num:2}  
27 - ] 22 +
28 }; 23 };
29 }, 24 },
30 computed: { 25 computed: {
31 - 26 + ...mapGetters(['getOrderNums'])
32 }, 27 },
33 mounted() { 28 mounted() {
34 29
  1 +<template>
  2 + <div class="single-image">
  3 + <a :href="data.url" class="link">
  4 + <img :src="data.src" :alt="data.title" class="img" :style="style">
  5 + </a>
  6 + </div>
  7 +</template>
  8 +
  9 +<script>
  10 +import {mapState, mapMutations} from 'vuex';
  11 +
  12 +export default {
  13 + name: 'single-image',
  14 + props: {
  15 + data: {
  16 + type: Object,
  17 + default: {}
  18 + }
  19 + },
  20 + data() {
  21 + return {
  22 +
  23 + };
  24 + },
  25 + computed: {
  26 + ...mapState({
  27 + style:(state) => {
  28 + return { height:`${state.yoho.window.clientWidth*240/1000}px` }
  29 + }
  30 + })
  31 + },
  32 + created() {
  33 + let clientWidth = document.body.clientWidth
  34 + this.SET_WINDOW_SIZE({clientWidth})
  35 + },
  36 +
  37 + methods: {
  38 + ...mapMutations(['SET_WINDOW_SIZE']),
  39 + }
  40 +
  41 +};
  42 +</script>
  43 +
  44 +<style lang="scss" scoped>
  45 +.single-image {
  46 + width: 100%;
  47 + margin: 20px 0;
  48 + overflow: hidden;
  49 + display: flex;
  50 + flex-direction: row;
  51 + align-items: center;
  52 + .link {
  53 + flex: 1;
  54 + }
  55 + .img {
  56 + display: block;
  57 + margin: 0 auto;
  58 + }
  59 +}
  60 +</style>
@@ -72,7 +72,6 @@ export default { @@ -72,7 +72,6 @@ export default {
72 <style lang="scss" scoped> 72 <style lang="scss" scoped>
73 .tab-item { 73 .tab-item {
74 display: flex; 74 display: flex;
75 - width: 100%;  
76 height: 120px; 75 height: 120px;
77 line-height: 120px; 76 line-height: 120px;
78 } 77 }
@@ -82,6 +81,8 @@ export default { @@ -82,6 +81,8 @@ export default {
82 } 81 }
83 .grey { 82 .grey {
84 background-color: #F5F7F9; 83 background-color: #F5F7F9;
  84 + margin: 0 -40px;
  85 + padding: 0 40px;
85 } 86 }
86 .line { 87 .line {
87 border-bottom: solid 1px #eee; 88 border-bottom: solid 1px #eee;
1 <template> 1 <template>
2 <LayoutApp :show-back="true"> 2 <LayoutApp :show-back="true">
3 <div class="body" ref="body"> 3 <div class="body" ref="body">
4 - <div v-for="item in tabList" :key="item.name">  
5 - <tab-item v-if="item.name === 'board'" :data="item" noLine titleBold titleSmall small grey> 4 + <template v-for="(value, key) in getMineList">
  5 + <tab-item :key="key" v-if="key === 'board'" :data="value" noLine titleBold titleSmall small grey>
6 <scroll></scroll> 6 <scroll></scroll>
7 </tab-item> 7 </tab-item>
8 - <order v-else-if="item.name === 'order'"></order>  
9 - <tab-item v-else-if="item.name === 'sale'" :data="item" noLine titleBold></tab-item>  
10 - <tab-item v-else :data="item"></tab-item>  
11 - </div> 8 + <template v-else-if="key === 'resource1' || key === 'resource2'">
  9 + <div :key="key" v-if="value.data.template_name ==='single_image'">
  10 + <singleImage :data="value.data.data[0]"></singleImage>
  11 + </div>
  12 + </template>
  13 +
  14 + <order :key="key" v-else-if="key === 'order'"></order>
  15 + <tab-item :key="key" v-else-if="key === 'sale'" :data="value" noLine titleBold></tab-item>
  16 + <tab-item :key="key" v-else :data="value"></tab-item>
  17 + </template>
12 </div> 18 </div>
13 </LayoutApp> 19 </LayoutApp>
14 </template> 20 </template>
@@ -17,29 +23,18 @@ @@ -17,29 +23,18 @@
17 import tabItem from './components/tabItem'; 23 import tabItem from './components/tabItem';
18 import order from './components/order'; 24 import order from './components/order';
19 import scroll from './components/scroll'; 25 import scroll from './components/scroll';
20 - 26 +import singleImage from './components/singleImage';
21 import { createNamespacedHelpers } from 'vuex'; 27 import { createNamespacedHelpers } from 'vuex';
22 28
23 -const {mapState, mapActions} = createNamespacedHelpers('home/mine'); 29 +const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
24 export default { 30 export default {
25 data() { 31 data() {
26 return { 32 return {
27 - tabList: [  
28 - {name: 'board', title: '公告栏'},  
29 - {name:'sale', title: '出售中', num: 1},  
30 - {name: 'order'},  
31 - {name: 'income', title: '交易收入', num: 1},  
32 - {name: 'buyOrder', title: '我购买的订单', num: 1},  
33 - {name: 'buy', title: '我的求购', num: 1},  
34 - {name: 'collect', title: '我的收藏', num: 1}  
35 - ] 33 +
36 } 34 }
37 }, 35 },
38 computed:{ 36 computed:{
39 - ...mapState([  
40 - 'favoriteNum',  
41 - 'buyNum'  
42 - ]) 37 + ...mapGetters(['getMineList'])
43 }, 38 },
44 created() { 39 created() {
45 this.fetchResource() 40 this.fetchResource()
@@ -58,7 +53,8 @@ export default { @@ -58,7 +53,8 @@ export default {
58 components: { 53 components: {
59 tabItem, 54 tabItem,
60 order, 55 order,
61 - scroll 56 + scroll,
  57 + singleImage
62 } 58 }
63 }; 59 };
64 </script> 60 </script>
1 import { parseAssetList, maskAccount } from '../../utils/mine-handler'; 1 import { parseAssetList, maskAccount } from '../../utils/mine-handler';
2 import { get, set } from 'lodash'; 2 import { get, set } from 'lodash';
3 import { getImgUrl } from '../../common/utils'; 3 import { getImgUrl } from '../../common/utils';
4 -const uid = '600046428'; 4 +
  5 +// const uid = '600046428';
  6 +const uid = '75339977';
5 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10'; 7 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10';
6 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec'; 8 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec';
7 9
@@ -11,13 +13,11 @@ export default function() { @@ -11,13 +13,11 @@ export default function() {
11 state: { 13 state: {
12 animate: false, 14 animate: false,
13 rollNoticeList: [], 15 rollNoticeList: [],
14 - orderSum: {  
15 - sellerNum: 0,  
16 - readyNum: 0,  
17 - sentNum: 0,  
18 - finishNum: 0,  
19 - failNum: 0  
20 - }, 16 + sellerNum: 0,
  17 + readyNum: 0,
  18 + sentNum: 0,
  19 + finishNum: 0,
  20 + failNum: 0,
21 favoriteNum: 0, 21 favoriteNum: 0,
22 buyNum: 0, 22 buyNum: 0,
23 assetData: { 23 assetData: {
@@ -31,6 +31,34 @@ export default function() { @@ -31,6 +31,34 @@ export default function() {
31 resource1: {}, 31 resource1: {},
32 resource2: {} 32 resource2: {}
33 }, 33 },
  34 + getters: {
  35 + getOrderNums(state) {
  36 + let orderSum = {
  37 + ready: {name: '待发货', num: state.readyNum},
  38 + sent: {name: '已发货', num: state.sentNum},
  39 + finish: {name: '交易成功', num: state.finishNum},
  40 + fail: {name: '交易失败', num: state.failNum}
  41 + };
  42 +
  43 + return orderSum;
  44 + },
  45 + getMineList(state) {
  46 + let tabList = {
  47 + board: { title: '公告栏'},
  48 + sale: { title: '出售中', num: state.sellerNum},
  49 + order: {name: 'order'},
  50 + resource1: {name: 'resource1', data: state.resource1},
  51 + income: {title: '交易收入', num: state.assetData.totalIncome},
  52 + buyOrder: {title: '我购买的订单', num: state.buyNum},
  53 +
  54 + // buy: {name: 'buy', title: '我的求购', num: 1},
  55 + collect: {name: 'collect', title: '我的收藏', num: state.favoriteNum},
  56 + resource2: {name: 'resource2', data: state.resource2}
  57 + };
  58 +
  59 + return tabList;
  60 + }
  61 + },
34 mutations: { 62 mutations: {
35 addList(state, { list }) { 63 addList(state, { list }) {
36 state.rollNoticeList = state.rollNoticeList.concat(list); 64 state.rollNoticeList = state.rollNoticeList.concat(list);
@@ -44,30 +72,28 @@ export default function() { @@ -44,30 +72,28 @@ export default function() {
44 state.animate = false; 72 state.animate = false;
45 }, 73 },
46 addSellerOrder(state, { orderSumList }) { 74 addSellerOrder(state, { orderSumList }) {
47 - let orderSum = {};  
48 75
49 orderSumList.forEach((item) => { 76 orderSumList.forEach((item) => {
50 switch (item.listType) { 77 switch (item.listType) {
51 case 1: 78 case 1:
52 - orderSum.sellerNum = item.sum; 79 + state.sellerNum = item.sum;
53 break; 80 break;
54 case 2: 81 case 2:
55 - orderSum.readyNum = item.sum; 82 + state.readyNum = item.sum;
56 break; 83 break;
57 case 3: 84 case 3:
58 - orderSum.sentNum = item.sum; 85 + state.sentNum = item.sum;
59 break; 86 break;
60 case 5: 87 case 5:
61 - orderSum.finishNum = item.sum; 88 + state.finishNum = item.sum;
62 break; 89 break;
63 case 6: 90 case 6:
64 - orderSum.failNum = item.sum; 91 + state.failNum = item.sum;
65 break; 92 break;
66 default: 93 default:
67 break; 94 break;
68 } 95 }
69 }); 96 });
70 - state.orderSum = Object.assign({}, state.orderSum, orderSum);  
71 }, 97 },
72 98
73 addFavoriteNum(state, {count}) { 99 addFavoriteNum(state, {count}) {
@@ -112,20 +138,20 @@ export default function() { @@ -112,20 +138,20 @@ export default function() {
112 }); 138 });
113 139
114 if (result.code === 200) { 140 if (result.code === 200) {
115 - let src = getImgUrl(get(result, 'data[0].data[0].src') || '', 1000, 1000); 141 + let src = getImgUrl(get(result, 'data[0].data[0].src') || '', 1000, 240);
116 142
117 set(result, 'data[0].data[0].src', src); 143 set(result, 'data[0].data[0].src', src);
118 commit('addResource', {resource1: result.data[0]}); 144 commit('addResource', {resource1: result.data[0]});
119 } 145 }
120 if (result1.code === 200) { 146 if (result1.code === 200) {
121 - let src = getImgUrl(get(result1, 'data[0].data[0].src') || '', 1000, 1000); 147 + let src = getImgUrl(get(result1, 'data[0].data[0].src') || '', 1000, 240);
122 148
123 set(result1, 'data[0].data[0].src', src); 149 set(result1, 'data[0].data[0].src', src);
124 commit('addResource', {resource2: result1.data[0]}); 150 commit('addResource', {resource2: result1.data[0]});
125 } 151 }
126 }, 152 },
127 async fetchSellerOrder({ commit }) { 153 async fetchSellerOrder({ commit }) {
128 - const result = await this.$api.get('/api/ufo/mine/seller/orderSummary', {uid, debug: 'XYZ'}); 154 + const result = await this.$api.get('/api/ufo/mine/seller/orderSummary', {uid});
129 155
130 if (result.code === 200) { 156 if (result.code === 200) {
131 commit('addSellerOrder', { orderSumList: result.data }); 157 commit('addSellerOrder', { orderSumList: result.data });
@@ -141,7 +167,7 @@ export default function() { @@ -141,7 +167,7 @@ export default function() {
141 return result.data || []; 167 return result.data || [];
142 }, 168 },
143 async fetchOrderSummary({ commit }) { 169 async fetchOrderSummary({ commit }) {
144 - const result = await this.$api.get('/api/ufo/mine/order/summary', {uid, debug: 'XYZ'}); 170 + const result = await this.$api.get('/api/ufo/mine/order/summary', {uid});
145 171
146 if (result.code === 200) { 172 if (result.code === 200) {
147 commit('addOrderSummary', { count: result.data.buyCount }); 173 commit('addOrderSummary', { count: result.data.buyCount });
@@ -150,12 +176,14 @@ export default function() { @@ -150,12 +176,14 @@ export default function() {
150 }, 176 },
151 177
152 async fetchAssets({ commit }) { 178 async fetchAssets({ commit }) {
153 - const result = await this.$api.get('/api/ufo/mine/assets', {page: 1, limit: 20, uid, debug: 'XYZ'}); 179 + const result = await this.$api.get('/api/ufo/mine/assets', {page: 1, limit: 20, uid});
154 180
155 if (result.code === 200) { 181 if (result.code === 200) {
156 let assetData = parseAssetList(result.data); 182 let assetData = parseAssetList(result.data);
157 183
158 - commit('addAssets', assetData); 184 + if (typeof assetData.totalIncome !== 'undefined') {
  185 + commit('addAssets', assetData);
  186 + }
159 } 187 }
160 return result.data || []; 188 return result.data || [];
161 }, 189 },
@@ -36,7 +36,7 @@ module.exports = { @@ -36,7 +36,7 @@ module.exports = {
36 }, 36 },
37 '/api/ufo/mine/order/summary': { 37 '/api/ufo/mine/order/summary': {
38 ufo: true, 38 ufo: true,
39 - url: '/shopping', 39 + path: '/shopping',
40 api: 'ufo.order.summary', 40 api: 'ufo.order.summary',
41 params: { 41 params: {
42 uid: {type: Number} 42 uid: {type: Number}