<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false"
|
:modal-append-to-body="false" v-if="dialogVisible">
|
<el-form size="mini" :model="form" ref="form" label-width="120px" :rules="formRules">
|
<el-form-item label="奖品类型：" prop="prizeType">
|
<el-select @change="changePrizeType" v-model="form.prizeType">
|
<el-option v-for="item in prizeTypeArr" :key="item.id" :value="item.id"
|
:label="item.name"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="奖品名称：" prop="prizeName">
|
<el-input placeholder="请输入奖品名称" v-model="form.prizeName"></el-input>
|
</el-form-item>
|
<coupon-selected :tableData="form.tableData" v-if="form.prizeType === '1'">
|
</coupon-selected>
|
<giftPrd-selected :tableData="form.tableData" :formRules="formRules"
|
v-if="form.prizeType === '3'" :isShowSpuStorage="isShowSpuStorage">
|
</giftPrd-selected>
|
<el-form-item label="获得积分：" v-if="form.prizeType === '2'" prop="integral">
|
<el-input-number v-model="form.integral" :max="999"></el-input-number>
|
</el-form-item>
|
<el-form-item label="奖品图片：" prop="prizeFileId">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(form.fileList,file,'prizeFileId')"
|
@handle-remove="(file)=>handleRemove('fileList',file,'prizeFileId')"
|
:fileList="form.fileList" fileTip="建议尺寸192*192像素，支持JPG、PNG、JPEG格式">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="数量：" prop="prizeNum">
|
<el-input-number v-model="form.prizeNum" :max="9999"></el-input-number> 份
|
</el-form-item>
|
<el-form-item label="中奖概率：" prop="probability">
|
<el-input-number v-model="form.probability" :max="100"></el-input-number> %
|
<el-tooltip class="item" effect="dark"
|
content="中奖概率为用户每次抽奖时独立事件的概率。举例：若中奖概率为10%，则每个用户中奖概率为10%，并不是10个人中一定出现一个奖品。"
|
placement="right">
|
<i class="el-icon-info"></i>
|
</el-tooltip>
|
</el-form-item>
|
<el-form-item label="有效时间：" prop="startAndEndTime"
|
v-if="form.prizeType === '3' || form.prizeType === '4'">
|
<el-date-picker v-model="form.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(startTime).getTime() - 86400000)}"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
<el-tooltip class="item" effect="dark" content="奖品兑换有效时间：若到结束日期未兑换，则无法兑换。"
|
placement="right">
|
<i class="el-icon-info" style="margin-left:8px;"></i>
|
</el-tooltip>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer buttonPosition">
|
<el-button size="mini" @click="submit" type="primary" :loading="loading">确定</el-button>
|
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { inputNumberValid } from '@/utils/validator'
|
import { handleSuccess, handleRemove } from '../index'
|
import couponSelected from './couponSelected.vue'
|
import giftPrdSelected from './giftPrdSelected.vue'
|
import prizeTypeArr from '@/utils/constant/prizeTypeArr'
|
import eventBus from '../eventBus'
|
export default {
|
props: ['show', 'title', 'prizeRow', 'tableData', 'isShowSpuStorage'],
|
components: { couponSelected, giftPrdSelected },
|
data () {
|
const probabilityValid = (rule, value, callback) => {
|
const reg = /^(?!0+$)(?!0*\.0*$)\d{1,8}(\.\d{1,1})?$/ // 最多输入一位小数
|
if (!value || value <= 0) {
|
callback(new Error('中奖概率应大于0'))
|
} else if (!reg.test(value)) {
|
callback(new Error('最多输入一位小数'))
|
} else {
|
callback()
|
}
|
}
|
const tableDataValid = (rule, value, callback) => {
|
if (this.form.prizeType === '1' && !value.length) {
|
callback(new Error('请选择奖品券'))
|
} else if (this.form.prizeType === '3' && !value.length) {
|
callback(new Error('请选择赠品'))
|
} else {
|
callback()
|
}
|
}
|
const timevalidator = (rule, val, callback) => {
|
if (val && val[0]) {
|
if (val[0] === val[1]) {
|
callback(new Error('开始时间与结束时间不能相同'))
|
} else if (new Date(val[0]).getTime() < new Date(this.startTime).getTime()) {
|
callback(new Error('开始时间不能小于活动开始时间'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
return {
|
prizeTypeArr,
|
form: {
|
prizeType: null,
|
startAndEndTime: [],
|
tableData: [],
|
frequency: null,
|
integral: null,
|
prizeFileId: null,
|
prizeNum: undefined,
|
probability: undefined,
|
fileList: [],
|
effectiveStartTime: null,
|
effectiveEndTime: null
|
},
|
dialogVisible: false,
|
loading: false,
|
formRules: {
|
prizeType: [{ required: true, message: '请选择奖品类型', trigger: 'change' }],
|
tableData: [{ validator: tableDataValid }],
|
prizeName: [
|
{ required: true, message: '请输入奖品名称' },
|
{ max: 6, message: '奖品名称最多只能输入 6 个字' }
|
],
|
integral: [{ required: true, validator: inputNumberValid }],
|
prizeNum: [
|
{ required: true, message: '请输入奖品数量' },
|
{ validator: inputNumberValid },
|
{
|
validator: (rule, value, callback) => {
|
const totalAmountIssued = this.form.tableData.length && this.form.tableData[0].totalAmountIssued
|
if (this.form.prizeType === '1' && this.form.tableData.length && value > totalAmountIssued && totalAmountIssued !== -1) {
|
callback(new Error('奖品数量不能大于奖品券的发放总量'))
|
} else {
|
callback()
|
}
|
}
|
}
|
],
|
probability: [{ required: true, validator: probabilityValid }],
|
prizeFileId: [{ required: true, message: '请选择奖品图片' }],
|
startAndEndTime: [
|
// { type: 'array', required: true, message: '请选择活动时间' },
|
{ validator: timevalidator }
|
],
|
skuId: [{ required: true, message: '请选择赠品规格', trigger: 'change' }]
|
},
|
startTime: null,
|
endTime: null
|
}
|
},
|
mounted () {
|
const _this = this
|
/**
|
* 获取活动时间
|
*/
|
eventBus.$on('getActivity', function (data) {
|
_this.startTime = data.startTime
|
_this.endTime = data.endTime
|
})
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function (newShow, oldShow) {
|
this.dialogVisible = newShow
|
if (this.dialogVisible) {
|
this.initForm()
|
}
|
if (this.title === '编辑奖品') {
|
this.form = JSON.parse(JSON.stringify(this.prizeRow))
|
console.log(this.form, '====')
|
}
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
dialogVisible: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
},
|
'form.tableData' (newDialogShow, oldDialogShow) {
|
if (newDialogShow.length && this.dialogVisible) {
|
this.$nextTick(() => {
|
this.$refs.form.$nextTick(this.$refs.form.clearValidate())
|
})
|
}
|
}
|
},
|
methods: {
|
/**
|
* 奖品类型变化时
|
*/
|
changePrizeType (val) {
|
this.form.startAndEndTime = []
|
this.form.integral = null
|
this.form.tableData = []
|
this.$refs.form.clearValidate()
|
},
|
/**
|
* 获取起止时间
|
*/
|
getStartAndEndTime (val) {
|
if (val && val.length) {
|
this.form.effectiveStartTime = val[0]
|
this.form.effectiveEndTime = val[1]
|
} else {
|
this.form.effectiveStartTime = null
|
this.form.effectiveEndTime = null
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (arr, data, key) {
|
handleSuccess(this, this.form, 'form', arr, data, key)
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (arrKey, data, key) {
|
this.form[arrKey] = handleRemove(this.form, this.form[arrKey], data, key)
|
},
|
// 初始化表单
|
initForm () {
|
for (const key in this.form) {
|
if (Array.isArray(this.form[key])) {
|
this.form[key] = []
|
} else {
|
this.form[key] = undefined
|
}
|
}
|
},
|
/**
|
* 保存数据
|
*/
|
submit () {
|
this.$refs.form.validate().then((res) => {
|
let total = 0
|
let notWinning = 100
|
for (const i of this.tableData) {
|
if (this.prizeRow.prizeName !== this.form.prizeName && this.form.prizeName === i.prizeName) {
|
this.$message({
|
message: '奖品名称重复，请重新输入',
|
type: 'info'
|
})
|
return
|
}
|
const str = this.form.prizeType === '1' ? '奖品券' : '赠品'
|
|
let formCommonId = null
|
let prizeRowCommonId = null
|
let iCommonId = null
|
|
if (this.form.tableData.length) {
|
if (this.form.prizeType === '1') {
|
formCommonId = this.form.tableData[0].commonId
|
prizeRowCommonId = this.prizeRow.commonId
|
iCommonId = i.commonId
|
} else {
|
formCommonId = this.form.tableData[0].skuId
|
prizeRowCommonId = this.prizeRow.tableData && this.prizeRow.tableData.length ? this.prizeRow.tableData[0].skuId : null
|
iCommonId = i.tableData && i.tableData.length ? i.tableData[0].skuId : null
|
}
|
}
|
if (prizeRowCommonId) {
|
if (formCommonId && prizeRowCommonId !== formCommonId && formCommonId === iCommonId) {
|
this.$message({
|
message: `${str}重复，请重新选择${str}`,
|
type: 'info'
|
})
|
return
|
}
|
} else {
|
if (formCommonId && formCommonId === iCommonId) {
|
this.$message({
|
message: `${str}重复，请重新选择${str}`,
|
type: 'info'
|
})
|
return
|
}
|
}
|
|
if (this.prizeRow.prizeName !== i.prizeName) {
|
total += i.probability * 10
|
}
|
}
|
if ((total + this.form.probability * 10) / 10 > 100) {
|
this.$message({
|
message: '奖品的总获奖概率大于了100%,请重新输入',
|
type: 'info'
|
})
|
return
|
}
|
notWinning = (1000 - (total + this.form.probability * 10)) / 10 // 不中奖概率
|
this.$emit('handle-form-data', this.form, notWinning)
|
this.dialogVisible = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
