[Vue.js]实战 -- 电商项目(六)_js tab选项卡商品介绍商品介绍模板内容

商品管理

商品管理概述

用于维护电商平台的商品信息

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

 

商品列表

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

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
1
2
3
4
5
6
7
8

 

添加商品

基本布局与分布条效果

• 添加商品基本布局

• 分布条组件用法

<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>
1
2
3
4
5
6
7
8

 

商品信息选项卡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>
1
2
3
4
5
6
7

 

商品基本信息

• 商品基本信息表单布局

• 表单数据绑定

• 表单验证

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' }]
}
1
2
3
4
5
6
7

 

商品分类信息

• 商品分类布局

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

• 商品分类数据加载

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

 

商品动态参数

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

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
1
2
3
4
5
6
7
8
9

 

商品静态属性

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

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
1
2
3
4
5
6
7

 

商品图片上传

• 图片上传组件基本使用

<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>
1
2
3
4
5
6
7
8

• 图片预览

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

• 图片删除

// 当移除图片，会触发这个方法
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)
}
1
2
3
4
5
6
7

• 完成图片上传

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

 

商品详情

富文本编辑器基本使用

• 安装

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

• 导入

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

• 使用

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

 

完成商品添加

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

// 先处理好商品相关的数据格式，然后再提交
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')
1
2
3
4
5
6
7
8
9

 

完成编辑和删除

编辑

• 修改商品对话框

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

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

// 编辑商品要提交的表单数据
editForm: {
   goods_id: 0,
       goods_cat: [],
           goods_name: '',
               goods_price: 0,
                   goods_number: 0,
                       goods_weight: 0
},
1
2
3
4
5
6
7
8
9

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

// 编辑商品的表单验证规则
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'}
               ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 编辑商品

// 编辑商品
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
   }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 确认提交编辑商品

// 确认提交编辑商品
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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 

删除

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()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24