Authored by lea guo

出售订单列表

<template>
<scroll class="order-list-wrapper"> </scroll>
</template>
<script>
import { Scroll } from "cube-ui";
export default {
components: {
Scroll
}
};
</script>
<style lang="scss" scoped>
.order-list-wrapper {
height: 100vh;
}
</style>
\ No newline at end of file
<template>
<div class="content-wrapper">
<scroll
@pulling-up="fetchData"
:options="options"
:data="orderList"
class="order-list-scroll-wrap"
>
<ul class="list-wrapper">
<li v-for="order in orderList" :key="order.orderCode">
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-actions :order="order" />
</li>
</ul>
</scroll>
</div>
</template>
<script>
import { Button, Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";
import OrderListItem from "./components/order-list-item";
import OrderActions from "../components/order-actions";
const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
"order/inSaleOrderList"
);
export default {
components: {
Button,
Scroll,
OrderListItem,
OrderActions
},
computed: {
...mapState(["entryOrder", "notEntryOrder"]),
...mapGetters(["orderList", "pullUpload"]),
options: function() {
return {
pullUpload: this.pullUpload
};
},
isFetchEntryOrder() {
return this.entryOrder.pullUpload;
}
},
// 获取订单数据
asyncData({ store, router }) {
// const { owner, status } = router.params;
// store.dispatch("order/orderList/fetchOrderList", { owner, status });
},
mounted() {
this.fetchData();
},
methods: {
...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
fetchData() {
if (this.isFetchEntryOrder) {
this.fetchEntryOrderList(this.$route.params);
} else {
this.fetchNotEntryOrderList(this.$route.params);
}
}
},
watch: {
isFetchEntryOrder(val) {
if (!val) {
this.fetchData();
}
}
}
};
</script>
<style lang="scss" scoped>
.content-wrapper {
height: calc(100vh);
overflow-x: hidden;
overflow-y: auto;
-webkit-box-orient: vertical;
.order-list-scroll-wrap {
.list-wrapper {
li {
padding: 40px 40px;
border-bottom: 1px solid #eee;
}
& :last-child {
border-bottom: 0;
}
}
}
}
</style>
\ No newline at end of file
... ...
... ... @@ -7,6 +7,13 @@ const routers = [
path: '/xianyu/:owner/order/list/:status?',
component: () => import('./order-list'),
},
// 出售订单列表
{
name: 'InSaleOrderList',
path: '/xianyu/in/sale/order/list/:type?',
component: () => import('./in-sell-order-list'),
},
];
export default routers;
... ...
export default function() {
return {
namespaced: true,
state: {
entryOrder: {
page: 1,
pageSize: 10,
pagetotal: 0,
list: [], // 订单列表
pullUpload: true,
},
notEntryOrder: {
page: 1,
pageSize: 10,
pagetotal: 0,
list: [], // 订单列表
pullUpload: true,
},
},
mutations: {
setEntryOrder(state, res) {
let { page, pagetotal, data = [] } = res;
state.entryOrder.page = ++page;
state.entryOrder.pagetotal = pagetotal;
state.entryOrder.list = state.entryOrder.list.concat(data);
// 分页结束
if (page > pagetotal) {
state.entryOrder.pullUpload = false;
}
},
setNotEntryOrder(state, res) {
let { page, pagetotal, data = [] } = res;
state.notEntryOrder.page = ++page;
state.notEntryOrder.pagetotal = pagetotal;
state.notEntryOrder.list = state.entryOrder.list.concat(data);
// 分页结束
if (page > pagetotal) {
state.notEntryOrder.pullUpload = false;
}
},
},
getters: {
// scroll 组件参数,是否触发上拉事件
pullUpload: state =>
state.entryOrder.pullUpload || state.notEntryOrder.pullUpload,
orderList: state => {
const {
entryOrder: { list: entryOrderList },
notEntryOrder: { list: notEntryOrderList },
} = state;
return entryOrderList.concat(notEntryOrderList);
},
},
actions: {
async fetchEntryOrderList(
{
commit,
state: { entryOrder },
},
params,
) {
const { page } = entryOrder;
const { type = 1 } = params;
const res = await this.$api.get('/api/ufo/seller/entryPrdList', {
page,
type: +type,
});
if (res.code === 200) {
commit('setEntryOrder', res.data);
}
},
async fetchNotEntryOrderList(
{
commit,
state: { notEntryOrder },
},
params,
) {
const { page } = notEntryOrder;
const { type = 1 } = params;
const res = await this.$api.get('/api/ufo/seller/notEntryPrdList', {
page,
type: +type,
});
if (res.code === 200) {
commit('setEntryOrder', res.data);
}
},
},
};
}
... ...
... ... @@ -4,6 +4,7 @@ import orderConfirm from './order-confirm';
import orderDetail from './order-detail';
import orderLogistics from './order-logistics';
import orderDeliver from './order-deliver';
import inSaleOrderList from './in-sale-order-list';
export default function() {
return {
... ... @@ -15,6 +16,7 @@ export default function() {
orderDetail: orderDetail(),
logisticsInfo: orderLogistics(),
orderDeliver: orderDeliver(),
inSaleOrderList: inSaleOrderList(),
},
};
}
... ...
... ... @@ -217,6 +217,11 @@ module.exports = {
auth: true,
ufo: true,
api: 'ufo.seller.notEntryPrdList',
params: {
type: { type: Number, require: true },
limit: { type: Number }, // page size
page: { type: Number, require: true }, // page number
},
},
// 入住商家类表
... ... @@ -224,6 +229,11 @@ module.exports = {
auth: true,
ufo: true,
api: 'ufo.seller.entryPrdList',
params: {
limit: { type: Number }, // page size
page: { type: Number, require: true }, // page number
type: { type: Number, require: true },
},
},
// 订单数量
... ...