组件效果图 --------> 手动输入
vue代码如下
<!-- -->
<template>
<el-dialog
title="发放优惠券"
:visible.sync="isShow"
class="send-coupon"
width="30%"
top="20vh"
@update:visible="(val) => $emit('update:visible', val)"
:close-on-press-escape="false"
>
<el-form :model="formInfo" ref="sendcoupon">
<el-form-item class="select-coupon" label="选择优惠券面额">
<el-select
multiple
v-model="formInfo.selectCouponArr"
placeholder="选择优惠券"
>
<el-option
v-for="(item, index) in details"
:key="index"
:label="item.label"
:value="item.index"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="select-user" label="选择发放人群">
<div class="group">
<el-checkbox v-model="formInfo.groupChecked">分组选择</el-checkbox>
<el-select
multiple
v-model="formInfo.activeGroup"
placeholder="请选择分组"
@change="activeGroupChange"
>
<el-option
v-for="item in usersGroup"
:key="item.id"
:value="item.id"
:label="`已选:${item.name}(${item.count}人)`"
></el-option>
</el-select>
</div>
<div class="more-user">
<el-checkbox v-model="formInfo.inputChecked">手动输入</el-checkbox>
<div class="add-nick">
<div class="nicks">
<template v-for="(nick, index) in nicks">
<div class="one-nick" :key="index" @click="delNick(index)">
{{ nick }}
<div class="close"></div>
</div>
</template>
</div>
<el-input
ref="pasteLinks"
type="textarea"
class="nick-area"
@change="addnick"
@keyup.native.enter="addnick"
:rows="{ minRows: 1, maxRows: 5 }"
v-model="nickEditing"
resize="none"
debounce="100"
></el-input>
</div>
</div>
</el-form-item>
<el-form-item class="send-notice">
<template slot="label">
发放短信通知
<bbt-icon
class="icon bbt-icon-bangzhu"
icon="bbt-icon-bangzhu"
size="12"
></bbt-icon>
</template>
<el-checkbox v-model="formInfo.groupChecked">
短信通知发放优惠券的会员,剩余
<span>{{ user.msgNum }}</span>
条短信。
</el-checkbox>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span style="margin-right: 18px">共发放 {{ nickTotal }} 个旺旺ID</span>
<el-button type="primary" @click="submit">发放</el-button>
<el-button @click="() => $emit('update:visible', false)">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'sendCoupon',
components: {},
props: {
visible: {
type: Boolean,
default: false
},
id: Number,
type: Number,
details: Array
},
data() {
return {
isShow: false,
usersGroup: [],
nickEditing: '',
nicks: [],
nickTotal: 0,
formInfo: {
groupChecked: true,
inputChecked: true,
selectCouponArr: [],
activeGroup: []
}
}
},
computed: {
...mapState(['user'])
},
watch: {
visible: {
handler(val) {
this.isShow = val
if (this.isShow) {
this.initForm()
this.initDetails()
}
},
immediate: true
}
},
created() {
this.getUsersGroup()
},
mounted() {},
methods: {
initForm() {
this.nicks = []
this.nickEditing = ''
this.nickTotal = 0
this.formInfo = {
groupChecked: true,
inputChecked: true,
selectCouponArr: [],
activeGroup: []
}
},
initDetails() {
this.details.forEach((item, index) => {
item.index = index
// 优惠层级一:面额10元,满100元使用
let num =
index == 0
? '一'
: index == 1
? '二'
: index == 2
? '三'
: index == 3
? '四'
: ''
// 22打折 23包邮 24代金
let valueTemp =
this.type == 22
? `面额${item.value}`
: this.type == 23
? `包邮`
: this.type == 24
? `面额${item.value}`
: ''
item.label = `优惠层级${num}:${valueTemp}元,${item.conditionStr}使用`
this.$set(item, 'checked', false)
})
},
//手动添加nick
addnick() {
if (this.nickEditing.slice(-1) == '\n') {
this.nickEditing = this.nickEditing.slice(0, -1)
}
this.nicks.push(this.nickEditing)
this.nickEditing = ''
this.activeGroupChange()
},
delNick(index) {
this.nicks.splice(index, 1)
this.activeGroupChange()
},
//计算发送人群总数
activeGroupChange() {
let num = 0
this.formInfo.activeGroup.forEach((item) => {
this.usersGroup.some((group) => {
if (group.id == item) {
num += group.count
return true
}
})
})
this.nickTotal = num + this.nicks.length
},
getUsersGroup() {
axios
.get('/common/userGroups.get')
.then((res) => {
if (res.data.status === 1) {
this.usersGroup = res.data.data.items
}
})
.catch((err) => {
console.log(err)
})
},
sendCoupon() {
/**
* TODO
* 等待接口
*/
this.$message.warning('等待接口')
},
submit() {
this.sendCoupon()
}
}
}
</script>
<style lang="scss">
.send-coupon {
.el-form {
.el-form-item {
margin-bottom: 8px;
}
.el-form-item__label {
width: 100%;
font-weight: 600 !important;
}
.el-form-item__content {
margin-left: 0px;
}
.select-coupon {
.el-select--medium {
width: 100%;
}
}
.select-user {
.el-checkbox__label {
color: #333333;
}
.group {
.el-checkbox {
width: 20%;
}
}
.el-select {
width: 80%;
}
.more-user {
margin-top: 18px;
.el-checkbox {
position: absolute;
width: 20%;
}
.add-nick {
width: 75%;
margin-left: 20%;
box-sizing: content-box;
padding: 2%;
display: inline-block;
border: 1px solid #dcdfe6;
.nicks {
width: 100%;
.one-nick {
display: inline-block;
color: #3d7fff;
background: #ebf3ff;
border-radius: 3px;
padding-left: 8px;
padding-right: 16px;
margin-right: 12px;
margin-bottom: 3px;
position: relative;
.close {
position: absolute;
display: inline-block;
width: 10px;
height: 10px;
top: 4px;
right: 4px;
}
.close::before,
.close::after {
position: absolute;
content: ' ';
background: #cccccc;
left: 4px;
width: 1px;
height: 10px;
}
.close::before {
transform: rotate(45deg);
}
.close::after {
transform: rotate(-45deg);
}
}
}
.nick-area {
textarea {
border: none;
}
}
}
}
}
.send-notice {
.el-form-item__content {
.el-checkbox__label {
color: #333333;
span {
color: #1677ff;
}
}
}
.bbt-icon-bangzhu {
color: #999;
}
}
}
}
</style>