xh-pan1
1 year ago
16 changed files with 856 additions and 69 deletions
-
1canvas-container/components/canvasEditPage.vue
-
117canvas-container/components/canvasShow/basics/productGroupList.vue
-
12canvas-container/components/canvasShow/componentMap.js
-
1canvas-container/components/canvasShow/config/api.js
-
2canvas-container/components/canvasShow/config/mixin/sendReqMixin.js
-
32canvas-container/components/leftBar/panelList.js
-
1canvas-container/components/toolBar/componentMap.js
-
385canvas-container/components/toolBar/goodsComp/productgroupTool.vue
-
56canvas-container/components/toolBar/toolModule/product-group-select.vue
-
24canvas-container/locales/en.json
-
24canvas-container/locales/zh-CN.json
-
3src/api/commodity.js
-
23src/locales/en.json
-
24src/locales/zh-CN.json
-
194src/views/commodity/commodityList/commodityGroup.vue
-
26src/views/commodity/commodityList/index.vue
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<div class="productGroup-list warp" :class="'terminal' + terminal"> |
|||
<h2 class="hom-title" :style="{textAlign:componentContent.textAlign}" v-if="componentContent.title">{{componentContent.title}}</h2> |
|||
<div class="content-warp" v-if="componentContent.showType == 1"> |
|||
<div class="item" @click="jumpProductGroup(item)" v-for="(item) of componentContent.productGroupData" :key="item.id"> |
|||
<div class="imgBox"> |
|||
<img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.data.groupName"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content-parent-warp" v-if="componentContent.showType == 2"> |
|||
<div class="content-list-warp"> |
|||
<div class="item" @click="jumpProductGroup(item)" v-for="(item) of componentContent.productGroupData" :key="item.id"> |
|||
<div class="imgBox"> |
|||
<img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.data.groupName"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {funMixin} from '../config/mixin' |
|||
export default { |
|||
name: 'productGroupList', |
|||
mixins: [funMixin], |
|||
props: { |
|||
terminal: { |
|||
type: Number, |
|||
default: 4 |
|||
}, |
|||
componentContent: { |
|||
type: Object |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.productGroup-list{ |
|||
padding: 20px 0; |
|||
.hom-title{ |
|||
font-size: 22px; |
|||
color: #333; |
|||
line-height: 1em; |
|||
margin-bottom: 23px; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
} |
|||
.content-warp{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin: 0px 40px 0px 30px; |
|||
-webkit-box-orient: horizontal; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: row; |
|||
flex-direction: row; |
|||
-ms-flex-line-pack: center; |
|||
align-content: center; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
.item{ |
|||
width: 25%; |
|||
height: auto; |
|||
padding-left: 10px; |
|||
|
|||
.imgBox { |
|||
position: relative; |
|||
} |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.content-parent-warp{ |
|||
|
|||
display: -webkit-box; |
|||
margin: 0px 40px 0px 30px; |
|||
-webkit-box-orient: horizontal; |
|||
-webkit-box-direction: normal; |
|||
-webkit-box-pack: center; |
|||
-webkit-box-align: center; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
overflow-x: auto; |
|||
.content-list-warp{ |
|||
width: auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-content: center; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.item{ |
|||
width: 230px; |
|||
height: auto; |
|||
padding-left: 10px; |
|||
|
|||
.imgBox { |
|||
position: relative; |
|||
} |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,385 @@ |
|||
<template> |
|||
<div class="productGroupTool"> |
|||
<h3 class="toolTit">分组列表</h3> |
|||
<div class="toolBox"> |
|||
<div class="itemBox"> |
|||
<label>标题</label> |
|||
<el-input v-model="activeComponent.componentContent.title" maxlength="20" :placeholder="$t('common.defaulthint')"></el-input> |
|||
</div> |
|||
<tool-select :linkValue.sync='activeComponent.componentContent.textAlign' title="文字对齐方式" :options="alignList"></tool-select> |
|||
<div class="itemBox"> |
|||
<div class="Tit">显示方式</div> |
|||
<el-select v-model="activeComponent.componentContent.showType" :placeholder="$t('common.choose')"> |
|||
<el-option label="平铺" :value="1"></el-option> |
|||
<el-option label="列表" :value="2"></el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="textTit">添加分组</div> |
|||
<div class="productGroupListBox"> |
|||
<draggable v-model="activeComponent.componentContent.productGroupData"> |
|||
<div v-for="(item, index) in activeComponent.componentContent.productGroupData" :key="index" class="item"> |
|||
<div class="listItemBox"> |
|||
<div class="addImgTit" @click="openAddProductGroup(item, index)"> |
|||
<div class="titLeft"> |
|||
<span class="iconfont"></span> |
|||
<span class="iconfont"></span> |
|||
<span>分组</span> |
|||
</div> |
|||
<div class="titRight"> |
|||
<span class="iconfont" @click.stop="deleteItem(item, index)"></span> |
|||
<span v-html="productGroupCurrent === index ? '' : ''" class="iconfont"></span> |
|||
</div> |
|||
</div> |
|||
<div class="addBox" v-show="productGroupCurrent === index"> |
|||
<div class="addContent"> |
|||
<tool-single-img :imageUrl.sync='item.img' tip='建议尺寸5:4等比例图片'></tool-single-img> |
|||
<div v-if="!item.data.groupName" class="addProductGroupBox" @click="addItemProductGroup(item, index)"><span class="iconfont"></span>添加分组</div> |
|||
<div v-else class="productGroupName"> |
|||
<span>{{item.data.groupName}}</span> |
|||
<div class="operation"> |
|||
<span class="iconfont" @click="replaceProductGroup(index)"></span> |
|||
<span class="iconfont" @click="deleteProductGroup(index)"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div @click="deleteItem(item, index)" class="deleteItem"><span class="iconfont"></span>删除内容</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</draggable> |
|||
</div> |
|||
</div> |
|||
<div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length < 8" @click="addProductGroup"><span class="iconfont"></span>添加分组</div> |
|||
<div class="addImgBtn" v-show="activeComponent.componentContent.productGroupData.length === 8"><span class="iconfont"></span>最多只能添加8个</div> |
|||
<el-dialog |
|||
title="提示" |
|||
:visible.sync="dialogVisible" |
|||
width="30%" |
|||
:before-close="deleteItem"> |
|||
<span>点击确定删除此项</span> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button> |
|||
<el-button type="primary" @click="dialogVisible = false">{{ $t('common.sure') }}</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog title="选择分组" :visible.sync="dialogProductGroup" width="480px"> |
|||
<product-group-select ref="productGroupSelect"></product-group-select> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogProductGroup = false">{{ $t('common.cancel') }}</el-button> |
|||
<el-button type="primary" @click="productGroupChanged">{{ $t('common.sure') }}</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Draggable from 'vuedraggable' |
|||
import {toolMixin} from '@@/config/mixin' |
|||
import ProductGroupSelect from '../toolModule/product-group-select' |
|||
import ToolSingleImg from '../toolModule/tool-single-img' |
|||
import ToolSelect from '../toolModule/tool-select' |
|||
// import imageSrc from '../../../assets/canvasImg' |
|||
export default { |
|||
mixins: [toolMixin], |
|||
name: 'productGroupTool', |
|||
components: { |
|||
ToolSelect, |
|||
ToolSingleImg, |
|||
ProductGroupSelect, |
|||
Draggable |
|||
}, |
|||
data () { |
|||
return { |
|||
title: '', // 标题内容 |
|||
alignList: [ |
|||
{ |
|||
id: 1, |
|||
label: '居左', |
|||
value: 'left' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
label: '居中', |
|||
value: 'center' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
label: '居右', |
|||
value: 'right' |
|||
} |
|||
], |
|||
textAlign: 'left', |
|||
productGroupCurrent: null, |
|||
dialogVisible: false, |
|||
dialogProductGroup: false, |
|||
currentProductGroup: null |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
openAddProductGroup (item, index) { |
|||
if (this.productGroupCurrent === index) { |
|||
this.productGroupCurrent = null |
|||
return false |
|||
} |
|||
this.productGroupCurrent = index |
|||
}, |
|||
// 添加分组 |
|||
addProductGroup () { |
|||
this.activeComponent.componentContent.productGroupData.push({ |
|||
data: [], |
|||
img: '' |
|||
}) |
|||
}, |
|||
// 删除内容 |
|||
deleteItem (item, index) { |
|||
this.$confirm('确定删除此项？') |
|||
.then(_ => { |
|||
this.activeComponent.componentContent.productGroupData.splice(index, 1) |
|||
}) |
|||
.catch(_ => { |
|||
}) |
|||
}, |
|||
addItemProductGroup (item, index) { |
|||
this.dialogProductGroup = true |
|||
this.productGroupCurrent = index |
|||
}, |
|||
// 替换分组 |
|||
replaceProductGroup (index) { |
|||
this.dialogProductGroup = true |
|||
this.productGroupCurrent = index |
|||
console.log(this.productGroupCurrent) |
|||
}, |
|||
// 删除已选分组 |
|||
deleteProductGroup (index) { |
|||
this.activeComponent.componentContent.productGroupData[index].data = {} |
|||
}, |
|||
// 选择分组 |
|||
productGroupChanged () { |
|||
let nodesObj = this.$refs.productGroupSelect.productGroup |
|||
console.log(nodesObj, this.productGroupCurrent) |
|||
if (nodesObj) { |
|||
var data = nodesObj |
|||
this.dialogProductGroup = false |
|||
this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].id = data.id |
|||
this.activeComponent.componentContent.productGroupData[this.productGroupCurrent].data = data |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.productGroupTool { |
|||
padding: 20px 20px 0 20px; |
|||
h3 { |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
color: #333333; |
|||
margin-bottom: 20px; |
|||
} |
|||
.toolBox { |
|||
padding-bottom: 10px; |
|||
.textTit { |
|||
height: 35px; |
|||
line-height: 35px; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
font-weight: bold; |
|||
} |
|||
.itemBox { |
|||
label { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
} |
|||
margin-bottom: 15px; |
|||
} |
|||
} |
|||
::v-deep .ql-container { |
|||
height: 200px; |
|||
} |
|||
.productGroupListBox { |
|||
margin-top: 30px; |
|||
.item { |
|||
border: 1px solid #E8EAEC; |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.listItemBox { |
|||
.addImgTit { |
|||
padding: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background: #F6F7F9; |
|||
cursor: pointer; |
|||
.titLeft { |
|||
display: flex; |
|||
align-items: center; |
|||
span { |
|||
color: #7D7E80; |
|||
} |
|||
span:nth-child(1) { |
|||
font-size: 28px; |
|||
} |
|||
span:nth-child(2) { |
|||
font-size: 25px; |
|||
margin: 0 6px; |
|||
} |
|||
span:nth-child(3) { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
.titRight { |
|||
display: flex; |
|||
align-items: center; |
|||
span:nth-child(1) { |
|||
width: 40px; |
|||
text-align: center; |
|||
display: block; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
} |
|||
.addContent { |
|||
padding: 13px; |
|||
.addProductGroupBox { |
|||
width: 100%; |
|||
height: 35px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ffffff; |
|||
background: $mainColor; |
|||
border-radius: 4px; |
|||
margin: 15px 0; |
|||
cursor: pointer; |
|||
} |
|||
.deleteItem { |
|||
border-radius: 4px; |
|||
background: $mainColor; |
|||
text-align: center; |
|||
height: 36px; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
margin-bottom: 10px; |
|||
span { |
|||
font-size: 18px; |
|||
color: #ffffff; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
.productGroupName { |
|||
height: 35px; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #e9e9e9; |
|||
padding: 0 10px; |
|||
justify-content: space-between; |
|||
span { |
|||
color: #333333; |
|||
} |
|||
span { |
|||
color: #333333; |
|||
} |
|||
.operation { |
|||
display: flex; |
|||
span { |
|||
width: 35px; |
|||
display: block; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.deleteItem { |
|||
padding: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #F6F7F9; |
|||
cursor: pointer; |
|||
color: $mainColor; |
|||
font-size: 14px; |
|||
span { |
|||
font-size: 16px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.addImgBtn { |
|||
border-radius: 4px; |
|||
background: $mainColor; |
|||
text-align: center; |
|||
height: 36px; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
span { |
|||
font-size: 20px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
.classList { |
|||
.classTit { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 50px; |
|||
align-items: center; |
|||
padding:0 20px; |
|||
background: #eeeeee; |
|||
span { |
|||
display: block; |
|||
width: 100px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.classListBox { |
|||
max-height: 300px; |
|||
overflow-y: auto; |
|||
.classItemBox { |
|||
display: flex; |
|||
padding: 0 20px; |
|||
align-items: center; |
|||
border-bottom: 1px solid #eeeeee; |
|||
div { |
|||
display: flex; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
height: 50px; |
|||
align-items: center; |
|||
span:nth-child(1) { |
|||
padding-left: 5px; |
|||
} |
|||
span { |
|||
display: block; |
|||
width: 100px; |
|||
text-align: left; |
|||
} |
|||
span:nth-child(2) { |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<!-- <el-cascader style="width: 100%" |
|||
ref="cascader" |
|||
:options="productGroupList" |
|||
:props="{ checkStrictly: true,label: 'groupName',value: 'id',children: 'childs' }" |
|||
clearable></el-cascader> --> |
|||
|
|||
<el-select v-model="productGroup" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in productGroupList" |
|||
:key="item.shopGroupId" |
|||
:label="item.groupName" |
|||
:value="item.shopGroupId"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
|
|||
<script> |
|||
import api from '@@/components/canvasShow/config/api' |
|||
import {sendReqMixin} from '@@/components/canvasShow/config/mixin' |
|||
import {checkEmptyChild} from '@@/config/common' |
|||
import {getShopId} from "@@/utils/auth.js" |
|||
export default { |
|||
name: 'product-group-select', |
|||
mixins: [sendReqMixin], |
|||
data () { |
|||
return { |
|||
productGroupList: [], |
|||
productGroup : {} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getProductGroup() |
|||
}, |
|||
methods: { |
|||
// 获取类别 |
|||
getProductGroup () { |
|||
var _this = this |
|||
// let shopId = parseInt(getShopId()) |
|||
// var paramsUrl = `${api.getProductGroup}?` |
|||
// if (shopId) { |
|||
// paramsUrl += `&shopId=${shopId}` |
|||
// } |
|||
let params = { |
|||
url: api.getProductGroup, |
|||
method: 'GET', |
|||
project: '0' |
|||
} |
|||
this.sendReq(params, (res) => { |
|||
_this.productGroupList = res.data |
|||
checkEmptyChild(_this.productGroupList) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue