灏天阁

vue3.2/Vite/Ts68: SKU列表的展示

· Yin灏

目录结构

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

展示 SKU 列表的接口

src/api/product/spu/index.ts

import type { SkuInfoData } from "./type";
//...
enum API {
  SKUINGO_URL = "/admin/product/findBySpuId/",
}

//...
export const reqSkuList = (spuId: number | string) =>
  request.get<any, SkuInfoData>(API.SKUINGO_URL + spuId);

定义接口数据类型

src/api/product/spu/type.ts

//...
export interface SkuData {
  category3Id: string | number;
  spuId: string | number;
  tmId: string | number;
  skuName: string;
  price: string | number;
  weight: string | number;
  skuDesc: string;
  skuAttrValueList?: Attr[];
  skuSaleAttrValueList?: SaleAttr[];
  skuDefaultImg: string;
}
//...
export interface SkuInfoData extends ResponseData {
  data: SkuData[];
}

组件中处理

src/views/product/spu/index.vue

<template>
  <div>
    <!-- ... -->
    <el-card>
      <div v-show="scene === 0">
        <!-- .... -->
        <el-table border :data="records">
          <!-- ... -->
          <el-table-column label="SPU操作">
            <template #="{row}">
              <!-- ... -->
              <el-button
                type="primary"
                size="small"
                icon="View"
                title="查看SKU列表"
                @click="findSku(row)"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                icon="Delete"
                title="删除SPU"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- ... -->
      </div>
      <!-- ... -->
      <!-- dialog -->
      <el-dialog v-mode="show" title="SKU列表">
        <el-table>
          <el-table-column label="SKU名字" prop="skuName"></el-table-column>
          <el-table-column label="SKU价格" prop="price"></el-table-column>
          <el-table-column label="SKU重量" prop="weight"></el-table-column>
          <el-table-column label="SKU图片">
            <template #="{row}">
              <img :src="row.skuDefaultImg" :width="100" :height="100" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import { reqSkuList } from "@/api/product/spu";
  import { SkuInfoData, SkuData } from "@/api/product/spu/type";
  //...
  let skuArr = ref<SkuData[]>([]);
  let show = ref<boolean>(false);
  //...
  const findSku = async (row: SkuInfoData) => {
    const result: any = await reqSkuList(row.id as number);
    if (result.code === 200) {
      skuArr.value = result.data;
      show.value = true;
    }
  };
</script>

- Book Lists -