|
@@ -1,5 +1,13 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
|
|
+ <!-- 奖品类型 -->
|
|
|
|
+ <v-select
|
|
|
|
+ ref="jpType"
|
|
|
|
+ code="RUBBISH_TYPE"
|
|
|
|
+ v-show="false"
|
|
|
|
+ >
|
|
|
|
+ </v-select>
|
|
|
|
+
|
|
<a-modal
|
|
<a-modal
|
|
v-model="isShow"
|
|
v-model="isShow"
|
|
@cancle="isShow = false"
|
|
@cancle="isShow = false"
|
|
@@ -35,7 +43,17 @@
|
|
</a-form-model-item>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
- <a-form-model-item ref="cjRc" label="抽奖人次" prop="cjRc">
|
|
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ ref="cjRc"
|
|
|
|
+ label="抽奖人次"
|
|
|
|
+ prop="cjRc"
|
|
|
|
+ :required="!form.bxCjRc"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: !form.bxCjRc,
|
|
|
|
+ message: '请输入抽奖人次',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
<a-input-number
|
|
<a-input-number
|
|
id="addLottery-cjRc"
|
|
id="addLottery-cjRc"
|
|
style="width: 50%;margin-right: 20px;"
|
|
style="width: 50%;margin-right: 20px;"
|
|
@@ -87,34 +105,96 @@
|
|
</a-row>
|
|
</a-row>
|
|
|
|
|
|
<h3 class="form-titles">奖品设置</h3>
|
|
<h3 class="form-titles">奖品设置</h3>
|
|
- <a-row :gutter="48">
|
|
|
|
- <a-col :span="24">
|
|
|
|
- <div class="form-item">
|
|
|
|
- <div style="margin-right: 10px;"><span class="red">*</span>请选择转盘类型</div>
|
|
|
|
- <a-select style="width: 300px;" @change="zpTypeChange" v-model="form.zpType" placeholder="请选择转盘类型">
|
|
|
|
- <a-select-option value="5">
|
|
|
|
- 五等分
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 六等分
|
|
|
|
- </a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </div>
|
|
|
|
- <div class="form-item" v-for="(item, index) in form.jpList" :key="index">
|
|
|
|
- <div style="margin-right: 10px;"><span class="red">*</span> 奖品{{ index+1 }}</div>
|
|
|
|
- <a-select style="width: 120px;margin-right: 5px;" v-model="item.jpType" placeholder="请选择奖品类型">
|
|
|
|
- <a-select-option value="0">
|
|
|
|
- 送实物
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="1">
|
|
|
|
- 送乐豆
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="2">
|
|
|
|
- 未中奖
|
|
|
|
- </a-select-option>
|
|
|
|
|
|
+ <div class="form-item">
|
|
|
|
+ <a-form-model-item style="margin: 0;" ref="zpType" label="请选择转盘类型" prop="zpType">
|
|
|
|
+ <a-select style="width: 300px;" @change="zpTypeChange" v-model="form.zpType" placeholder="请选择转盘类型">
|
|
|
|
+ <a-select-option value="5">
|
|
|
|
+ 五等分
|
|
|
|
+ </a-select-option>
|
|
|
|
+ <a-select-option value="6">
|
|
|
|
+ 六等分
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <a-row
|
|
|
|
+ type="flex"
|
|
|
|
+ align="middle"
|
|
|
|
+ v-for="(item, index) in form.jpList"
|
|
|
|
+ :key="index"
|
|
|
|
+ v-if="form.jpList.length"
|
|
|
|
+ :gutter="10"
|
|
|
|
+ >
|
|
|
|
+ <a-col span="1">
|
|
|
|
+ <a-form-model-item>
|
|
|
|
+ <span class="red">*</span> 奖品{{ index+1 }}
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="3">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.jpType'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请选择奖品类型',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <a-select
|
|
|
|
+ :id="'jpList-jpType'+index"
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ v-model="item.jpType"
|
|
|
|
+ placeholder="请选择奖品类型">
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="item in $refs.jpType.getOptionDatas()"
|
|
|
|
+ :key="item.code"
|
|
|
|
+ :value="item.code">{{ item.dispName }}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
- <a-input style="width: 200px;margin-right: 5px;" v-model="item.name" placeholder="请输入奖品名称,10个字以内"/>
|
|
|
|
- <a-select style="width: 120px;margin-right: 5px;" v-model="item.isZj" placeholder="是否中奖">
|
|
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="3">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.name'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请输入奖品名称',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <a-input
|
|
|
|
+ :id="'jpList-name'+index"
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ v-model="item.name"
|
|
|
|
+ :maxLength="10"
|
|
|
|
+ placeholder="请输入奖品名称,10个字以内"/>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="3">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.isZj'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '是否中奖',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <a-select
|
|
|
|
+ :id="'jpList-isZj'+index"
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ v-model="item.isZj"
|
|
|
|
+ placeholder="是否中奖">
|
|
<a-select-option value="1">
|
|
<a-select-option value="1">
|
|
是
|
|
是
|
|
</a-select-option>
|
|
</a-select-option>
|
|
@@ -122,81 +202,152 @@
|
|
否
|
|
否
|
|
</a-select-option>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="3">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.glv'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请输入中奖概率',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
<a-input-number
|
|
<a-input-number
|
|
- style="width: 150px;margin-right: 5px;"
|
|
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ :id="'jpList-glv'+index"
|
|
v-model="item.glv"
|
|
v-model="item.glv"
|
|
:min="0"
|
|
:min="0"
|
|
:max="100"
|
|
:max="100"
|
|
:precision="2"
|
|
:precision="2"
|
|
placeholder="请输入中奖概率(%)"
|
|
placeholder="请输入中奖概率(%)"
|
|
allowClear />
|
|
allowClear />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="3">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.nums'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请输入奖品数量',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
<a-input-number
|
|
<a-input-number
|
|
- style="width: 150px;margin-right: 5px;"
|
|
|
|
|
|
+ style="width: 100%;"
|
|
|
|
+ :id="'jpList-nums'+index"
|
|
v-model="item.nums"
|
|
v-model="item.nums"
|
|
:min="0"
|
|
:min="0"
|
|
:max="999999"
|
|
:max="999999"
|
|
:precision="0"
|
|
:precision="0"
|
|
placeholder="请输入奖品数量"
|
|
placeholder="请输入奖品数量"
|
|
allowClear />
|
|
allowClear />
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="8">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ :label="''"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'jpList.' + index + '.image'"
|
|
|
|
+ >
|
|
<Upload
|
|
<Upload
|
|
- class="upload"
|
|
|
|
|
|
+ :id="'jpList-image'+index"
|
|
v-model="item.image"
|
|
v-model="item.image"
|
|
- ref="homeImage"
|
|
|
|
:fileSize="0.25"
|
|
:fileSize="0.25"
|
|
listType="picture-card">
|
|
listType="picture-card">
|
|
</Upload>
|
|
</Upload>
|
|
<span class="upload-desc">请上传奖品图片,300*300px,0.25MB 以内。</span>
|
|
<span class="upload-desc">请上传奖品图片,300*300px,0.25MB 以内。</span>
|
|
- </div>
|
|
|
|
|
|
+ </a-form-model-item>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
-
|
|
|
|
|
|
+ <div style="height: 1px;background-color: #eee;margin-bottom: 20px;" ></div>
|
|
<a-row :gutter="48">
|
|
<a-row :gutter="48">
|
|
<a-col :span="12">
|
|
<a-col :span="12">
|
|
<div class="form-item">
|
|
<div class="form-item">
|
|
<div style="margin-right: 10px;"><span class="red">*</span>中奖限制:</div>
|
|
<div style="margin-right: 10px;"><span class="red">*</span>中奖限制:</div>
|
|
- <a-select mode="multiple" style="width: 300px;" v-model="form.zjXz" placeholder="请选择中奖限制">
|
|
|
|
- <a-select-option value="5">
|
|
|
|
- 中奖后抽奖XXX次内不能再次中奖
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 每天最多可中奖XXX次
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 每人最多可中奖XXX次
|
|
|
|
- </a-select-option>
|
|
|
|
|
|
+ <a-select mode="multiple" style="width: 300px;" @change="zjxzChange" v-model="form.zjXz" placeholder="请选择中奖限制">
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="item in zjXz"
|
|
|
|
+ :key="item.code"
|
|
|
|
+ :value="item.code">{{ item.dispName }}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
- <div class="form-item">
|
|
|
|
- <div v-for="(item,index) in form.zjXz" :key="index">
|
|
|
|
|
|
+ <div class="form-item" v-for="(item,index) in form.zjXzCs" :key="index">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ style="margin: 0;"
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'zjXzCs.' + index + '.nums'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请输入次数',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ {{ index+1 }}.
|
|
|
|
+ {{ item.name.split('XXX')[0] }}
|
|
<a-input-number
|
|
<a-input-number
|
|
- style="width: 150px;margin-right: 5px;"
|
|
|
|
|
|
+ style="width: 100px;"
|
|
|
|
+ :id="'zjXzCs-nums'+index"
|
|
v-model="item.nums"
|
|
v-model="item.nums"
|
|
:min="0"
|
|
:min="0"
|
|
:max="100"
|
|
:max="100"
|
|
- :precision="2"
|
|
|
|
- placeholder="请输入中奖概率(%)"
|
|
|
|
|
|
+ :precision="0"
|
|
|
|
+ placeholder="请输入次数"
|
|
allowClear />
|
|
allowClear />
|
|
- </div>
|
|
|
|
|
|
+ {{ item.name.split('XXX')[1] }}
|
|
|
|
+ </a-form-model-item>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-col :span="12">
|
|
<div class="form-item">
|
|
<div class="form-item">
|
|
<div style="margin-right: 10px;"><span class="red">*</span>赠送抽奖次数规则:</div>
|
|
<div style="margin-right: 10px;"><span class="red">*</span>赠送抽奖次数规则:</div>
|
|
- <a-select mode="multiple" style="width: 300px;" v-model="form.cjGz" placeholder="请选择">
|
|
|
|
- <a-select-option value="5">
|
|
|
|
- 新用户登录送抽奖
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 用户首次投递送抽奖
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 分享给好友或朋友圈送抽奖
|
|
|
|
- </a-select-option>
|
|
|
|
- <a-select-option value="6">
|
|
|
|
- 3个月内无投递记录送抽奖
|
|
|
|
- </a-select-option>
|
|
|
|
|
|
+ <a-select mode="multiple" style="width: 300px;" @change="cjGzChange" v-model="form.cjGz" placeholder="请选择">
|
|
|
|
+ <a-select-option
|
|
|
|
+ v-for="item in cjGz"
|
|
|
|
+ :key="item.code"
|
|
|
|
+ :value="item.code">{{ item.dispName }}</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="form-item" v-for="(item,index) in form.cjGzCs" :key="index">
|
|
|
|
+ <a-form-model-item
|
|
|
|
+ style="margin: 0;"
|
|
|
|
+ :label="''"
|
|
|
|
+ :required="true"
|
|
|
|
+ :label-col=" { span: 0 }"
|
|
|
|
+ :wrapper-col=" { span: 24 }"
|
|
|
|
+ :prop="'cjGzCs.' + index + '.nums'"
|
|
|
|
+ :rules="{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请输入次数',
|
|
|
|
+ trigger: ['blur','change'],
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ {{ index+1 }}.
|
|
|
|
+ {{ item.name }}, 赠送
|
|
|
|
+ <a-input-number
|
|
|
|
+ style="width: 100px;"
|
|
|
|
+ :id="'cjGzCs-nums'+index"
|
|
|
|
+ v-model="item.nums"
|
|
|
|
+ :min="0"
|
|
|
|
+ :max="100"
|
|
|
|
+ :precision="0"
|
|
|
|
+ placeholder="请输入次数"
|
|
|
|
+ allowClear />
|
|
|
|
+ 次
|
|
|
|
+ </a-form-model-item>
|
|
|
|
+ </div>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
|
|
|
|
@@ -249,15 +400,29 @@ export default {
|
|
cjDesc: '',
|
|
cjDesc: '',
|
|
zpType: undefined,
|
|
zpType: undefined,
|
|
jpList: [],
|
|
jpList: [],
|
|
- zjXz: [],
|
|
|
|
- cjGz: []
|
|
|
|
|
|
+ zjXz: undefined,
|
|
|
|
+ zjXzCs: [],
|
|
|
|
+ cjGz: undefined,
|
|
|
|
+ cjGzCs: []
|
|
},
|
|
},
|
|
|
|
+ zjXz: [
|
|
|
|
+ { dispName: '(单个用户)中奖后抽奖XXX次内不能再次中奖', code: 0 },
|
|
|
|
+ { dispName: '(所有用户)每天最多可中奖XXX次', code: 1 },
|
|
|
|
+ { dispName: '(活动时间内)每人最多可中奖XXX次', code: 2 }
|
|
|
|
+ ],
|
|
|
|
+ cjGz: [
|
|
|
|
+ { dispName: '新用户登录', code: 0 },
|
|
|
|
+ { dispName: '新用户首次投递', code: 1 },
|
|
|
|
+ { dispName: '历史注册用户首次投递', code: 2 },
|
|
|
|
+ { dispName: '分享给好友或朋友圈', code: 3 },
|
|
|
|
+ { dispName: '老用户回归', code: 4 }
|
|
|
|
+ ],
|
|
rules: {
|
|
rules: {
|
|
name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
|
name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
|
time: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
|
|
time: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
|
|
- cjRc: [{ required: true, message: '请输入抽奖人次', trigger: 'blur' }],
|
|
|
|
price: [{ required: true, message: '请输入付费抽奖规则', trigger: 'blur' }],
|
|
price: [{ required: true, message: '请输入付费抽奖规则', trigger: 'blur' }],
|
|
jpDesc: [{ required: true, message: '请输入奖品说明', trigger: 'blur' }],
|
|
jpDesc: [{ required: true, message: '请输入奖品说明', trigger: 'blur' }],
|
|
|
|
+ zpType: [{ required: true, message: '请选择转盘类型', trigger: 'blur' }],
|
|
jpTj: [{ required: true, message: '请输入抽奖条件', trigger: 'blur' }],
|
|
jpTj: [{ required: true, message: '请输入抽奖条件', trigger: 'blur' }],
|
|
cjDesc: [{ required: true, message: '请输入抽奖说明', trigger: 'blur' }]
|
|
cjDesc: [{ required: true, message: '请输入抽奖说明', trigger: 'blur' }]
|
|
}
|
|
}
|
|
@@ -269,22 +434,50 @@ export default {
|
|
console.log(e)
|
|
console.log(e)
|
|
if (e.target.checked) {
|
|
if (e.target.checked) {
|
|
this.form.cjRc = ''
|
|
this.form.cjRc = ''
|
|
|
|
+ this.$refs.ruleForm.clearValidate('cjRc')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 选择转盘类型
|
|
// 选择转盘类型
|
|
zpTypeChange (val) {
|
|
zpTypeChange (val) {
|
|
console.log(val)
|
|
console.log(val)
|
|
- const _this = this
|
|
|
|
|
|
+ this.form.jpList = []
|
|
for (let i = 0; i < val; i++) {
|
|
for (let i = 0; i < val; i++) {
|
|
- _this.form.jpList[i] = {
|
|
|
|
|
|
+ this.form.jpList.push({
|
|
jpType: undefined,
|
|
jpType: undefined,
|
|
name: '',
|
|
name: '',
|
|
- isZj: '0',
|
|
|
|
|
|
+ isZj: undefined,
|
|
glv: '',
|
|
glv: '',
|
|
nums: '',
|
|
nums: '',
|
|
image: ''
|
|
image: ''
|
|
- }
|
|
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
+ this.$refs.ruleForm.clearValidate()
|
|
|
|
+ },
|
|
|
|
+ // 中奖限制
|
|
|
|
+ zjxzChange (val) {
|
|
|
|
+ console.log(val)
|
|
|
|
+ this.form.zjXzCs = []
|
|
|
|
+ this.form.zjXz && this.form.zjXz.map(item => {
|
|
|
|
+ const row = this.zjXz.find(k => k.code == item)
|
|
|
|
+ this.form.zjXzCs.push({
|
|
|
|
+ code: item,
|
|
|
|
+ name: row.dispName,
|
|
|
|
+ nums: ''
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 抽奖规则
|
|
|
|
+ cjGzChange (val) {
|
|
|
|
+ console.log(val)
|
|
|
|
+ this.form.cjGzCs = []
|
|
|
|
+ this.form.cjGz && this.form.cjGz.map(item => {
|
|
|
|
+ const row = this.cjGz.find(k => k.code == item)
|
|
|
|
+ this.form.cjGzCs.push({
|
|
|
|
+ code: item,
|
|
|
|
+ name: row.dispName,
|
|
|
|
+ nums: ''
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 保存
|
|
// 保存
|
|
onSubmit () {
|
|
onSubmit () {
|