|
|
|
<template>
|
|
|
|
<layout-app :title="'\u200E'">
|
|
|
|
<div class="order-detail-wrapper">
|
|
|
|
<div class="content">
|
|
|
|
<!-- 状态信息 -->
|
|
|
|
<detail-header/>
|
|
|
|
<!-- 物流信息 -->
|
|
|
|
<router-link
|
|
|
|
v-if="lastExpressInfo"
|
|
|
|
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
|
|
|
|
>
|
|
|
|
<div class="logistics-info item-wrapper">
|
|
|
|
<div class="content">
|
|
|
|
<i class="logistics-icon"></i>
|
|
|
|
<div class="info">
|
|
|
|
<p>{{ lastExpressInfo.acceptRemark }}</p>
|
|
|
|
<p>{{ lastExpressInfo.createTimeStr }}</p>
|
|
|
|
<layout-app :title="'\u200E'" class="seller-order-detail-wrapper">
|
|
|
|
<scroll>
|
|
|
|
<div class="order-detail-wrapper">
|
|
|
|
<div class="content">
|
|
|
|
<!-- 状态信息 -->
|
|
|
|
<detail-header />
|
|
|
|
<!-- 物流信息 -->
|
|
|
|
<router-link
|
|
|
|
v-if="lastExpressInfo"
|
|
|
|
:to="{ name: 'orderLogisticsInfo', params: $route.params }"
|
|
|
|
>
|
|
|
|
<div class="logistics-info item-wrapper">
|
|
|
|
<div class="content">
|
|
|
|
<i class="logistics-icon"></i>
|
|
|
|
<div class="info">
|
|
|
|
<p>{{ lastExpressInfo.acceptRemark }}</p>
|
|
|
|
<p>{{ lastExpressInfo.createTimeStr }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<i class="right-icon"></i>
|
|
|
|
</div>
|
|
|
|
<i class="right-icon"></i>
|
|
|
|
</router-link>
|
|
|
|
<!-- 地址信息 -->
|
|
|
|
<address-info class="item-wrapper" />
|
|
|
|
<!-- 商品信息 -->
|
|
|
|
<order-item-info class="item-wrapper" />
|
|
|
|
<!-- 价格信息 -->
|
|
|
|
<div class="price-info item-wrapper">
|
|
|
|
<p>
|
|
|
|
<span class="label platform-fee"
|
|
|
|
>平台费用:<i @click="onPlatformFee" class="tip"></i
|
|
|
|
></span>
|
|
|
|
<span>{{ platformFee.amount }}</span>
|
|
|
|
</p>
|
|
|
|
<p class="delivery-fee">
|
|
|
|
<span class="label"
|
|
|
|
>银行转账费({{
|
|
|
|
parseInt(platformFee.payChannelPercentage || 0)
|
|
|
|
}}%):</span
|
|
|
|
>
|
|
|
|
<span>{{ orderDetail.bankTransferFee }}</span>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span class="label">实际收入:</span>
|
|
|
|
<span class="pay-price">{{ orderDetail.income }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</router-link>
|
|
|
|
<!-- 地址信息 -->
|
|
|
|
<address-info class="item-wrapper"/>
|
|
|
|
<!-- 商品信息 -->
|
|
|
|
<order-item-info class="item-wrapper"/>
|
|
|
|
<!-- 价格信息 -->
|
|
|
|
<div class="price-info item-wrapper">
|
|
|
|
<p>
|
|
|
|
<span class="label platform-fee"
|
|
|
|
>平台费用:<i @click="onPlatformFee" class="tip"></i
|
|
|
|
></span>
|
|
|
|
<span>{{ platformFee.amount }}</span>
|
|
|
|
</p>
|
|
|
|
<p class="delivery-fee">
|
|
|
|
<span class="label"
|
|
|
|
>银行转账费({{
|
|
|
|
parseInt(platformFee.payChannelPercentage || 0)
|
|
|
|
}}%):</span
|
|
|
|
>
|
|
|
|
<span>{{ orderDetail.bankTransferFee }}</span>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span class="label">实际收入:</span>
|
|
|
|
<span class="pay-price">{{ orderDetail.income }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<!-- 交易信息 -->
|
|
|
|
<div class="trade-info item-wrapper">
|
|
|
|
<p>
|
|
|
|
<span class="label">创建时间:</span>
|
|
|
|
<span>{{ orderDetail.createTime }}</span>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span class="label">订单编号:</span>
|
|
|
|
<span>{{ orderDetail.orderCode }}</span>
|
|
|
|
<i ref="copy" class="copy"></i>
|
|
|
|
</p>
|
|
|
|
<!-- <p v-if="orderDetail.paymentStr">
|
|
|
|
<!-- 交易信息 -->
|
|
|
|
<div class="trade-info item-wrapper">
|
|
|
|
<p>
|
|
|
|
<span class="label">创建时间:</span>
|
|
|
|
<span>{{ orderDetail.createTime }}</span>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span class="label">订单编号:</span>
|
|
|
|
<span>{{ orderDetail.orderCode }}</span>
|
|
|
|
<i ref="copy" class="copy"></i>
|
|
|
|
</p>
|
|
|
|
<!-- <p v-if="orderDetail.paymentStr">
|
|
|
|
<span class="label">支付方式:</span>
|
|
|
|
<span>{{ orderDetail.paymentStr }}</span>
|
|
|
|
</p> -->
|
|
|
|
<p v-if="orderDetail.earnestMoneyStr">
|
|
|
|
<span class="label">保证金:</span>
|
|
|
|
<span class="earnest-price">{{ orderDetail.earnestMoneyStr }}</span>
|
|
|
|
</p>
|
|
|
|
<p v-if="statusDetail.paymentTips">
|
|
|
|
<span class="payment-tip">{{ statusDetail.paymentTips }}</span>
|
|
|
|
</p>
|
|
|
|
<p v-if="orderDetail.earnestMoneyStr">
|
|
|
|
<span class="label">保证金:</span>
|
|
|
|
<span class="earnest-price">{{
|
|
|
|
orderDetail.earnestMoneyStr
|
|
|
|
}}</span>
|
|
|
|
</p>
|
|
|
|
<p v-if="statusDetail.paymentTips">
|
|
|
|
<span class="payment-tip">{{ statusDetail.paymentTips }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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 => {
|
|
|
|
onInSaleOrderAction({
|
|
|
|
action,
|
|
|
|
order: orderDetail,
|
|
|
|
isDetail: true
|
|
|
|
});
|
|
|
|
onAction({ action, order: orderDetail, isDetail: true });
|
|
|
|
}
|
|
|
|
"
|
|
|
|
/>
|
|
|
|
</scroll>
|
|
|
|
|
|
|
|
<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 => {
|
|
|
|
onInSaleOrderAction({
|
|
|
|
action,
|
|
|
|
order: orderDetail,
|
|
|
|
isDetail: true
|
|
|
|
});
|
|
|
|
onAction({ action, order: orderDetail, isDetail: true });
|
|
|
|
}
|
|
|
|
"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</layout-app>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
|
import { Button } from 'cube-ui';
|
|
|
|
import Clipboard from 'clipboard';
|
|
|
|
import { createNamespacedHelpers } from "vuex";
|
|
|
|
import { Button } from "cube-ui";
|
|
|
|
import Clipboard from "clipboard";
|
|
|
|
|
|
|
|
import AddressInfo from './components/sell-order-address-info';
|
|
|
|
import OrderItemInfo from './components/order-detail-item';
|
|
|
|
import DetailHeader from './components/header';
|
|
|
|
import DetailFooter from './components//detail-footer';
|
|
|
|
import AddressInfo from "./components/sell-order-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 OrderActions from "../components/order-actions";
|
|
|
|
|
|
|
|
import orderActionMixin from '../mixin/order-action';
|
|
|
|
import orderInSaleActionMixin from '../mixin/order-in-sale-action';
|
|
|
|
import orderActionMixin from "../mixin/order-action";
|
|
|
|
import orderInSaleActionMixin from "../mixin/order-in-sale-action";
|
|
|
|
|
|
|
|
import PlatformFeeInfo from '../components/platform-fee-info';
|
|
|
|
import PlatformFeeInfo from "../components/platform-fee-info";
|
|
|
|
import { Scroll } from "cube-ui";
|
|
|
|
|
|
|
|
const STORE_PATH = 'order/orderDetail';
|
|
|
|
const STORE_PATH = "order/orderDetail";
|
|
|
|
|
|
|
|
const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
|
|
|
|
STORE_PATH
|
|
...
|
...
|
@@ -124,7 +130,8 @@ export default { |
|
|
|
Button,
|
|
|
|
DetailHeader,
|
|
|
|
DetailFooter,
|
|
|
|
OrderActions
|
|
|
|
OrderActions,
|
|
|
|
Scroll
|
|
|
|
},
|
|
|
|
asyncData({ store, router }) {
|
|
|
|
return store.dispatch(`${STORE_PATH}/fetchOrderDetail`, router.params);
|
|
...
|
...
|
@@ -136,33 +143,33 @@ export default { |
|
|
|
return this.orderDetail.orderCode;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.copyBtn.on('success', () => {
|
|
|
|
this.copyBtn.on("success", () => {
|
|
|
|
this.$createToast({
|
|
|
|
txt: '复制成功',
|
|
|
|
type: 'txt'
|
|
|
|
txt: "复制成功",
|
|
|
|
type: "txt"
|
|
|
|
}).show();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['orderDetail']),
|
|
|
|
...mapState(["orderDetail"]),
|
|
|
|
...mapGetters([
|
|
|
|
'lastExpressInfo',
|
|
|
|
'priceInfo',
|
|
|
|
'statusDetail',
|
|
|
|
'platformFee',
|
|
|
|
'actionList'
|
|
|
|
"lastExpressInfo",
|
|
|
|
"priceInfo",
|
|
|
|
"statusDetail",
|
|
|
|
"platformFee",
|
|
|
|
"actionList"
|
|
|
|
])
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchOrderDetail']),
|
|
|
|
...mapActions(["fetchOrderDetail"]),
|
|
|
|
onPlatformFee() {
|
|
|
|
const { platformFee = {} } = this.orderDetail;
|
|
|
|
this.$createDialog(
|
|
|
|
{
|
|
|
|
type: 'alert',
|
|
|
|
title: '平台费用',
|
|
|
|
confirmBtn: { text: '我知道了' }
|
|
|
|
type: "alert",
|
|
|
|
title: "平台费用",
|
|
|
|
confirmBtn: { text: "我知道了" }
|
|
|
|
},
|
|
|
|
createElement => {
|
|
|
|
return [
|
|
...
|
...
|
@@ -170,15 +177,15 @@ export default { |
|
|
|
props: {
|
|
|
|
platformFeeInfo: {
|
|
|
|
packageFee: platformFee.packageFee,
|
|
|
|
packageFeeDesc: '商品包装费',
|
|
|
|
packageFeeDesc: "商品包装费",
|
|
|
|
payChannelPercentage: platformFee.goodsPaymentRatePercent,
|
|
|
|
serviceFee: platformFee.serviceFee,
|
|
|
|
serviceFeeDesc: '平台服务费',
|
|
|
|
serviceFeeDesc: "平台服务费",
|
|
|
|
appraiseFee: platformFee.appraiseFee,
|
|
|
|
appraiseFeeDesc: '商品鉴定费'
|
|
|
|
appraiseFeeDesc: "商品鉴定费"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
slot: 'content'
|
|
|
|
slot: "content"
|
|
|
|
})
|
|
|
|
];
|
|
|
|
}
|
|
...
|
...
|
@@ -189,45 +196,48 @@ export default { |
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.seller-order-detail-wrapper /deep/ .layout-context {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
|
|
|
.earnest-price {
|
|
|
|
font-size: 28px;
|
|
|
|
color: #d0021b;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.order-detail-wrapper {
|
|
|
|
// footer高度120px
|
|
|
|
padding: 0 40px;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
height: calc(100vh - 210px);
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: auto;
|
|
|
|
padding: 0 40px 120px 40px;
|
|
|
|
flex: 1 0 0;
|
|
|
|
overflow: hidden;
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
.earnest-price {
|
|
|
|
font-size: 28px;
|
|
|
|
color: #d0021b;
|
|
|
|
}
|
|
|
|
|
|
|
|
.logistics-info {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
...
|
...
|
|
