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
<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>
</div>
<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
},
sellerNum: 0,
readyNum: 0,
sentNum: 0,
finishNum: 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,12 +176,14 @@ 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);
commit('addAssets', assetData);
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}
... ...