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

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

const props = defineProps<{
  orderList: Api.xsbOrderList[]
  subPackOrder?: typeof import('@/subPack-xsb/utils/order-data')
  subPackConfirm?: typeof import('@/subPack-xsb/utils/confirm-order')
}>()

const _emit = defineEmits<{
  'cancel': [order: Api.xsbOrderList]
  'pay': [orderNumber: string]
  'submit': [order: Api.xsbOrderList]
  'del': [order: Api.xsbOrderList]
  'after-sale': [item: Api.xsbOrderList]
  'refresh': []
}>()

function handleClick(no: string) {
  router.push({ name: 'xsb-orderDetaile', params: { id: no } })
}
</script>

<template>
  <view v-for="item in orderList" :key="item.orderNumber" class="mt20rpx rounded-16rpx bg-white p24rpx">
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
        <view class="ml20rpx text-32rpx font-semibold">
          {{ item.shopName }}
        </view>
      </view>
      <view class="text-24rpx text-#FF4D3A">
        <template v-if="item.hbOrderStatus !== props.subPackOrder?.OrderStatus.PaddingPay">
          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
        </template>
        <template v-else>
          <view class="flex items-center">
            待支付( 还剩 <wd-count-down :time="props.subPackOrder?.handleCommonOrderStatusText(item)" @finish="$emit('refresh')" /> )
          </view>
        </template>
      </view>
    </view>
    <view class="my24rpx h2rpx 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 h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9"
        @click="handleClick(item.orderNumber as string)"
      >
        <view class="box-border h-full w480rpx py28rpx pl20rpx">
          <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
            <view class="flex items-center">
              <view v-for="goods in item.orderItemList" :key="goods.skuId" class="mr50rpx">
                <image :src="goods.pic" class="h120rpx w120rpx" />
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px14rpx py40rpx">
          <view class="text-center text-32rpx text-#FF4D3A font-semibold">
            ￥{{ item.actualTotal }}
          </view>
          <view class="text-center text-28rpx text-#AAAAAA">
            共{{ item.goodsTotal }}件
          </view>
        </view>
      </view>
    </view>
    <view class="my24rpx flex items-center justify-end">
      <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.PaddingPay">
        <view class="mr20rpx">
          <wd-button size="small" plain type="info" @click.stop="$emit('cancel', item)">
            取消订单
          </wd-button>
        </view>
        <view class="mr20rpx">
          <wd-button size="small" plain type="error" @click.stop="$emit('pay', item.orderNumber as string)">
            付款
          </wd-button>
        </view>
      </template>
      <template v-if="[props.subPackOrder?.OrderStatus.OrderCancel, props.subPackOrder?.OrderStatus.OrderCompleted].includes(item.hbOrderStatus) ">
        <view class="mr20rpx">
          <wd-button size="small" plain type="info" @click.stop="$emit('del', item)">
            删除订单
          </wd-button>
        </view>
        <!-- <view class="ml20rpx">
              <wd-button size="small" plain type="error" >
                再次购买
              </wd-button>
            </view> -->
      </template>
      <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.OrderArrived">
        <view class="mr20rpx">
          <wd-button size="small" plain type="info" @click.stop="$emit('submit', item)">
            确认收货
          </wd-button>
        </view>
      </template>
      <template v-if="item.refundStatus != 2 || [props.subPackOrder?.OrderStatus.OrderCompleted, props.subPackOrder?.OrderStatus.OrderWaitDelivery, props.subPackOrder?.OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
        <view class="mr20rpx">
          <wd-button size="small" plain type="info" @click.stop="$emit('after-sale', item)">
            申请售后
          </wd-button>
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>