提交 120d40a3 authored 作者: 潘鹏's avatar 潘鹏

添加细粒度价格操作功能

上级 81f0dfe3
...@@ -175,6 +175,11 @@ ...@@ -175,6 +175,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.pp-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.pp-flex-start { .pp-flex-start {
display: flex; display: flex;
...@@ -322,6 +327,7 @@ ...@@ -322,6 +327,7 @@
background: white; background: white;
border-radius: 4px; border-radius: 4px;
padding: 20px; padding: 20px;
overflow: auto;
} }
.attribute-img-wrapper-close { .attribute-img-wrapper-close {
...@@ -414,6 +420,12 @@ ...@@ -414,6 +420,12 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.confirm-btn-price{
padding:20px;
}
.confirm-btn-price>:first-child{
margin-right: 10px;
}
.flot-button { .flot-button {
top: 30px; top: 30px;
...@@ -801,7 +813,8 @@ ...@@ -801,7 +813,8 @@
<div class="attribute-img-wrapper"> <div class="attribute-img-wrapper">
<h2 class="text-center">批量操作</h2> <h2 class="text-center">批量操作</h2>
<i class="attribute-img-wrapper-close" @click.stop="showBatch=false">x</i> <i class="attribute-img-wrapper-close" @click.stop="showBatch=false">x</i>
<Tabs active-key="key1">
<Tab-pane label="图片操作" key="key1">
<div> <div>
<i-button <i-button
shape="circle" shape="circle"
...@@ -860,9 +873,40 @@ ...@@ -860,9 +873,40 @@
<i-input type="number" ref="count" @on-change="changeBatch($event,'count')" <i-input type="number" ref="count" @on-change="changeBatch($event,'count')"
placeholder="属性库存"/> placeholder="属性库存"/>
</div> </div>
<div style="height: 140px"></div>
<div class="confirm-btn"> <div class="confirm-btn">
<i-button type="primary" @click="saveBatchData()">保存</i-button> <i-button type="primary" @click="saveBatchData()">保存</i-button>
</div> </div>
</Tab-pane>
<Tab-pane label="价格操作" key="key2">
<div>
<div v-for="(el,i) in handleProductAttr_Batch" :key="i">
<h3 style="margin:20px 0;">{{el.categoryName}}</h3>
<div
class="attribute-sku-tag"
v-for="(option,index) in el.categoryDescArr" :key="index"
@click="handleClickProductAttr_Batch(option,index,i)"
:class="option.isSelected?'attribute-sku-tag-active':null"
>{{option.name}}
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性价格</h3>
<i-input ref="amount" type="number" @on-change="changeBatch($event,'amount')"
placeholder="属性价格"/>
</div>
<div>
<h3 style="margin:20px 0;">属性库存</h3>
<i-input ref="count" type="number" @on-change="changeBatch($event,'count')"
placeholder="属性库存"/>
</div>
<div class="pp-flex-center confirm-btn-price">
<i-button type="primary" @click="saveBatchDataPrice('use')">应用</i-button>
<i-button type="primary" @click="saveBatchDataPrice('save')">保存</i-button>
</div>
</div>
</Tab-pane>
</Tabs>
</div> </div>
</div> </div>
<br/> <br/>
......
...@@ -98,8 +98,56 @@ let vm = new Vue({ ...@@ -98,8 +98,56 @@ let vm = new Vue({
show_paste_btn:false,// 粘贴按钮 show_paste_btn:false,// 粘贴按钮
paste_modal:false, paste_modal:false,
showQuitHint:false, showQuitHint:false,
// 细粒度价格控制,
handleProductAttr_Batch:[],
}, },
methods: { methods: {
//保存批量操作价格的数据
saveBatchDataPrice(e) {
if(this.batchAmount&&this.batchCount){
if(e === 'use'){
let arr = [];
this.handleProductAttr_Batch.map( item => {
item.categoryDescArr.map( _item => {
_item.isSelected?arr.push(_item.name):void(0);
})
})
let str = arr.join('/');
this.prevItem.map( item => {
if(item.skuDesc === str){
item.skuCount = this.batchCount;
item.skuPrice = this.batchAmount;
this.$forceUpdate();
this.$Message.info('应用成功');
}
})
}else{
let arr = [];
this.handleProductAttr_Batch.map( item => {
item.categoryDescArr.map( _item => {
_item.isSelected?arr.push(_item.name):void(0);
})
})
let str = arr.join('/');
this.prevItem.map( item => {
if(item.skuDesc === str){
item.skuCount = this.batchCount;
item.skuPrice = this.batchAmount;
this.$forceUpdate();
}
})
this.showBatch = false;
}
}else{
alert('请先设置价格和库存');
}
},
handleClickProductAttr_Batch(e,index,parent_index){
this.handleProductAttr_Batch[parent_index].categoryDescArr.map( item => item.isSelected = false)
this.handleProductAttr_Batch[parent_index].categoryDescArr[index].isSelected = true;
this.$forceUpdate();
},
//预览 //预览
preview(e,to) { preview(e,to) {
if(to === 'pc'){ if(to === 'pc'){
...@@ -174,13 +222,23 @@ let vm = new Vue({ ...@@ -174,13 +222,23 @@ let vm = new Vue({
count: null, count: null,
skuImg: null skuImg: null
})); }));
// this.attrItem.map( item => item.categoryDesc.split(',').map( _item => this.allAttributes.push({ this.handleProductAttr_Batch = [];
// text:_item, this.attrItem.forEach( item => {
// isSelected:false, this.handleProductAttr_Batch.push({
// amount:null, categoryDesc : item.categoryDesc,
// count:null, categoryName : item.categoryName
// skuImg:null });
// })) ); })
this.handleProductAttr_Batch.forEach( item => {
item.categoryDesc = item.categoryDesc.split(',');
item.categoryDescArr = [];
item.categoryDesc.forEach( _item => {
item.categoryDescArr.push({
name:_item,
isSelected: false
})
})
})
}, },
//切换批量选择按钮 //切换批量选择按钮
changeSelectBtnArr(item, index) { changeSelectBtnArr(item, index) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论