fashion-ssr-vue3/components/business/account/orders/all.vue

<!-- @format -->

<script lang="ts" setup>
import { useData } from "./useData"

const {
  tableData,
  total,
  getTableList,
  changePage,
  currentPage,
  page_size,
  cancelOrder,
} = useData({ type: "" })

function tableRowClassName({ rowIndex }: any) {
  if (rowIndex % 2 === 0) return "warning-row"
  return ""
}
getTableList()
</script>

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="billNo" label="Order No." width="180">
        <template #default="{ row }">
          <nuxt-link
            :to="`/orders/${row.id}`"
            class="hover:underline text-#0068FF"
          >
            {{ row.billNo }}
          </nuxt-link>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="brandQuantity" label="Brand Qty." width="180" /> -->
      <el-table-column
        prop="merchandiseQuantity"
        label="Products"
        width="180"
      />

      <el-table-column prop="totalPrice" label="Order Total" width="180" />
      <el-table-column label="Status" width="180">
        <template #default="{ row }">
          <div :class="row.state === '1' && 'text-#0068FF'">
            {{ row.state === "1" ? "Submitted" : "Cancelled" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="Created Time" width="180" />
      <el-table-column fixed="right" label="Action" min-width="240">
        <template #default="{ row }">
          <el-button
            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
          >
            <nuxt-link :to="`/orders/${row.id}`"> View details </nuxt-link>
          </el-button>
          <el-popconfirm
            title="Are you sure to cancel?"
            @confirm="cancelOrder(row)"
          >
            <template #reference>
              <el-button
                v-if="row.state === '1'"
                class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
              >
                Cancel
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="tableData.length" class="mt-25px flex justify-end">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="page_size"
        :pager-count="10"
        class="custom-pagination"
        layout="prev, pager, next"
        :total="total"
        @change="changePage"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
::v-deep(.el-table) {
  color: #333;

  .el-table__header-wrapper {
    .el-table__header {
      height: 50px;

      .el-table__cell {
        color: #333;
        font-weight: 400 !important;
        background-color: #fff2e1;
      }
    }
  }

  .el-table__row {
    height: 68px;

    &.warning-row {
      --el-table-tr-bg-color: #f7f7f7;
    }
  }
}
</style>