city-gather/src/subPack-common/afterSalesList/index.vue

<script setup lang="ts">
import { handleCommonRefundOrderCancel, refundOrderStatusText, refundStatus } from './index'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
import router from '@/router'

definePage({
  name: 'common-afterSalesList',
  islogin: true,
  style: {
    navigationBarTitleText: '售后列表',
  },
})

const { data: refundList, refresh, page, isLastPage } = usePagination((pageNum, pageSize) => Apis.xsb.refundList({ data: { pageNum, pageSize } }), {
  immediate: false,
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
})
onShow(() => {
  refresh()
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
async function handleCancel(item: Api.AppRefundOrderListVo) {
  await handleCommonRefundOrderCancel(item.refundNumber as string)
  refresh()
}
</script>

<template>
  <view class="page-xsb px24rpx py24rpx">
    <view v-for="item in refundList" :key="item.refundNumber" class="mb24rpx rounded-16rpx bg-white p24rpx">
      <view @click="router.push({ name: 'common-afterSalesDetail', params: { refundNumber: `${item.refundNumber}` } })">
        <view class="flex items-center justify-between">
          <view class="whitespace-nowrap text-28rpx text-#AAAAAA">
            售后编号:{{ item.refundNumber }}
          </view>
          <view class="text-24rpx text-#222">
            {{ refundOrderStatusText[item.refundStatus as keyof typeof refundOrderStatusText] }}
          </view>
        </view>
        <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
        <view class="mt24rpx box-border h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9">
          <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="items in item.refundProdList" :key="items.id" class="mr50rpx">
                  <image
                    :src="items.prodUrl"
                    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.refundProdMoney }}
            </view>
            <view class="text-center text-28rpx text-#AAAAAA">
              共{{ item.refundProdNumber }}件
            </view>
          </view>
        </view>
        <view class="mt24rpx rounded-16rpx bg-#F9F9F9 px24rpx py20rpx text-28rpx text-#222">
          {{ item.omsOrderRefundRecord?.auditStatusDescribe }}
          <text class="text-24rpx text-#AAAAAA">
            {{ item.omsOrderRefundRecord?.instructions }}
          </text>
        </view>
      </view>
      <view class="mt20rpx flex items-center justify-end">
        <wd-button v-if="item.refundStatus == refundStatus.Cancel" plain block type="info" size="small" @click.stop="useSysStore().getRefunOrder(item.orderNumber as string)">
          再次申请
        </wd-button>
        <wd-button v-if="item.refundStatus == refundStatus.PendingAudit" plain block type="info" size="small" @click.stop="handleCancel(item)">
          取消申请
        </wd-button>
      </view>
    </view>
    <wd-status-tip v-if="!refundList.length" image="content" tip="暂无内容" />
  </view>
</template>

<style scoped>

</style>