city-gather/src/subPack-djk/orderDetaile/index.vue

<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 payMent = await useUserStore().getPayMent(String(unref(orderInfo)?.orderNumber))
  if (payMent.payType !== 'point') {
    // #ifdef MP-WEIXIN
    const res = await useUserStore().handleCommonPayMent(String(unref(orderInfo)?.orderNumber))
    await useUserStore().getWxCommonPayment(res)
    getDetail(String(unref(orderInfo)?.orderNumber))
    // #endif
    // #ifdef H5
    useUserStore().handleCommonWechatPay(String(unref(orderInfo)?.orderNumber))
    // #endif
  }
  else {
    await useUserStore().handleCommonPayMent(String(unref(orderInfo)?.orderNumber))
    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 placeholder 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"
          >
            {{ 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>