378 lines
14 KiB
Vue
378 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import { invoiceListApi, orderDetailApi, orderListApi } from '~/server/orderApi'
|
||
import useOrder from '~/composables/useOrder'
|
||
import { CartBatchAdd, NavigateToTitle } from '~/types/order'
|
||
import { ref, reactive, computed } from 'vue'
|
||
const { handleIntoPage, isBuyAgain, isRefund, isRefunded } = useOrder()
|
||
import { activeStatuFilter } from '~/utils/filter'
|
||
import { linkNavigateTo } from '~/utils/util'
|
||
import feedback from '~/utils/feedback'
|
||
import { ProductTypeEnum, RefundStatusEnum } from '@/enums/productEnums'
|
||
import SystemFromInfo from '~/components/systemFromInfo.vue'
|
||
|
||
const route = useRoute()
|
||
const orderNo = ref<string>(<string>route.query.orderNo)
|
||
const page = ref<string>(<string>route.query.page)
|
||
const orderStatus = ref<string>(<string>route.query.orderStatus)
|
||
const loading = ref<boolean>(false)
|
||
const type = ref<number>(0) //订单类型:0-基础订单,1-秒杀订单,2-拼团订单
|
||
|
||
const bgColor = reactive<any>({
|
||
bgColor: '',
|
||
Color: '#E93323',
|
||
width: '36rpx',
|
||
timeTxtwidth: '16rpx',
|
||
isDay: true,
|
||
fontSize: '14px',
|
||
})
|
||
|
||
/**
|
||
* 订单详情
|
||
*/
|
||
const orderInfo = reactive({})
|
||
const cartInfo = ref([]) //再次购买加入购物车的商品
|
||
const userAddress = ref([])
|
||
const orderExtend = ref([]) // 系统表单数据
|
||
const isUserAddress = ref<boolean>(false) //是否只显示一次收货地址
|
||
const shippingType = ref<number>(1) //是快递还是自提 1快递2自提
|
||
const getOrderDetail = async () => {
|
||
loading.value = true
|
||
await orderDetailApi(orderNo.value)
|
||
.then((res) => {
|
||
Object.assign(orderInfo, res)
|
||
userAddress.value = res.merchantOrderList.filter((item: any) => {
|
||
return item.shippingType === 1
|
||
})
|
||
shippingType.value = res.merchantOrderList[0].shippingType
|
||
cartInfo.value = res.merchantOrderList[0].orderInfoList
|
||
orderExtend.value = res.orderExtend ? JSON.parse(res.orderExtend) : []
|
||
isUserAddress.value = userAddress.value.length > 0 ? true : false
|
||
loading.value = false
|
||
})
|
||
.catch(() => {
|
||
loading.value = false
|
||
})
|
||
}
|
||
getOrderDetail()
|
||
|
||
//物流列表
|
||
const { data: invoiceList } = await useAsyncData(async () => invoiceListApi(orderNo.value))
|
||
// 地址跳转
|
||
const handlerNuxtLink = async () => {
|
||
await linkNavigateTo(`/order/order_logistics`, { orderNo: orderNo.value, secondType: orderInfo.secondType })
|
||
}
|
||
|
||
//去退款列表
|
||
const handleToOrderRefund = async (orderNo: string) => {
|
||
await linkNavigateTo(`/users/refund_list`, { type: 9, orderNo: orderNo })
|
||
}
|
||
|
||
const useOrders = useOrder()
|
||
//再次购买
|
||
const handleByAgain = async () => {
|
||
let cartListRequest: Array<CartBatchAdd> = []
|
||
cartInfo.value.map((item) => {
|
||
cartListRequest.push({
|
||
productId: parseFloat(item.productId),
|
||
productAttrUnique: item.attrValueId,
|
||
cartNum: parseFloat(item.payNum),
|
||
})
|
||
})
|
||
await useOrders.onByAgain(cartListRequest)
|
||
}
|
||
|
||
//立即付款
|
||
const handlePaymentOrder = (orderNo: string) => {
|
||
linkNavigateTo(`/order/order_payment`, { orderNo: orderNo })
|
||
}
|
||
|
||
//倒计时结束
|
||
const isShowCancelTime = ref<boolean>(false)
|
||
const stopTime = () => {
|
||
isShowCancelTime.value = true
|
||
}
|
||
const navigateToTitle = reactive<NavigateToTitle>({
|
||
title: '我的订单',
|
||
linkUrl: '/users/order_list',
|
||
params: { type: 1, page: page.value, orderStatus: orderStatus.value },
|
||
})
|
||
|
||
//确认收货
|
||
const handleConfirmOrder = async () => {
|
||
let applyRefundNum = 0
|
||
orderInfo.merchantOrderList.map((item) => {
|
||
item.orderInfoList.map((i) => {
|
||
applyRefundNum = Number(i.applyRefundNum) + Number(i.refundNum)
|
||
})
|
||
})
|
||
//如果有售后中的，给提示
|
||
if (applyRefundNum > 0) {
|
||
return feedback.confirm('请先撤销售后，再进行收货操作!').then(async () => {})
|
||
} else {
|
||
useOrders.onConfirmOrder(orderInfo.orderNo)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="wrapper_1200" v-loading="loading">
|
||
<page-header title="订单详情" :navigateToTitle="navigateToTitle"></page-header>
|
||
<div v-if="orderInfo.status === 0 && !isShowCancelTime" class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
<div class="acea-row font-color">
|
||
<countDown
|
||
class="ml-5px mr-5px"
|
||
:is-day="true"
|
||
:tip-text="' '"
|
||
:day-text="' '"
|
||
:hour-text="' : '"
|
||
:minute-text="' : '"
|
||
:second-text="' '"
|
||
:datatime="orderInfo.cancelTime / 1000"
|
||
:isCol="false"
|
||
:bgColor="bgColor"
|
||
@stopTime="stopTime"
|
||
>
|
||
</countDown>
|
||
<div>后订单取消</div>
|
||
</div>
|
||
</div>
|
||
<!--订单状态-->
|
||
<div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
<view v-if="orderInfo.refundStatus == 3" class="fontColor333 text-16px">订单状态：已退款</view>
|
||
<div v-else class="fontColor333 text-16px">订单状态：{{ orderStatusFilter(orderInfo.status) }}</div>
|
||
<div v-if="orderInfo.status !== 9 && orderInfo.status !== 3 && orderInfo.refundStatus !== 3" class="mt-40px">
|
||
<el-steps :active="activeStatuFilter(orderInfo.status)" align-center finish-status="success">
|
||
<el-step title="待付款" />
|
||
<el-step title="待发货" />
|
||
<el-step title="待收货" />
|
||
<el-step title="已收货" />
|
||
<el-step title="已完成" />
|
||
</el-steps>
|
||
</div>
|
||
</div>
|
||
<!-- 物流信息-->
|
||
<div
|
||
v-if="Number(orderInfo.status) > 1 && Number(orderInfo.status) < 9 && orderInfo.status != 3 && shippingType == 1"
|
||
@click="handlerNuxtLink"
|
||
class="w-100% borRadius bg-#FEF5F4 h-50px lh-49px px-30px mbtom20 flex-between-center cursors"
|
||
>
|
||
<div class="font-color text-14px lh-14px">
|
||
<span class="iconfont icon-xiaoxi mr-10px"></span>
|
||
<span v-if="invoiceList.num > 1">当前订单已发{{ invoiceList.deliveryNum }}个包裹</span>
|
||
<span v-else>当前订单有{{ invoiceList.num }}个包裹</span>
|
||
</div>
|
||
<div class="text-14px text-#666 lh-14px">发货记录 ></div>
|
||
</div>
|
||
<!--订单基本信息-->
|
||
<div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
<div class="fontColor333 text-16px mb-30px">订单基本信息</div>
|
||
<div class="acea-row">
|
||
<div class="text-14px fontColor333 w-540px">
|
||
<div class="mb-20px">订单编号：{{ orderInfo.orderNo }}</div>
|
||
<div class="mb-20px">下单时间：{{ orderInfo.createTime }}</div>
|
||
<div
|
||
v-show="
|
||
(orderInfo.secondType === ProductTypeEnum.Integral && orderInfo.payPrice != 0) ||
|
||
(orderInfo.payType && orderInfo.secondType !== ProductTypeEnum.Integral)
|
||
"
|
||
class="mb-20px"
|
||
>
|
||
支付方式：{{ payTypeFilter(orderInfo.payType) }}
|
||
</div>
|
||
</div>
|
||
<template v-if="isUserAddress && orderInfo.secondType !== ProductTypeEnum.Fictitious">
|
||
<div class="w-1px h-124px bg-#EEEEEE"></div>
|
||
<!-- 收货地址只显示一次 -->
|
||
<div class="text-14px fontColor333 ml-30px w-565px">
|
||
<div class="mb-20px">收货人：{{ userAddress[0].realName }}</div>
|
||
<div class="mb-20px">联系电话：{{ userAddress[0].userPhone }}</div>
|
||
<div class="">收货地址：{{ userAddress[0].userAddress }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!--商品信息-->
|
||
<div
|
||
v-for="item in orderInfo.merchantOrderList"
|
||
:key="item.id"
|
||
class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20"
|
||
>
|
||
<div class="acea-row mb-30px">
|
||
<div v-if="item.isSelf">
|
||
<span
|
||
class="lh-12px bg-color inline-block text-12px text-#fff b-rd-2px py-2px mr-6px px-4px relative"
|
||
style="top: -2px"
|
||
>自营</span
|
||
>
|
||
</div>
|
||
<div
|
||
@click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })"
|
||
class="fontColor333 text-14px cursors"
|
||
v-show="item.merName"
|
||
>
|
||
{{ item.merName }}
|
||
</div>
|
||
<div class="fontColor333 text-14px cursors" v-show="orderInfo.secondType === ProductTypeEnum.Integral">
|
||
积分商品兑换
|
||
</div>
|
||
</div>
|
||
<div v-for="itm in item.orderInfoList">
|
||
<confirm-product
|
||
:list="itm"
|
||
:productType="orderInfo.type"
|
||
:secondType="orderInfo.secondType"
|
||
useType="orderDetails"
|
||
></confirm-product>
|
||
</div>
|
||
<el-divider border-style="dashed" />
|
||
<div class="mbtom20">
|
||
<div class="acea-row mb20px">
|
||
<div class="text-14px fontColor6">配送方式：</div>
|
||
<div v-if="Number(orderInfo.secondType) > 4" class="text-14px fontColor6 ml-10px">自动发货</div>
|
||
<div v-if="Number(orderInfo.secondType) === 2" class="text-14px fontColor6 ml-10px">虚拟发货</div>
|
||
<div v-else class="text-14px fontColor6 ml-10px">
|
||
{{ item.shippingType === 1 ? '商家配送' : '到店自提，请前往移动端操作' }}
|
||
</div>
|
||
</div>
|
||
<div class="acea-row mb20px">
|
||
<div v-if="item.shippingType === 2" class="text-14px fontColor6">
|
||
商户信息：<span class="ml-10px"
|
||
>{{ item.merName }}， {{ item.merAddressDetail }}， {{ item.merPhone }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="acea-row mb20px">
|
||
<div class="text-14px fontColor6">买家留言：</div>
|
||
<div class="text-14px fontColor6 w-1064px">{{ item.userRemark || '-' }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--系统表单信息-->
|
||
<SystemFromInfo v-if="orderExtend?.length > 0" :orderExtend="orderExtend"></SystemFromInfo>
|
||
<!--费用详情-->
|
||
<div
|
||
v-show="orderInfo.secondType !== ProductTypeEnum.Integral"
|
||
class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20"
|
||
>
|
||
<div v-show="orderInfo.payPostage > 0" class="acea-row justify-between mb20px">
|
||
<div class="text-14px fontColor6">运费:</div>
|
||
<div class="text-14px fontColor333">
|
||
<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.payPostage }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-show="orderInfo.svipDiscountPrice > 0" class="acea-row justify-between mb20px">
|
||
<div class="text-14px fontColor6">会员优惠:</div>
|
||
<div class="text-14px fontColor333">
|
||
-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.svipDiscountPrice || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-show="orderInfo.merCouponPrice > 0" class="acea-row justify-between mb20px">
|
||
<div class="text-14px fontColor6">商家优惠:</div>
|
||
<div class="text-14px fontColor333">
|
||
-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.merCouponPrice || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-show="orderInfo.platCouponPrice > 0" class="acea-row justify-between mb20px">
|
||
<div class="text-14px fontColor6">平台优惠:</div>
|
||
<div class="text-14px fontColor333">
|
||
-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.platCouponPrice || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-show="orderInfo.integralPrice > 0" class="acea-row justify-between mb20px">
|
||
<div class="text-14px fontColor6">积分抵扣:</div>
|
||
<div class="text-14px fontColor333">
|
||
-<span class="oppoSans-M">￥</span><span class="dinProRegular">{{ orderInfo.integralPrice || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="acea-row justify-between">
|
||
<div class="text-14px fontColor6">实付款:</div>
|
||
<div class="text-14px fontColor333">
|
||
<span class="font-color oppoSans-M">￥</span
|
||
><span class="text-22px font-color fw-600 dinProRegular">{{ orderInfo.payPrice || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--操作按钮-->
|
||
<!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
|
||
<div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20 flex-between-center">
|
||
<div class="text-14px">
|
||
合计： <span class="font-color oppoSans-M">￥</span
|
||
><span class="text-22px font-color fw-600 dinProRegular">{{ orderInfo.payPrice || 0 }}</span>
|
||
<span v-show="orderInfo.secondType === ProductTypeEnum.Integral">
|
||
<span ref="hao"> + </span>
|
||
<span class="text-22px font-color fw-600 dinProRegular">{{ orderInfo.redeemIntegral }}</span>
|
||
<span class="font-color oppoSans-M ml-5px">积分</span>
|
||
</span>
|
||
</div>
|
||
<div class="handleBtnBox">
|
||
<!-- <el-button round class="w-150px btn">联系客服</el-button>-->
|
||
<el-button
|
||
v-if="orderInfo.status == 0 && !isRefunded(orderInfo)"
|
||
round
|
||
class="w-120px btn"
|
||
@click="useOrders.onCancelOrder(orderInfo.orderNo)"
|
||
>取消订单</el-button
|
||
>
|
||
<el-button
|
||
v-if="(orderInfo.status == 6 || orderInfo.status == 9) && !isRefunded(orderInfo)"
|
||
round
|
||
class="w-120px btn"
|
||
@click="useOrders.onDeleteOrder(orderInfo.orderNo)"
|
||
>删除订单</el-button
|
||
>
|
||
<el-button
|
||
v-if="orderInfo.status == 0 && !isShowCancelTime && !isRefunded(orderInfo)"
|
||
color="#E93323"
|
||
round
|
||
class="w-120px btn"
|
||
@click="handlePaymentOrder(orderInfo.orderNo)"
|
||
>立即付款</el-button
|
||
>
|
||
<el-button
|
||
v-if="orderInfo.status > 0 && isBuyAgain(orderInfo) && orderExtend.length === 0 && !isRefunded(orderInfo)"
|
||
:color="Number(orderInfo.status) === 4 ? '' : '#E93323'"
|
||
round
|
||
class="w-120px btn"
|
||
@click="handleByAgain"
|
||
>再次购买</el-button
|
||
>
|
||
<el-button
|
||
v-if="
|
||
orderInfo.refundStatus === RefundStatusEnum.未退款 &&
|
||
isRefund(orderInfo, cartInfo[0]) &&
|
||
!isRefunded(orderInfo)
|
||
"
|
||
round
|
||
class="w-120px btn text-16px"
|
||
@click="handleToOrderRefund(orderInfo.orderNo)"
|
||
>申请退款</el-button
|
||
>
|
||
<el-button
|
||
v-if="orderInfo.status == 4 && !isRefunded(orderInfo)"
|
||
color="#E93323"
|
||
round
|
||
class="w-120px btn text-16px"
|
||
@click="handleConfirmOrder()"
|
||
>确认收货</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.el-step__head.is-success) {
|
||
--el-color-success: #e93323;
|
||
}
|
||
:deep(.el-step__title.is-success) {
|
||
--el-color-success: #333333;
|
||
}
|
||
.btn {
|
||
height: 44px;
|
||
line-height: 44px;
|
||
border-radius: 33px 33px 33px 33px;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|