文章目录
14-订单管理-查看物流
目的:再订单列表,订单待收货,查询物流信息。
大致步骤:
- 定义查询物流的API函数
- 定义一个查看物流组件
- 在
order-item.vue
组件触发查看物流自定义事件 - 在
index.vue
列表组件封装查看物理逻辑
落的代码:
views/member/order/components/order-logistics.vue
/**
* 查看物理
* @param {String} id - 订单ID
* @returns
*/
export const logisticsOrder = (id) => {
return request(`/member/order/${
id}/logistics`, 'get')
}
<template>
<XtxDialog v-model:visible="visibleDialog" title="查看物流">
<div class="order-logistics-goods" v-if="logistics">
<a class="image" href="javascript:;"
><img :src="logistics.picture" alt="" />
<p>{
{logistics.count}}件商品</p></a
>
<div class="info" v-if="logistics.company">
<p><span>配送企业:</span>{
{logistics.company.name}}</p>
<p><span>快递单号:</span>{
{logistics.company.number}}</p>
<p><span>联系电话:</span>{
{logistics.company.tel}}</p>
</div>
</div>
<div class="order-logistics-list" v-if="logistics">
<div class="item" v-for="(item, i) in logistics.list" :key="item.id">
<div class="line" :class="{ active: i === 0 }"></div>
<div class="logistics">
<p>{
{ item.text }}</p>
<p>{
{ item.time }}</p>
</div>
</div>
</div>
</XtxDialog>
</template>
<script>
import {
ref } from 'vue'
import {
logisticsOrder } from '@/api/order'
export default {
name: 'OrderLogistics',
setup () {
const visibleDialog = ref(false)
// 物流信息对象
const logistics = ref(null)
// 打开对话框
const open = (item) => {
visibleDialog.value = true
// 查询物理信息
logisticsOrder(item.id).then(data => {
logistics.value = data.result
})
}
return {
visibleDialog, open, logistics }
}
}
</script>
<style scoped lang="less">
.xtx-dialog ::v-deep .wrapper {
width: 680px;
}
.order-logistics-goods {
display: flex;
background-color: #f5f5f5;
height: 130px;
align-items: center;
padding: 0 20px;
margin-bottom: 20px;
font-size: 14px;
.image {
width: 92px;
height: 92px;
border: 1px solid #e4e4e4;
position: relative;
p {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
line-height: 20px;
color: #fff;
background-color: rgba(0,0,0,.5);
text-align: center;
}
}
.info {
flex: 1;
padding-left: 20px;
line-height: 30px;
span {
color: #999;
}
}
}
.order-logistics-list {
position: relative;
padding-top: 10px;
font-size: 14px;
.item {
display: flex;
&:last-child {
.line {
border-color: transparent;
&::before{
top: 0;
}
}
}
.line {
width: 27px;
border-right: 2px solid #f5f5f5;
margin-right: 25px;
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translate(7px, 0);
border-radius: 50%;
}
&::before {
width: 12px;
height: 12px;
background: #e4e4e4;
}
// 激活
&.active {
&::before {
background: @xtxColor;
z-index: 1;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translate(11px, -4px);
border-radius: 50%;
width: 20px;
height: 20px;
background: #E3F9F4;
}
}
}
.logistics {
flex: 1;
padding-bottom: 35px;
position: relative;
top: -3px;
p {
&:first-child {
color: #666;
}
&:last-child {
color: #999;
margin-top: 6px;
}
}
}
}
}
</style>
views/member/order/index.vue
// 封装逻辑-查看物流
const useLogisticsOrder = () => {
const logisticsOrderCom = ref(null)
const onLogisticsOrder = (item) => {
logisticsOrderCom.value.open(item)
}
return {
onLogisticsOrder, logisticsOrderCom }
}
return {
activeName,
orderStatus,
tabClick,
requestParams,
orderList,
loading,
total,
changePager,
onDeleteOrder,
...useCancelOrder(),
...useConfirmOrder(),
+ ...useLogisticsOrder()
}
<!-- 查看物理组件 -->
<Teleport to="#dailog">
<OrderLogistics ref="logisticsOrderCom" />
</Teleport>
+import OrderLogistics from './components/order-logistics'
import Confirm from '@/components/library/confirm'
import Message from '@/components/library/message'
export default {
name: 'MemberOrder',
+ components: {
OrderItem, OrderCancel, OrderLogistics },
15-订单详情-头部展示
目的:完成订单详情头部展示
大致步骤:
- 完成基础布局
- 获取订单详情数据
- 按照订单状态显示图标和状态
- 显示编号和下单时间
- 按照订单状态显示按钮
落的代码:
1.完成基础布局
src/view/member/order/index.vue
<template>
<div class="order-detail-page" v-if="order">
<!-- 操作栏 -->
<DetailAction :order="order" />
<!-- 步骤条 组件xtx-steps.vue-->
<!-- 物流栏 -->
<!-- 订单商品信息 -->
</div>
</template>
<script>
import DetailAction from './components/detail-action'
export default {
name: 'OrderDetailPage',
components: {
DetailAction }
}
</script>
<style scoped lang="less">
.order-detail-page {
background: #fff;
}
</style>
src/views/member/order/components/detail-action.vue
<template>
<div class="detail-action">
<div class="state">
<span class="iconfont icon-order-unpay"></span>
<p>待支付</p>
</div>
<div class="info">
<p>订单编号:1372361846887026690</p>
<p>下单时间:2021-03-18 01:45:10</p>
</div>
<div class="btn">
<XtxButton type="primary" size="small">评价商品</XtxButton>
<XtxButton type="plain" size="small">再次购买</XtxButton>
<XtxButton type="gray" size="small">申请售后</XtxButton>
</div>
</div>
</template>
<script>
export default {
name: 'OrderDetailAction'
}
</script>
<style scoped lang="less">
.detail-action {
height: 180px;
width: 100%;
display: flex;
align-items: center;
.state {
width: 220px;
text-align: center;
.iconfont {
font-size: 40px;
color: @xtxColor;
}
p {
font-size: 16px;
color: #666;
margin-bottom: 10px;
}
}
.info {
width: 240px;
line-height: 30px;
p {
color: #999;
}
}
.btn {
flex: 1;
text-align: right;
margin-right: 100px;
.xtx-button {
margin-left: 20px;
}
}
}
</style>
2.获取订单详情数据 src/views/member/order/index.vue
import {
ref } from 'vue'
import {
findOrder } from '@/api/order'
import {
useRoute } from 'vue-router'
import DetailAction from './components/detail-action'
export default {
name: 'OrderDetailPage',
components: {
DetailAction },
setup () {
const order = ref(null)
const route = useRoute()
findOrder(route.params.id).then(data => {
order.value = data.result
})
return {
order }
}
}
<div class="order-detail-page" v-if="order">
<!-- 操作栏 -->
<DetailAction :order="order" />
<!-- 步骤条-->
<!-- 物流栏 -->
<!-- 订单商品信息 -->
</div>
3.按照订单状态显示图标 src/views/member/order/components/detail-action.vue
import {
orderStatus } from '@/api/constants'
export default {
name: 'OrderDetailPage',
props: {
order: {
type: Object,
default: () => ({
})
}
},
setup () {
return {
orderStatus }
}
}
<div class="state">
<span class="iconfont" :class="[`icon-order-${orderStatus[order.orderState].name}`]"></span>
<p>{
{orderStatus[order.orderState].label}}</p>
</div>
4.显示编号和下单时间 src/views/member/order/components/detail-action.vue
<div class="info">
<p>订单编号:{
{order.id}}</p>
<p>下单时间:{
{order.createTime}}</p>
</div>
5.按照订单状态显示按钮 src/views/member/order/components/detail-action.vue
1.待付款:立即付款,取消订单
2.待发货:再次购买
3.待收货:确认收货,再次购买
4.待评价:评价商品,再次购买,申请售后
5.已完成:查看评价,再次购买,申请售后
6.已取消:-
<div class="btn">
<!-- 待付款 -->
<template v-if="order.orderState === 1">
<XtxButton @click="$router.push('/member/pay?id='+order.id)" type="primary" size="small">立即付款</XtxButton>
<XtxButton type="gray" size="small">取消订单</XtxButton>
</template>
<!-- 待发货 -->
<template v-if="order.orderState === 2">
<XtxButton type="primary" size="small">再次购买</XtxButton>
</template>
<!-- 待收货 -->
<template v-if="order.orderState === 3">
<XtxButton type="primary" size="small">确认收货</XtxButton>
<XtxButton type="plain" size="small">再次购买</XtxButton>
</template>
<!-- 待评价 -->
<template v-if="order.orderState === 4">
<XtxButton type="primary" size="small">再次购买</XtxButton>
<XtxButton type="plain" size="small">评价商品</XtxButton>
<XtxButton type="gray" size="small">申请售后</XtxButton>
</template>
<!-- 已完成 -->
<template v-if="order.orderState === 5">
<XtxButton type="primary" size="small">再次购买</XtxButton>
<XtxButton type="plain" size="small">查看评价</XtxButton>
<XtxButton type="gray" size="small">申请售后</XtxButton>
</template>
<!-- 已取消 -->
</div>