fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit c45fb639c90e7cb1a86b029b5937459c7869ec6e 1 parent 3ace87c2

订单列表优化

Inline Side-by-side
Showing 8 changed files with 184 additions and 449 deletions
... ... @@ -2,15 +2,12 @@
/* eslint-disable space-before-function-paren */
import { orderActionsMap, ownType } from 'constants/order-constants';
import { createNamespacedHelpers } from 'vuex';
import DialogConfirmInfo from '../../components/dialog-confirm-info';
import DialogChangeBidPrice from '../../components/dialog-change-bid-price';
import DialogConfirmInfo from '../components/dialog-confirm-info';
import DialogChangeBidPrice from '../components/dialog-change-bid-price';
const { mapActions, mapMutations, mapState } = createNamespacedHelpers(
'order/orderList',
);
const { mapMutations: inSaleMapMutations } = createNamespacedHelpers(
'order/inSaleOrderList',
);
export default {
computed: {
... ... @@ -25,16 +22,15 @@ export default {
'confirmChangePrice',
]),
...mapMutations(['filterOrderList', 'resetData']),
...inSaleMapMutations(['filterInSaleOrderList']),
// 订单列表
async onAction({ action, order }) {
async onAction({ action, order, isDetail = false } = {}) {
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
realPrice = '',
bidDepositInfo = {},
goodsInfo = {},
priceInfo = {},
} = order;
switch (action.name) {
... ... @@ -50,7 +46,11 @@ export default {
});
if (isOk) {
this.filterOrderList(orderCode);
if (isDetail) {
this.$router.back();
} else {
this.filterOrderList(orderCode);
}
}
const txt = isOk ? '删除成功' : '删除失败';
... ... @@ -68,9 +68,14 @@ export default {
if (Array.isArray(confirmInfo)) {
confirmInfo = { confirmDesc: '确定取消求购' };
}
const confirmBtnText = confirmInfo.needPenalty
? '赔付并取消订单'
: '取消订单';
this.$createConfirmDialog(
{
confirmBtn: { text: '取消订单', style: { color: '#D0021B' } },
confirmBtn: { text: confirmBtnText, style: { color: '#D0021B' } },
cancelBtn: { text: '保留订单', active: true },
onConfirm: async () => {
const isOk = await this.cancelTrade({
... ... @@ -79,8 +84,12 @@ export default {
});
if (isOk) {
this.resetData();
this.fetchData(this.$route.params);
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.resetData();
this.fetchData(this.$route.params);
}
}
const txt = isOk ? '取消成功' : '取消失败';
... ... @@ -100,15 +109,23 @@ export default {
}
case orderActionsMap.NOW_BUY.name: {
let price = realPrice,
pageBackName = 'OrderList';
if (isDetail) {
price = priceInfo.realPayPrice;
pageBackName = 'buyOrderDetail';
}
this.$createOrderPayType({
orderCode,
price: parseFloat(realPrice),
price: parseFloat(price || ''),
desc: '',
extra: JSON.stringify({
forward: {
name: 'OrderList',
back: {
name: pageBackName,
params: {
owner: 'buy',
owner,
orderCode,
},
},
}),
... ... @@ -145,12 +162,13 @@ export default {
});
if (isOk) {
this.resetData();
this.fetchData(this.$route.params);
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.resetData();
this.fetchData(this.$route.params);
}
}
// const txt = isOk ? "收货成功" : "收货失败";
// this.$createToast({ txt, type: "txt" }).show();
},
}).show();
break;
... ... @@ -187,8 +205,12 @@ export default {
});
if (isOk) {
this.resetData();
this.fetchData(this.$route.params);
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.resetData();
this.fetchData(this.$route.params);
}
}
},
},
... ... @@ -207,111 +229,6 @@ export default {
).show();
break;
}
case orderActionsMap.NOT_SOLD.name: {
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner,
});
const confirmBtnText = confirmInfo.needPenalty
? '赔付并取消订单'
: '不卖了';
this.$createConfirmDialog(
{
confirmBtn: { text: confirmBtnText, style: { color: '#D0021B' } },
cancelBtn: { text: '继续出售', active: true },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner,
});
if (isOk) {
this.resetData();
this.fetchData(this.$route.params);
}
// const txt = isOk ? "取消成功" : "取消失败";
// this.$createToast({ txt, type: "txt" }).show();
},
},
createElement => {
return [
createElement(DialogConfirmInfo, {
props: { info: confirmInfo },
slot: 'content',
}),
];
},
).show();
break;
}
default:
return;
}
},
// 出售中订单列表
async onInsaleOrderAction({ action, order }) {
const { owner = ownType.SELL } = this.$route.params;
const { orderCode, earnestMoney = 0 } = order;
switch (action.name) {
case orderActionsMap.NOT_SOLD.name: {
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner,
});
const confirmBtnText = confirmInfo.needPenalty
? '赔付并取消订单'
: '不卖了';
this.$createConfirmDialog(
{
confirmBtn: { text: confirmBtnText, style: { color: '#D0021B' } },
cancelBtn: { text: '继续出售', active: true },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner,
});
if (isOk) {
this.filterInSaleOrderList(orderCode);
}
// const txt = isOk ? "取消成功" : "取消失败";
// this.$createToast({ txt, type: "txt" }).show();
},
},
createElement => {
return [
createElement(DialogConfirmInfo, {
props: { info: confirmInfo },
slot: 'content',
}),
];
},
).show();
break;
}
case orderActionsMap.PAY_EARNESTMONEY.name: {
this.$createOrderPayType({
orderCode,
price: earnestMoney,
desc: '保证金',
// 支付成功会跳route
extra: JSON.stringify({
forward: {
name: 'InSaleOrderList',
},
}),
}).show();
break;
}
default:
return;
}
... ...
/* eslint-disable operator-linebreak */
/* eslint-disable space-before-function-paren */
import { orderActionsMap, ownType } from 'constants/order-constants';
import { createNamespacedHelpers } from 'vuex';
import DialogConfirmInfo from '../components/dialog-confirm-info';
const { mapActions } = createNamespacedHelpers('order/orderList');
const { mapMutations: inSaleMapMutations } = createNamespacedHelpers(
'order/inSaleOrderList',
);
export default {
methods: {
...mapActions(['cancelTradeConfirmInfo', 'cancelTrade']),
...inSaleMapMutations(['filterInSaleOrderList']),
async onSaleOrderAction({ action, order, isDetail = false } = {}) {
const { owner = ownType.SELL } = this.$route.params;
const { orderCode, earnestMoney = 0 } = order;
switch (action.name) {
case orderActionsMap.NOT_SOLD.name: {
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner,
});
const confirmBtnText = confirmInfo.needPenalty
? '赔付并取消订单'
: '不卖了';
this.$createConfirmDialog(
{
confirmBtn: { text: confirmBtnText, style: { color: '#D0021B' } },
cancelBtn: { text: '继续出售', active: true },
onConfirm: async () => {
const isOk = await this.cancelTrade({
orderCode,
owner,
});
if (isOk) {
if (isDetail) {
this.fetchOrderDetail(this.$route.params);
} else {
this.filterInSaleOrderList(orderCode);
}
}
},
},
createElement => {
return [
createElement(DialogConfirmInfo, {
props: { info: confirmInfo },
slot: 'content',
}),
];
},
).show();
break;
}
case orderActionsMap.PAY_EARNESTMONEY.name: {
const pageBackName = isDetail ? 'sellOrderDetail' : 'InSaleOrderList';
this.$createOrderPayType({
orderCode,
price: earnestMoney,
desc: '保证金',
// 支付成功会跳route
extra: JSON.stringify({
forward: {
name: pageBackName,
},
}),
}).show();
break;
}
default:
return;
}
},
},
};
... ...
... ... @@ -25,7 +25,11 @@
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 鉴定视频 -->
<div class="video-img" v-if="orderDetail.appraiseVideoUrl" @click="() => onVideoHandler()"></div>
<div
class="video-img"
v-if="orderDetail.appraiseVideoUrl"
@click="() => onVideoHandler()"
></div>
<div ref="videoWrapper" class="video-wrapper">
<VideoPlayer
ref="videoPlayer"
... ... @@ -114,7 +118,7 @@
class="detail-actions"
:order="orderDetail"
@on-action="
action => onBuyerOrderAction({ action, order: orderDetail })
action => onAction({ action, order: orderDetail, isDetail: true })
"
/>
</div>
... ... @@ -135,7 +139,7 @@ import DetailFooter from "./components//detail-footer";
import OrderActions from "../components/order-actions";
import VideoPlayer from "../order-list/components/video-player";
import orderActionMixin from "./mixins/order-action";
import orderBuyActionMixin from "../mixin/order-buy";
const STORE_PATH = "order/orderDetail";
... ... @@ -144,7 +148,7 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
);
export default {
mixins: [orderActionMixin],
mixins: [orderBuyActionMixin],
components: {
AddressInfo,
OrderItemInfo,
... ...
... ... @@ -55,17 +55,22 @@ export default {
...mapGetters(["userAddress", "appraiseAddress"])
},
activated() {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
const { addressName, address, mobile } = this.appraiseAddress;
return `${addressName} ${address} ${mobile}`;
this.$nextTick(() => {
if (!this.$refs.copy) {
return;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
const { addressName, address, mobile } = this.appraiseAddress;
return `${addressName} ${address} ${mobile}`;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
});
});
}
};
... ...
/* eslint-disable operator-linebreak */
/* eslint-disable space-before-function-paren */
import { createNamespacedHelpers } from 'vuex';
const { mapActions, mapState } = createNamespacedHelpers('order/orderList');
import { orderActionsMap, ownType } from 'constants/order-constants';
import DialogConfirmInfo from '../../components/dialog-confirm-info';
import DialogChangeBidPrice from '../../components/dialog-change-bid-price';
export default {
data() {
return {
isMixin: true,
};
},
computed: {
...mapState(['changePrice']),
},
methods: {
...mapActions([
'cancelTradeConfirmInfo',
'cancelTrade',
'deleteOrder',
'computeChangePrice',
'confirmChangePrice',
]),
async onSellerOrderAction({ action, order }) {
const { owner = ownType.SELL } = this.$route.params;
const { orderCode, earnestMoney } = order;
switch (action.name) {
case orderActionsMap.DEL_ORDER.name: {
this.deleteOrderConfirmDialog({ orderCode, owner });
break;
}
case orderActionsMap.NOT_SOLD.name: {
const confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner,
});
const confirmBtnText = confirmInfo.needPenalty
? '赔付并取消订单'
: '不卖了';
this.$createConfirmDialog(
{
confirmBtn: {
text: confirmBtnText,
style: { color: '#D0021B' },
},
cancelBtn: { text: '继续出售', active: true },
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(DialogConfirmInfo, {
props: { info: confirmInfo },
slot: 'content',
}),
];
},
).show();
break;
}
case orderActionsMap.PAY_EARNESTMONEY.name: {
this.$createOrderPayType({
orderCode,
price: earnestMoney,
desc: '保证金',
// 支付成功会跳route
extra: JSON.stringify({
back: {
name: 'sellOrderDetail',
params: { owner, orderCode },
},
}),
}).show();
break;
}
default:
return;
}
},
async onBuyerOrderAction({ action, order }) {
const { owner = ownType.SELL } = this.$route.params;
const {
orderCode,
priceInfo = {},
bidDepositInfo = {},
goodsInfo,
} = order;
switch (action.name) {
case orderActionsMap.DEL_ORDER.name: {
this.deleteOrderConfirmDialog({ orderCode, owner });
break;
}
case orderActionsMap.PAY_DEPOSIT.name: {
this.$createOrderPayType({
orderCode,
price: parseFloat(bidDepositInfo.depositAmount),
desc: '支付定金',
extra: JSON.stringify({
forward: {
name: 'OrderList',
params: {
owner: 'buy',
},
},
}),
}).show();
break;
}
case orderActionsMap.CHANGE_BID_PRICE.name: {
const { goodPrice } = goodsInfo;
const computePriceInfo = await this.computeChangePrice({
orderCode,
price: goodPrice,
});
if (typeof computePriceInfo === 'string') {
this.$createToast({
type: 'alert',
txt: computePriceInfo,
mask: true,
}).show();
return;
}
this.$createDialog(
{
type: 'prompt',
confirmBtn: { text: '调整求购价' },
cancelBtn: { active: true },
onConfirm: async () => {
if (!this.changePrice) {
return;
}
const isOk = await this.confirmChangePrice({
price: this.changePrice,
orderCode,
});
if (isOk) {
this.fetchOrderDetail(this.$route.params);
}
},
},
createElement => {
return [
createElement(DialogChangeBidPrice, {
props: {
computePriceInfo,
goodsInfo,
orderCode,
},
slot: 'content',
}),
];
},
).show();
break;
}
case orderActionsMap.CANCEL_ORDER.name: {
let confirmInfo = await this.cancelTradeConfirmInfo({
orderCode,
owner,
});
if (Array.isArray(confirmInfo)) {
confirmInfo = { confirmDesc: '确定取消求购' };
}
this.$createConfirmDialog(
{
confirmBtn: { text: '取消订单', style: { color: '#D0021B' } },
cancelBtn: { text: '保留订单', active: true },
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(DialogConfirmInfo, {
props: { info: confirmInfo },
slot: 'content',
}),
];
},
).show();
break;
}
case orderActionsMap.NOW_BUY.name: {
this.$createOrderPayType({
orderCode,
price: parseFloat(priceInfo.realPayPrice || ''),
desc: '',
extra: JSON.stringify({
back: {
name: 'buyOrderDetail',
params: {
owner,
orderCode,
},
},
}),
}).show();
break;
}
case orderActionsMap.CONFIRM_DELIVERY.name: {
this.$createConfirmDialog({
content: '确认收货？',
confirmBtn: { style: { color: '#D0021B' } },
cancelBtn: { active: true },
onConfirm: async () => {
const isOk = await this.confirmReceipt({
orderCode,
owner,
});
if (isOk) {
this.fetchOrderDetail(this.$route.params);
}
// const txt = isOk ? "收货成功" : "收货失败";
// this.$createToast({ txt, type: "txt" }).show();
},
}).show();
break;
}
default:
return;
}
},
// 删除订单
deleteOrderConfirmDialog({ orderCode, owner }) {
this.$createConfirmDialog({
type: 'confirm',
content: '确认删除订单？',
confirmBtn: { style: { color: '#D0021B' } },
onConfirm: async () => {
const isOk = await this.deleteOrder({
orderCode,
owner,
});
if (isOk) {
this.$router.back();
}
// const txt = isOk ? "删除成功" : "删除失败";
// this.$createToast({ txt, type: "txt" }).show();
},
}).show();
},
},
};
... ... @@ -35,7 +35,7 @@
<p class="delivery-fee">
<span class="label"
>银行转账费({{
parseInt(platformFee.payChannelPercentage || 0)
parseInt(platformFee.goodsPaymentRatePercent || 0)
}}%):</span
>
<span>{{ orderDetail.bankTransferFee }}</span>
... ... @@ -78,7 +78,10 @@
class="detail-actions"
:order="orderDetail"
@on-action="
action => onSellerOrderAction({ action, order: orderDetail })
action => {
onSaleOrderAction({ action, order: orderDetail, isDetail: true });
onAction({ action, order: orderDetail, isDetail: true });
}
"
/>
</div>
... ... @@ -98,7 +101,9 @@ import DetailFooter from "./components//detail-footer";
import OrderActions from "../components/order-actions";
import orderActionMixin from "./mixins/order-action";
import orderBuyActionMixin from "../mixin/order-buy";
import orderSellActionMixin from "../mixin/order-sell";
import PlatformFeeInfo from "../components/platform-fee-info";
const STORE_PATH = "order/orderDetail";
... ... @@ -108,7 +113,7 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
);
export default {
mixins: [orderActionMixin],
mixins: [orderBuyActionMixin, orderSellActionMixin],
components: {
AddressInfo,
OrderItemInfo,
... ... @@ -121,16 +126,18 @@ export default {
return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params);
},
activated() {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
return this.orderDetail.orderCode;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
this.$nextTick(() => {
this.copyBtn = new Clipboard(this.$refs.copy, {
text: () => {
return this.orderDetail.orderCode;
}
});
this.copyBtn.on("success", () => {
this.$createToast({
txt: "复制成功",
type: "txt"
}).show();
});
});
},
computed: {
... ...
... ... @@ -17,7 +17,7 @@
<order-actions
class="actions"
:order="order"
@on-action="action => onInsaleOrderAction({ action, order })"
@on-action="action => onSaleOrderAction({ action, order })"
/>
</div>
</li>
... ... @@ -43,7 +43,7 @@ import EmptyList from "components//ufo-no-item";
import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";
import orderActionMixin from "./mixins/order-action";
import orderSellActionMixin from "../mixin/order-sell";
const IN_SALE_STORE_PATH = "order/inSaleOrderList";
... ... @@ -56,7 +56,7 @@ const {
export default {
// 订单操作
mixins: [orderActionMixin],
mixins: [orderSellActionMixin],
components: {
Scroll,
OrderItem,
... ...
... ... @@ -20,7 +20,12 @@
class="actions"
pageName="list"
:order="order"
@on-action="action => onAction({ action, order })"
@on-action="
action => {
onAction({ action, order });
onSaleOrderAction({ action, order });
}
"
@on-video="params => onVideoHandle(params)"
/>
</div>
... ... @@ -58,7 +63,8 @@ import EmptyList from "components//ufo-no-item";
import OrderActions from "../components/order-actions";
import CountDown from "../components/count-down";
import orderActionMixin from "./mixins/order-action";
import orderBuyActionMixin from "../mixin/order-buy";
import orderSellActionMixin from "../mixin/order-sell";
const STORE_PATH = "order/orderList";
... ... @@ -66,7 +72,7 @@ const { mapActions, mapState } = createNamespacedHelpers(STORE_PATH);
export default {
// 订单操作
mixins: [orderActionMixin],
mixins: [orderBuyActionMixin, orderSellActionMixin],
components: {
Scroll,
OrderItem,
... ...