Vue实战之 9.商品管理 -- 商品列表
电商后台管理系统之商品管理(3) -- 商品列表
·
1. 商品管理概述
商品管理模块用于维护电商平台的商品信息,包括商品的类型、参数、详情等。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能。
2. 商品列表
- 实现商品列表布局效果
- 调用后台接口获取商品列表数据
// 根据分页获取对应的商品列表
async getGoodsList () {
// get 请求要加上参数,都要指定params
const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
if (res.meta.status !== 200) {
return this.$message.error('获取商品列表失败!')
}
this.$message.success('获取商品列表成功!')
console.log(res.data)
this.goodsList = res.data.goods
this.total = res.data.total
}
利用过滤器对创建时间进行格式化:
Vue.filter('dataFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
3. 添加商品
1. 基本布局与分布条效果
- 添加商品分布布局
- 分布条组件用法
<!-- 步骤条区域 -->
<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
<el-step title="基本信息"></el-step>
<el-step title="商品参数"></el-step>
<el-step title="商品属性"></el-step>
<el-step title="商品图片"></el-step>
<el-step title="商品内容"></el-step>
<el-step title="完成"></el-step>
</el-steps>
2. 商品信息选项卡Tab布局效果
Tab组件的基本使用。
<!-- Tab栏区域 -->
<el-tabs :tab-position="'left'"
style="height: 200px;" v-model="activeIndex">
<el-tab-pane label="基本信息" name="0">基本信息</el-tab-pane>
<el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
<el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
<el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
<el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
</el-tabs>
3. 商品基本信息
- 商品基本信息表单布局
- 表单数据绑定
- 表单验证
addFormRules: {
goods_name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
goods_price: [
{ required: true, message: '请输入商品价格', trigger: 'blur' }
],
goods_weight: [
{ required: true, message: '请输入商品重量', trigger: 'blur' }
],
goods_number: [
{ required: true, message: '请输入商品数量', trigger: 'blur' }
]
}
4. 商品分类信息
- 商品分类布局
- 商品分类数据加载
<el-form-item label="商品分类" prop="goods_cat">
<el-cascader
v-model="addForm.goods_cat"
:options="cateList"
expand-trigger="hover"
:props="cateProps"
@change="handleChange"></el-cascader>
</el-form-item>
// 获取所有商品分类数据
async getCateList () {
const { data: res } = await this.$http.get('categories')
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类数据失败!')
}
this.cateList = res.data
}
5. 商品动态参数
- 获取商品动态参数数据
- 商品动态参数布局
// 当切换tab页签时触发的函数
async tabClicked () {
// console.log(this.activeIndex)
if (this.activeIndex === '1') {
// 访问的是 动态参数面板
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
{
params: {
sel: 'many'
}
})
if (res.meta.status !== 200) {
return this.$message.error('获取动态参数列表失败!')
}
console.log(res.data)
res.data.forEach(item => {
item.attr_vals =
item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
})
this.manyTableData = res.data
}
}
<el-tab-pane label="商品参数" name="1">
<!-- 渲染表单的item项 -->
<el-form-item v-for="item in manyTableData"
:key="item.attr_id" :label="item.attr_name">
<!-- 复选框组 -->
<el-checkbox-group v-model="item.attr_vals">
<el-checkbox :label="cb" border
v-for="(cb,i) in item.attr_vals"
:key="i"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-tab-pane>
6. 商品静态属性
- 获取商品静态属性数据
- 商品静态属性布局
else if (this.activeIndex === '2') {
// 访问的是静态属性面板
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
{
params: {
sel: 'only'
}
})
if (res.meta.status !== 200) {
return this.$message.error('获取静态属性列表失败!')
}
console.log(res.data)
this.onlyTableData = res.data
}
7. 商品图片上传
图片上传组件基本使用
<!-- action表示图片要上传到的后台api地址 -->
<el-upload
:action="uploadURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headerObj">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
在每次上传图片期间,都要为上传组件手动地指定headers请求头,同时在请求头对象中绑定Authorization。因为上传组件并没有调用axios,因此需要手动指定这个字段
// 图片上传组件的 headers请求头对象
headerObj: {
Authorization: window.sessionStorage.getItem('token')
}
图片预览
<!-- 图片预览 -->
<el-dialog title="图片预览"
:visible.sync="previewVisible" width="50%">
<img :src="previewPath" alt="" class="previewImg">
</el-dialog>
// 处理图片预览效果
handlePreview (file) {
// console.log(file)
this.previewPath = file.response.data.url
this.previewVisible = true
}
图片删除
// 处理移除图片的操作
handleRemove (file) {
console.log(file)
// 1.获取将要删除的图片的临时路径
const filePath = file.response.data.tem_path
// 2.从pics 数组中,找到这个图片对应的索引值
const i = this.addForm.pics.findIndex(x =>
x.pic === filePath)
// 3. 调用数组的spice方法,把图片信息对象,从pics数组中移除
this.addForm.pics.splice(i, 1)
console.log(this.addForm)
}
完成图片上传
// 监听图片上传成功的事件
handleSuccess (response) {
console.log(response)
// 1. 拼接得到一个图片信息对象
const picInfo = { pic: response.data.tmp_path }
// 2.将图片信息对象,push到pics数组中
this.addForm.pics.push(picInfo)
console.log(this.addForm)
}
8. 完成商品详情
富文本编辑器安装和基本使用
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 将富文本编辑器注册为全局可用的组件
Vue.use(VueQuillEditor)
<!-- 富文本编辑器组件 -->
<quill-editor v-model="addForm.goods_introduce">
</quill-editor>
9. 完成商品添加
- 处理商品相关数据格式
- 调用接口完成商品添加
// 添加商品的按钮
add () {
this.$refs.addFormRef.validate(async valid => {
if (!valid) {
return this.$message.error('请填写必要的表单项!')
}
// 执行添加的业务逻辑
// 调用lodash 的cloneDeep(obj)
const form = _.cloneDeep(this.addForm)
form.goods_cat = form.goods_cat.join(',')
// 处理动态参数
this.manyTableData.forEach(item => {
const newInfo = {
attr_id: item.attr_id,
attr_value: item.attr_vals.join(' ')
}
this.addForm.attrs.push(newInfo)
})
// 处理静态属性
this.onlyTableData.forEach(item => {
const newInfo = {
attr_id: item.attr_id,
attr_value: item.attr_vals
}
this.addForm.attrs.push(newInfo)
})
form.attrs = this.addForm.attrs
console.log(form)
// 发起请求,添加商品
// 商品的名称必须是唯一的
const { data: res } = await this.$http.post('goods', form)
if (res.meta.status !== 201) {
return this.$message.error('添加商品失败!')
}
this.$message.success('添加商品成功!')
// 跳转到商品列表页
this.$router.push('/goods')
})
}
更多推荐
已为社区贡献6条内容
所有评论(0)