<template>
|
<el-row class="inner-bg-style interalRuleStyle">
|
<el-col :span="16">
|
<el-form size="mini" ref="form" :model="form" :rules="formRules" label-width="120px">
|
<el-form-item label="积分规则编码：" v-show="form.ruleId" prop="integralCode">
|
{{form.integralCode}}
|
</el-form-item>
|
<el-form-item label="积分名称：" prop="integralName">
|
<el-input placeholder="请输入积分名称" style="width:500px;" v-model="form.integralName"></el-input>
|
</el-form-item>
|
<el-form-item label="积分类型：" prop="integralType">
|
<el-radio-group v-model="form.integralType" :disabled="form.ruleId ? true : false" @change="changeIntegralType">
|
<el-radio v-for="item in rulesNameArr" :key="item.id" :label="item.id">{{item.name}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="有效开始日期：" prop="startTime">
|
<el-date-picker
|
v-model="form.startTime"
|
type="datetime"
|
placeholder="请选择有效开始日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:pickerOptions="{
|
disabledDate:time => form.endTime && time.getTime() >= new Date(form.endTime).getTime()+86400000,
|
selectableRange: limitTime(1,form.endTime,form.startTime)
|
}"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="有效结束日期：" prop="endTime">
|
<el-date-picker
|
v-model="form.endTime"
|
type="datetime"
|
placeholder="请选择有效开始日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="changeEndTime"
|
:pickerOptions="{
|
disabledDate:time => form.startTime && time.getTime() <= new Date(form.startTime).getTime()-86400000,
|
selectableRange: limitTime(2,form.startTime,form.endTime)
|
}"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="长期：">
|
<el-switch v-model="form.longTerm" @change="changeLongTerm"></el-switch>
|
</el-form-item>
|
<div v-if="form.integralType === '1'">
|
<!-- <el-form-item label="当日积分上限：" prop="maxIntegralOfDay">
|
<el-input-number :min="0" v-model="form.maxIntegralOfDay" @keydown.native="limiInputType"></el-input-number>
|
<span style="color: #f56c6c">
|
<i class="el-icon-warning"></i> 0表示无上限
|
</span>
|
</el-form-item>
|
<el-form-item label="当月积分上限：" prop="maxIntegralOfMonth">
|
<el-input-number :min="0" v-model="form.maxIntegralOfMonth" @keydown.native="limiInputType"></el-input-number>
|
<span style="color: #f56c6c">
|
<i class="el-icon-warning"></i> 0表示无上限
|
</span>
|
</el-form-item> -->
|
<el-form-item label="规则内容：" prop="content">
|
<span>订单交易成功，每实际消费 </span>
|
<el-input-number :min="1" v-model="form.orderAmount" @keydown.native="limiInputType"></el-input-number>
|
<span> 元，获取 </span>
|
<el-input-number :min="0" :max="999999999" v-model="form.giveIntegral" @keydown.native="limiInputType"></el-input-number>
|
<span> 积分</span>
|
</el-form-item>
|
</div>
|
<div v-if="form.integralType === '2' || form.integralType === '3' ">
|
<el-form-item label="规则内容：" prop="content">
|
<span>{{form.integralType === '2' ? '注册' : '评价'}}成功，获取 </span>
|
<el-input-number :min="0" v-model="form.giveIntegral" @keydown.native="limiInputType"></el-input-number>
|
<span> 积分</span>
|
</el-form-item>
|
</div>
|
<el-form-item
|
label="规则说明："
|
prop="integralDesc"
|
>
|
<el-input
|
type="textarea"
|
v-model="form.integralDesc"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
</template>
|
<script>
|
import { limiInputType } from '@/utils/limiInputType'
|
import memberIntegralApi from '@/api/member/memberIntegral'
|
|
export default {
|
data () {
|
// const inputNumberValid = (rule, value, callback) => {
|
// const reg = /^[0-9]*$/ // 只能输入正整数
|
// if (!value || !reg.test(value)) {
|
// callback(new Error('请输入大于0的整数'))
|
// } else {
|
// callback()
|
// }
|
// }
|
const contentValid = (rule, value, callback) => {
|
const reg = /^(?!0+$)(?!0*\.0*$)\d{1,9}(\.\d{1,2})?$/ // 最多输入两位小数
|
if (this.form.integralType === '1' && !this.form.orderAmount) {
|
callback(new Error('请输入实际消费金额'))
|
} else if (this.form.integralType === '1' && this.form.orderAmount > 999999999) {
|
callback(new Error('最大金额不能超过999999999元'))
|
} else if (this.form.integralType === '1' && !reg.test(this.form.orderAmount)) {
|
callback(new Error('消费金额最多输入两位小数'))
|
} else if (!this.form.giveIntegral) {
|
callback(new Error('请输入获取积分个数'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
form: {
|
longTerm: true,
|
endTime: '9999-12-31 23:59:59',
|
integralName: null
|
},
|
rulesNameArr: [
|
{
|
id: '1',
|
name: '消费送积分'
|
}
|
// {
|
// id: '2',
|
// name: '注册送积分'
|
// },
|
// {
|
// id: '3',
|
// name: '评价送积分'
|
// }
|
],
|
formRules: {
|
// integralCode: [{ required: true, message: '请输入积分规则编码' }],
|
integralType: [{ required: true, message: '请选择积分类型' }],
|
startTime: [{ required: true, message: '请选择有效开始日期' }],
|
endTime: [{ required: true, message: '请选择有效结束日期' }],
|
maxIntegralOfDay: [{ required: true, message: '请输入当日积分上限' }],
|
maxIntegralOfMonth: [{ required: true, message: '请输入当月积分上限' }],
|
integralName: [
|
{ required: true, message: '请输入积分名称' },
|
{ max: 10, message: '积分名称最多不超过 10 个字符' }
|
],
|
content: [{ required: true, validator: contentValid }]
|
}
|
}
|
},
|
created () {
|
if (this.$route.query.id) {
|
this.getDetails()
|
}
|
},
|
methods: {
|
// 限制选择开始结束时间的时分秒
|
limitTime (val, time1, time2) {
|
if (!time1 || !time2 || time1.split(' ')[0] !== time2.split(' ')[0]) return
|
const date = new Date(time1)
|
var h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
|
var m = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
|
var s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
|
let str = null
|
str = val === 1 ? (`00:00:00 - ${h + ':' + m + ':' + s}`) : `${h + ':' + m + ':' + s} - 23:59:59`
|
return str
|
},
|
/**
|
* 当改变结束日期时
|
*/
|
changeEndTime (val) {
|
if (val === '9999-12-31 23:59:59') {
|
this.form.longTerm = true
|
} else {
|
this.form.longTerm = false
|
}
|
},
|
/**
|
* 当点击是否长期时
|
*/
|
changeLongTerm (val) {
|
if (val) {
|
this.form.endTime = '9999-12-31 23:59:59'
|
} else {
|
this.form.endTime = null
|
}
|
},
|
/**
|
*当改变积分规则时
|
*/
|
changeIntegralType (val) {
|
this.$refs.form.clearValidate('content')
|
},
|
/**
|
* 限制不能输入数字
|
*/
|
limiInputType (e) {
|
limiInputType(e)
|
},
|
/**
|
* 查询详情
|
*/
|
getDetails () {
|
memberIntegralApi
|
.detailsInfo({
|
ruleId: this.$route.query.id
|
})
|
.then((res) => {
|
if (res.data) {
|
this.form = res.data
|
if (this.form.endTime === '9999-12-31 23:59:59') {
|
this.form.longTerm = true
|
}
|
}
|
})
|
},
|
/**
|
* 保存
|
*/
|
submit () {
|
this.$refs.form.validate().then((res) => {
|
if (this.form.ruleId) {
|
this.editInfo() // 编辑规则
|
} else {
|
this.addInfo() // 新增规则
|
}
|
}).catch(() => {})
|
},
|
/**
|
* 新增规则
|
*/
|
addInfo () {
|
delete this.form.longTerm
|
memberIntegralApi.addInfo(this.form).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'integralRuleList' })
|
}
|
})
|
},
|
/**
|
* 编辑规则
|
*/
|
editInfo () {
|
const obj = JSON.parse(JSON.stringify(this.form))
|
obj.integralCode = null
|
obj.integralType = null
|
delete this.form.longTerm
|
|
memberIntegralApi.editInfo(obj).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'integralRuleList' })
|
}
|
})
|
},
|
/**
|
* ‘取消
|
*/
|
cancel () {
|
this.$router.push({ name: 'integralRuleList' })
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.buttonPosition {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.el-picker-panel{
|
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
|
display: none !important;
|
}
|
}
|
.interalRuleStyle{
|
padding:20px;
|
}
|
</style>
|
