|
|
@@ -0,0 +1,316 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'djk-orderDetaile',
|
|
|
+ islogin: true,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '订单详情',
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ },
|
|
|
+})
|
|
|
+const collapse = ref(true)
|
|
|
+const orderInfo = ref<Api.xsbOrderList>()
|
|
|
+const orderNum = ref()
|
|
|
+onLoad((options: any) => {
|
|
|
+ orderNum.value = options.id
|
|
|
+ getDetail(options.id)
|
|
|
+})
|
|
|
+async function getDetail(id: string) {
|
|
|
+ const { data } = await Apis.xsb.orderInfo({
|
|
|
+ data: {
|
|
|
+ orderNo: id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ orderInfo.value = data
|
|
|
+}
|
|
|
+
|
|
|
+function handleCollapse() {
|
|
|
+ collapse.value = !collapse.value
|
|
|
+}
|
|
|
+async function handleCancel() {
|
|
|
+ await handleCommonCancelOrder(orderInfo.value as Api.xsbOrderList)
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+}
|
|
|
+async function handlePay() {
|
|
|
+ const res = await handleCommonPayMent(String(unref(orderInfo)?.orderNumber))
|
|
|
+ if (res.payType !== 1) {
|
|
|
+ await getWxCommonPayment(res)
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+ }
|
|
|
+}
|
|
|
+async function handelDel() {
|
|
|
+ await handleCommonDeleteOrder(unref(orderInfo) as Api.xsbOrderList)
|
|
|
+ router.back()
|
|
|
+}
|
|
|
+async function handleFinish() {
|
|
|
+ uni.showLoading({ mask: true })
|
|
|
+ setTimeout(async () => {
|
|
|
+ await getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+ uni.hideLoading()
|
|
|
+ }, 2000)
|
|
|
+}
|
|
|
+function handleCopy() {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: String(orderInfo.value?.orderNumber),
|
|
|
+ showToast: true,
|
|
|
+ })
|
|
|
+}
|
|
|
+async function handleAfterSale() {
|
|
|
+ if (!orderInfo.value?.orderItemList) {
|
|
|
+ useGlobalToast().show('商品异常!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await useSysStore().getRefunOrder(orderInfo.value.orderNumber as string)
|
|
|
+}
|
|
|
+async function handleReceive() {
|
|
|
+ await useUserStore().handleCommonOrderReceive(orderInfo.value as Api.xsbOrderList)
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view
|
|
|
+ v-if="orderInfo" class="page-xsb"
|
|
|
+ >
|
|
|
+ <wd-navbar
|
|
|
+ title="订单详情" :bordered="false" placeholder :z-index="99" safe-area-inset-top left-arrow fixed
|
|
|
+ @click-left="router.back()"
|
|
|
+ />
|
|
|
+ <view class="relative z-90 box-border bg-[#f6f6f6] px-24rpx">
|
|
|
+ <view class="pt-20rpx">
|
|
|
+ <view class="text-36rpx font-semibold">
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.PaddingPay">
|
|
|
+ <view class="flex items-center">
|
|
|
+ 请在
|
|
|
+ <wd-count-down format="mm:ss" :time="useUserStore().handleXSBCommonOrderStatusText(orderInfo)" @finish="handleFinish">
|
|
|
+ <template #default="{ current }">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view> {{ current.minutes }} 分</view>
|
|
|
+ <view> {{ current.seconds }} 秒</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </wd-count-down>
|
|
|
+ 内支付
|
|
|
+ </view>
|
|
|
+ <!-- <view class="mt-20rpx text-28rpx text-[#AAAAAA]">
|
|
|
+ 现在支付:预计10:40-10:55送达
|
|
|
+ </view> -->
|
|
|
+ <view class="btn mt-20rpx flex items-center justify-between">
|
|
|
+ <view class="info-btn mr-20rpx w-226rpx">
|
|
|
+ <wd-button type="info" @click="handleCancel">
|
|
|
+ 取消订单
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ <view class="ml-20rpx flex-1">
|
|
|
+ <wd-button @click="handlePay">
|
|
|
+ 立即支付¥{{ orderInfo.actualTotal }}
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="orderInfo.hbOrderStatus !== OrderStatus.PaddingPay" class="flex items-center"
|
|
|
+ @click="handleCollapse"
|
|
|
+ >
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderAccepted" class="mr-10rpx">
|
|
|
+ 商家拣货中
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderWaitDelivery" class="mr-10rpx">
|
|
|
+ 订单待配送
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderDelivering" class="mr-10rpx">
|
|
|
+ 订单配送中
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancelAudit" class="mr-10rpx">
|
|
|
+ 订单取消审核
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mr-10rpx">
|
|
|
+ 订单取消
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="mr-10rpx">
|
|
|
+ 订单已送达
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCompleted" class="mr-10rpx">
|
|
|
+ 订单已完成
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mt-20rpx text-28rpx text-[#AAAAAA]">
|
|
|
+ 取消原因:{{ orderInfo.cancelReason }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
|
|
|
+ <view class="grid grid-cols-5 text-28rpx text-[#222]">
|
|
|
+ <view
|
|
|
+ v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="flex flex-col items-center"
|
|
|
+ @click="handleReceive"
|
|
|
+ >
|
|
|
+ <image :src="`${StaticUrl}/orderDetaile-submit-order.png`" class="h-40rpx w-40rpx" />
|
|
|
+ <view class="mt-40rpx">
|
|
|
+ 确认收货
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="[OrderStatus.OrderCancel, OrderStatus.OrderCompleted].includes(Number(orderInfo.hbOrderStatus))"
|
|
|
+ class="flex flex-col items-center" @click="handelDel"
|
|
|
+ >
|
|
|
+ <image :src="`${StaticUrl}/orderDetaile-del.png`" class="h-40rpx w-40rpx" />
|
|
|
+ <view class="mt-40rpx">
|
|
|
+ 删除订单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="contact relative flex flex-col items-center">
|
|
|
+ <image :src="`${StaticUrl}/orderDetaile-wx.png`" class="h-40rpx w-40rpx" />
|
|
|
+ <Zcontact>
|
|
|
+ <view class="mt-40rpx text-28rpx">
|
|
|
+ 联系客服
|
|
|
+ </view>
|
|
|
+ </Zcontact>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="orderInfo.refundStatus != 2 && [OrderStatus.OrderCompleted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(orderInfo.hbOrderStatus)"
|
|
|
+ class="flex flex-col items-center" @click="handleAfterSale"
|
|
|
+ >
|
|
|
+ <image :src="`${StaticUrl}/orderDetaile-shou.png`" class="h-40rpx w-40rpx" />
|
|
|
+ <view class="mt-40rpx">
|
|
|
+ 申请售后
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image :src="`${StaticUrl}/order-icon.png`" class="h-36rpx w-36rpx" />
|
|
|
+ <view class="ml-20rpx text-32rpx font-semibold">
|
|
|
+ {{ orderInfo?.shopName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
|
|
|
+ <CollapsePanel :line-height="150">
|
|
|
+ <view v-for="item in orderInfo?.orderItemList" :key="item.skuId" class="mb-20rpx w-full flex items-center">
|
|
|
+ <view class="mr-20rpx w-120rpx flex-shrink-0">
|
|
|
+ <image :src="item.pic" class="h-120rpx w-120rpx" />
|
|
|
+ </view>
|
|
|
+ <view class="flex-1">
|
|
|
+ <view class="w-full flex items-center justify-between font-semibold">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ {{ item.skuName }}
|
|
|
+ </view>
|
|
|
+ <view class="text-32rpx text-[#FF4D3A]">
|
|
|
+ ¥{{ item.price }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-[#AAAAAA]">
|
|
|
+ 规格:{{ item.spec }}
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-[#AAAAAA]">
|
|
|
+ ×{{ item.prodCount }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </CollapsePanel>
|
|
|
+
|
|
|
+ <view class="mt-24rpx h-2rpx w-full bg-[#F0F0F0]" />
|
|
|
+ <view class="mt-24rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 商品金额
|
|
|
+ </view>
|
|
|
+ <view class="text-[#FF4A39] font-semibold">
|
|
|
+ ¥{{ orderInfo?.total }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-24rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 积分
|
|
|
+ </view>
|
|
|
+ <view class="text-[#FF4A39] font-semibold">
|
|
|
+ -¥{{ Number(orderInfo?.offsetPoints) / 100 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
|
|
|
+ <view class="flex items-center justify-end">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 总计{{ orderInfo.orderMoney }} 共减 {{ Number(orderInfo.offsetPoints) / 100 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
|
|
|
+ <view class="mb-24rpx text-28rpx font-semibold">
|
|
|
+ 订单信息
|
|
|
+ </view>
|
|
|
+ <view class="pb-20rpx">
|
|
|
+ <view class="mb-28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-[#AAAAAA]">
|
|
|
+ 订单编号
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <text class="text-[#222]">
|
|
|
+ {{ orderInfo?.orderNumber }}
|
|
|
+ </text>
|
|
|
+ <view class="ml-10rpx" @click="handleCopy">
|
|
|
+ <wd-icon name="file-copy" size="22px" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-[#AAAAAA]">
|
|
|
+ 支付方式
|
|
|
+ </view>
|
|
|
+ <view class="text-[#222]">
|
|
|
+ 微信支付
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-[#AAAAAA]">
|
|
|
+ 下单时间
|
|
|
+ </view>
|
|
|
+ <view class="text-[#222]">
|
|
|
+ {{ orderInfo?.createTime }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-[#AAAAAA]">
|
|
|
+ 备注信息
|
|
|
+ </view>
|
|
|
+ <view class="text-[#222]">
|
|
|
+ {{ orderInfo?.remarks || '无' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-80rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.page-xsb {
|
|
|
+ :deep() {
|
|
|
+ .info-btn .wd-button {
|
|
|
+ background: #fff !important;
|
|
|
+ color: #aaa !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn .wd-button {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wd-count-down {
|
|
|
+ color: #FF4D3A !important;
|
|
|
+ font-size: 36rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact .wd-button {
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ height: 40rpx !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin-top: 40rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|