灏天阁

vue3.2/Vite/Ts72: SKU上架和下架

· Yin灏

目录结构

└─src
    ├─api
    │  └─product
    │      └─sku
    │          └─index.ts
    └─views
        └─product
            └─sku
                └─index.vue

src/views/product/sku/index.vue

<template>
  <el-card :data="skuArr">
    <el-table border>
      <!-- ... -->
      <el-table-column label="操作" width="250px" fixed="right">
        <template #="{ row }">
          <!-- 上架和下架 -->
          <el-button
            type="primary"
            size="small"
            :icon="row.isSale === 1 ? 'Bottom' : 'Top'"
            @click="updateSale(row)"
          ></el-button>
          <!-- ... -->
        </template>
      </el-table-column>
    </el-table>
    <!-- ... -->
  </el-card>
</template>
<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { reqSkuList, reqSaleSku, reqCancelSaleSku } from "@/api/product/sku";
  import type { SkuData } from "@/api/product/sku/type";
  //...
  const updateSale = async (row: SkuData) => {
    if (row.isSale === 1) {
      // 上架中
      await reqCancelSaleSku(row.id as number);
      ElMessage({
        type: "success",
        message: "下架成功",
      });
      getHasSku(pageNo.value);
    } else {
      // 下架中
      await reqSaleSku(row.id as number);
      ElMessage({
        type: "success",
        message: "上架成功",
      });
      getHasSku(pageNo.value);
    }
  };
</script>

上架和下架接口处理

src/api/product/sku/index.ts

enum API {
  SALE_URL = "/admin/product/onSale/",
  CANCELSALE_URL = "/admin/product/cancelSale/",
}
//...
export const reqSaleSku = (skuId: number) =>
  request.get<any, any>(API.SALE_URL + skuId);

export const reqCancelSaleSku = (skuId: number) =>
  request.get<any, any>(API.cancelSale + skuId);

- Book Lists -