fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit feefda45924001a1376496890dec46ad914e80fb 1 parent 71c2b92f

订单详情

Inline Side-by-side
Showing 10 changed files with 141 additions and 42 deletions
<template>
<div class="address-wrapper">
<i class="address-icon"></i>
<div>
<p class="consignee">{{ userAddress.consignee }}</p>
<p class="area">{{ userAddress.area }}</p>
<p class="mobile">{{ userAddress.mobile }}</p>
</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("order/orderDetail");
export default {
computed: {
...mapGetters(["userAddress"])
}
};
</script>
<style lang="scss" scoped>
.address-wrapper {
display: flex;
align-items: center;
.consignee {
font-size: 32px;
font-weight: bold;
}
.area {
color: #999;
margin: 12px 0;
}
.mobile {
font: 28px;
}
.address-icon {
width: 48px;
height: 48px;
display: block;
background-size: contain;
margin-right: 40px;
background-image: url("~statics/image/order/addr-icon@3x.png");
}
}
</style>
\ No newline at end of file
... ...
<template>
<div class="logistics-wrapper">
<p>{{ userAddress.consignee }}</p>
<p>{{ userAddress.area }}</p>
<p>{{ userAddress.mobile }}</p>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("order/orderDetail");
export default {
computed: {
...mapGetters(["userAddress"])
}
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
... ... @@ -7,43 +7,47 @@
<p class="status-desc">{{ statusDetail.detailDesc }}</p>
</div>
<!-- 物流信息 -->
<div class="logistics item-wrapper">
<div class="detail">
<p>{{ lastExpressInfo.acceptRemark }}</p>
<p>{{ lastExpressInfo.createTimeStr }}</p>
<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>
<!-- 地址信息 -->
<logistic-info class="item-wrapper" />
<address-info class="item-wrapper" />
<!-- 商品信息 -->
<order-item-info class="item-wrapper" />
<!-- 价格信息 -->
<div class="price-info item-wrapper">
<p>
<span>商品金额:</span>
<span>{{ priceInfo.goodPrice }}</span>
<span class="label">商品金额:</span>
<span>¥{{ priceInfo.goodPrice }}</span>
</p>
<p>
<span>运费:</span>
<span>{{ priceInfo.feePrice }}</span>
<p class="delivery-fee">
<span class="label">运费:</span>
<span>¥{{ priceInfo.feePrice }}</span>
</p>
<p>
<span>实际金额:</span>
<span>{{ priceInfo.realPayPrice }}</span>
<span class="label">实际金额:</span>
<span class="pay-price">¥{{ priceInfo.realPayPrice }}</span>
</p>
</div>
<!-- 交易信息 -->
<div class="trade-info item-wrapper">
<p>
<span>创建时间:</span>
<span class="label">创建时间:</span>
<span>{{ orderDetail.createTime }}</span>
</p>
<p>
<span>订单编号:</span>
<span class="label">订单编号:</span>
<span>{{ orderDetail.orderCode }}</span>
</p>
<p>
<span>支付方式:</span>
<span class="label">支付方式:</span>
<span>{{ orderDetail.paymentStr }}</span>
</p>
</div>
... ... @@ -59,7 +63,7 @@
<script>
import { createNamespacedHelpers } from "vuex";
import LogisticInfo from "./components/logistics-info";
import AddressInfo from "./components/address-info";
import OrderItemInfo from "./components/order-detail-item";
import { Button } from "cube-ui";
... ... @@ -68,12 +72,12 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
);
export default {
components: {
LogisticInfo,
AddressInfo,
OrderItemInfo,
Button
},
asyncData({ store, router }) {
store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
// store.dispatch("order/orderDetail/fetchOrderDetail", router.params);
},
mounted() {
this.fetchOrderDetail(this.$route.params);
... ... @@ -101,6 +105,7 @@ export default {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
font-size: 24px;
.item-wrapper {
border-top: 1px solid #eee;
... ... @@ -117,15 +122,79 @@ export default {
}
.status-desc {
font-size: 24px;
color: #999;
letter-spacing: 0;
margin-top: 30px;
}
}
.logistics {
.logistics-info {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
.content {
display: flex;
align-items: center;
.info :last-child {
color: #999;
margin-top: 12px;
}
}
.logistics-icon,
.right-icon {
width: 48px;
height: 48px;
display: block;
background-size: contain;
}
.logistics-icon {
margin-right: 40px;
background-image: url("~statics/image/order/logistics-icon@3x.png");
}
.right-icon {
background-image: url("~statics/image/order/right-arrow-icon@3x.png");
}
}
.price-info {
font-size: 28px;
& > p {
display: flex;
justify-content: space-between;
}
& > p:first-child {
color: #999;
}
.delivery-fee {
margin: 12px 0;
color: #999;
}
.pay-price {
color: #d0021b;
}
}
.trade-info {
font-size: 28px;
& > :first-child + p {
margin: 20px 0;
}
}
.label {
font-size: 28px;
margin-right: 12px;
}
.actions {
... ...
... ... @@ -27,7 +27,7 @@ export default function() {
async fetchOrderDetail({ commit }, { owner, code } = {}) {
const res = await this.$api.get('/api/order/detail', {
tabType: owner,
orderCode: code,
orderCode: +code,
// Todo 删除
uid: 600043484,
... ...