122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<template>
|
|
<el-dialog title="选择分类" :visible.sync="dialogVisible">
|
|
<div class="list" v-loading="loading">
|
|
<div class="row" v-for="(item, index) in categorys" :key="item.id">
|
|
<div class="list_title">{{ item.name }}</div>
|
|
<div class="item_wrap">
|
|
<el-button :type="item.active ? 'primary' : ''" @click="selectHandle(item)">全部</el-button>
|
|
<el-button :type="val.active ? 'primary' : ''" v-for="val in item.childrenList" :key="val.id"
|
|
@click="selectHandle(val, index)">{{
|
|
val.name }}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="onSubmitHandle">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { tbShopCategoryGet } from '@/api/shop'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
loading: false,
|
|
categorys: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.tbShopCategoryGet()
|
|
},
|
|
methods: {
|
|
// 确认选择分类
|
|
onSubmitHandle() {
|
|
let categorys = []
|
|
for (let item of this.categorys) {
|
|
if (item.active) {
|
|
categorys.push({
|
|
name: `${item.name}`,
|
|
id: item.id
|
|
})
|
|
}
|
|
if (item.childrenList.length) {
|
|
for (let val of item.childrenList) {
|
|
if (val.active) {
|
|
categorys.push({
|
|
name: `${val.name}`,
|
|
id: val.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.$emit('success', categorys)
|
|
this.dialogVisible = false
|
|
},
|
|
// 选择分类
|
|
selectHandle(item, index = -1) {
|
|
console.log(item, index)
|
|
if (index != -1) {
|
|
this.categorys[index].active = false
|
|
} else {
|
|
item.childrenList.map(item => {
|
|
item.active = false
|
|
})
|
|
}
|
|
item.active = !item.active
|
|
},
|
|
// 获取分类
|
|
async tbShopCategoryGet() {
|
|
try {
|
|
this.loading = true
|
|
const res = await tbShopCategoryGet({
|
|
shopId: localStorage.getItem('shopId'),
|
|
sort: 'sort,desc',
|
|
page: 0,
|
|
size: 500
|
|
})
|
|
res.content.map(item => {
|
|
item.active = false
|
|
item.childrenList.map(item => {
|
|
item.active = false
|
|
})
|
|
})
|
|
this.categorys = res.content
|
|
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 300);
|
|
} catch (error) {
|
|
console.log(error)
|
|
this.loading = false
|
|
}
|
|
},
|
|
show() {
|
|
this.dialogVisible = true
|
|
this.tbShopCategoryGet()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.list {
|
|
min-height: 200px;
|
|
|
|
.row {
|
|
padding-bottom: 20px;
|
|
|
|
.list_title {
|
|
color: #999;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.item_wrap {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
</style> |