Skip to content

M
marketing
Commit c57e1102 by 黑潮
Options

Merge branch 'feature/商品选择器' into master

parents ec2f6f30 4a29fd78
Showing with 82 additions and 23 deletions
index.html
......@@ -36,7 +36,7 @@
<script src="//web-1251519181.file.myqcloud.com/components/export-excel.2.0.16.js"></script><!-- 数据导出 -->
<script src="//web-1251519181.file.myqcloud.com/components/input.2.0.20.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/selector.1.2.21.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/selector.1.2.25.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/pagination.1.0.8.js"></script><!-- 分页器 -->
<script src="//web-1251519181.file.myqcloud.com/components/track.1.0.4.js"></script>
<script src="//web-1251519181.file.myqcloud.com/components/activity-select.1.0.2.1.js"></script><!-- 数据对话 -->
......
src/mixins/selector.js
......@@ -7,11 +7,20 @@
*/
// 商品选择器方法
const mapFilter = {
union: '或者',
intersect: '并且',
diff: '剔除'
};
export default {
data() {
return {
// ----线下适用商品开始----
xxSysp: {
filterLogicalOperator: [],
max: 5,
isExpand: false,
visible: false, // 适用商品选择器dialog
goodsEnable: false,
filterAbbrInfo: [], // 选择后回显的label数据
......@@ -25,13 +34,20 @@ export default {
},
methods: {
// ------线下适用商品开始-------
getXxSysFilterText(i) {
console.log(this.xxSysp.filterLogicalOperator);
return mapFilter[this.xxSysp.filterLogicalOperator[i] || 'union'];
},
// 清空线下适用商品 ，重置商品选择器
handleXxSyspReset() {
this.$refs.selector.conditions = this.$refs.selector.conditions.slice(0, 1);
this.xxSysp.isExpand = false;
this.$refs.selector.conditions[0].goodsList = [];
this.$refs.selector.complexData = [];
this.xxSysp.filterAbbrInfo = [];
this.xxSysp.conditionList = null;
this.xxSysp.goodsFilterId = null;
this.xxSysp.filterLogicalOperator = [];
},
// 编辑查看btn点击
handleXxSyspClick(visible = true) {
......@@ -49,20 +65,23 @@ export default {
},
// 商品选择器反显label
xxSyspLabel(filterAbbrInfo) {
console.log(filterAbbrInfo);
let _filterAbbrInfo = [];
// 设置显示label
filterAbbrInfo &&
filterAbbrInfo.forEach(y => {
_filterAbbrInfo = y.map(v => {
return {
optName: v.optName,
text: `${v.typeName}${v.belong}${v.childNames
.map(v => {
return `【${v}】`;
})
.join('')}`
};
});
_filterAbbrInfo.push(
y.map(v => {
return {
optName: v.optName,
text: `${v.typeName}${v.belong}${v.childNames
.map(v => {
return `【${v}】`;
})
.join('')}`
};
})
);
});
return _filterAbbrInfo;
},
......@@ -77,6 +96,7 @@ export default {
this.xxSysp.goodsFilterId = res.id; // 保存id
this.xxSysp.conditionList = res.conditionList; // 保存回显list
this.xxSysp.filterAbbrInfo = this.xxSyspLabel(res.filterAbbrInfo);
this.xxSysp.filterLogicalOperator = res.filterLogicalOperator || [];
this.handleXxSyspClick(false); // 强制展开
this.xxSysp.visible = false;
}
......
src/views/card/form.js
......@@ -631,6 +631,7 @@ export default {
this.xxSysp.conditionList = this.xxSysp.conditionList_copy = goodsSearchDetail.conditionList; // ref selector此时放在modal里并没有渲染，之后赋值
this.xxSysp.conditionList = goodsSearchDetail.conditionList; // ref selector此时放在modal里并没有渲染，之后赋值
this.xxSysp.conditionList_copy = deepClone(goodsSearchDetail.conditionList || {}); // 备份数据
this.xxSysp.filterLogicalOperator = goodsSearchDetail.filterLogicalOperator || [];
if (card.gicCouponType == 3 || card.gicCouponType == 4) {
const filterAbbrInfo = (goodsSearchDetail.filterAbbrInfo || []).map(el => {
return el.map((item, index) => {
......@@ -639,18 +640,15 @@ export default {
}
// intersect 或者，union 并且，diff 剔除
switch (item.optName) {
case 'intersect':
case 'union':
item.optName = '或者';
break;
case 'union':
case 'intersect':
item.optName = '并且';
break;
case 'diff':
item.optName = '剔除';
break;
default:
item.optName = null;
break;
}
return item;
});
......
src/views/card/form.vue
......@@ -111,13 +111,19 @@
</div>
<!-- 线下适用商品 -->
<div v-if="(form.cardType === 0 || form.cardType === 1) && form.cardApplyChannel.indexOf('offlineStore') !== -1 && xxSysp.goodsEnable">
<span class="inline-block w100 pr10 text-right">线下适用商品</span>
<span class="inline-block w100 pr10 text-right" style="vertical-align:top">线下适用商品</span>
<div class="sysp__content clearfix inline-block">
<div class="fl" v-if="xxSysp.filterAbbrInfo.length">
<template v-for="(item, idx) in xxSysp.filterAbbrInfo">
{{ item.optName }}
<span :key="idx" class="item">{{ item.text }}</span>
</template>
<div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
<div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【{{ getXxSysFilterText(idx - 1) }}】</div>
<template v-for="(el, i) in item">
<span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
{{ el.optName }}
<span class="item">{{ el.text }}</span>
</span>
</template>
</div>
<el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
</div>
<template v-if="gicCouponType != 3 && gicCouponType != 4">
<template v-if="xxSysp.goodsEnable && (((isEdit || isInfo) && xxSysp.filterAbbrInfo.length) || isAdd || isCopy)">
......@@ -356,7 +362,7 @@
</el-form>
<el-dialog title="适用商品" :visible.sync="xxSysp.visible" width="690px">
<vue-gic-goods-selector ref="selector" :projectName="requestProject"></vue-gic-goods-selector>
<vue-gic-goods-selector ref="selector" :projectName="requestProject" isCoupon></vue-gic-goods-selector>
<div slot="footer" class="dialog-footer">
<el-button @click="xxSysp.visible = false">{{ isEdit ? '关闭' : '取消' }}</el-button>
<el-button v-if="isAdd || isCopy" type="primary" @click="xxSyspConfirm">确定</el-button>
......@@ -381,4 +387,15 @@ export default cardForm;
line-height: 18px;
}
}
.complex-and {
color: #535353;
font-weight: bold;
line-height: 1;
}
.el-icon-arrow-down {
transition: transform 0.2s ease;
}
.is-expand {
transform: rotate(180deg);
}
</style>
src/views/ecm/form.js
......@@ -370,6 +370,7 @@ export default {
this.xxSysp.conditionList = goodsSearchDetail.conditionList; // ref selector此时放在modal里并没有渲染，之后赋值
this.xxSysp.conditionList_copy = deepClone(goodsSearchDetail.conditionList); // 备份数据
this.xxSysp.filterAbbrInfo = goodsSearchDetail.filterAbbrInfo || [];
this.xxSysp.filterLogicalOperator = goodsSearchDetail.filterLogicalOperator || [];
}
}
......
src/views/ecm/form.vue
......@@ -115,11 +115,23 @@
<div>
<span class="fz14 gray" v-show="!consumeChecked.good">所有消费商品</span>
<div class="sysp__content clearfix" v-show="consumeChecked.good">
<div class="fl" v-if="xxSysp.filterAbbrInfo.length">
<!-- <div class="fl" v-if="xxSysp.filterAbbrInfo.length">
<template v-for="(item, idx) in xxSysp.filterAbbrInfo">
{{ item.optName }}
<span :key="idx" class="item">{{ item.text }}</span>
</template>
</div> -->
<div class="fl" v-if="xxSysp.filterAbbrInfo.length">
<div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
<div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【{{ getXxSysFilterText(idx - 1) }}】</div>
<template v-for="(el, i) in item">
<span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
{{ el.optName }}
<span class="item">{{ el.text }}</span>
</span>
</template>
</div>
<el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
</div>
<el-button type="primary" @click="handleXxSyspClick" class="fl mt5" size="mini">{{ !isAdd ? '查看' : '编辑' }}</el-button>
<el-button v-show="xxSysp.filterAbbrInfo.length && isAdd" @click="handleXxSyspReset" class="fl mt5" size="mini">清空</el-button>
......@@ -512,4 +524,15 @@ export default ecmForm;
.el-form-item__label.align-left {
text-align: left;
}
.complex-and {
color: #535353;
font-weight: bold;
line-height: 1;
}
.el-icon-arrow-down {
transition: transform 0.2s ease;
}
.is-expand {
transform: rotate(180deg);
}
</style>
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