<template>
|
<div>
|
<h4>奖品设置</h4>
|
<hr />
|
<el-form size="mini" ref="prizeConfigForm" :disabled="$route.name==='blindBoxActInfo'"
|
label-width="120px" :rules="formRules" :model="prizeConfigForm">
|
<el-form-item v-show="promotionStatus==='00' || isCopy">
|
<el-button @click="addPrize" type="primary">添加奖品</el-button>
|
<el-button @click="clearTableData">清空</el-button>
|
</el-form-item>
|
<add-prize-component :show.sync="showDialog" :title="title" :prizeRow="prizeRow"
|
@handle-form-data="handleFormData" :tableData="prizeConfigForm.tableData"
|
:isShowSpuStorage="isShowSpuStorage"></add-prize-component>
|
<el-form-item prop="tableData">
|
<el-table size="mini" :data="prizeConfigForm.tableData" border>
|
<el-table-column label="奖品名称" prop="prizeName"></el-table-column>
|
<el-table-column label="奖品类型" prop="prizeType">
|
<template slot-scope="scope">
|
{{getLabel(prizeTypeArr,scope.row.prizeType)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="图片">
|
<template slot-scope="scope">
|
<div v-viewer>
|
<el-tooltip placement="left" effect="light">
|
<div slot="content"><img :src="scope.row.fileList[0].url" width="100px" /></div>
|
<img :src="scope.row.fileList[0].url" />
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="奖品数量" prop="prizeNum"></el-table-column>
|
<el-table-column label="中奖概率" prop="probability"></el-table-column>
|
<el-table-column label="有效时间" width="280px">
|
<template slot-scope="scope">
|
<span v-if="scope.row.startAndEndTime.length">{{scope.row.startAndEndTime[0]}} ~
|
{{scope.row.startAndEndTime[1]}}</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="160px" v-if="promotionStatus==='00' || isCopy">
|
<template slot-scope="scope">
|
<el-button type="primary" @click="editItem(scope.row, scope.$index)">编辑</el-button>
|
<el-button type="danger" @click="deleteItem(scope.row, scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<el-form-item label="不中奖概率：">
|
<el-input-number v-model="prizeConfigForm.notWinning" disabled></el-input-number> %
|
</el-form-item>
|
<h4>未中奖设置</h4>
|
<el-form-item label="提示语：" prop="prompt">
|
<el-input v-model.trim="prizeConfigForm.prompt" placeholder="请输入未中奖提示语" clearable
|
class="blindBoxActivityInput"></el-input>
|
</el-form-item>
|
<el-form-item label="图片：" prop="promptFileId">
|
<custom-upload-img :limitNumber="1"
|
@handle-success="(file)=>handleSuccess(notWinningFileList,file,'promptFileId')"
|
@handle-remove="(file)=>handleRemove('notWinningFileList',file,'promptFileId')"
|
:isHideDelete="$route.name!=='blindBoxActInfo'"
|
:fileList="notWinningFileList" fileTip="建议尺寸280*240像素，支持JPG、PNG、JPEG格式">
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="参与送积分：" prop="integral">
|
<el-radio-group @change="changeSendPointsType" v-model="prizeConfigForm.sendPointsType">
|
<el-radio label="2">否</el-radio>
|
<el-radio label="1">是
|
<span v-show="prizeConfigForm.sendPointsType === '1'">
|
送 <el-input-number size="mini" v-model="prizeConfigForm.integral" :min='0' :max="999">
|
</el-input-number> 积分
|
</span>
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-show="prizeConfigForm.sendPointsType === '1'" prop="giveType">
|
<el-checkbox v-model="prizeConfigForm.giveType">仅送未中用户</el-checkbox>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { handleSuccess, handleRemove } from '../index'
|
import addPrizeComponent from './addPrizeComponent.vue'
|
import prizeTypeArr from '@/utils/constant/prizeTypeArr'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
export default {
|
components: { addPrizeComponent },
|
props: ['promotionStatus', 'isShowSpuStorage', 'isCopy'],
|
data() {
|
return {
|
prizeTypeArr,
|
prizeConfigForm: {
|
notWinning: 100,
|
prompt: null,
|
promptFileId: null,
|
tableData: [],
|
sendPointsType: '2',
|
integral: undefined,
|
giveType: false
|
},
|
formRules: {
|
tableData: [
|
{ type: 'array', required: true, message: '请添加奖品' }
|
],
|
prompt: [
|
{ required: true, message: '请输入未中奖提示语' },
|
{ max: 20, message: '未中奖提示语最多只能输入 20 个字' }
|
],
|
promptFileId: [{ required: true, message: '请上传未中奖图片' }],
|
integral: [
|
{
|
validator: (rule, value, callback) => {
|
const reg = /^[0-9]*$/ // 只能输入正整数
|
if (this.prizeConfigForm.sendPointsType === '1' && (value === undefined || value === '')) {
|
callback(new Error('请输入赠送积分数'))
|
} else if (this.prizeConfigForm.sendPointsType === '1' && (!value || !reg.test(value))) {
|
callback(new Error('请输入大于0的整数'))
|
} else {
|
callback()
|
}
|
}
|
}
|
]
|
},
|
notWinningFileList: [],
|
showDialog: false,
|
prizeRow: {},
|
title: null,
|
rowIndex: null
|
}
|
},
|
methods: {
|
/**
|
*清空奖品数
|
*/
|
clearTableData() {
|
this.prizeConfigForm.tableData = []
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel(array, id) {
|
return getArrayLable(array, id)
|
},
|
/**
|
* 获取表单数据
|
*/
|
handleFormData(formData, notWinning) {
|
const data = { ...formData, ...formData.tableData[0] }
|
if (this.rowIndex !== null) {
|
this.$set(this.prizeConfigForm.tableData, this.rowIndex, data)
|
this.$refs.prizeConfigForm.clearValidate('tableData')
|
} else {
|
this.prizeConfigForm.tableData.push(JSON.parse(JSON.stringify(data)))
|
}
|
this.prizeConfigForm.notWinning = notWinning // 不中奖概率
|
},
|
/**
|
* 编辑奖品
|
*/
|
editItem(row, index) {
|
this.rowIndex = index
|
this.prizeRow = JSON.parse(JSON.stringify(row))
|
this.title = '编辑奖品'
|
this.showDialog = true
|
},
|
/**
|
* 删除奖品
|
*/
|
deleteItem(row, index) {
|
this.prizeConfigForm.tableData.splice(index, 1)
|
},
|
/**
|
* 当选择参与送积分时
|
*/
|
changeSendPointsType() {
|
this.prizeConfigForm.integral = undefined
|
this.prizeConfigForm.giveType = false
|
this.$refs.prizeConfigForm.clearValidate('integral')
|
},
|
/**
|
* 新增奖品
|
*/
|
addPrize() {
|
this.rowIndex = null
|
this.showDialog = true
|
this.prizeRow = {}
|
this.title = '新增奖品'
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(arr, data, key) {
|
handleSuccess(this, this.prizeConfigForm, 'prizeConfigForm', arr, data, key)
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(arrKey, data, key) {
|
this[arrKey] = handleRemove(this.prizeConfigForm, this[arrKey], data, key)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
