<template>
|
<GlobalWindow
|
:title="title"
|
width="60%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<p class="tip-warn" style="margin: 30px;"><i class="el-icon-warning"></i>操作说明：定向发放不受发放总数限制，定向发放优惠券不计入优惠券已发放统计</p>
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
|
<el-form-item label="发放对象" prop="addType" >
|
<el-radio-group v-model="form.addType" @change="changeType">
|
<el-radio :label="0">指定会员</el-radio>
|
<el-radio :label="1">指定手机号</el-radio>
|
<el-radio :label="2">全部会员</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="form.addType===0" id="bbb">
|
<el-form-item label="选择用户" prop="addMemberIds" >
|
<el-select v-model="form.addMemberIds" placeholder="请输入会员昵称/手机号，再选择" clearable filterable remote reserve-keyword :remote-method="remoteMethod"
|
:loading="searchLoading"
|
style="width: 400px;"
|
>
|
<el-option
|
v-for="item in users"
|
:key="item.id"
|
:label="item.nickname+' '+(item.phone||'')"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div v-if="form.addType===1" id="aaaa">
|
<el-form-item label="手 机 号" prop="addMemberPhones" >
|
<el-input style="width: 400px;" type="textarea" v-model="form.addMemberPhones" placeholder="请输入手机号" v-trim/>
|
<p class="tip-warn" style="margin-bottom: 2px;"><i class="el-icon-warning"></i>提醒：多个手机号，请换行输入</p>
|
</el-form-item>
|
</div>
|
<el-form-item label="发放内容" prop="addCouponList" style="margin-top: 20px" >
|
<div style="border: 1px solid #f2f2f2">
|
<el-table style="width: 600px;" :data="form.addCouponList">
|
<el-table-column prop="name" label="优惠券" min-width="300px" align="center">
|
<template slot-scope="{row}" >
|
<el-select v-model="row.id" style="width: 200px;margin: 0px 20px" clearable filterable placeholder="请选择优惠券" >
|
<el-option v-for="item in couponList" :label="item.name" :value="item.id"> </el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="num" label="数量" min-width="200px" align="center">
|
<template slot-scope="{row}" >
|
<el-input style="width: 150px;margin: 0px 20px" type="number" v-model="row.num" placeholder="请输入数量" v-trim/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="100px" align="center">
|
<template slot-scope="scope" >
|
<el-button style="color: red;border: none;" @click="delCoupon( scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-button s type="primary" icon="el-icon-plus" @click="addCoupon()" style="height: 30px;margin: 10px;">添加</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { allList } from '@/api/business/coupon'
|
import { findAll as memberlist } from '@/api/business/member'
|
export default {
|
name: 'OperaCouponWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
const couponRules = (rule, value, callback) => {
|
if (!this.form.addCouponList || !this.form.addCouponList.length) {
|
callback(new Error('请选择优惠券信息'))
|
} else {
|
var r = true
|
this.form.addCouponList.forEach(item => {
|
if (!item.id || !item.num) {
|
r = false
|
}
|
})
|
if (!r) {
|
callback(new Error('请完善优惠券信息'))
|
} else {
|
callback()
|
}
|
}
|
}
|
return {
|
searchLoading: false,
|
couponList: [],
|
users: [],
|
// 表单数据
|
form: {
|
addType: 0,
|
addMemberIds: null,
|
addMemberPhones: null,
|
addCouponList: [{ id: null, num: null }]
|
},
|
shops: [],
|
categorys: [],
|
// 验证规则
|
rules: {
|
addType: [
|
{ required: true, message: '请选择发放对象' }
|
],
|
addMemberIds: [
|
{ required: true, message: '请选中人员信息' }
|
],
|
addMemberPhones: [
|
{ required: true, message: '请指定人员手机号' }
|
],
|
addCouponList: [
|
{ required: true, validator: couponRules, tigger: 'blur' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/memberCoupon',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
changeType(t){
|
this.$refs.form.validate()
|
},
|
remoteMethod (query) {
|
if (query !== '') {
|
this.searchLoading = true
|
memberlist({
|
capacity: 999,
|
model: {
|
nickname: query,
|
status: 0
|
}
|
})
|
.then(res => {
|
this.users = res
|
})
|
.finally(() => {
|
this.searchLoading = false
|
})
|
}
|
},
|
getCouponList () {
|
allList({ status: 0 })
|
.then(res => {
|
if (res) {
|
this.couponList = res || []
|
}
|
})
|
},
|
delCoupon (index) {
|
this.form.addCouponList.splice(index, 1)
|
},
|
addCoupon (type) {
|
this.form.addCouponList.push({ id: null, num: null })
|
},
|
open (title, target, type) {
|
this.title = title
|
this.visible = true
|
this.form.addMemberIds = null
|
this.form.addMemberPhones = null
|
this.form.addType = 0
|
this.form.addCouponList = [{ id: null, num: null }]
|
this.getCouponList()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/alertstyle.scss';
|
|
.coupon-rule {
|
display: flex;
|
.discrep {
|
padding: 0 10px;
|
}
|
::v-deep .el-input {
|
width: 160px;
|
}
|
}
|
.num-style {
|
::v-deep .el-input-number {
|
width: 60%;
|
}
|
}
|
.date-style {
|
::v-deep input {
|
text-align: center !important;
|
}
|
}
|
::v-deep .el-select {
|
width: 100%;
|
.el-input__inner {
|
width: 100%;
|
}
|
}
|
|
</style>
|
