Skip to content

M
memberTag-web
Commit e4c64c59 by member
Options

卡券选择

parent d3fcaef8
Showing with 137 additions and 87 deletions
src/components/card/card.vue
<template>
<div class="attention-textAndImg-wrap">
<span class="label-name">已选卡券：</span>
<div class="card-container line-nowrap">
<el-tag
v-for="tag in middleSelection"
:key="tag.coupCardId"
class="el-tag--small"
closable
@close="handleCloseTag(tag)">
{{ tag.cardName }}
</el-tag>
<el-popover
placement="top"
title="已选中的卡券"
width="400"
trigger="hover">
<el-tag
v-for="tag in middleSelection"
:key="tag.coupCardId"
class="el-tag--small el-tag-popover"
closable
@close="handleCloseTag(tag)">
{{ tag.cardName }}
</el-tag>
<span class="card-count-box" slot="reference">
共 {{ middleSelection.length }} 项
</span>
</el-popover>
</div>
<!-- <el-dialog title="选择卡券" :visible.sync="dialogCard" width="820px" :before-close="handleCardClose"> -->
<div class="text-img-search clearfix">
<div class="fl">
......@@ -13,14 +43,23 @@
</div>
<div class="fr">
<!-- <el-button type="primary" @click="add">新建卡券</el-button> -->
<el-button @click="refresh">刷新列表</el-button>
<!-- <el-button @click="refresh">刷新列表</el-button> -->
</div>
</div>
<div class="pic-list-box">
<!-- @selection-change="handleSelectionChange" -->
<el-table ref="multipleTable" :data="cardData" class="card-table" tooltip-effect="dark" style="width: 100%" @select="handleSelect" @select-all="handleSelectAll">
<el-table
ref="multipleTable"
:data="cardData"
@select="handleSelect"
class="card-table"
tooltip-effect="dark"
style="width: 100%"
@select-all="handleSelectAll"
cell-class-name="table-light-color">
<el-table-column
type="selection"
:selectable="selectable"
width="55">
</el-table-column>
<!-- <template slot-scope="scope"> -->
......@@ -48,12 +87,12 @@
</el-table>
<div class="pagination" v-if="total > 0">
<el-pagination @current-change="cardCurrentChange" :current-page="cardCurrentPage" :page-size="cardPageSize" layout="prev, pager, next" :total="total"> </el-pagination>
<el-pagination class="table-light-color" @current-change="cardCurrentChange" :current-page="cardCurrentPage" :page-size="cardPageSize" layout="prev, pager, next" :total="total"> </el-pagination>
</div>
</div>
<div class="dialog-footer">
<!-- <el-button @click="dialogCardcancel">关 闭</el-button> -->
<el-button type="primary" @click="dialogCardConfirm">确 定</el-button>
<!-- <el-button type="primary" @click="dialogCardConfirm">确 定</el-button> -->
</div>
<!-- </el-dialog> -->
</div>
......@@ -140,6 +179,8 @@ export default {
data() {
return {
// 选择的卡券
cardTags: [],
middleSelection: [], // 中间
multipleSelection: [], // 选中的卡券
repProjectName: 'gic-web', // 项目名
......@@ -164,10 +205,18 @@ export default {
};
},
methods: {
// 删除选择的卡券
handleCloseTag(tag) {
let index = this.middleSelection.findIndex(el => el.coupCardId == tag.coupCardId);
if (index > -1) {
this.middleSelection.splice(index, 1);
let row = this.middleSelection[index];
this.$refs.multipleTable.toggleRowSelection(row);
}
},
// 切换的卡券
handleSelect(select, row) {
// 如果select大于
console.log(row);
if (this.middleSelection.length == 0) {
this.middleSelection.push(row);
} else {
......@@ -179,7 +228,6 @@ export default {
this.middleSelection.splice(index, 1);
}
}
this.$emit('select-card', this.middleSelection);
},
handleSelectAll(val) {
// 如果是全选 就判断里面的元素是否在middleSelection
......@@ -191,8 +239,15 @@ export default {
this.middleSelection.push(el);
}
});
} else {
// 去掉
this.cardData.forEach(el => {
let ix = this.middleSelection.findIndex(item => item.coupCardId == el.coupCardId);
if (ix != -1) {
this.middleSelection.splice(ix, 1);
}
});
}
this.$emit('select-card', this.middleSelection);
},
add() {
window.open('/marketing/#/card/add');
......@@ -301,6 +356,20 @@ export default {
this.cardData = [];
this.total = 0;
}
// 判断有几个 this.middleSelection
// row 数组 表示要切换状态的卡券
this.$nextTick(_ => {
if (this.cardData.length) {
this.cardData.forEach(row => {
let ret = this.middleSelection.find(el => el.coupCardId == row.coupCardId);
if (ret) {
// 如果不存在
this.$refs.multipleTable.toggleRowSelection(row);
}
});
}
console.log(1);
});
} else {
this.$message.error({ duration: 1000, message: resData.message });
}
......@@ -394,19 +463,21 @@ export default {
.search-input {
width: 200px;
}
.attention-textAndImg-wrap /deep/ {
.attention-textAndImg-wrap {
.text-img-search {
padding: 10px;
font-size: 14px;
color: #292929;
padding-bottom: 22px;
display: block;
overflow: hidden;
background-color: #f7faff;
> span {
float: left;
margin-right: 10px;
}
/deep/.search-input {
.search-input {
width: 200px;
}
.search-btn {
......@@ -421,6 +492,8 @@ export default {
}
}
.pic-list-box {
padding: 10px;
background-color: #f7faff;
.list-img {
width: 80px;
height: 80px;
......@@ -451,10 +524,35 @@ export default {
text-align: right;
margin-top: 20px;
}
.pic-list-box /deep/ .el-table__row {
.pic-list-box .el-table__row {
cursor: pointer;
}
.attention-textAndImg-wrap /deep/ .el-dialog__body {
.attention-textAndImg-wrap .el-dialog__body {
padding: 10px 20px;
}
.label-name {
display: inline-block;
vertical-align: middle;
height: 36px;
line-height: 26px;
}
.card-container {
position: relative;
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
width: 80%;
height: 36px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #ccc;
.card-count-box {
position: absolute;
right: 0px;
padding: 0 5px;
height: 36px;
line-height: 36px;
background-color: #fff;
}
}
</style>
src/components/tag/tag-config-options.vue
......@@ -541,41 +541,10 @@
<!-- 会员标签嵌入卡券选择器 com023 -->
<!-- v-if="parent.templateCode == 'com023'" -->
<div v-if="parent.templateCode == 'com023'">
<span class="label-name">已选卡券：</span>
<div class="card-container line-nowrap">
<el-tag
v-for="tag in cardTags"
:key="tag.coupCardId"
class="el-tag--small"
closable
@close="handleCloseTag(tag)">
{{ tag.subName }}
</el-tag>
<el-popover
placement="top"
title="已选中的卡券"
width="400"
trigger="hover">
<el-tag
v-for="tag in cardTags"
:key="tag.coupCardId"
class="el-tag--small el-tag-popover"
closable
@close="handleCloseTag(tag)">
{{ tag.subName }}
</el-tag>
<span class="card-count-box" slot="reference">
共 {{ cardTags.length }} 项
</span>
</el-popover>
</div>
<vue-gic-card
:disabledList="disabledList"
:cardLimit="cardLimit"
:cardType="cardType"
@select-card="selectCard"
:type="1"> </vue-gic-card>
</div>
</div>
......@@ -612,8 +581,6 @@ export default {
data() {
return {
// 选择的卡券
cardTags: [],
// 卡券
disabledList: [],
cardLimit: [],
......@@ -865,13 +832,6 @@ export default {
},
methods: {
// 删除选择的卡券
handleCloseTag(tag) {
let index = this.cardTags.findIndex(el => el.coupCardId == tag.coupCardId);
if (index > -1) {
this.cardTags.splice(index, 1);
}
},
// 卡券
selectCard(val) {
this.cardTags = val;
......@@ -1517,30 +1477,6 @@ export default {
padding: 15px;
border-bottom: 1px solid rgba(220, 223, 230, 1);
}
.label-name {
display: inline-block;
vertical-align: middle;
height: 36px;
line-height: 26px;
}
.card-container {
position: relative;
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
width: 360px;
height: 36px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #ccc;
.card-count-box {
position: absolute;
right: 0px;
padding: 0 5px;
height: 36px;
line-height: 36px;
background-color: #fff;
}
}
</style>
src/view/memberGroup/edit-tag.vue
......@@ -35,17 +35,17 @@ export default {
tagData: Object
},
watch: {
tagData: {
immediate: true,
handler(newval) {
this.tagId = '';
this.$nextTick(_ => {
this.tagId = newval.tagId;
});
}
}
},
// watch: {
// tagData: {
// immediate: true,
// handler(newval) {
// this.tagId = '';
// this.$nextTick(_ => {
// this.tagId = newval.tagId;
// });
// }
// }
// },
data() {
return {
......
static/css/index.less
......@@ -56,4 +56,19 @@
.el-tag-popover {
margin-right: 5px;
margin-bottom: 5px;
}
.table-light-color {
background-color: #f7faff;
.btn-prev {
background-color: #f7faff;
}
.btn-next {
background-color: #f7faff;
}
button:disabled {
background-color: #f7faff;
}
li {
background-color: #f7faff;
}
}
\ No newline at end of file
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