[Vue]实战---电商项目(商品管理模块)【八】

商品管理

商品管理概述

用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能

 

商品列表

• 实现商品列表布局效果
• 调用后台接口获取商品列表数据

const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
if (res.meta.status !== 200) {
    return this.$message.error('初始化商品列表失败！')
}
// 为商品列表赋值
this.goodsList = res.data.goods
// 为总数量赋值
this.total = res.data.total

 

添加商品

基本布局与分布条效果

• 添加商品基本布局
• 分布条组件用法

<el-steps :active="activeName-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>

 

商品信息选项卡Tab布局效果

<el-tabs tab-position="left" v-model="activeName" :before-leave="beforeTabLeave">
    <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>

 

商品基本信息

• 商品基本信息表单布局
• 表单数据绑定
• 表单验证

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' }],
    goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]
}

 

商品分类信息

• 商品分类布局

<el-cascader expand-trigger="hover" :options="cateList" :props="cascaderConfig" 
             v-model="addForm.goods_cat" @change="handleCascaderChange"></el-cascader>

• 商品分类数据加载

const { data: res } = await this.$http.get('categories')
if (res.meta.status !== 200) {
    return this.$message.error('初始化商品分类失败！')
}
this.cateList = res.data

 

商品动态参数

• 获取商品动态参数数据
• 商品动态参数布局

const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
    params: { sel: 'many' }
})
if (res.meta.status !== 200) return this.$message.error('获取动态参数列表失败！')
// 把动态参数中的每一项数据中的 attr_vals，都从字符串分割为数组
res.data.forEach(item => {
    item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
})
this.manyData = res.data

 

商品静态属性

• 获取商品静态属性数据
• 商品静态属性布局

const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
    params: { sel: 'only' }
})
if (res.meta.status !== 200) {
    return this.$message.error('获取动态参数列表失败！')
}
this.onlyData = res.data

 

商品图片上传

• 图片上传组件基本使用

<el-upload
           action="http://47.96.21.88:8888/api/private/v1/upload" 				:headers="uploadHeaders" 
           :on-preview="handlePreview"
           :on-remove="handleRemove"
           :on-success="handleSuccess"
           list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

• 图片预览

// 预览图片时候，触发的方法
handlePreview(result) {
    this.previewImgSrc = result.response.data.url
    this.previewVisible = true
}

• 图片删除

// 当移除图片，会触发这个方法
handleRemove(result) {
    // 根据 result.response.data.temp_path 从 addForm.pics 数组中，找到要删除那个对象的索引值
    const index = this.addForm.pics.findIndex(item => item.pic === result.response.data.tmp_path)
    // 根据索引删除对应的图片信息对象
    this.addForm.pics.splice(index, 1)
}

• 完成图片上传

// 图片上传成功
handleSuccess(result) {
    if (result.meta.status === 200) {
        // 把上传成功后，图片的临时路径，保存到 addForm.pics 数组中，作为对象来保存
        this.addForm.pics.push({
            pic: result.data.tmp_path
        })
    }
}

 

商品详情

富文本编辑器基本使用

• 安装

 // 安装vue-quill-editor
 npm install vue-quill-editor -S

• 导入

 import VueQuillEditor from 'vue-quill-editor‘
 Vue.use(VueQuillEditor)

• 使用

 <quill-editor v-model="addForm.goods_introduce"></quill-editor>

 

完成商品添加

• 处理商品相关数据格式
• 调用接口完成商品添加

// 先处理好商品相关的数据格式，然后再提交
const newForm = _.cloneDeep(this.addForm)
newForm.goods_cat = newForm.goods_cat.join(',')
// 到此位置，商品相关数据已经准备好，可以提交了
const { data: res } = await this.$http.post('goods', newForm)
if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
this.$message.success('添加商品成功！')
// 跳转到商品列表页
this.$router.push('/goods/list')

 

完成编辑和删除

编辑

• 修改商品对话框

<el-dialog title="修改商品" :visible.sync="setGoodsDialogVisible" width="50%">
    <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
        <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="editForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="editForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="editForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="editForm.goods_weight"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setGoodsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editGoodsMessage">确 定</el-button>
    </span>
</el-dialog>

• 修改商品对话框的显示与隐藏

// 修改商品对话框的显示与隐藏
setGoodsDialogVisible: false,

• 编辑商品要提交的表单数据

// 编辑商品要提交的表单数据
editForm: {
    goods_id: 0,
        goods_cat: [],
            goods_name: '',
                goods_price: 0,
                    goods_number: 0,
                        goods_weight: 0
},

• 编辑商品的表单验证规则

// 编辑商品的表单验证规则
rules: {
    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'}
                ]
}

• 编辑商品

// 编辑商品
async editGoodsInfo(id) {
    this.setGoodsDialogVisible = true
    const {data: res} = await this.$http.get(`goods/${id}`)
    if (res.meta.status !== 200) {
        return this.$message.error('查询失败！')
    } else {
        this.editForm.goods_name = res.data.goods_name
        this.editForm.goods_price = res.data.goods_price
        this.editForm.goods_number = res.data.goods_number
        this.editForm.goods_weight = res.data.goods_weight
        this.editForm.goods_cat = res.data.goods_cat
        this.editForm.goods_id = res.data.goods_id
    }
},

• 确认提交编辑商品

// 确认提交编辑商品
editGoodsMessage() {
    this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
            return this.$message.error('请填写必要的表单项！')
        }
        const { data: res } = await this.$http.put(
            `goods/${this.editForm.goods_id}`,
            this.editForm
        )
        if (res.meta.status !== 200) {
            return this.$message.error('编辑商品信息失败！')
        } else {
            this.$message.success('编辑商品信息成功！')
            this.getGoodsList()
            this.setGoodsDialogVisible = false
        }
    })
    this.setGoodsDialogVisible = false
}

 

删除

async removeById(id) {
    const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).catch(err => err)

    if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
    }

    const {data: res} = await this.$http.delete(`goods/${id}`)

    if (res.meta.status !== 200) {
        return this.$message.error('删除失败！')
    }

    this.$message.success('删除成功！')
    this.getGoodsList()
},