SKU模块
8.1 SKU静态
<template>
<el-card>
<el-table border style="margin: 10px 0px">
<el-table-column type="index" label="序号" width="80px"></el-table-column>
<el-table-column
label="名称"
width="80px"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="描述"
width="300px"
show-overflow-tooltip
></el-table-column>
<el-table-column label="图片" width="300px"></el-table-column>
<el-table-column label="重量" width="300px"></el-table-column>
<el-table-column label="价格" width="300px"></el-table-column>
<el-table-column
label="操作"
width="300px"
fixed="right"
></el-table-column>
</el-table>
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
:background="true"
layout="prev, pager, next, jumper, ->,sizes,total "
:total="400"
/>
</el-card>
</template>
8.2 获取展示数据
8.2.1 API&&TYPE
API:
//SKU模块接口管理
import request from '@/utils/request'
import type { SkuResponseData} from './type'
//枚举地址
enum API {
//获取已有的商品的数据-SKU
SKU_URL = '/admin/product/list/',
}
//获取商品SKU的接口
export const reqSkuList = (page: number, limit: number) => {
return request.get<any, SkuResponseData>(API.SKU_URL + `${page}/${limit}`)
}
type:
export interface ResponseData {
code: number
message: string
ok: boolean
}
//定义SKU对象的ts类型
export interface Attr {
id?: number
attrId: number | string //平台属性的ID
valueId: number | string //属性值的ID
}
export interface saleArr {
id?: number
saleAttrId: number | string //属性ID
saleAttrValueId: number | string //属性值的ID
}
export interface SkuData {
category3Id?: string | number //三级分类的ID
spuId?: string | number //已有的SPU的ID
tmId?: string | number //SPU品牌的ID
skuName?: string //sku名字
price?: string | number //sku价格
weight?: string | number //sku重量
skuDesc?: string //sku的描述
skuAttrValueList?: Attr[]
skuSaleAttrValueList?: saleArr[]
skuDefaultImg?: string //sku图片地址
isSale?: number //控制商品的上架与下架
id?: number
}
//获取SKU接口返回的数据ts类型
export interface SkuResponseData extends ResponseData {
data: {
records: SkuData[]
total: number
size: number
current: number
orders: []
optimizeCountSql: boolean
hitCount: boolean
countId: null
maxLimit: null
searchCount: boolean
pages: number
}
}
8.2.2 组件获取数据
import { ref, onMounted } from 'vue'
//引入请求
import { reqSkuList } from '@/api/product/sku'
//引入ts类型
import type {
SkuResponseData,
SkuData,
SkuInfoData,
} from '@/api/product/sku/type'
//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let skuArr = ref<SkuData[]>([])
//组件挂载完毕
onMounted(() => {
getHasSku()
})
const getHasSku = async (pager = 1) => {
//当前分页器的页码
pageNo.value = pager
let result: SkuResponseData = await reqSkuList(pageNo.value, pageSize.value)
if (result.code == 200) {
total.value = result.data.total
skuArr.value = result.data.records
}
}
8.2.3 展示数据(el-table)
<el-table border style="margin: 10px 0px" :data="skuArr">
<el-table-column type="index" label="序号" width="80px"></el-table-column>
<el-table-column
prop="skuName"
label="名称"
width="80px"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="skuDesc"
label="描述"
width="300px"
show-overflow-tooltip
></el-table-column>
<el-table-column label="图片" width="300px">
<template #="{ row, $index }">
<img
:src="row.skuDefaultImg"
alt=""
style="width: 100px; height: 100px"
/>
</template>
</el-table-column>
<el-table-column
label="重量"
width="300px"
prop="weight"
></el-table-column>
<el-table-column
label="价格"
width="300px"
prop="price"
></el-table-column>
<el-table-column label="操作" width="300px" fixed="right">
<el-button type="primary" size="small" icon="Top"></el-button>
<el-button type="primary" size="small" icon="Edit"></el-button>
<el-button type="primary" size="small" icon="InfoFilled"></el-button>
<el-button type="primary" size="small" icon="Delete"></el-button>
</el-table-column>
</el-table>
8.2.4 分页器
//分页器下拉菜单发生变化触发
const handler = () => {
getHasSku()
}
注意:在这里切换页码和切换每页数据条数的回调不同是因为:它们都能对函数注入数据,切换页码注入的是点击的页码数,因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数,我们希望切换后跳转到第一页,因此使用handler,间接调用getHasSku。
8.3 上架下架按钮
8.3.1 API&&TYPE
//上架
SALE_URL = '/admin/product/onSale/',
//下架的接口
CANCELSALE_URL = '/admin/product/cancelSale/',
//已有商品上架的请求
export const reqSaleSku = (skuId: number) => {
return request.get<any, any>(API.SALE_URL + skuId)
}
//下架的请求
export const reqCancelSale = (skuId: number) => {
return request.get<any, any>(API.CANCELSALE_URL + skuId)
}
type都是any
8.3.2 按钮切换
根据数据切换
8.3.2 上架下架回调
流程:发请求->更新页面
//商品的上架与下架的操作
const updateSale = async (row: SkuData) => {
//如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架
//否则else情况与上面情况相反
if (row.isSale == 1) {
//下架操作
await reqCancelSale(row.id as number)
//提示信息
ElMessage({ type: 'success', message: '下架成功' })
//发请求获取当前更新完毕的全部已有的SKU
getHasSku(pageNo.value)
} else {
//下架操作
await reqSaleSku(row.id as number)
//提示信息
ElMessage({ type: 'success', message: '上架成功' })
//发请求获取当前更新完毕的全部已有的SKU
getHasSku(pageNo.value)
}
}
8.4 更新按钮
更新按钮这里没有业务。个人觉得是因为SKU的编写在SPU已经做完了。防止业务逻辑混乱
//更新已有的SKU
const updateSku = () => {
ElMessage({ type: 'success', message: '程序员在努力的更新中....' })
}
8.5 商品详情静态搭建
8.5.1 Drawer 抽屉
描述:呼出一个临时的侧边栏, 可以从多个方向呼出
//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
//抽屉展示出来
drawer.value = true
}
8.5.2 Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
、
效果图:
8.5.3 轮播图 carousel
注意:把对应的style也复制过来
8.6 商品详情展示业务
8.6.1 API&&TYPE
API
//获取商品详情的接口
SKUINFO_URL = '/admin/product/getSkuInfo/',
//获取商品详情的接口
export const reqSkuInfo = (skuId: number) => {
return request.get<any, SkuInfoData>(API.SKUINFO_URL + skuId)
}
type
//获取SKU商品详情接口的ts类型
export interface SkuInfoData extends ResponseData {
data: SkuData
}
8.6.2 发请求&&存储数据
let skuInfo = ref<any>({})
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
//抽屉展示出来
drawer.value = true
//获取已有商品详情数据
let result: SkuInfoData = await reqSkuInfo(row.id as number)
//存储已有的SKU
skuInfo.value = result.data
}
8.6.3 展示数据(销售属性为例)
8.7 删除模块
注:忘记写了,后面才想起来。简短写一下思路
API->绑定点击事件->发请求
比较简单。
8.8 小结
这模块的思路其实都比较简单。无外乎API(type),组件内发请求拿数据、将数据放到模板中。再加上一个对仓库的处理。
这部分真正的难点也是最值得学习的点在于
1:type的书写
2:对数据结构的理解(可以将请求回来的数据放到正确的位置上)
3:element-plus组件的使用。
其实现在看来这部分模块做的事情就是我们前端人的一些缩影。思路不难,难在琐碎的工作中要处理的各种各样的东西。