<template>
|
<GlobalAlertWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
|
<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="info">
|
<el-input v-model="form.info" placeholder="请输入优惠券说明" :maxlength="30" v-trim/>
|
</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">减</div>
|
<el-input
|
v-model="form.price"
|
placeholder="请输入"
|
@input="inputAction(form, 'price')"
|
>
|
<template slot="append">元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="发放总量" prop="num">
|
<div class="num-style">
|
<el-input-number step-strictly v-model="form.num" :controls="false" :min="1" :max="99999" placeholder="请输入发放总量(1~99999)" v-trim></el-input-number>
|
</div>
|
</el-form-item>
|
<el-form-item v-if="form.type==1" label="兑换条件" prop="integral">
|
<el-input-number step-strictly v-model="form.integral" :controls="false" :min="1" :max="99999" placeholder="请输入" v-trim/> 咖豆兑换一张优惠券
|
</el-form-item>
|
<el-form-item label="可领取时间" prop="getDate">
|
<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">
|
<!-- <el-input v-model="form.validDays" placeholder="请输入领取后有效天数" v-trim/> -->
|
<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 v-if="form.type==0" label="关联店铺" prop="shopId">
|
<el-select
|
v-model="form.shopId"
|
placeholder="请输入店铺名称，再选择"
|
filterable
|
remote
|
reserve-keyword
|
:remote-method="remoteMethod"
|
:loading="searchLoading"
|
|
>
|
<el-option
|
v-for="item in shops"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</GlobalAlertWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
|
import { fetchList as shopList } from '@/api/business/shop'
|
export default {
|
name: 'OperaCouponWindow',
|
extends: BaseOpera,
|
components: { GlobalAlertWindow },
|
data () {
|
let couponRules = (rule, value, callback) => {
|
if (!this.form.limitPrice) {
|
callback(new Error('请输入满额'))
|
} else if (!this.form.price) {
|
callback(new Error('请输入优惠金额'))
|
} else {
|
callback()
|
}
|
}
|
let getDateRules = (rule, value, callback) => {
|
if (!this.form.startDate) {
|
callback(new Error('请选择开始时间'))
|
} else if (!this.form.endDate) {
|
callback(new Error('请输入结束时间'))
|
} else {
|
callback()
|
}
|
}
|
let numRule = (rule, value, callBack) => {
|
if (value < 0) {
|
callBack(new Error())
|
} else {
|
callBack()
|
}
|
}
|
return {
|
searchLoading: false,
|
getDate: [],
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
shopId: '',
|
type: '',
|
limitPrice: '',
|
price: '',
|
startDate: '',
|
endDate: '',
|
validDays: '',
|
getMethod: '',
|
integral: '',
|
status: '',
|
num: '',
|
info: ''
|
},
|
shops: [],
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '请输入优惠券名称', tigger: 'blur' }
|
],
|
couponRule: [
|
{ required: true, validator: couponRules, tigger: 'blur'}
|
],
|
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: {
|
open (title, target, type) {
|
this.title = title
|
this.visible = true
|
this.form.type = type
|
this.getDate = []
|
this.form.startDate = ''
|
this.form.endDate = ''
|
// 新建
|
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]
|
})
|
},
|
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
|
let 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>
|
