|
|
@@ -0,0 +1,325 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { OrderStatus, handleCommonCancelOrder, handleCommonDeleteOrder, handleCommonOrderStatusText } from '../utils/order-data'
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+import { getWxCommonPayment, handleCommonPayMent } from '@/subPack-xsb/utils/confirm-order'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'xsb-orderDetaile',
|
|
|
+ islogin: true,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '订单详情',
|
|
|
+ },
|
|
|
+})
|
|
|
+const collapse = ref(false)
|
|
|
+const orderInfo = ref<Api.xsbOrderList>()
|
|
|
+onLoad((options: any) => {
|
|
|
+ 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)
|
|
|
+ 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)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view v-if="orderInfo" class="page-xsb px24rpx">
|
|
|
+ <view class="pt20rpx">
|
|
|
+ <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="handleCommonOrderStatusText(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="mt20rpx text-28rpx text-#AAAAAA">
|
|
|
+ 现在支付:预计10:40-10:55送达
|
|
|
+ </view>
|
|
|
+ <view class="btn mt20rpx flex items-center justify-between">
|
|
|
+ <view class="info-btn mr20rpx w226rpx">
|
|
|
+ <wd-button type="info" @click="handleCancel">
|
|
|
+ 取消订单
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ <view class="ml20rpx flex-1">
|
|
|
+ <wd-button @click="handlePay">
|
|
|
+ 立即支付¥{{ orderInfo.actualTotal }}
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center" @click="handleCollapse">
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderAccepted" class="mr10rpx">
|
|
|
+ 商家拣货中
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderWaitDelivery" class="mr10rpx">
|
|
|
+ 订单待配送
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderDelivering" class="mr10rpx">
|
|
|
+ 订单待配送中
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancelAudit" class="mr10rpx">
|
|
|
+ 订单取消审核
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mr10rpx">
|
|
|
+ 订单取消
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="mr10rpx">
|
|
|
+ 订单已送达
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderArrived" class="mr10rpx">
|
|
|
+ 订单已完成
|
|
|
+ </view>
|
|
|
+ <view :class="[collapse ? 'rotate-90' : '']">
|
|
|
+ <wd-icon name="arrow-right" size="22px" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.hbOrderStatus === OrderStatus.OrderCancel" class="mt20rpx text-28rpx text-#AAAAAA">
|
|
|
+ 取消原因:{{ orderInfo.cancelReason }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <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="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx">
|
|
|
+ 删除订单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center overflow-hidden">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/orderDetaile-wx.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <wd-button class="zbutton" open-type="contact" type="text">
|
|
|
+ <view class="mt15rpx text-28rpx text-#222">
|
|
|
+ 联系商家
|
|
|
+ </view>
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="flex flex-col items-center" @click="router.push({ name: 'common-afterSales' })">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/orderDetaile-shou.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx">
|
|
|
+ 申请售后
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="flex flex-col items-center" @click="router.push({ name: 'common-revalue' })">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/orderDetaile-pj.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx">
|
|
|
+ 评价晒单
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/orderDetaile-bao.png`"
|
|
|
+ class="h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="mt20rpx">
|
|
|
+ 再次购买
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/orderDetaile-user.png`"
|
|
|
+ class="mr20rpx h40rpx w40rpx"
|
|
|
+ />
|
|
|
+ <view class="text-32rpx text-#222 font-semibold">
|
|
|
+ {{ orderInfo?.consigneeName }} {{ orderInfo?.consigneeMobile }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx text-28rpx text-#AAAAAA">
|
|
|
+ {{ orderInfo?.consigneeAddress }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/order-icon.png`"
|
|
|
+ class="h36rpx w36rpx"
|
|
|
+ />
|
|
|
+ <view class="ml20rpx text-32rpx font-semibold">
|
|
|
+ {{ orderInfo?.shopName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <CollapsePanel :line-height="150">
|
|
|
+ <view v-for="item in orderInfo?.orderItemList" :key="item.skuId" class="mb20rpx w-full flex items-center">
|
|
|
+ <view class="mr20rpx w120rpx flex-shrink-0">
|
|
|
+ <image
|
|
|
+ :src="item.pic"
|
|
|
+ class="h120rpx w120rpx"
|
|
|
+ />
|
|
|
+ </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="mt24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="mt24rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 商品金额
|
|
|
+ </view>
|
|
|
+ <view class="text-#FF4A39 font-semibold">
|
|
|
+ ¥{{ orderInfo?.total }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 配送费(即时配送)
|
|
|
+ </view>
|
|
|
+ <view class="text-#FF4A39 font-semibold">
|
|
|
+ ¥{{ orderInfo?.freightAmount }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt24rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 积分
|
|
|
+ </view>
|
|
|
+ <view class="text-#FF4A39 font-semibold">
|
|
|
+ -¥{{ Number(orderInfo?.offsetPoints) / 100 }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
+ <view class="flex items-center justify-end">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 总计{{ orderInfo.actualTotal }} 共减 {{ Number(orderInfo.offsetPoints) / 100 }}
|
|
|
+ </view>
|
|
|
+ <view class="ml20rpx text-28rpx text-#FF4D3A font-semibold">
|
|
|
+ {{ [OrderStatus.PaddingPay, OrderStatus.OrderCancel].includes(Number(orderInfo.hbOrderStatus)) ? '需' : '实' }}付款¥{{ orderInfo.actualTotal }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="mb24rpx text-28rpx font-semibold">
|
|
|
+ 订单信息
|
|
|
+ </view>
|
|
|
+ <view class="pb20rpx">
|
|
|
+ <view class="mb28rpx 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="ml10rpx">
|
|
|
+ <wd-icon name="file-copy" size="22px" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-#AAAAAA">
|
|
|
+ 支付方式
|
|
|
+ </view>
|
|
|
+ <view class="text-#222">
|
|
|
+ 微信支付
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-#AAAAAA">
|
|
|
+ 下单时间
|
|
|
+ </view>
|
|
|
+ <view class="text-#222">
|
|
|
+ {{ orderInfo?.createTime }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb28rpx flex items-center justify-between">
|
|
|
+ <view class="text-28rpx text-#AAAAAA">
|
|
|
+ 备注信息
|
|
|
+ </view>
|
|
|
+ <view class="text-#222">
|
|
|
+ {{ orderInfo?.remarks || '无' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h30rpx" />
|
|
|
+ </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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|