<template>
|
<div>
|
<h4>基本信息</h4>
|
<hr/>
|
<el-form size="mini" ref="basicConfigForm" label-width="120px" :disabled="$route.name==='blindBoxActInfo'" :rules="formRules" :model="basicConfigForm">
|
<el-form-item label="活动名称：" prop="promotionName">
|
<el-input placeholder="请输入活动名称" class="blindBoxActivityInput" :disabled="promotionStatus!=='00' && !isCopy" v-model.trim="basicConfigForm.promotionName"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="活动时间："
|
prop="startAndEndTime"
|
>
|
<el-date-picker
|
v-model="basicConfigForm.startAndEndTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="getStartAndEndTime"
|
:picker-options="{disabledDate:time => time.getTime() <= new Date().getTime() - 86400000}"
|
end-placeholder="结束日期"
|
:disabled="promotionStatus!=='00' && !isCopy"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="参与人员：" required prop="personnelType">
|
<el-radio-group @change="changeType" :disabled="promotionStatus!=='00' && !isCopy" v-model="basicConfigForm.personnelType">
|
<el-radio label="1">所有人员均可参与</el-radio>
|
<el-radio label="2">部分人员可参与</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-show="basicConfigForm.personnelType === '2' && promotionStatus==='00'" required label="通过等级选择：">
|
<el-button @click="addUser" type="primary">选择会员等级</el-button>
|
<el-button @click="clearTableData">清空</el-button>
|
</el-form-item>
|
<el-form-item v-if="basicConfigForm.personnelType === '2'" prop="tableData">
|
<table-pagination :tableData="basicConfigForm.tableData" :showOperatBtn="promotionStatus==='00'">
|
<template>
|
<el-table-column
|
label="会员账号"
|
prop="memberName"
|
></el-table-column>
|
<el-table-column label="会员昵称" prop="memberNickName">
|
<template slot-scope="scope">
|
{{ scope.row.memberNickName ? scope.row.memberNickName : '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="会员等级" prop="memberLevelName">
|
<template slot-scope="scope">
|
{{ scope.row.memberLevelName ? scope.row.memberLevelName : '-' }}
|
</template>
|
</el-table-column>
|
</template>
|
</table-pagination>
|
</el-form-item>
|
<el-form-item label="参与次数：" required prop="partakeType">
|
<el-radio-group :disabled="promotionStatus!=='00' && !isCopy" @change="changePartakeType" v-model="basicConfigForm.partakeType">
|
<el-radio label="1">不限制</el-radio>
|
<el-radio label="2">限制次数</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<div v-if="basicConfigForm.partakeType === '2'">
|
<el-form-item prop="toplimitNum">
|
每人每天抽奖上限 <el-input-number :max="999999999" v-model="basicConfigForm.toplimitNum"></el-input-number> 次
|
</el-form-item>
|
<el-form-item prop="freeNum">
|
每人每天免费抽 <el-input-number :max="999999999" v-model="basicConfigForm.freeNum"></el-input-number> 次
|
</el-form-item>
|
<div v-if="basicConfigForm.personnelType === '1'">
|
<el-form-item label="获取方式" prop="additionalNum">
|
<el-checkbox @change="changeObtainMethod(1)" v-model="basicConfigForm.invitationType">分享获取</el-checkbox>
|
<span v-if="basicConfigForm.invitationType">
|
参与用户每邀请 <el-input-number :min="1" :max="999999999" v-model="basicConfigForm.invitationNum"></el-input-number> 人注册，额外获得
|
<el-input-number :min="0" :max="999999999" v-model="basicConfigForm.additionalNum"></el-input-number> 次抽奖机会
|
</span>
|
</el-form-item>
|
<el-form-item prop="orderSatisfyAmount">
|
<el-checkbox @change="changeObtainMethod(2)" v-model="basicConfigForm.placeOrderType">下单获取</el-checkbox>
|
<span v-if="basicConfigForm.placeOrderType">
|
订单满 <el-input-number :min="0" v-model="basicConfigForm.orderSatisfyAmount"></el-input-number> 元，额外获得
|
<el-input-number :min="0" :max="999999999" v-model="basicConfigForm.placeOrderNum"></el-input-number> 次抽奖机会
|
</span>
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
<member-selected
|
:show.sync="selectedDialog.show"
|
:title="selectedDialog.title"
|
@hand-selected-row-data="handSelectedRowData"
|
:appendToBody="true"
|
></member-selected>
|
</div>
|
</template>
|
|
<script>
|
import memberSelected from '@/views/memberMgt/memberInfoList/components/memberSelected.vue'
|
import { inputNumberValid, inputNonnegativeNumber } from '@/utils/validator'
|
import tablePagination from './tablePagination.vue'
|
import eventBus from '../eventBus'
|
export default {
|
components: { memberSelected, tablePagination },
|
props: ['promotionStatus','isCopy'],
|
data () {
|
const startAndEndTimeValidator = (rule, val, callback) => {
|
if (this.$route.name !== 'blindBoxActInfo' && this.promotionStatus === '00') {
|
var oDate1 = new Date(val[0])
|
if (val[0] === val[1]) {
|
callback(new Error('开始时间与结束时间不能相同'))
|
} else if (oDate1.getTime() < Date.now()) {
|
callback(new Error('开始时间不能小于当前时间'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
return {
|
basicConfigForm: {
|
promotionName: null,
|
startAndEndTime: [],
|
promotionStartTime: null,
|
promotionEndTime: null,
|
tableData: [],
|
personnelType: '1',
|
partakeType: '1',
|
additionalNum: undefined,
|
invitationNum: 1,
|
toplimitNum: undefined,
|
freeNum: undefined,
|
invitationType: false,
|
placeOrderType: false,
|
orderSatisfyAmount: null,
|
placeOrderNum: undefined
|
},
|
selectedDialog: {
|
show: false,
|
title: '选择会员'
|
},
|
formRules: {
|
promotionName: [
|
{ required: true, message: '请输入活动名称' },
|
{ max: 15, message: '活动名称最多只能输入 15 个字' }
|
],
|
startAndEndTime: [
|
{ type: 'array', required: true, message: '请选择活动时间' },
|
{ validator: startAndEndTimeValidator }
|
],
|
tableData: [
|
{ type: 'array', required: true, message: '请选择参与人员' }
|
],
|
toplimitNum: [
|
{ required: true, message: '请输入每人每天抽奖上限次数' },
|
{ validator: inputNumberValid }
|
],
|
additionalNum: [
|
{
|
validator: (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
const regNum = /^[1-9]*$/ // 只能输入正整数
|
if (this.basicConfigForm.invitationType) {
|
if (!this.basicConfigForm.invitationNum || !reg.test(this.basicConfigForm.invitationNum)) {
|
callback(new Error('邀请注册人数请输入大于0的整数'))
|
} else if (!regNum.test(value)) {
|
callback(new Error('请输入大于0的额外获得抽奖次数'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
}
|
],
|
freeNum: [
|
{ required: true, message: '请输入每人每天免费抽奖次数' },
|
{ validator: inputNonnegativeNumber },
|
{
|
validator: (rule, value, callback) => {
|
if (value > this.basicConfigForm.toplimitNum) {
|
callback(new Error('每人每天免费抽奖次数不能大于每人每天抽奖上限次数'))
|
} else {
|
callback()
|
}
|
}
|
}
|
],
|
orderSatisfyAmount: [
|
{
|
|
validator: (rule, value, callback) => {
|
const reg = /^(?!0+$)(?!0*\.0*$)\d{1,9}(\.\d{1,2})?$/ // 最多输入两位小数
|
const regNum = /^[1-9]*$/ // 只能输入正整数
|
if (this.basicConfigForm.placeOrderType) {
|
if (!value || value <= 0) {
|
callback(new Error('订单满减金额应大于0'))
|
} else if (value > 999999999) {
|
callback(new Error('最大金额不能超过 999999999'))
|
} else if (value && !reg.test(value)) {
|
callback(new Error('订单满减金额最多输入两位小数'))
|
} else if (!regNum.test(this.basicConfigForm.placeOrderNum)) {
|
callback(new Error('请输入大于0的额外获得抽奖次数'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
}
|
]
|
}
|
}
|
},
|
methods: {
|
/**
|
* 当获取方式改变时
|
*/
|
changeObtainMethod (val) {
|
switch (val) {
|
case 1:
|
if (!this.basicConfigForm.invitationType) {
|
this.basicConfigForm.invitationNum = null
|
this.basicConfigForm.additionalNum = null
|
} else {
|
this.basicConfigForm.invitationNum = 1
|
}
|
this.$nextTick(() => this.$refs.basicConfigForm.clearValidate('additionalNum'))
|
break
|
case 2:
|
if (!this.basicConfigForm.placeOrderType) {
|
this.basicConfigForm.orderSatisfyAmount = null
|
this.basicConfigForm.placeOrderNum = null
|
}
|
this.$nextTick(() => this.$refs.basicConfigForm.clearValidate('orderSatisfyAmount'))
|
break
|
default:
|
break
|
}
|
},
|
/**
|
* 获取弹出框返回的用户数据
|
*/
|
handSelectedRowData (rows) {
|
rows.forEach(rowItem => {
|
if (!this.basicConfigForm.tableData.find(item => {
|
return rowItem.memberId === item.memberId
|
})) {
|
this.basicConfigForm.tableData.push({
|
memberId: rowItem.memberId,
|
memberName: rowItem.memberName,
|
memberNickName: rowItem.memberNickName,
|
memberLevelName: rowItem.memberLevelName
|
})
|
}
|
})
|
this.total = this.basicConfigForm.tableData.length
|
this.$refs.basicConfigForm.clearValidate('tableData')
|
},
|
/**
|
* 添加用户
|
*/
|
addUser () {
|
this.selectedDialog.show = true
|
},
|
/**
|
*清空参与用户
|
*/
|
clearTableData () {
|
this.basicConfigForm.tableData = []
|
},
|
// 当改变参与人员类型时清空表格数据
|
changeType () {
|
this.basicConfigForm.additionalNum = undefined
|
this.basicConfigForm.tableData = []
|
},
|
// 当参与次数改变时清空抽奖数据
|
changePartakeType () {
|
this.basicConfigForm.toplimitNum = undefined
|
this.basicConfigForm.additionalNum = undefined
|
this.basicConfigForm.freeNum = undefined
|
},
|
/**
|
* 获取起止时间
|
*/
|
getStartAndEndTime (val) {
|
if (val && val.length) {
|
this.basicConfigForm.promotionStartTime = val[0]
|
this.basicConfigForm.promotionEndTime = val[1]
|
} else {
|
this.basicConfigForm.promotionStartTime = null
|
this.basicConfigForm.promotionEndTime = null
|
}
|
eventBus.$emit('getActivity', { startTime: this.basicConfigForm.promotionStartTime, endTime: this.basicConfigForm.promotionEndTime })
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
