vue3.2/Vite/Ts73: 商品详情静态搭建以及详情展示

└─src
    ├─api
    │  └─product
    │      └─sku
    │          └─index.ts
    └─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="Info"
            @click="findSku(row)"
          ></el-button>
          <!-- ... -->
        </template>
      </el-table-column>
    </el-table>
    <!-- ... -->
    <!-- 抽屉 -->
    <el-drawer v-model="drawer">
      <template #header>
        <h4>查看商品详情</h4>
      </template>
      <template #default>
        <el-row>
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag v-for="(item, index) in skuAttrVaueList" :key="item.id"
              >{{ item.valueName }}</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag v-for="(item, index) in skuSaleAttrVaueList" :key="item.id"
              >{{ item.saleAttrValueName }}</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <!-- 轮播图 -->
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  style="width: 100%;height: 100%"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </el-card>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import { reqSkuInfo } from "@/api/product/sku";
  import type { SkuData, SkuInfoData } from "@/api/product/sku/type";

  let drawer = ref<boolean>(false);

  let skuInfo = ref<SkuData>({});

  const findSku = async (row: SkuData) => {
    drawer.value = true;
    // 发请求
    const result: SkuInfoData = await reqSkuInfo(row.id as number);
    if (result.code === 200) {
      skuInfo.value = result.data;
    }
  };
</script>

//...
import type { SkuInfoData } from "./type";
//...
enum API {
  //...
  SKUINFO_URL = "/admin/product/getSkuInfo/",
}
//...
export const reqSkuInfo = (skuId: number) =>
  request.get<any, SkuInfoData>(API.SKUINFO_URL + skuId);

//...
export interface SkuInfoData extends ResponseData {
  data: SkuData;
}