fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 31ec2c3a88f7b54a59f29c42a3372244341b999a 1 parent 86a334d5

订单列表

Inline Side-by-side
Showing 9 changed files with 508 additions and 111 deletions
... ... @@ -3,7 +3,7 @@
<Button
v-for="action in actionList"
:key="action.code"
@click="() => onAction(action)"
@click="() => onActionHandler(action)"
>
{{ action.text }}
</Button>
... ... @@ -20,6 +20,12 @@ import CancelConfirmInfo from "./order-list/cancel-confirm-info";
const { mapActions, mapState } = createNamespacedHelpers("order/orderList");
const { mapMutations: orderMapMutations } = createNamespacedHelpers("order");
const { mapMutations: inSaleOrderMapMutations } = createNamespacedHelpers(
"order/inSaleOrderList"
);
export default {
props: {
order: {
... ... @@ -40,7 +46,7 @@ export default {
"cancelTrade",
"confirmReceipt"
]),
async onAction(action) {
onActionHandler(action) {
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
... ... @@ -52,21 +58,6 @@ export default {
const { productId, storageId, skup } = this.order.goodsInfo;
switch (action.name) {
// 删除订单
case orderActionsMap.DEL_ORDER.name:
this.$createDialog({
type: "confirm",
content: "确认删除订单？",
onConfirm: async () => {
const isOk = await this.deleteOrder({
orderCode,
owner
});
const txt = isOk ? "删除成功" : "删除失败";
this.$createToast({ txt, type: "txt" }).show();
}
}).show();
break;
// 再次购买
case orderActionsMap.BUY_AGAIN.name:
this.$router.push({
... ... @@ -74,6 +65,7 @@ export default {
params: { productId }
});
break;
// 查看详情
case orderActionsMap.SHOW_DETAIL.name:
const name =
... ... @@ -83,6 +75,7 @@ export default {
params: { owner, orderCode }
});
break;
// 再次出售
case orderActionsMap.SOLD_AGAIN.name:
this.$router.push({
... ... @@ -90,6 +83,7 @@ export default {
query: { productId, storageId }
});
break;
// 查看物流
case orderActionsMap.SHOW_EXPRESS.name:
this.$router.push({
... ... @@ -121,47 +115,20 @@ export default {
params: { skup, code: orderCode }
});
break;
// 取消订单 | 不卖了
case orderActionsMap.NOT_SOLD.name:
case orderActionsMap.CANCEL_ORDER.name:
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner
});
let dialogConfig = {
confirmBtn: { text: "取消订单" },
cancelBtn: { text: "保留订单" }
};
if (owner === "sell") {
dialogConfig = {
confirmBtn: { text: "不卖了" },
cancelBtn: { text: "继续出售" }
};
}
this.$createDialog(
{
...dialogConfig,
// 确认收货
case orderActionsMap.CONFIRM_DELIVERY.name:
this.$createDialog({
type: "confirm",
onConfirm: async () => {
const isOk = await this.cancelTrade({
const isOk = await this.confirmReceipt({
orderCode,
owner
});
const txt = isOk ? "取消成功" : "取消失败";
this.$createToast({ txt, type: "txt" }).show();
}
},
createElement => {
return [
createElement(CancelConfirmInfo, {
slot: "content",
props: { confirmInfo }
})
];
// const txt = isOk ? "收货成功" : "收货失败";
// this.$createToast({ txt, type: "txt" }).show();
}
).show();
});
break;
case orderActionsMap.PAY_EARNESTMONEY.name:
... ... @@ -180,23 +147,8 @@ export default {
}).show();
break;
case orderActionsMap.CONFIRM_DELIVERY.name:
this.$createDialog({
type: "confirm",
onConfirm: async () => {
const isOk = await this.confirmReceipt({
orderCode,
owner
});
// const txt = isOk ? "收货成功" : "收货失败";
// this.$createToast({ txt, type: "txt" }).show();
}
});
break;
default:
return;
this.$emit("on-action", action);
}
}
}
... ...
... ... @@ -56,7 +56,7 @@
</div>
</div>
<!-- 操作 -->
<detail-footer>
<!-- <detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="real-pay-price">
... ... @@ -65,7 +65,21 @@
<p>实付金额</p>
</div>
</template>
</detail-footer>
</detail-footer> -->
<div v-if="actionList.length > 0" class="footer-wrapper">
<div v-if="statusDetail.status === 0">
<p class="real-pay-price">
¥{{ orderDetail.priceInfo.realPayPrice }}
</p>
<p>实付金额</p>
</div>
<order-actions
class="detail-actions"
:order="orderDetail"
@on-action="action => onAction({ action, order: orderDetail })"
/>
</div>
</div>
</layout-app>
</template>
... ... @@ -74,16 +88,26 @@
import { createNamespacedHelpers } from "vuex";
import { Button } from "cube-ui";
import OrderActions from "../components/order-actions";
import AddressInfo from "./components/address-info";
import OrderItemInfo from "./components/order-detail-item";
import DetailHeader from "./components/header";
import DetailFooter from "./components//detail-footer";
import OrderActions from "../components/order-actions";
import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
import {
orderActionsMap,
ownType
} from "../../../../constants/order-constants";
const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
"order/orderDetail"
);
const { mapActions: orderListMapActions } = createNamespacedHelpers(
"order/orderList"
);
export default {
components: {
AddressInfo,
... ... @@ -102,10 +126,87 @@ export default {
mounted() {},
computed: {
...mapState(["orderDetail"]),
...mapGetters(["lastExpressInfo", "priceInfo", "actionList"])
...mapGetters([
"lastExpressInfo",
"priceInfo",
"actionList",
"statusDetail"
])
},
methods: {
...mapActions(["fetchOrderDetail"])
...mapActions(["fetchOrderDetail"]),
...orderListMapActions([
"deleteOrder",
"cancelTradeConfirmInfo",
"cancelTrade"
]),
async onAction({ action, order }) {
console.log("----------action---------", action);
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
earnestMoney = 0,
realPrice = "",
priceInfo = {}
} = order;
const { productId, storageId, skup } = order.goodsInfo;
switch (action.name) {
// 删除订单
case orderActionsMap.DEL_ORDER.name:
this.$createDialog({
type: "confirm",
content: "确认删除订单？",
onConfirm: async () => {
const isOk = await this.deleteOrder({
orderCode,
owner
});
if (isOk) {
this.$router.back();
}
// const txt = isOk ? "删除成功" : "删除失败";
// this.$createToast({ txt, type: "txt" }).show();
}
}).show();
break;
case orderActionsMap.CANCEL_ORDER.name:
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner
});
this.$createDialog(
{
type: "confirm",
confirmBtn: { text: "取消订单" },
cancelBtn: { text: "保留订单" },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner
});
if (isOk) {
this.fetchOrderDetail(this.$route.params);
}
const txt = isOk ? "取消成功" : "取消失败";
this.$createToast({ txt, type: "txt" }).show();
}
},
createElement => {
return [
createElement(CancelConfirmInfo, {
slot: "content",
props: { confirmInfo }
})
];
}
).show();
break;
default:
return;
}
}
}
};
</script>
... ... @@ -120,6 +221,26 @@ export default {
overflow-y: auto;
font-size: 24px;
.footer-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: #fff;
box-shadow: inset 0 1px 0 0 #eee;
padding: 20px;
z-index: 10;
.detail-actions {
margin-top: 0;
flex: 1;
}
}
.item-wrapper {
border-top: 1px solid #eee;
padding: 40px 0;
... ...
... ... @@ -67,14 +67,26 @@
</div>
</div>
<!-- 操作 -->
<detail-footer>
<!-- <detail-footer>
<template #tip="{orderDetail, statusDetail}">
<div v-if="statusDetail.status === 0">
<p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
<p>{{ statusDetail.statuStr }}</p>
</div>
</template>
</detail-footer>
</detail-footer> -->
<div v-if="actionList.length > 0" class="footer-wrapper">
<div v-if="statusDetail.status === 0">
<p class="earnest-price">{{ orderDetail.earnestMoneyStr }}</p>
<p>{{ statusDetail.statuStr }}</p>
</div>
<order-actions
class="detail-actions"
:order="orderDetail"
@on-action="action => onAction({ action, order: orderDetail })"
/>
</div>
</div>
</layout-app>
</template>
... ... @@ -88,16 +100,29 @@ import OrderItemInfo from "./components/order-detail-item";
import DetailHeader from "./components/header";
import DetailFooter from "./components//detail-footer";
import OrderActions from "../components/order-actions";
import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
import {
orderActionsMap,
ownType
} from "../../../../constants/order-constants";
const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
"order/orderDetail"
);
const { mapActions: orderListMapActions } = createNamespacedHelpers(
"order/orderList"
);
export default {
components: {
AddressInfo,
OrderItemInfo,
Button,
DetailHeader,
DetailFooter
DetailFooter,
OrderActions
},
asyncData({ store, router }) {
// store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
... ... @@ -112,11 +137,84 @@ export default {
"lastExpressInfo",
"priceInfo",
"statusDetail",
"platformFee"
"platformFee",
"actionList"
])
},
methods: {
...mapActions(["fetchOrderDetail"])
...mapActions(["fetchOrderDetail"]),
...orderListMapActions([
"cancelTradeConfirmInfo",
"cancelTrade",
"deleteOrder"
]),
async onAction({ action, order }) {
console.log("----------action---------", action);
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
earnestMoney = 0,
realPrice = "",
priceInfo = {}
} = order;
const { productId, storageId, skup } = order.goodsInfo;
switch (action.name) {
// 删除订单
case orderActionsMap.DEL_ORDER.name:
this.$createDialog({
type: "confirm",
content: "确认删除订单？",
onConfirm: async () => {
const isOk = await this.deleteOrder({
orderCode,
owner
});
if (isOk) {
this.$router.back();
}
// const txt = isOk ? "删除成功" : "删除失败";
// this.$createToast({ txt, type: "txt" }).show();
}
}).show();
break;
case orderActionsMap.NOT_SOLD.name:
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner
});
this.$createDialog(
{
type: "confirm",
confirmBtn: { text: "不卖了" },
cancelBtn: { text: "继续出售" },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner
});
if (isOk) {
this.fetchOrderDetail(this.$route.params);
}
// const txt = isOk ? "取消成功" : "取消失败";
// this.$createToast({ txt, type: "txt" }).show();
}
},
createElement => {
return [
createElement(CancelConfirmInfo, {
slot: "content",
props: { confirmInfo }
})
];
}
).show();
break;
default:
return;
}
}
}
};
</script>
... ... @@ -131,6 +229,26 @@ export default {
overflow-y: auto;
font-size: 24px;
.footer-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: #fff;
box-shadow: inset 0 1px 0 0 #eee;
padding: 20px;
z-index: 10;
.detail-actions {
margin-top: 0;
flex: 1;
}
}
.item-wrapper {
border-top: 1px solid #eee;
padding: 40px 0;
... ...
<template>
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions class="actions" :order="order" />
<order-actions class="actions" :order="order" @on-action="onAction" />
</div>
</template>
... ...
... ... @@ -13,7 +13,15 @@
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
<!-- <order-item-footer :order="order" @on-action="() => {}" /> -->
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions
class="actions"
:order="order"
@on-action="action => onAction({ action, order })"
/>
</div>
</li>
</ul>
</scroll>
... ... @@ -31,10 +39,25 @@ import OrderInfo from "./components/order-info.vue";
import EmptyList from "./components/empty";
import OrderItemFooter from "./components/order-footer";
import { routeNames } from "../order-detail";
import { ownType } from "../../../../constants/order-constants";
const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
"order/inSaleOrderList"
import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";
import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
import {
orderActionsMap,
ownType
} from "../../../../constants/order-constants";
const {
mapActions,
mapState,
mapGetters,
mapMutations
} = createNamespacedHelpers("order/inSaleOrderList");
const { mapActions: orderListMapActions } = createNamespacedHelpers(
"order/orderList"
);
export default {
... ... @@ -43,7 +66,9 @@ export default {
OrderListItem,
OrderInfo,
EmptyList,
OrderItemFooter
OrderItemFooter,
OrderActions,
CountDown
},
computed: {
...mapState(["entryOrder", "notEntryOrder", "isShowEmpty"]),
... ... @@ -63,33 +88,68 @@ export default {
// const { owner, status } = router.params;
// store.dispatch("order/orderList/fetchOrderList", { owner, status });
},
mounted() {
this.fetchData();
const { code } = this.$route.params;
// 调价跳转
if (!!code) {
this.$nextTick(() => {
this.$router.push({
name: routeNames.SELL_ORDER_DETAIL,
params: {
owner: ownType.SELL,
code
}
});
});
}
},
activated() {
this.fetchData();
},
methods: {
...mapActions(["fetchEntryOrderList", "fetchNotEntryOrderList"]),
...orderListMapActions(["cancelTradeConfirmInfo", "cancelTrade"]),
...mapMutations(["filterOrderList"]),
fetchData() {
if (this.isFetchEntryOrder) {
this.fetchEntryOrderList();
} else {
this.fetchNotEntryOrderList();
}
},
async onAction({ action, order }) {
console.log("----------action---------", action);
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
earnestMoney = 0,
realPrice = "",
priceInfo = {}
} = order;
const { productId, storageId, skup } = order.goodsInfo;
switch (action.name) {
case orderActionsMap.NOT_SOLD.name:
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner
});
this.$createDialog(
{
type: "confirm",
confirmBtn: { text: "不卖了" },
cancelBtn: { text: "继续出售" },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner
});
if (isOk) {
this.filterOrderList(orderCode);
}
// const txt = isOk ? "取消成功" : "取消失败";
// this.$createToast({ txt, type: "txt" }).show();
}
},
createElement => {
return [
createElement(CancelConfirmInfo, {
slot: "content",
props: { confirmInfo }
})
];
}
).show();
break;
default:
return;
}
}
},
watch: {
... ... @@ -108,6 +168,15 @@ export default {
overflow-y: auto;
-webkit-box-orient: vertical;
.footer-wrapper {
display: flex;
margin-top: 40px;
.actions {
flex: 1;
}
}
.order-list-scroll-wrap {
.list-wrapper {
li {
... ...
... ... @@ -14,7 +14,16 @@
<order-info :order="order" />
<order-list-item :order="order" />
<!-- 订单操作 -->
<order-item-footer :order="order" />
<!-- <order-item-footer :order="order" /> -->
<div class="footer-wrapper">
<count-down :leftTime="order.leftTime" />
<order-actions
class="actions"
:order="order"
@on-action="action => onAction({ action, order })"
/>
</div>
</li>
</ul>
</scroll>
... ... @@ -28,16 +37,27 @@
import { Scroll } from "cube-ui";
import { createNamespacedHelpers } from "vuex";
import {
orderActionsMap,
ownType
} from "../../../../constants/order-constants";
import OrderListItem from "./components/order-item";
import StatusNav from "./components/status-nav";
import OrderInfo from "./components/order-info.vue";
import EmptyList from "./components/empty";
import OrderItemFooter from "./components/order-footer";
import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";
import CancelConfirmInfo from "../components/order-list/cancel-confirm-info";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
"order/orderList"
);
const { mapMutations: orderMapMutations } = createNamespacedHelpers("order");
export default {
components: {
Scroll,
... ... @@ -45,7 +65,9 @@ export default {
StatusNav,
OrderInfo,
EmptyList,
OrderItemFooter
OrderItemFooter,
OrderActions,
CountDown
},
computed: {
...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
... ... @@ -61,15 +83,14 @@ export default {
// const { owner, status } = router.params;
// store.dispatch("order/orderList/fetchOrderList", { owner, status });
},
mounted() {
this.fetchData();
},
activated() {
this.reset("orderList");
this.fetchData();
},
methods: {
...mapActions(["fetchOrderList"]),
...mapActions(["fetchOrderList", "cancelTradeConfirmInfo", "cancelTrade"]),
...mapMutations(["setOrderStatus"]),
...orderMapMutations(["reset"]),
fetchMore() {
this.fetchOrderList(this.$route.params);
},
... ... @@ -80,23 +101,93 @@ export default {
this.setOrderStatus(status);
}
this.fetchOrderList(params);
},
async onAction({ action, order }) {
console.log("----------action---------", action);
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
earnestMoney = 0,
realPrice = "",
priceInfo = {}
} = order;
const { productId, storageId, skup } = order.goodsInfo;
switch (action.name) {
// 删除订单
case orderActionsMap.DEL_ORDER.name:
this.$createDialog({
type: "confirm",
content: "确认删除订单？",
onConfirm: async () => {
const isOk = await this.deleteOrder({
orderCode,
owner
});
const txt = isOk ? "删除成功" : "删除失败";
this.$createToast({ txt, type: "txt" }).show();
}
}).show();
break;
case orderActionsMap.CANCEL_ORDER.name:
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner
});
this.$createDialog(
{
type: "confirm",
confirmBtn: { text: "取消订单" },
cancelBtn: { text: "保留订单" },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner
});
if (isOk) {
this.reset("orderList");
this.fetchData(this.$route.params);
}
const txt = isOk ? "取消成功" : "取消失败";
this.$createToast({ txt, type: "txt" }).show();
}
},
watch: {
$route() {
// console.log("---------route change----------");
// this.fetchOrderList(this.$route.params);
createElement => {
return [
createElement(CancelConfirmInfo, {
slot: "content",
props: { confirmInfo }
})
];
}
).show();
break;
}
}
},
watch: {
$route() {}
}
};
</script>
<style lang="scss" scoped>
.content-wrapper {
height: calc(100vh - 300px);
height: calc(100vh - 200px);
overflow-x: hidden;
overflow-y: auto;
-webkit-box-orient: vertical;
.footer-wrapper {
display: flex;
margin-top: 40px;
.actions {
flex: 1;
}
}
.order-list-scroll-wrap {
.list-wrapper {
li {
... ...
... ... @@ -46,6 +46,18 @@ export default function() {
state.notEntryOrder.pullUpload = false;
}
},
filterOrderList(state, orderCode) {
state.entryOrder.list = state.entryOrder.list.filter(
order => order.orderCode !== orderCode,
);
state.notEntryOrder.list = state.notEntryOrder.list.filter(
order => order.orderCode !== orderCode,
);
state.isShowEmpty =
state.entryOrder.list.length === 0 &&
state.notEntryOrder.list.length === 0;
},
},
getters: {
// scroll 组件参数，是否触发上拉事件
... ...
... ... @@ -6,6 +6,16 @@ import orderLogistics from './order-logistics';
import orderDeliver from './order-deliver';
import inSaleOrderList from './in-sale-order-list';
const initialState = {
priceChange: priceChange().state,
orderList: orderList().state,
orderConfirm: orderConfirm().state,
orderDetail: orderDetail().state,
logisticsInfo: orderLogistics().state,
orderDeliver: orderDeliver().state,
inSaleOrderList: inSaleOrderList().state,
};
export default function() {
return {
namespaced: true,
... ... @@ -18,5 +28,27 @@ export default function() {
orderDeliver: orderDeliver(),
inSaleOrderList: inSaleOrderList(),
},
state: {
resetFlag: false,
},
mutations: {
/**
* reset module state
* @param {*} state
* @param { Array | String} moduleNames 模块名
*/
reset(state, moduleNames = []) {
if (typeof moduleNames === 'string') {
moduleNames = [moduleNames];
}
console.log('------reset module name------------', moduleNames);
// 修改flag,监听后reload
state.resetFlag = !state.resetFlag;
for (const name of moduleNames) {
Object.assign(state[name], initialState[name]);
}
},
},
};
}
... ...
export default function() {
return {
namespaced: true,
modules: {},
state: {
page: 1,
pageSize: 10,
... ... @@ -33,6 +34,7 @@ export default function() {
state.orderList = state.orderList.filter(
order => order.orderCode !== orderCode,
);
state.isShowEmpty = state.orderList.length === 0;
},
setOrderStatus(state, currentStatus) {
state.currentStatus = +currentStatus;
... ...