city-gather/src/subPack-smqjh/components/xsb-orderList/xsb-orderList.vue

<script setup lang="ts">
import { StaticUrl } from '@/config'
import router from '@/router'

defineProps<{
  order: Api.xsbOrderList
}>()

const _emit = defineEmits<{
  refresh: []
}>()
const NodeList = ref<Api.DeliveryNode[]>([])
const showNode = ref(false)

const plugins = requirePlugin('logisticsPlugin')
async function handleCancel(order: Api.xsbOrderList) {
  await useUserStore().handleCommonCancelOrder?.(order)
  _emit('refresh')
}

async function handlePay(orderNumber: string) {
  const res = await useUserStore().handleCommonPayMent?.(orderNumber)
  if (res?.payType !== 1 && res) {
    await useUserStore().getWxCommonPayment(res)
    _emit('refresh')
  }
  else {
    _emit('refresh')
  }
}

async function handleSubmit(order: Api.xsbOrderList) {
  await useUserStore().handleCommonOrderReceive(order)
  _emit('refresh')
}

async function handleDel(order: Api.xsbOrderList) {
  await useUserStore().handleCommonDeleteOrder(order)
  _emit('refresh')
}

function handleClick(no: string) {
  router.push({ name: 'xsb-orderDetaile', params: { id: no } })
}
async function handleAfterSale(item: Api.xsbOrderList) {
  if (!item.orderItemList) {
    useGlobalToast().show('商品异常！')
    return
  }
  await useSysStore().getRefunOrder(item.orderNumber as string)
}

async function handleLogistics(_order: Api.xsbOrderList) {
  // router.push({ name: 'xsb-logistics', params: { id: order.orderNumber } })
  if (_order.dvyType === 3) {
    const res = await useUserStore().getOrderNode(String(_order.orderNumber))
    NodeList.value = res as Api.DeliveryNode[]
    showNode.value = true
  }
  if ([1, 10].includes(Number(_order.dvyType)) && _order.actualTotal) {
    uni.showLoading({ mask: true })
    try {
      const res = await Apis.xsb.getWaybillToken({ data: { orderNumber: String(_order.orderNumber) } })
      uni.hideLoading()
      const jsData = JSON.parse(res.data)
      if (jsData.errmsg === 'ok') {
        plugins.openWaybillTracking({
          waybillToken: jsData.waybill_token,
        })
      }
    }
    catch {
      uni.hideLoading()
    }
  }
}
</script>

<template>
  <view class="mb-20rpx rounded-16rpx bg-white p-24rpx">
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image :src="`${StaticUrl}/order-icon.png`" class="h-36rpx w-36rpx" />
        <view class="ml-20rpx text-32rpx font-semibold">
          {{ order.shopName }}
        </view>
      </view>
      <view class="text-24rpx text-[#FF4D3A]">
        <template v-if="order.hbOrderStatus !== OrderStatus.PaddingPay">
          {{ useUserStore().handleXSBCommonOrderStatusText(order) }}
        </template>
        <template v-else>
          <view class="flex items-center">
            待支付( 还剩 <wd-count-down :time="useUserStore().handleXSBCommonOrderStatusText(order)">
              <template #default="{ current }">
                <view class="text-24rpx text-[#FF4D3A]">
                  {{ current.minutes }}:{{ current.seconds }}
                </view>
              </template>
            </wd-count-down> )
          </view>
        </template>
      </view>
    </view>
    <view class="my-24rpx h-2rpx w-full bg-[#F0F0F0]" />
    <view>
      <!-- <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
            <view class="flex items-center">
              <image :src="`${StaticUrl}/order-car.png`" class="h36rpx w36rpx" />
              <view class="ml20rpx text-28rpx text-#222 font-semibold">
                预计10:40前可送达
              </view>
            </view>
            <view class="mt18rpx">
              您的订单预计3月7日 10:40前送达
            </view>
            <view class="mt20rpx">
              2025-03-26 11:56:07
            </view>
          </view> -->
      <view
        class="box-border h-176rpx w-full flex items-center justify-between rounded-16rpx bg-[#F9F9F9]"
        @click="handleClick(order.orderNumber as string)"
      >
        <view class="box-border h-full w-480rpx py-28rpx pl-20rpx">
          <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
            <view class="flex items-center">
              <view v-for="goods in order.orderItemList" :key="goods.skuId" class="mr-50rpx">
                <image :src="goods.pic" class="h-120rpx w-120rpx" />
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px-14rpx py-40rpx">
          <view class="text-center text-32rpx text-[#FF4D3A] font-semibold">
            ￥{{ order.actualTotal }}
          </view>
          <view class="text-center text-28rpx text-[#AAAAAA]">
            共{{ order.goodsTotal }}件
          </view>
        </view>
      </view>
    </view>
    <view class="my-24rpx flex items-center justify-end">
      <template v-if="order.hbOrderStatus === OrderStatus.PaddingPay">
        <view class="mr-20rpx">
          <wd-button size="small" plain type="info" @click.stop="handleCancel(order)">
            取消订单
          </wd-button>
        </view>
        <view class="mr-20rpx">
          <wd-button size="small" plain type="error" @click.stop="handlePay(order.orderNumber as string)">
            付款
          </wd-button>
        </view>
      </template>
      <template v-if="[OrderStatus.OrderCancel, OrderStatus.OrderCompleted].includes(order.hbOrderStatus) ">
        <view class="mr-20rpx">
          <wd-button size="small" plain type="info" @click.stop="handleDel(order)">
            删除订单
          </wd-button>
        </view>
      </template>
      <template v-if="order.hbOrderStatus === OrderStatus.OrderArrived">
        <view class="mr-20rpx">
          <wd-button size="small" plain type="info" @click.stop="handleSubmit(order)">
            确认收货
          </wd-button>
        </view>
      </template>
      <template v-if="order.refundStatus != 2 && [OrderStatus.OrderWaitDelivery, OrderStatus.OrderAccepted].includes(order.hbOrderStatus) ">
        <view class="mr-20rpx">
          <wd-button size="small" plain type="info" @click.stop="() => handleAfterSale(order)">
            申请售后
          </wd-button>
        </view>
      </template>
      <template v-if="[OrderStatus.OrderAccepted, OrderStatus.OrderWaitDelivery, OrderStatus.OrderDelivering].includes(order.hbOrderStatus)">
        <view class="mr-20rpx">
          <wd-button size="small" plain type="info" @click.stop="handleLogistics(order)">
            查看物流
          </wd-button>
        </view>
      </template>
    </view>
    <Zpopup v-model="showNode" :showfooter="false">
      <view class="p-24rpx">
        <view class="text-center text-32rpx font-semibold">
          订单追踪
        </view>
        <wd-steps :active="0" vertical dot>
          <wd-step v-for="item in NodeList" :key="item.id">
            <template #title>
              {{ item.content }}
            </template>
            <template #description>
              {{ item.createTime }}
            </template>
          </wd-step>
        </wd-steps>
      </view>
    </Zpopup>
  </view>
</template>

<style lang="scss" scoped>

</style>