Skip to content

L
link-tools
Commit 020b8e10 by member
Options

feat: 新增树形下拉组件增加商品链接和商品自定义页面的功能

parent 85ba8afd
Showing with 340 additions and 13 deletions
card-list.vue
......@@ -144,7 +144,6 @@ export default {
this.baseUrl = host;
}
},
mounted() {
this.getCardList();
}
......
goods-tree.vue 0 → 100644
<template>
<div class="plug-sg">
<el-popover popper-class="plug-sg__popover" placement="bottom" trigger="click" v-model="treeVis">
<el-input slot="reference" suffix-icon="el-icon-arrow-down" v-model="ategory" placeholder="所有分类"></el-input>
<el-tree
class="plug-sg__tree"
ref="tree"
:default-expand-all="true"
node-key="mallProTagId"
:data="treeData"
:props="defaultProps"
:highlight-current="true"
@node-click="handleNodeClick">
</el-tree>
<div class="good-tree-btn">
<el-button @click.prevent.stop="hideTree" type="text" size="small" style="color:#303133">取消</el-button>
<el-button @click.prevent.stop="confirmBtn" type="text" size="small">确定</el-button>
</div>
</el-popover>
</div>
</template>
<script>
export default {
name:'goods-tree',
props:{
model:{
type:Object,
default(){
return {}
},
},
width:{
type:String,
default:'300'
},
treeData: Array
},
data() {
return {
treeVis: false,
ategory: '',
defaultProps: {
children: 'childrenList',
label: 'tagName'
}
}
},
methods:{
handleNodeClick(data) {
this.mallData = data;
this.ategory = data.tagName;
},
hideTree() {
this.treeVis = false;
},
confirmBtn() {
this.treeVis = false;
if (this.mallData.mallProTagId) {
this.$emit('pass-mall', this.mallData);
}
}
}
}
</script>
<style lang="scss">
.plug-sg {
display: inline-block;
width: 200px;
&__popover{
padding:10px 0 0 0;
}
&__btn{
height: 36px;
padding: 0 10px;
border-top:1px solid #ebeef5;
line-height: 34px;
text-align:right;
&--cancel {
color: #606266;
}
}
&__tree {
height: 260px;
width: 200px;
overflow-y: auto;
.el-tree-node__label {
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
}
}
.good-tree-btn {
float: right;
margin-right: 10px;
}
</style>
linktools.vue
......@@ -34,6 +34,7 @@ components: {linkId
<div class="link-tools-contain">
<el-dialog :class="activeName == 'first'? 'min-1026':'min-720'"
title="链接小工具"
:close-on-click-modal="false"
:visible.sync="mylinkToolsVisible"
:modal-append-to-body="false">
<!-- 链接类型 -->
......@@ -67,6 +68,9 @@ components: {linkId
:value="item.value">
</el-option>
</el-select>
<goods-tree v-if="goodsTreeVisible" @pass-mall="getMallId" :tree-data="treeData"></goods-tree>
<!-- 商品分类链接 -->
<treeselect
v-if="threeLevelTreeVisible"
......@@ -402,6 +406,7 @@ components: {linkId
import Treeselect from '@riophae/vue-treeselect';
import CardList from './card-list';
import GiftList from './gift-list';
import GoodsTree from './goods-tree';
// import axios from 'axios'
import qs from 'qs';
......@@ -411,6 +416,8 @@ export default {
props: ['linkToolsVisible','showType','projectName'],
data () {
return {
treeData: [],
goodsTreeVisible: false,
// 项目名
cardLimit: 1,
disabledList:[],
......@@ -715,6 +722,7 @@ export default {
that.twoLevelSelectValue = '';
that.threeLevelSelectValue = '';
this.goodType = '';
// 如果是 h5,二级,三级隐藏,
var type = selectOneItem.type == 5 ? true:false;
......@@ -778,6 +786,22 @@ export default {
// twoLevelValueChange (二级选择,保存选择类型)
twoLevelValueChange(e) {
if (e == 'product_category_link') { // 商品链接
this.goodType = 10;
this.threeLevelVisible = true;
this.threeLeveloneVisible = false;
this.goodsTreeVisible = true;
} else if (e == 'mall_customize_page') { // 自定义页面
this.goodType = 11;
this.threeLevelVisible = true;
this.threeLeveloneVisible = true;
this.goodsTreeVisible = false;
} else {
this.threeLevelVisible = true;
this.threeLeveloneVisible = true;
this.goodsTreeVisible = false;
}
var that = this
this.visibleType = null;
// 清空已经选择
......@@ -826,6 +850,9 @@ export default {
that.getGoodsCategory();// 获取商品品类
that.getGoodsClassify(); // 获取商品分类
// this.getGoodsType(); // 商品分类链接
// this.getGoodsPage(); // 商品自定义页面
that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = true; // 商品链接列表部分显示
return false;
......@@ -837,7 +864,13 @@ export default {
that.selectLinkObj.url = ele.content;
}
})
}else {
} else if (this.goodType == 10) {
// 商品分类链接
this.getGoodsLink();
} else if (this.goodType == 11) {
// 商品自定义页面
this.getGoodsPage();
} else {
// 判断三级中下拉/下拉树形/搜索下拉
that.goodsLinksVisible = false; // 商品列表隐藏
that.threeLevelVisible = true; // 三级部分显示
......@@ -846,7 +879,7 @@ export default {
that.threeLevelSelectValue = '';
var twoType = selectTwoItem.type;
// 判断三级显示的下拉组件
that.setThreeVisible(twoType,selectTwoItem)
that.setThreeVisible(twoType, selectTwoItem)
// 如果是门店,直接返回,需要输入后搜索出现下拉列表
......@@ -864,6 +897,44 @@ export default {
}
},
// sy 商品分类链接
getGoodsLink() {
this.axios.get(`${this.baseUrl}/api-plug/list-mall-product-tag?requestProject=gic-web`)
.then(res => {
if (res.data.errorCode === 0) {
const data = res.data.result;
if (data && data.length) {
this.treeData = data;
} else {
this.treeData = [];
}
}
}).catch(err => {
console.log(err);
});
},
// sy 商品自定义页面
getGoodsPage() {
this.axios.get(`${this.baseUrl}/api-plug/list-mall-page?requestProject=gic-web`)
.then(res => {
if (res.data.errorCode === 0) {
const data = res.data.result;
if (data && data.length) {
// definePage 自定义页面
this.threeLevelOptions = data.map(val => ({
...val,
label: val.pageName,
value: val.pageId
}));
} else {
this.threeLevelOptions = [];
}
}
}).catch(err => {
console.log(err);
});
},
// set threelevel visible
setThreeVisible(type,selectTwoItem) {
var that = this
......@@ -1046,7 +1117,16 @@ export default {
// threeSingleValueChange
threeSingleValueChange(e) {
// 是那个类型的
// console.log(this.threeLevelOptions);
if (this.linkId == 16) {
this.pageId = e;
let item = '';
this.threeLevelOptions.forEach(function(ele,index){
if (e == ele.pageId) {
item = ele;
}
});
this.pageName = item.pageName;
}
this.giftType = e;
if (this.giftType == 'coup') {
this.visibleType = 8;
......@@ -1207,7 +1287,7 @@ export default {
parentId: parentId,
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category',qs.stringify(para))
that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category', qs.stringify(para))
.then((res) => {
var resData = res.data
if (resData.errorCode == 0) {
......@@ -1516,7 +1596,6 @@ export default {
that.transData();
return;
}
// 确定是会员功能 然后看是那个类型的
if (this.linkId == 27) {
if (this.visibleType == 8) {
......@@ -1556,6 +1635,29 @@ export default {
}
}
if (this.linkId == 16) {
if ( this.goodType == 10) {
// 商品分类链接
this.selectLinkObj.name = '商品分类链接/' + this.tagName;
this.selectLinkObj.id = this.linkId;
this.selectLinkObj.params = {
mallProTagId: this.cardUrl,
name: this.tagName
};
this.transData();
return;
} else if (this.goodType == 11) {
this.selectLinkObj.name = '商城自定义页面/' + this.pageName;
this.selectLinkObj.id = this.linkId;
this.selectLinkObj.params = {
pageId: this.pageId,
name: this.pageName
};
this.transData();
return;
}
}
// 如果门店签到
console.log("门店签到:",that.twoLevelSelectValue)
......@@ -1586,6 +1688,12 @@ export default {
},
getMallId(item) {
console.log(item);
this.tagName = item.tagName;
this.cardUrl = item.mallProTagId;
},
checkTwoLevel(v) {
var that = this
// console.log(that.threeLevelValue)
......@@ -1937,13 +2045,15 @@ export default {
this.repProjectName = this.projectName || 'gic-web';
// 获取 showType
this.linkShowType = this.showType || 0;
this.pageName = '';
this.getLinksList(0,1)
},
components: {
Treeselect,
CardList,
GiftList
GiftList,
GoodsTree
}
}
</script>
......
linktoolspage.vue
<template>
<!-- 链接小工具 -->
<div class="link-tools-contain">
<el-dialog :class="activeName == 'first'? 'min-1026':'min-720'"
title="链接小工具"
:close-on-click-modal="false"
:visible.sync="mylinkToolsVisible"
:modal-append-to-body="false">
<!-- 链接类型 -->
......@@ -36,6 +38,9 @@
:value="item.value">
</el-option>
</el-select>
<goods-tree v-if="goodsTreeVisible" @pass-mall="getMallId" :tree-data="treeData"></goods-tree>
<!-- 商品分类链接 -->
<treeselect
v-if="threeLevelTreeVisible"
......@@ -371,6 +376,7 @@
import Treeselect from '@riophae/vue-treeselect';
import CardList from './card-list';
import GiftList from './gift-list';
import GoodsTree from './goods-tree';
// import axios from 'axios'
import qs from 'qs';
......@@ -380,6 +386,8 @@ export default {
props: ['linkToolsVisible','showType','projectName'],
data () {
return {
treeData: [],
goodsTreeVisible: false,
// 项目名
cardLimit: 1,
disabledList:[],
......@@ -684,6 +692,7 @@ export default {
that.twoLevelSelectValue = '';
that.threeLevelSelectValue = '';
this.goodType = '';
// 如果是 h5,二级,三级隐藏,
var type = selectOneItem.type == 5 ? true:false;
......@@ -747,6 +756,22 @@ export default {
// twoLevelValueChange (二级选择,保存选择类型)
twoLevelValueChange(e) {
if (e == 'product_category_link') { // 商品链接
this.goodType = 10;
this.threeLevelVisible = true;
this.threeLeveloneVisible = false;
this.goodsTreeVisible = true;
} else if (e == 'mall_customize_page') { // 自定义页面
this.goodType = 11;
this.threeLevelVisible = true;
this.threeLeveloneVisible = true;
this.goodsTreeVisible = false;
} else {
this.threeLevelVisible = true;
this.threeLeveloneVisible = true;
this.goodsTreeVisible = false;
}
var that = this
this.visibleType = null;
// 清空已经选择
......@@ -795,6 +820,9 @@ export default {
that.getGoodsCategory();// 获取商品品类
that.getGoodsClassify(); // 获取商品分类
// this.getGoodsType(); // 商品分类链接
// this.getGoodsPage(); // 商品自定义页面
that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = true; // 商品链接列表部分显示
return false;
......@@ -806,7 +834,13 @@ export default {
that.selectLinkObj.url = ele.content;
}
})
}else {
} else if (this.goodType == 10) {
// 商品分类链接
this.getGoodsLink();
} else if (this.goodType == 11) {
// 商品自定义页面
this.getGoodsPage();
} else {
// 判断三级中下拉/下拉树形/搜索下拉
that.goodsLinksVisible = false; // 商品列表隐藏
that.threeLevelVisible = true; // 三级部分显示
......@@ -815,7 +849,7 @@ export default {
that.threeLevelSelectValue = '';
var twoType = selectTwoItem.type;
// 判断三级显示的下拉组件
that.setThreeVisible(twoType,selectTwoItem)
that.setThreeVisible(twoType, selectTwoItem)
// 如果是门店,直接返回,需要输入后搜索出现下拉列表
......@@ -833,6 +867,44 @@ export default {
}
},
// sy 商品分类链接
getGoodsLink() {
this.axios.get(`${this.baseUrl}/api-plug/list-mall-product-tag?requestProject=gic-web`)
.then(res => {
if (res.data.errorCode === 0) {
const data = res.data.result;
if (data && data.length) {
this.treeData = data;
} else {
this.treeData = [];
}
}
}).catch(err => {
console.log(err);
});
},
// sy 商品自定义页面
getGoodsPage() {
this.axios.get(`${this.baseUrl}/api-plug/list-mall-page?requestProject=gic-web`)
.then(res => {
if (res.data.errorCode === 0) {
const data = res.data.result;
if (data && data.length) {
// definePage 自定义页面
this.threeLevelOptions = data.map(val => ({
...val,
label: val.pageName,
value: val.pageId
}));
} else {
this.threeLevelOptions = [];
}
}
}).catch(err => {
console.log(err);
});
},
// set threelevel visible
setThreeVisible(type,selectTwoItem) {
var that = this
......@@ -1015,7 +1087,16 @@ export default {
// threeSingleValueChange
threeSingleValueChange(e) {
// 是那个类型的
// console.log(this.threeLevelOptions);
if (this.linkId == 16) {
this.pageId = e;
let item = '';
this.threeLevelOptions.forEach(function(ele,index){
if (e == ele.pageId) {
item = ele;
}
});
this.pageName = item.pageName;
}
this.giftType = e;
if (this.giftType == 'coup') {
this.visibleType = 8;
......@@ -1176,7 +1257,7 @@ export default {
parentId: parentId,
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category',qs.stringify(para))
that.axios.post(that.baseUrl+'/api-mall/list_mall_goods_category', qs.stringify(para))
.then((res) => {
var resData = res.data
if (resData.errorCode == 0) {
......@@ -1485,7 +1566,6 @@ export default {
that.transData();
return;
}
// 确定是会员功能 然后看是那个类型的
if (this.linkId == 27) {
if (this.visibleType == 8) {
......@@ -1525,6 +1605,29 @@ export default {
}
}
if (this.linkId == 16) {
if ( this.goodType == 10) {
// 商品分类链接
this.selectLinkObj.name = '商品分类链接/' + this.tagName;
this.selectLinkObj.id = this.linkId;
this.selectLinkObj.params = {
mallProTagId: this.cardUrl,
name: this.tagName
};
this.transData();
return;
} else if (this.goodType == 11) {
this.selectLinkObj.name = '商城自定义页面/' + this.pageName;
this.selectLinkObj.id = this.linkId;
this.selectLinkObj.params = {
pageId: this.pageId,
name: this.pageName
};
this.transData();
return;
}
}
// 如果门店签到
console.log("门店签到:",that.twoLevelSelectValue)
......@@ -1555,6 +1658,12 @@ export default {
},
getMallId(item) {
console.log(item);
this.tagName = item.tagName;
this.cardUrl = item.mallProTagId;
},
checkTwoLevel(v) {
var that = this
// console.log(that.threeLevelValue)
......@@ -1906,13 +2015,15 @@ export default {
this.repProjectName = this.projectName || 'gic-web';
// 获取 showType
this.linkShowType = this.showType || 0;
this.pageName = '';
this.getLinksList(0,1)
},
components: {
Treeselect,
CardList,
GiftList
GiftList,
GoodsTree
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment