SKU管理模块 开发
### Sku.index.vue
<template>
<div>
<el-table style="width: 100%" border >
<el-table-column type="index" label="序号" width="80px" align="center">
</el-table-column>
<el-table-column prop="prop" label="名称" width="width">
</el-table-column>
<el-table-column prop="prop" label="描述" width="width">
</el-table-column>
<el-table-column prop="prop" label="默认图片" width="110">
</el-table-column>
<el-table-column prop="prop" label="重量" width="80">
</el-table-column>
<el-table-column prop="prop" label="价格" width="80">
</el-table-column>
<el-table-column prop="prop" label="操作" width="width">
</el-table-column>
</el-table>
<!--
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
page-sizes: 选择器,每页选择显示几条数据,[3,5,10]
page-count: 页码数量,必须奇数
layout: 组件布局
-->
<el-pagination style="margin-top: 20px;textAlign:center" :current-page="page" :page-size="limit"
:page-sizes="[3,5,10]" :page-count="7" :total="total" layout="prev,pager,next,jumper,->,sizes,total">
</el-pagination>
</div>
</template>
<script>
export default {
name:'Sku'
}
</script>
<style>
</style>
### product.sku.js
......
export const reqSkuList = (page,limit)=>request({url:`/admin/product/list/${page}/${limit}`,method:'get'})
### Sku.index.vue
......
<script>
export default {
name:'Sku',
data(){
return {
// 分页相关
page:1,
limit:10,
total:0,
// 存储SKU列表数据
records:[]
}
},
methods:{
async getSkuList(){
const {page,limit} = this;
let res = await this.$API.sku.reqSkuList(page,limit)
if(res.code == 200){
this.records = res.data.records
this.total = res.data.total
}
}
},
mounted(){
this.getSkuList() // 挂载完毕即发请求
},
}
</script>
### Sku.index.vue
<template>
<div>
<!--数据源:data-->
<el-table style="width: 100%" border :data="records">
<el-table-column type="index" label="序号" width="80px" align="center">
</el-table-column>
<!--渲染数据-->
<el-table-column prop="skuName" label="名称" width="width">
</el-table-column>
<el-table-column prop="skuDesc" label="描述" width="width">
</el-table-column>
<el-table-column label="默认图片" width="110">
<template slot-scope="{row,$index}">
<img :src="row.skuDefaultImg" style="width: 80px;height: 80px;">
</template>
</el-table-column>
<el-table-column prop="weight" label="重量" width="80">
</el-table-column>
<el-table-column prop="price" label="价格" width="80">
</el-table-column>
<el-table-column prop="prop" label="操作" width="width">
<template slot-scope="{row,$index}">
<el-button type="success" icon="el-icon-sort-down" size="mini"></el-button>
<el-button type="success" icon="el-icon-sort-up" size="mini"></el-button>
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="info" icon="el-icon-info" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</template>
</el-table-column>
</el-table>
<!--绑定页码事件和每页展示数据量事件-->
<el-pagination style="margin-top: 20px;textAlign:center" :current-page="page" :page-size="limit"
:page-sizes="[3,5,10]" :page-count="7" :total="total" layout="prev,pager,next,jumper,->,sizes,total"
@current-change="getSkuList" @size-change="handleSizeChange">
</el-pagination>
</div>
</template>
<script>
export default {
name:'Sku',
......
methods:{
async getSkuList(pages=1){
......
},
// 每页展示多少条数据
handleSizeChange(limit){
this.limit = limit
this.getSkuList()
}
},
......
}
</script>
SKU商品的"上架"与"下架" 功能实现
......
<!--互斥-->
<el-button type="success" icon="el-icon-sort-down" size="mini" v-if="row.isSale==0"></el-button>
<el-button type="success" icon="el-icon-sort-up" size="mini" v-else></el-button>
- 发请求通知后端,用户的动作(是'上架'还是'下架')
### product.sku.js
......
// 通知SKU商品是否'上架'
export const reqCancel = (skuId)=>request({url:`/admin/product/cancelSale/${skuId}`,method:'get'})
### Sku.index.vue
......
<el-table-column prop="prop" label="操作" width="width">
<template slot-scope="{row,$index}">
<!--绑定两个点击事件-->
<el-button type="success" icon="el-icon-sort-down" size="mini" v-if="row.isSale==0" @click="sale(row)"></el-button>
<el-button type="success" icon="el-icon-sort-up" size="mini" v-else @click="cancel(row)"></el-button>
......
</template>
</el-table-column>
......
async sale(sku){
let res = await this.$API.sku.reqCancel(sku.id)
if(res.code == 200){
sku.isSale = 1;
this.$message({type:'success',message:'上架成功'})
}
},
async cancel(sku){
let res = await this.$API.sku.reqCancel(sku.id)
if(res.code == 200){
sku.isSale = 0;
this.$message({type:'success',message:'下架成功'})
}
}
获取SKU详情 功能实现
### product.sku.js
......
// 获取SKU详情
export const reqSkuById = (skuId)=>request({url:`/admin/product/getSkuById/${skuId}`,method:'get'})
### Sku.index.vue
......
<el-pagination>
......
</el-pagination>
<!--SKU详情抽屉效果-->
<el-drawer
:visible.sync="drawer"
:direction="direction"
:show-close="false"
size="50%"
>
<el-row>
<el-col :span="5">名称</el-col>
<el-col :span="16">sku</el-col>
</el-row>
<el-row>
<el-col :span="5">名称</el-col>
<el-col :span="16">sku</el-col>
</el-row>
<el-row>
<el-col :span="5">名称</el-col>
<el-col :span="16">sku</el-col>
</el-row>
<el-row>
<el-col :span="5">名称</el-col>
<el-col :span="16">sku</el-col>
</el-row>
<el-row>
<el-col :span="5">名称</el-col>
<el-col :span="16">sku</el-col>
</el-row>
</el-drawer>
......
<script>
export default {
name:'Sku',
data(){
return {
......
// 抽屉效果
drawer: false,
direction: 'rtl',
}
},
methods:{
......
async getSkuInfo(sku){
// 若把逻辑写在"发请求"后面,会造成抽屉效果'延迟',故放到前面
this.drawer = true; // 抽屉展示SKU详情
let res= await this.$API.sku.reqSkuById(sku.id)
......
},
},
}
</script>