|
|
@@ -0,0 +1,326 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'djk-orderDetaile',
|
|
|
+ islogin: true,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '订单详情',
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ },
|
|
|
+})
|
|
|
+const orderInfo = ref<Api.xsbOrderList>()
|
|
|
+const orderNum = ref()
|
|
|
+const { refreshOrderList } = storeToRefs(useSysStore())
|
|
|
+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
|
|
|
+}
|
|
|
+
|
|
|
+async function handleCancel() {
|
|
|
+ await useUserStore().handleCommonCancelOrder(orderInfo.value as Api.xsbOrderList)
|
|
|
+ refreshOrderList.value = true
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+}
|
|
|
+async function handlePay() {
|
|
|
+ const res = await useUserStore().handleCommonPayMent(String(unref(orderInfo)?.orderNumber))
|
|
|
+ if (res.payType !== 1) {
|
|
|
+ await useUserStore().getWxCommonPayment(res)
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ getDetail(String(unref(orderInfo)?.orderNumber))
|
|
|
+ }
|
|
|
+ refreshOrderList.value = true
|
|
|
+}
|
|
|
+async function handelDel() {
|
|
|
+ await useUserStore().handleCommonDeleteOrder(unref(orderInfo) as Api.xsbOrderList)
|
|
|
+ refreshOrderList.value = true
|
|
|
+ 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() {
|
|
|
+ router.push({
|
|
|
+ name: 'djk-afterSales',
|
|
|
+ params: { data: JSON.stringify(orderInfo.value) },
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleNav() {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: Number(orderInfo.value?.shopInfo?.shopLat),
|
|
|
+ longitude: Number(orderInfo.value?.shopInfo?.shopLng),
|
|
|
+ })
|
|
|
+}
|
|
|
+function handlePhone() {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: String(orderInfo.value?.shopInfo?.tel),
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view
|
|
|
+ v-if="orderInfo" class="page-xsb"
|
|
|
+ >
|
|
|
+ <wd-navbar
|
|
|
+ title="订单详情" :bordered="false" :z-index="99" safe-area-inset-top left-arrow placeholder 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"
|
|
|
+ >
|
|
|
+ {{ useUserStore().handleDjkCommonOrderStatusText(orderInfo) }}
|
|
|
+ </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="[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.hbOrderStatus == OrderStatus.OrderAccepted && orderInfo.djkOrderAttachInfo?.djkOrderType == 0 "
|
|
|
+ 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 flex items-center rounded-16rpx bg-white p-24rpx">
|
|
|
+ <image
|
|
|
+ :src="orderInfo.djkOrderAttachInfo?.goodsImg?.split(',')[0]"
|
|
|
+ class="h160rpx w160rpx flex-shrink-0 rounded-16rpx"
|
|
|
+ />
|
|
|
+ <view class="ml20rpx flex-1">
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
+ {{ orderInfo.djkOrderAttachInfo?.goodsName }}
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-24rpx text-gray">
|
|
|
+ 有效期{{ orderInfo.djkOrderAttachInfo?.effectiveTime }}天·需提前{{ orderInfo.djkOrderAttachInfo?.advanceBookingTime }}天预约
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx flex items-center justify-between">
|
|
|
+ <view class="text-36rpx text-#FF4D3A font-semibold">
|
|
|
+ <text class="text-20rpx">
|
|
|
+ ¥
|
|
|
+ </text> {{ orderInfo.djkOrderAttachInfo?.price }}
|
|
|
+ </view>
|
|
|
+ <view class="text-24rpx text-gray">
|
|
|
+ x{{ orderInfo.djkOrderAttachInfo?.goodsNum }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-gray">
|
|
|
+ 商品金额
|
|
|
+ </view>
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ ¥{{ orderInfo.djkOrderAttachInfo?.price }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-gray">
|
|
|
+ 积分{{ orderInfo.offsetPoints ? `(${orderInfo.offsetPoints})` : '' }}
|
|
|
+ </view>
|
|
|
+ <view class="text-28rpx text-#FF4D3A font-semibold">
|
|
|
+ -¥{{ Number(orderInfo.offsetPoints) / 100 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="my20rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="mt20rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-gray">
|
|
|
+ 总计
|
|
|
+ </view>
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ ¥{{ orderInfo.actualTotal }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="mt20rpx h160rpx flex items-center justify-between bg-cover bg-center px24rpx" :style="{ backgroundImage: `url(${StaticUrl}/djk-shop-nav-bg.png)` }">
|
|
|
+ <view class="flex items-center">
|
|
|
+ {{ orderInfo.shopInfo?.shopName }}
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="mr40rpx flex flex-col items-center justify-center" @click="handleNav">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/djk-shop-dh.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx text-28rpx">
|
|
|
+ 导航
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center justify-center" @click="handlePhone">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/film-phone.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx text-28rpx">
|
|
|
+ 电话
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
+ 客户信息
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx">
|
|
|
+ {{ phoneFormat(String(orderInfo.consigneeMobile)) }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
+ 退款规则
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx">
|
|
|
+ 支付成功后,服务有效期为{{ orderInfo.djkOrderAttachInfo?.effectiveTime }}天
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx">
|
|
|
+ 有效期内可自主申请退款
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx">
|
|
|
+ 过期未使用将自动退款,无需申请
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx text-gray">
|
|
|
+ (积分支付的,退还后积分过期后,也将不可使用)
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-24rpx">
|
|
|
+ 已核销服务不可退款
|
|
|
+ </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]">
|
|
|
+ {{ orderInfo?.createTime }}
|
|
|
+ </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>
|