city-gather/src/subPack-xsb/order/index.vue

<script setup lang="ts">
import { getWxCommonPayment, handleCommonPayMent } from '../utils/confirm-order'
import { OrderStatus, handleCommonCancelOrder, handleCommonDeleteOrder, handleCommonOrderStatusText, navTabTypeList, orderStatusList } from '../utils/order-data'
import { StaticUrl } from '@/config'
import router from '@/router'

definePage({
  name: 'xsb-order',
  islogin: true,
  style: {
    navigationBarTitleText: '订单列表',
  },
})

const navActiveTab = ref(0)
const orderStatusActive = ref('all') // 我的订单 all-全部 paddingPay-待支付 ing-进行中 completed-已完成 cancel-已取消

const { data: orderList, refresh, isLastPage, page, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
  businessType: 'XSB',
  orderStatus: unref(orderStatusActive),
  pageNum,
  pageSize,
  dvyType: unref(navActiveTab) === 0 ? '' : unref(navActiveTab),
} }), {
  immediate: true,
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
})
function handleChangeTypeNav(value: number) {
  navActiveTab.value = value
  reload()
}
function handleChangeStatus(value: string) {
  orderStatusActive.value = value
  reload()
}
function handleClick(item: Api.xsbOrderList) {
  router.push({ name: 'xsb-orderDetaile', params: { id: String(item.orderNumber) } })
}
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
async function handlePay(orderNumber: string) {
  const res = await handleCommonPayMent(orderNumber)
  if (res.payType !== 1) {
    await getWxCommonPayment(res)
  }
  else {
    refresh()
  }
}
async function handleCancel(order: Api.xsbOrderList) {
  await handleCommonCancelOrder(order)
  refresh()
}
async function handleDel(order: Api.xsbOrderList) {
  await handleCommonDeleteOrder(order)
  refresh()
}
</script>

<template>
  <view class="page-xsb">
    <view class="nav sticky top-0 z10 bg-white px24rpx py18rpx">
      <view class="flex items-center">
        <view
          v-for="item in navTabTypeList" :key="item.value" class="mr64rpx flex flex-col items-center text-32rpx"
          :class="[navActiveTab == item.value ? 'font-semibold ' : 'text-#AAAAAA']"
          @click="handleChangeTypeNav(item.value)"
        >
          {{ item.name }}
          <view
            class="mt10rpx bg-[var(--them-color)] transition-all transition-duration-400 ease-in"
            :class="[navActiveTab == item.value ? 'w40rpx h8rpx rounded-4rpx' : '']"
          />
        </view>
      </view>
      <view class="mt20rpx flex items-center">
        <view
          v-for="item in orderStatusList" :key="item.value"
          class="mr16rpx rounded-24rpx bg-#F6F6F6 px16rpx py6rpx text-24rpx"
          :class="[orderStatusActive == item.value ? 'bg-[var(--them-color)] text-white' : '']"
          @click="handleChangeStatus(item.value)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="px24rpx">
      <view v-for="item in orderList" :key="item.shopId" class="mt20rpx rounded-16rpx bg-white p24rpx">
        <view class="w-full 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 === OrderStatus.PaddingPay">
              <view class="flex items-center">
                待支付( 还剩 <wd-count-down :time="handleCommonOrderStatusText(item)" @finish="refresh" /> )
              </view>
            </template>
            <text v-else>
              {{ handleCommonOrderStatusText(item) }}
            </text>
          </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)">
            <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-32rpx text-#FF4D3A font-semibold">
                ￥{{ item.actualTotal }}
              </view>
              <view class="text-center text-28rpx text-#AAAAAA">
                共{{ item.goodsTotal }}件
              </view>
            </view>
          </view>
        </view>
        <view class="mt24rpx flex items-center justify-end">
          <template v-if="item.hbOrderStatus === OrderStatus.PaddingPay">
            <wd-button size="small" plain type="info" @click.stop="handleCancel(item)">
              取消订单
            </wd-button>
            <view class="ml20rpx">
              <wd-button size="small" plain type="error" @click.stop="handlePay(item.orderNumber as string)">
                付款
              </wd-button>
            </view>
          </template>
          <template v-if="item.hbOrderStatus === OrderStatus.OrderCancel">
            <wd-button size="small" plain type="info" @click.stop="handleDel(item)">
              删除订单
            </wd-button>
            <view class="ml20rpx">
              <wd-button size="small" plain type="error" @click.stop="handleDel(item)">
                再次购买
              </wd-button>
            </view>
          </template>
        </view>
      </view>
    </view>
    <wd-status-tip v-if="!orderList.length" image="content" tip="暂无内容" />
    <view class="h-20rpx" />
  </view>
</template>

<style scoped lang="scss">
.page-xsb {
  :deep() {
    .wd-button.is-plain.is-error {
      color: #FF4D3A !important;
    }
    .wd-count-down{
      color: #FF4D3A ;
      font-size: 700 !important;
      line-height: unset !important;
    }
  }

  .box-shadow {
    box-shadow: -6rpx 0rpx 6rpx 2rpx rgba(0, 0, 0, 0.04);
  }
}
</style>