Skip to content

C
chinafrica
提交 3a4487c3 authored 作者: 潘鹏's avatar 潘鹏
浏览文件
操作

帖子模块添加编辑标签和商品功能

上级 96ffc33a
隐藏空白字符变更
内嵌 并排
正在显示 包含 56 行增加 和 23 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/post.html
浏览文件 @ 3a4487c3
...@@ -76,7 +76,10 @@ ...@@ -76,7 +76,10 @@
.bottom-btn-group { .bottom-btn-group {
float: right; float: right;
} }
.product-container > ul{
display: flex;
flex-wrap: wrap;
}
.product-container > ul li { .product-container > ul li {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
...@@ -89,7 +92,19 @@ ...@@ -89,7 +92,19 @@
.product-container > ul > .add-product { .product-container > ul > .add-product {
width: 120px; width: 120px;
height: 120px; height: 120px;
border: 1px solid #dddee1 border: 1px solid #dddee1;
margin-right: 10px;
position: relative;
}
.product-container > ul > .add-product .modal-close{
position: absolute;
right:5px;
top:5px;
}
.product-container > ul > .add-product>img{
width:100%;
height:100%;
object-fit: cover;
} }
.productList-style-start { .productList-style-start {
...@@ -110,6 +125,10 @@ ...@@ -110,6 +125,10 @@
height: 380px; height: 380px;
margin: 15px 0; margin: 15px 0;
} }
.Tag-active{
background: #0d8ddb;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
...@@ -198,6 +217,12 @@ ...@@ -198,6 +217,12 @@
<Form-item label="商品图片"> <Form-item label="商品图片">
<div class="product-container"> <div class="product-container">
<ul> <ul>
<li class="add-product" v-for="(item,index) in postProductArr" :key="index">
<i @click="deleteProduct(index)">
<Icon type="close" class="modal-close"></Icon>
</i>
<img :src="item.itemImg">
</li>
<li class="add-product" @click="isShownProductMadal = true"> <li class="add-product" @click="isShownProductMadal = true">
+添加产品 +添加产品
</li> </li>
...@@ -205,7 +230,6 @@ ...@@ -205,7 +230,6 @@
<p>限制最大可添加6个规格<br/> <p>限制最大可添加6个规格<br/>
上传图片的最佳尺寸：720像素*720像素，其他尺寸会影响页效果，格式png，jpeg，jpg，gif。大小不超过2M，商品图片一共可以上传6张，默认第一张为主图封面 上传图片的最佳尺寸：720像素*720像素，其他尺寸会影响页效果，格式png，jpeg，jpg，gif。大小不超过2M，商品图片一共可以上传6张，默认第一张为主图封面
</p> </p>
<div class="modal-wrapper" v-show="isShownProductMadal"> <div class="modal-wrapper" v-show="isShownProductMadal">
<div class="modal-bg"></div> <div class="modal-bg"></div>
<div class="modal-container"> <div class="modal-container">
...@@ -262,7 +286,7 @@ ...@@ -262,7 +286,7 @@
<div class="bottom-btn-group"> <div class="bottom-btn-group">
<i-button type="success" @click="isShownProductMadal = false">确认</i-button> <i-button type="success" @click="selectProduct">确认</i-button>
<i-button type="warning" @click="isShownProductMadal = false">取消</i-button> <i-button type="warning" @click="isShownProductMadal = false">取消</i-button>
</div> </div>
</div> </div>
...@@ -271,7 +295,7 @@ ...@@ -271,7 +295,7 @@
</Form-item> </Form-item>
<Form-item label="标签"> <Form-item label="标签">
<ul class="tag-wrapper"> <ul class="tag-wrapper">
<li>#af</li> <li v-for="(item,index) in tagList" :key="index" v-show="item.isSelected">#{{item.label}}</li>
<li class="add-tag-btn" @click="isShownTagMadal = true">+添加标签</li> <li class="add-tag-btn" @click="isShownTagMadal = true">+添加标签</li>
</ul> </ul>
<div class="modal-wrapper" v-show="isShownTagMadal"> <div class="modal-wrapper" v-show="isShownTagMadal">
...@@ -288,11 +312,10 @@ ...@@ -288,11 +312,10 @@
<ul class="tag-wrapper tag-search-result" style="margin-top:10px;"> <ul class="tag-wrapper tag-search-result" style="margin-top:10px;">
<li v-for="(el,i) in tagList" :value="el.value" :key="el.value" @click="chooseTags(el,i)" <li v-for="(el,i) in tagList" :value="el.value" :key="el.value" @click="chooseTags(el,i)"
class="label label-primary" :class="el.isSelected?'Tag-active':null"
> >
<p>#{{el.label}}</p> <!-- label-primary-->
<p v-if="el.isSelected" style="background: #c9302c">#{{el.label}}</p> <p >#{{el.label}}</p>
</li> </li>
</ul> </ul>
<div class="bottom-btn-group"> <div class="bottom-btn-group">
......
platform-admin/src/main/webapp/js/sys/post.js
浏览文件 @ 3a4487c3
...@@ -98,14 +98,29 @@ let vm = new Vue({ ...@@ -98,14 +98,29 @@ let vm = new Vue({
} }
], ],
commoditycategoryListsActive3: null, commoditycategoryListsActive3: null,
postProductArr:[],
}, },
methods: { methods: {
deleteProduct(index){
this.$delete(this.postProductArr,index);
},
selectProduct(){
if(this.postProductArr.length<9){
let reg = /\"(.*?)\"/g;
let id = getSelectedRow("#searchjqGrid");
let rowData = jQuery("#searchjqGrid").jqGrid("getRowData",id);
this.postProductArr.push({
itemImg:reg.exec(rowData.itemImg)[1],
itemId:rowData.itemId
})
this.isShownProductMadal = false;
}else{
alert('超出限制');
}
},
chooseTags(tag, index) { chooseTags(tag, index) {
this.tagList[index].isSelected = !this.tagList[index].isSelected; this.tagList[index].isSelected = !this.tagList[index].isSelected;
console.log(tag.isSelected+':'+index)
if (this.tagList[index].isSelected) {
tag.isSelected = true;
}
}, },
searchTags() { searchTags() {
$.get('../hashtag/getTagsByName?name=' + this.tagSearchValue, res => { $.get('../hashtag/getTagsByName?name=' + this.tagSearchValue, res => {
...@@ -142,23 +157,17 @@ let vm = new Vue({ ...@@ -142,23 +157,17 @@ let vm = new Vue({
{label: '商品名称', name: 'itemName', index: 'item_name', width: 160}, {label: '商品名称', name: 'itemName', index: 'item_name', width: 160},
/* {label: '商品标题', name: 'itemBrief', index: 'item_brief', width: 120},*/ /* {label: '商品标题', name: 'itemBrief', index: 'item_brief', width: 120},*/
/*{label: '商品链接', name: 'itemUrl', index: 'item_url', width: 80,formatter:linkFormat},*/ /*{label: '商品链接', name: 'itemUrl', index: 'item_url', width: 80,formatter:linkFormat},*/
{label: '商品原价', name: 'itemPrice', index: 'item_price', width: 65}, // {label: '商品原价', name: 'itemPrice', index: 'item_price', width: 65},
{label: '商品现价', name: 'discountPrice', index: 'discount_price', width: 55}, {label: '商品现价', name: 'discountPrice', index: 'discount_price', width: 55},
{label: '库存', name: 'itemCount', index: 'item_count', width: 55}, {label: '库存', name: 'itemCount', index: 'item_count', width: 55},
{label: '点击量', name: 'itemNum', index: 'item_num', width: 55}, // {label: '点击量', name: 'itemNum', index: 'item_num', width: 55},
/*{label: '所属平台', name: 'platformCode', index: 'platform_code', width: 80}, /*{label: '所属平台', name: 'platformCode', index: 'platform_code', width: 80},
{label: '平台名', name: 'platformName', index: 'platform_name', width: 80},*/ {label: '平台名', name: 'platformName', index: 'platform_name', width: 80},*/
{label: '供应商', name: 'supplier', index: 'supplier', width: 80}, {label: '供应商', name: 'supplier', index: 'supplier', width: 80},
{label: '商品一级分类', name: 'goodtype', index: 'goodtype', width: 80}, {label: '商品一级分类', name: 'goodtype', index: 'goodtype', width: 80},
{label: '商品二级分类', name: 'title', index: 'title', width: 80}, {label: '商品二级分类', name: 'title', index: 'title', width: 80},
{label: '商品品名', name: 'dname', index: 'itemDescritionId', width: 120}, {label: '商品品名', name: 'dname', index: 'itemDescritionId', width: 120},
{ {label: '状态', name: 'enableFlag', index: 'enable_flag', width: 120, formatter: itemStatusFormat},
label: '状态',
name: 'enableFlag',
index: 'enable_flag',
width: 120,
formatter: itemStatusFormat
},
{label: '创建日期', name: 'createTime', index: 'create_time', width: 160} {label: '创建日期', name: 'createTime', index: 'create_time', width: 160}
], ],
multiselect: true, multiselect: true,
...@@ -471,7 +480,8 @@ let vm = new Vue({ ...@@ -471,7 +480,8 @@ let vm = new Vue({
console.log('labelName', item.name) console.log('labelName', item.name)
this.tagList.push({ this.tagList.push({
label: item.name, label: item.name,
value: item.id value: item.id,
isSelected :false,
}); });
}) })
}) })
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论