<template>
|
<GlobalWindow
|
:title="title"
|
width="80%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
|
<p class="tip-header" >基本属性</p>
|
<el-form-item label="优惠券名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入优惠券名称" :maxlength="12" v-trim/>
|
</el-form-item>
|
<el-form-item label="类型" prop="couponType">
|
<el-radio-group v-model="form.couponType">
|
<el-radio :label="0" >满减券</el-radio>
|
<el-radio :label="1">折扣券</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="优惠规则" prop="couponRule" >
|
<div class="coupon-rule">
|
<div class="discrep">订单满</div>
|
<el-input v-model="form.limitPrice" placeholder="请输入" @input="inputAction(form, 'limitPrice')"
|
>
|
<template slot="append">元</template>
|
</el-input>
|
<div class="discrep" >{{form.couponType === 1?'，享':'，减'}}</div>
|
<el-input v-model="form.price" placeholder="请输入" @input="inputAction(form, 'price')" >
|
<template slot="append" >{{form.couponType ===1?'折':'元'}}</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="优惠券说明" prop="info">
|
<el-input type="textarea" v-model="form.info" placeholder="请输入优惠券说明" v-trim/>
|
</el-form-item>
|
<p class="tip-header" >使用限制</p>
|
<el-form-item label="有效期" prop="useType">
|
<el-radio-group v-model="form.useType">
|
<el-radio :label="0">固定时段</el-radio>
|
<el-radio :label="1">固定时长</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="使用时段" prop="getDate" v-if="form.useType===0">
|
<div class="date-style">
|
<el-date-picker
|
v-model="getDate"
|
type="datetimerange"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
@change="selectDate"
|
></el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item label="固定时长" prop="validDays" v-if="form.useType===1">
|
<div class="coupon-rule">
|
<div class="discrep">领劵后</div>
|
<el-input
|
v-model="form.validDays"
|
placeholder="请输入"
|
@input="inputAction(form, 'validDays')"
|
>
|
<template slot="append">天</template>
|
</el-input>
|
<div class="discrep">有效</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="适用对象" prop="applyType">
|
<el-radio-group v-model="form.applyType">
|
<el-radio :label="0">全场通用</el-radio>
|
<el-radio :label="1">按品类</el-radio>
|
<el-radio :label="2">指定商品</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="form.applyType===1" label="选择品类" prop="applyCateIdList" >
|
<el-select v-model="form.applyCateIdList" placeholder="请选择,支持多选" filterable multiple clearable >
|
<el-option v-for="item in categorys" :key="'optCate'+item.id" :label="item.name" :value="item.id"> </el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="form.applyType===2" label="选择商品" prop="applyIdList" style="display: flex">
|
<span style="font-size: 12px;color: #216EEE" @click="selectGoods">已指定【 {{applyDataList.length}} 】件商品</span>
|
<el-button style="margin-left:30px;display: inline-block;width: 80px;" type="primary" @click="selectGoods">去选择 </el-button>
|
</el-form-item>
|
<p class="tip-header" >发放规则</p>
|
<el-form-item label="发放总量" prop="num">
|
<div class="num-style">
|
<el-input-number v-model="form.num" :controls="false" :min="1" :max="99999" placeholder="请输入发放总量(1~99999)" v-trim></el-input-number>
|
</div>
|
</el-form-item>
|
</el-form>
|
<OperaCouponGoodsWindow ref="OperaCouponGoodsWindow" @success="doSelect"/>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { fetchList as shopList } from '@/api/business/shop'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { findAll as labelList } from '@/api/business/labels'
|
import { allList as goodsList} from '@/api/business/goods'
|
import OperaCouponGoodsWindow from '@/components/business/OperaCouponGoodsWindow'
|
export default {
|
name: 'OperaCouponWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow,OperaCouponGoodsWindow },
|
data () {
|
const couponRules = (rule, value, callback) => {
|
if (!this.form.limitPrice) {
|
callback(new Error('请输入满额'))
|
} else if (!this.form.price) {
|
callback(new Error('请完善优惠规则'))
|
} else {
|
callback()
|
}
|
}
|
const getDateRules = (rule, value, callback) => {
|
if (!this.form.startDate) {
|
callback(new Error('请选择开始时间'))
|
} else if (!this.form.endDate) {
|
callback(new Error('请输入结束时间'))
|
} else {
|
callback()
|
}
|
}
|
const numRule = (rule, value, callBack) => {
|
if (value < 0) {
|
callBack(new Error())
|
} else {
|
callBack()
|
}
|
}
|
return {
|
searchLoading: false,
|
getDate: [],
|
applyDataList:[],
|
showGoods:false,
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
couponType: 0,
|
applyType: 0,
|
useType: 0,
|
shopId: '',
|
applyIdList: [],
|
applyCateIdList: [],
|
type: 0,
|
limitPrice: '',
|
price: '',
|
startDate: '',
|
endDate: '',
|
applyIds: '',
|
validDays: '',
|
getMethod: '',
|
integral: '',
|
status: '',
|
num: '',
|
info: ''
|
},
|
shops: [],
|
categorys: [],
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '请输入优惠券名称', tigger: 'blur' }
|
],
|
couponRule: [
|
{ required: true, validator: couponRules, tigger: 'blur' }
|
],
|
useType: [
|
{ required: true, message: '请选择有效期方式' }
|
],
|
couponType: [
|
{ required: true, message: '请选择类型' }
|
],
|
applyType: [
|
{ required: true, message: '请选择适用对象类型' }
|
],
|
num: [
|
{ required: true, validator: numRule, message: '请输入发放总数', tigger: 'blur' }
|
],
|
/*integral: [
|
{ required: true, validator: numRule, message: '请输入兑换条件', tigger: 'blur' }
|
],*/
|
// validDays: [
|
// { required: true, message: '请输入可用时间', tigger: 'blur' }
|
// ],
|
// getDate: [
|
// { required: true, validator: getDateRules, tigger: 'change' }
|
// ],
|
// shopId: [
|
// { required: true, validator: numRule, message: '请选择关联店铺', tigger: 'change' }
|
// ]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/coupon',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
selectGoods(){
|
this.$refs.OperaCouponGoodsWindow.open('选择商品', this.applyDataList)
|
},
|
loadLabels(){
|
labelList({
|
type: 0 // 商品分类
|
}).then(res => {
|
this.categorys = res || []
|
})
|
},
|
loadSelectGoods(){
|
console.log(this.form.applyIdList)
|
if(!this.form.applyIdList || !this.form.applyIdList.length){
|
return
|
}
|
goodsList({
|
idList: this.form.applyIdList // 商品分类
|
}).then(res => {
|
this.applyDataList = res || []
|
})
|
},
|
doSelect(rows){
|
console.log(rows,this.applyDataList)
|
this.applyDataList =[]
|
this.form.applyIdList=[]
|
if(rows && rows.length){
|
rows.forEach(item => {
|
this.applyDataList.push(item)
|
this.form.applyIdList.push(item.id)
|
})
|
}
|
},
|
open (title, target, type) {
|
this.showGoods=false
|
this.title = title
|
this.visible = true
|
this.form.type = type
|
this.getDate = []
|
this.form.startDate = ''
|
this.form.endDate = ''
|
this.applyDataList=[]
|
this.form.applyIdList=[]
|
this.form.applyCateIdList=[]
|
this.loadLabels()
|
this.form.limitPrice=null
|
this.form.price=null
|
this.form.startDate=null
|
this.form.endDate=null
|
this.form.num=1
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
console.log(this.form)
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.getDate = [target.startDate, target.endDate]
|
if(this.form.applyType === 1){
|
this.form.applyCateIdList =[]
|
var ta = this.form.applyIds.split(',')
|
if(ta && ta.length){
|
ta.forEach(tt =>{
|
this.form.applyCateIdList.push(parseInt(tt))
|
})
|
}
|
}
|
if(this.form.applyType === 2){
|
this.form.applyIdList = this.form.applyIds.split(',')
|
this.loadSelectGoods()
|
}
|
})
|
},
|
selectDate (value) {
|
this.form.startDate = value[0]
|
this.form.endDate = value[1]
|
},
|
inputAction (item, key) {
|
if (item[key] < 0) {
|
item[key] = ''
|
} else {
|
item[key] = item[key].replace(/[^\d.]/g, '')
|
.replace(/\.{2,}/g, '.')
|
.replace('.', '$#$')
|
.replace(/\./g, '')
|
.replace('$#$', '.')
|
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
|
.replace(/^\./g, '')
|
}
|
},
|
remoteMethod (query) {
|
if (query !== '') {
|
this.searchLoading = true
|
const action = this.form.type == 2 ? activityList : shopList
|
action({
|
capacity: 999,
|
model: {
|
name: query
|
}
|
})
|
.then(res => {
|
this.shops = res.records
|
})
|
.finally(() => {
|
this.searchLoading = false
|
})
|
}
|
}
|
}
|
}
|
</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>
|
