1. 参数管理概述
商品参数用于显示商品的固定的特征信息,可以通过电商平台详情页直观地看到。
2. 商品分类选择
1. 选择商品分类
- 页面基本布局
- 加载商品分类数据
- 实现商品分类的级联选择效果
// 获取所有的商品分类列表
async getCateList () {
const { data: res } = await this.$http.get('categories')
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
this.cateList = res.data
console.log(this.cateList)
}
2. 控制级联菜单分类选择
- 只允许选择三级分类
- 通过计算属性的方式获取分类id
// 级联选择框选中项变化,会触发这个函数
handleChange () {
// 证明选中的不是三级分类
if (this.selectedCateKeys.length !== 3) {
this.selectedCateKeys = []
}
// 证明选中的是三级分类
console.log(this.selectedCateKeys)
}
若没有选中第三级分类,则“添加参数”按钮和“添加属性”按钮需要被禁用,反之,则启用。
禁用和启用与级联选择器对应的数组有关,如果数组长度为3,则证明选中了第三级分类。
可以定义一个计算属性,根据长度返回一个布尔值,来控制按钮的启用和禁用
computed: {
// 如果按钮需要被禁用,则返回true
isBtnDisabled () {
if (this.selectedCateKeys.length !== 3) {
return true
}
return false
},
// 当前选中的三级分类的id
cateId () {
if (this.selectedCateKeys.length === 3) {
return this.selectedCateKeys[2]
}
return null
}
}
<!-- 添加参数的按钮 -->
<el-button type="primary" size="mini"
:disabled="isBtnDisabled">添加参数</el-button>
3. 实现参数列表
1. 根据选择的商品分类加载对应的参数数据
- 参数列表布局
- 根据分类id 加载参数列表数据
// 获取参数的列表数据
async getParamsData () {
// 证明选中的不是三级分类
if (this.selectedCateKeys.length !== 3) {
this.selectedCateKeys = []
}
// 证明选中的是三级分类
console.log(this.selectedCateKeys)
// 根据所选分类的id,和当前所处的面板,获取对应的参数
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
params: {
sel: this.activeName
}
})
if (res.meta.status !== 200) {
return this.$message.error('获取参数列表失败!')
}
console.log(res.data)
}
2. 处理标签数据格式
将字符串形式的数据分隔为数组。
- 如果本来就为空,则返回空数组
res.data.forEach(item => {
item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
// console.log(item.attr_vals)
})
3. 控制添加标签文本框的显示
<!-- 添加的按钮 -->
<el-button v-else class="button-new-tag"
size="small"
@click="showInput(scope.row)">+ New Tag</el-button>
// 点击按钮后,展示文本输入框
showInput (row) {
// console.log(row)
row.inputVisible = true
// 让文本框自动获得焦点
// $nextTick 方法的作用:当页面上元素被重新渲染之后,才会执行回调函数中的代码
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
}
4. 实现标签动态添加的文本框控制逻辑
- 控制标签输入域的显示和隐藏
- 对输入的内容进行数据判断
res.data.forEach(item => {
item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
// console.log(item.attr_vals)
// 控制文本框的显示与隐藏
item.inputVisible = false
// 文本框中输入的值
item.inputValue = ''
})
5. 实现标签的添加和删除操作
// 将对attr_vals的操作,保存到数据库
async saveAttrVals (row) {
const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,
{
attr_name: row.attr_name,
attr_sel: row.attr_sel,
attr_vals: row.attr_vals.join(' ')
})
if (res.meta.status !== 200) {
return this.$message.error('修改参数项失败!')
}
this.$message.success('修改参数项成功!')
}
4. 实现动态参数与静态属性添加
- 动态参数与静态属性表单重用
- 添加动态参数与静态属性使用的是同一个接口
// 动态计算标题的文本
titleText () {
if (this.activeName === 'many') {
return '动态参数'
} else {
return '静态属性'
}
}
// 点击按钮,添加参数
addParams () {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,
{
attr_name: this.addForm.attr_name,
attr_sel: this.activeName
})
if (res.meta.status !== 201) {
return this.$message.error('添加参数失败!')
}
this.$message.success('添加参数成功!')
this.addDialogVisible = false
this.getParamsData()
})
}