You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
11 KiB
277 lines
11 KiB
11 months ago
|
<script setup lang="ts">
|
||
|
|
import {invoiceListApi, orderDetailApi, orderListApi} from '~/server/orderApi'
|
||
|
|
import useOrder from '~/composables/useOrder'
|
||
|
|
import {CartBatchAdd} from "~/types/order";
|
||
|
|
import {ref, reactive} from "vue";
|
||
|
|
const { handleIntoPage } = useOrder()
|
||
|
|
import { activeStatuFilter} from '~/utils/filter'
|
||
|
|
const route = useRoute()
|
||
|
|
const orderNo = ref<string>(<string>route.query.orderNo)
|
||
|
|
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 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
|
||
|
|
})
|
||
|
|
cartInfo.value = res.merchantOrderList[0].orderInfoList
|
||
|
|
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})
|
||
|
|
}
|
||
|
|
|
||
|
|
//去退款列表
|
||
|
|
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
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="wrapper_1200" v-loading="loading">
|
||
|
|
<page-header title="订单详情" menuTitle="我的订单"></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">
|
||
|
|
<div class="fontColor333 text-16px">订单状态：{{ orderStatusFilter(orderInfo.status) }}</div>
|
||
|
|
<div v-if="orderInfo.status !== 9 && orderInfo.status !== 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!==2" @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.num}}个包裹，{{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.payType" class="mb-20px">支付方式：{{ payTypeFilter(orderInfo.payType) }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-1px h-124px bg-#EEEEEE"></div>
|
||
|
|
<!-- 收货地址只显示一次 -->
|
||
|
|
<div v-if="isUserAddress" 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>
|
||
|
|
</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 v-show="item.isSelf" class="labelClass bg-color text-#fff mr-6px" style="line-height: normal">自营</div>-->
|
||
|
|
<div @click.stop="handleIntoPage('/merchant/merchant_home', { merId: item.merId })" class="fontColor333 text-14px cursors">{{item.merName}}</div>
|
||
|
|
</div>
|
||
|
|
<div v-for="itm in item.orderInfoList">
|
||
|
|
<confirm-product :list="itm" :productType="orderInfo.type" 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 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 ml-10px">{{ item.userRemark || '-' }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--费用详情-->
|
||
|
|
<div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
|
|
<div v-if="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-if="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-if="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-if="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>
|
||
|
|
</div>
|
||
|
|
<div class="handleBtnBox">
|
||
|
|
<!-- <el-button round class="w-150px btn">联系客服</el-button>-->
|
||
|
|
<el-button v-if="orderInfo.status == 0" round class="w-120px btn" @click="useOrders.onCancelOrder(orderInfo.orderNo)"
|
||
|
|
>取消订单</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.status == 6 || orderInfo.status == 9"
|
||
|
|
round
|
||
|
|
class="w-120px btn"
|
||
|
|
@click="useOrders.onDeleteOrder(orderInfo.orderNo)"
|
||
|
|
>删除订单</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.status == 0 && !isShowCancelTime"
|
||
|
|
color="#E93323"
|
||
|
|
round
|
||
|
|
class="w-120px btn"
|
||
|
|
@click="handlePaymentOrder(orderInfo.orderNo)"
|
||
|
|
>立即付款</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="(orderInfo.status === 4 || orderInfo.status === 9 || orderInfo.status ===6) && orderInfo.type === 0"
|
||
|
|
:color="Number(orderInfo.status) === 4?'':'#E93323'"
|
||
|
|
round
|
||
|
|
class="w-120px btn"
|
||
|
|
@click="handleByAgain"
|
||
|
|
>再次购买</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.status>0 && orderInfo.status<6"
|
||
|
|
round
|
||
|
|
class="w-120px btn text-16px"
|
||
|
|
@click="handleToOrderRefund(orderInfo.orderNo)"
|
||
|
|
>申请退款</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.status == 4"
|
||
|
|
color="#E93323"
|
||
|
|
round
|
||
|
|
class="w-120px btn text-16px"
|
||
|
|
@click="useOrders.onConfirmOrder(orderInfo.orderNo)"
|
||
|
|
>确认收货</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>
|