addlotterySetModal.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767
  1. <template>
  2. <div>
  3. <!-- 奖品类型 -->
  4. <v-select
  5. ref="jpType"
  6. code="LUCKY_DRAW_PRIZE_TYPE"
  7. v-show="false"
  8. >
  9. </v-select>
  10. <!-- 中奖限制 -->
  11. <v-select
  12. ref="zjXzType"
  13. code="LUCKY_DRAW_WIN_LIMIT_RULE"
  14. v-show="false"
  15. >
  16. </v-select>
  17. <!-- 赠送规则 -->
  18. <v-select
  19. ref="zsGzType"
  20. code="LUCKY_DRAW_GIVE_TIMES_RULE"
  21. v-show="false"
  22. >
  23. </v-select>
  24. <a-modal
  25. v-model="isShow"
  26. @cancel="cansel"
  27. :footer="null"
  28. width="80%"
  29. :centered="true"
  30. wrapClassName="addLottery-modal"
  31. :title="titleText">
  32. <a-form-model
  33. ref="ruleForm"
  34. :model="form"
  35. :layout="formLayout"
  36. :rules="rules"
  37. :label-col="labelCol"
  38. :wrapper-col="wrapperCol"
  39. >
  40. <h3 class="form-titles">基础设置</h3>
  41. <a-row :gutter="48">
  42. <a-col :span="12">
  43. <!-- participantsNum>0 有参与人数时不可编辑 -->
  44. <a-form-model-item ref="activeName" label="活动名称" prop="activeName">
  45. <a-input
  46. id="addLottery-time"
  47. :disabled="participantsNum>0||state==1"
  48. v-model="form.activeName"
  49. allowClear
  50. :maxLength="15"
  51. placeholder="15个字以内"/>
  52. </a-form-model-item>
  53. </a-col>
  54. <a-col :span="12">
  55. <a-form-model-item ref="time" label="活动时间" prop="time">
  56. <a-range-picker
  57. :disabled="participantsNum>0||state==1"
  58. id="addLottery-time"
  59. v-model="form.time"
  60. :disabledDate="disabledDate"
  61. allowClear
  62. format="YYYY-MM-DD"
  63. :placeholder="['开始时间','结束时间']"
  64. />
  65. </a-form-model-item>
  66. </a-col>
  67. <a-col :span="12">
  68. <a-form-model-item
  69. ref="peopleLimitCount"
  70. label="抽奖人次"
  71. prop="peopleLimitCount"
  72. :rules="{
  73. required: !(state==1) && !form.isPeopleLimit,
  74. message: '请输入抽奖人次',
  75. trigger: ['blur','change'],
  76. }"
  77. >
  78. <a-input-number
  79. id="addLottery-cjRc"
  80. style="width: 50%;margin-right: 20px;"
  81. v-model="form.peopleLimitCount"
  82. :disabled="form.isPeopleLimit==1||participantsNum>0||state==1"
  83. :min="0"
  84. :max="999999"
  85. :precision="0"
  86. placeholder="请输入抽奖人次(0~999999)"
  87. allowClear />
  88. <a-checkbox :disabled="state==1||participantsNum>0" @change="bxCjRcChange" v-model="form.isPeopleLimit">
  89. 不限
  90. </a-checkbox>
  91. </a-form-model-item>
  92. </a-col>
  93. <a-col :span="12">
  94. <a-form-model-item ref="purchaseTimesGold" label="付费抽奖规则" prop="purchaseTimesGold">
  95. 每次抽奖需要支付
  96. <a-input-number
  97. id="addLottery-cjgz"
  98. :disabled="state==1||participantsNum>0"
  99. style="width: 30%;margin-right: 5px;"
  100. v-model="form.purchaseTimesGold"
  101. :min="1"
  102. :max="999999"
  103. :precision="0"
  104. placeholder="请输入乐豆数(0~999999)"
  105. allowClear />
  106. 乐豆
  107. </a-form-model-item>
  108. </a-col>
  109. </a-row>
  110. <a-row :gutter="48">
  111. <a-col :span="12">
  112. <a-form-model-item ref="prizeDesc" label="奖品说明" prop="prizeDesc">
  113. <a-input
  114. :disabled="state==1"
  115. v-model="form.prizeDesc"
  116. allowClear
  117. :maxLength="100"
  118. placeholder="请输入奖品说明,100字以内"
  119. type="textarea" />
  120. </a-form-model-item>
  121. </a-col>
  122. <a-col :span="12">
  123. <a-form-model-item ref="activeLimitDesc" label="抽奖条件" prop="activeLimitDesc">
  124. <a-input
  125. :disabled="state==1"
  126. v-model="form.activeLimitDesc"
  127. allowClear
  128. :maxLength="100"
  129. placeholder="请输入抽奖条件,100字以内"
  130. type="textarea" />
  131. </a-form-model-item>
  132. </a-col>
  133. <a-col :span="12">
  134. <a-form-model-item ref="activeDesc" label="抽奖说明" prop="activeDesc">
  135. <a-input
  136. :disabled="state==1"
  137. v-model="form.activeDesc"
  138. allowClear
  139. :maxLength="100"
  140. placeholder="请输入抽奖说明,100字以内"
  141. type="textarea" />
  142. </a-form-model-item>
  143. </a-col>
  144. </a-row>
  145. <h3 class="form-titles">奖品设置</h3>
  146. <a-row :gutter="48">
  147. <a-col :span="12">
  148. <a-form-model-item ref="prizeClsNum" label="转盘类型" prop="prizeClsNum">
  149. <a-select style="width: 300px;" :disabled="participantsNum>0||state==1" @change="zpTypeChange" v-model="form.prizeClsNum" placeholder="请选择转盘类型">
  150. <a-select-option :key="6" :value="6">
  151. 六等分
  152. </a-select-option>
  153. </a-select>
  154. </a-form-model-item>
  155. </a-col>
  156. </a-row>
  157. <div style="padding: 0 35px;">
  158. <a-row
  159. type="flex"
  160. align="middle"
  161. :gutter="10"
  162. >
  163. <a-col span="1">
  164. 序号
  165. </a-col>
  166. <a-col span="3">
  167. 奖品类型
  168. </a-col>
  169. <a-col span="3">
  170. 奖品描述
  171. </a-col>
  172. <a-col span="3">
  173. 概率
  174. </a-col>
  175. <a-col span="3">
  176. 数量
  177. </a-col>
  178. <a-col span="8">
  179. 奖品图片
  180. </a-col>
  181. </a-row>
  182. <div v-if="form.luckyDrawPrizeList.length" style="height: 1px;background-color: #eee;margin: 10px 0 20px;" ></div>
  183. <a-row
  184. type="flex"
  185. align="middle"
  186. v-for="(item, index) in form.luckyDrawPrizeList"
  187. :key="index"
  188. v-if="form.luckyDrawPrizeList.length"
  189. :gutter="10"
  190. >
  191. <a-col span="1">
  192. <a-form-model-item
  193. :label-col=" { span: 0 }"
  194. :wrapper-col=" { span: 24 }"
  195. >
  196. <span class="red" v-if="state==0">*</span> 奖品{{ index+1 }}
  197. </a-form-model-item>
  198. </a-col>
  199. <a-col span="3">
  200. <a-form-model-item
  201. :label="''"
  202. :required="true"
  203. :label-col=" { span: 0 }"
  204. :wrapper-col=" { span: 24 }"
  205. :prop="'luckyDrawPrizeList.' + index + '.prizeType'"
  206. :rules="{
  207. required: true,
  208. message: '请选择奖品类型',
  209. trigger: ['blur','change'],
  210. }"
  211. >
  212. <a-select
  213. :disabled="participantsNum>0||state==1"
  214. :id="'jpList-prizeType'+index"
  215. style="width: 100%;"
  216. v-model="item.prizeType"
  217. @change="res => {
  218. item.prizeDesc = ''
  219. item.isPrizeLimit = item.prizeType == 'NONE' ? 0 : undefined
  220. }"
  221. placeholder="请选择奖品类型">
  222. <a-select-option
  223. v-for="item in $refs.jpType.getOptionDatas()"
  224. :key="item.code"
  225. :value="item.code">{{ item.dispName }}</a-select-option>
  226. </a-select>
  227. </a-form-model-item>
  228. </a-col>
  229. <a-col span="3">
  230. <a-form-model-item
  231. :label="''"
  232. :required="true"
  233. :label-col=" { span: 0 }"
  234. :wrapper-col=" { span: 24 }"
  235. :prop="'luckyDrawPrizeList.' + index + '.prizeDesc'"
  236. :rules="{
  237. required: true,
  238. message: '请输入奖品名称',
  239. trigger: ['blur','change'],
  240. }"
  241. >
  242. <a-input
  243. :disabled="participantsNum>0||state==1"
  244. v-if="item.prizeType !== 'GOLD'"
  245. :id="'jpList-name'+index"
  246. style="width: 100%;"
  247. v-model="item.prizeDesc"
  248. :maxLength="10"
  249. placeholder="请输入奖品名称,10个字以内"/>
  250. <a-input-number
  251. v-else
  252. :disabled="participantsNum>0||state==1"
  253. style="width: 100%;"
  254. :id="'jpList-name'+index"
  255. v-model="item.prizeDesc"
  256. :min="0"
  257. :max="999999"
  258. :precision="0"
  259. placeholder="请输入乐豆数量"
  260. allowClear />
  261. </a-form-model-item>
  262. </a-col>
  263. <a-col span="3">
  264. <a-form-model-item
  265. :label="''"
  266. :required="true"
  267. :label-col=" { span: 0 }"
  268. :wrapper-col=" { span: 24 }"
  269. :prop="'luckyDrawPrizeList.' + index + '.prizeRate'"
  270. :rules="{
  271. required: true,
  272. message: '请输入中奖概率',
  273. trigger: ['blur','change'],
  274. }"
  275. >
  276. <a-input-number
  277. style="width: 100%;"
  278. :disabled="state==1"
  279. :id="'jpList-prizeRate'+index"
  280. v-model="item.prizeRate"
  281. :min="0"
  282. :max="100"
  283. :precision="4"
  284. placeholder="请输入中奖概率(%)"
  285. allowClear />
  286. </a-form-model-item>
  287. </a-col>
  288. <a-col span="3" v-if="item.prizeType!='NONE'">
  289. <a-form-model-item
  290. :label="''"
  291. :required="true"
  292. :label-col=" { span: 0 }"
  293. :wrapper-col=" { span: 24 }"
  294. :prop="'luckyDrawPrizeList.' + index + '.prizeNum'"
  295. :rules="{
  296. required: true,
  297. message: '请输入奖品数量',
  298. trigger: ['blur','change'],
  299. }"
  300. >
  301. <a-input-number
  302. style="width: 100%;"
  303. :disabled="state==1"
  304. :id="'jpList-prizeNum'+index"
  305. v-model="item.prizeNum"
  306. :min="0"
  307. :max="999999"
  308. :precision="0"
  309. placeholder="请输入奖品数量"
  310. allowClear />
  311. </a-form-model-item>
  312. </a-col>
  313. <a-col span="8">
  314. <a-form-model-item
  315. :label="''"
  316. :label-col=" { span: 0 }"
  317. :wrapper-col=" { span: 24 }"
  318. :prop="'luckyDrawPrizeList.' + index + '.prizeImage'"
  319. >
  320. <Upload
  321. :ref="'prizeImage'+index"
  322. :disabled="participantsNum>0||state==1"
  323. :id="'jpList-prizeImage'+index"
  324. v-model="item.prizeImage"
  325. :fileSize="0.25"
  326. listType="picture-card">
  327. </Upload>
  328. <span class="upload-desc">请上传奖品图片,300*300px,0.25MB 以内。</span>
  329. </a-form-model-item>
  330. </a-col>
  331. </a-row>
  332. </div>
  333. <div v-if="form.luckyDrawPrizeList.length" style="height: 1px;background-color: #eee;margin-bottom: 20px;" ></div>
  334. <a-row :gutter="48" v-if="form.luckyDrawPrizeList.length">
  335. <!-- <a-col :span="12">
  336. <div class="form-item">
  337. <div style="margin-right: 10px;">中奖限制:</div>
  338. <a-select
  339. mode="multiple"
  340. :disabled="state==1"
  341. style="width: 80%;"
  342. @change="zjxzChange"
  343. v-model="form.zjXz"
  344. placeholder="请选择中奖限制">
  345. <a-select-option
  346. v-for="item in zjXz"
  347. :key="item.code"
  348. :value="item.code">{{ item.dispName }}</a-select-option>
  349. </a-select>
  350. </div>
  351. <div class="form-item" v-for="(item,index) in form.luckyDrawWinPrizeLimitList" :key="index">
  352. <a-form-model-item
  353. style="margin: 0;"
  354. :label="''"
  355. :required="true"
  356. :label-col=" { span: 0 }"
  357. :wrapper-col=" { span: 24 }"
  358. :prop="'luckyDrawWinPrizeLimitList.' + index + '.limitTimes'"
  359. :rules="{
  360. required: true,
  361. message: '请输入次数',
  362. trigger: ['blur','change'],
  363. }"
  364. >
  365. {{ index+1 }}.
  366. {{ item.winPrizeLimitCodeDictValue.split('XXX')[0] }}
  367. <a-input-number
  368. :disabled="state==1"
  369. style="width: 100px;"
  370. :id="'luckyDrawWinPrizeLimitList-limitTimes'+index"
  371. v-model="item.limitTimes"
  372. :min="1"
  373. :max="100"
  374. :precision="0"
  375. placeholder="请输入次数"
  376. allowClear />
  377. {{ item.winPrizeLimitCodeDictValue.split('XXX')[1] }}
  378. </a-form-model-item>
  379. </div>
  380. </a-col> -->
  381. <a-col :span="12">
  382. <div class="form-item">
  383. <div style="margin-right: 10px;">赠送抽奖次数规则:</div>
  384. <a-select
  385. mode="multiple"
  386. :disabled="state==1"
  387. style="width: 70%;"
  388. @change="cjGzChange"
  389. v-model="form.cjGz"
  390. placeholder="请选择">
  391. <a-select-option
  392. v-for="item in cjGz"
  393. :key="item.code"
  394. :value="item.code">{{ item.dispName }}</a-select-option>
  395. </a-select>
  396. </div>
  397. <div class="form-item" v-for="(item,index) in form.luckyDrawTaskList" :key="index">
  398. <a-form-model-item
  399. style="margin: 0;"
  400. :label="''"
  401. :required="true"
  402. :label-col=" { span: 0 }"
  403. :wrapper-col=" { span: 24 }"
  404. :prop="'luckyDrawTaskList.' + index + '.giveTimes'"
  405. :rules="{
  406. required: true,
  407. message: '请输入次数',
  408. trigger: ['blur','change'],
  409. }"
  410. >
  411. {{ index+1 }}.
  412. {{ item.taskCodeDictValue }}, 赠送
  413. <a-input-number
  414. :disabled="state==1"
  415. style="width: 100px;"
  416. :id="'luckyDrawTaskList-giveTimes'+index"
  417. v-model="item.giveTimes"
  418. :min="1"
  419. :max="999999"
  420. :precision="0"
  421. placeholder="请输入次数"
  422. allowClear />
  423. </a-form-model-item>
  424. </div>
  425. </a-col>
  426. </a-row>
  427. <div class="form-item" style="justify-content:center;padding: 50px 20px 20px;">
  428. <a-button type="primary" :loading="loading" @click="onSubmit" v-if="state==0">
  429. 保存
  430. </a-button>
  431. <a-button style="margin-left: 10px;" @click="cansel">
  432. {{ state==1?'关闭':'取消' }}
  433. </a-button>
  434. </div>
  435. </a-form-model>
  436. </a-modal>
  437. </div>
  438. </template>
  439. <script>
  440. import { VSelect, Upload } from '@/components'
  441. import { saveLuckyDrawConfig, getLuckyDrawDetail } from '@/api/luckyDraw.js'
  442. import moment from 'moment'
  443. export default {
  444. name: 'AddlotterySetModal',
  445. components: {
  446. VSelect,
  447. Upload
  448. },
  449. props: {
  450. showEditModal: {
  451. type: Boolean,
  452. default: false
  453. },
  454. itemId: {
  455. type: String,
  456. default: ''
  457. }
  458. },
  459. data () {
  460. return {
  461. loading: false,
  462. isShow: this.showEditModal,
  463. titleText: '活动',
  464. formLayout: 'horizontal',
  465. labelCol: { span: 4 },
  466. wrapperCol: { span: 14 },
  467. state: 0, // 活动状态
  468. participantsNum: 0, // 抽奖参与人数
  469. taskParticipantsNum: 0,
  470. form: {
  471. activeName: '', // 活动名称
  472. time: [],
  473. activeStartTime: '', // 活动开始时间
  474. activeEndTime: '', // 活动结束时间
  475. peopleLimitCount: '', // 活动人数限制
  476. isPeopleLimit: true, // 不限人数
  477. purchaseTimesGold: '', // 购买抽奖次数金币数
  478. prizeDesc: '', // 奖品说明
  479. activeLimitDesc: '', // 活动条件说明
  480. activeDesc: '', // 抽奖说明
  481. prizeClsNum: undefined, // 转盘类型
  482. luckyDrawPrizeList: [], // 奖品列表
  483. zjXz: undefined,
  484. luckyDrawWinPrizeLimitList: [], // 中奖限制
  485. cjGz: undefined,
  486. luckyDrawTaskList: [] // 赠送抽奖规则
  487. },
  488. zjXz: [], // 中奖限制列表
  489. cjGz: [], // 赠送规则列表
  490. rules: {},
  491. gvHj: 0 // 概率合计
  492. }
  493. },
  494. methods: {
  495. // 不可选日期
  496. disabledDate (current, dateStrings) {
  497. return current && current < moment().subtract(1, 'days').endOf('day')
  498. },
  499. // 不限人次
  500. bxCjRcChange (e) {
  501. console.log(e)
  502. if (e.target.checked) {
  503. this.form.peopleLimitCount = ''
  504. this.$refs.ruleForm.clearValidate('peopleLimitCount')
  505. }
  506. },
  507. // 选择转盘类型
  508. zpTypeChange (val) {
  509. console.log(val)
  510. this.form.luckyDrawPrizeList = []
  511. for (let i = 0; i < val; i++) {
  512. this.form.luckyDrawPrizeList.push({
  513. prizeType: undefined,
  514. prizeDesc: '',
  515. isPrizeLimit: undefined,
  516. prizeRate: '',
  517. prizeNum: '',
  518. prizeImage: ''
  519. })
  520. }
  521. this.$refs.ruleForm.clearValidate()
  522. },
  523. // 中奖限制
  524. zjxzChange (val) {
  525. console.log(val)
  526. this.form.luckyDrawWinPrizeLimitList = []
  527. this.form.zjXz && this.form.zjXz.map(item => {
  528. const row = this.zjXz.find(k => k.code == item)
  529. this.form.luckyDrawWinPrizeLimitList.push({
  530. winPrizeLimitCode: item,
  531. winPrizeLimitCodeDictValue: row.dispName,
  532. limitTimes: ''
  533. })
  534. })
  535. },
  536. // 抽奖规则
  537. cjGzChange (val) {
  538. console.log(val)
  539. this.form.luckyDrawTaskList = []
  540. this.form.cjGz && this.form.cjGz.map(item => {
  541. const row = this.cjGz.find(k => k.code == item)
  542. this.form.luckyDrawTaskList.push({
  543. taskCode: item,
  544. taskCodeDictValue: row.dispName,
  545. giveTimes: ''
  546. })
  547. })
  548. },
  549. // 保存
  550. onSubmit () {
  551. this.$refs.ruleForm.validate(valid => {
  552. if (valid) {
  553. console.log('valid submit!!')
  554. const formData = JSON.parse(JSON.stringify(this.form))
  555. formData.activeStartTime = moment(this.form.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  556. formData.activeEndTime = moment(this.form.time[1]).format('YYYY-MM-DD') + ' 00:00:00'
  557. formData.isPeopleLimit = this.form.isPeopleLimit ? 1 : 0
  558. // 中奖概率之和必需是100
  559. let gv = 0
  560. formData.luckyDrawPrizeList.map(item => {
  561. gv = gv + Number(item.prizeRate)
  562. // 限制中奖
  563. if (item.isPrizeLimit == 1) {
  564. item.prizeNum = item.prizeNum || 0
  565. item.prizeRate = item.prizeRate || 0
  566. }
  567. if (item.prizeType == 'NONE') {
  568. item.prizeNum = 1
  569. }
  570. })
  571. console.log(gv.toFixed(0), '奖品概率之和')
  572. if (gv.toFixed(0) != 100) {
  573. this.$message.warning('奖品概率之和必需是100')
  574. return
  575. }
  576. // 提交数据
  577. this.submitFormData(formData)
  578. } else {
  579. console.log('error submit!!')
  580. return false
  581. }
  582. })
  583. },
  584. submitFormData (formData) {
  585. this.loading = true
  586. saveLuckyDrawConfig(formData).then(res => {
  587. console.log(res, 'submitFormData')
  588. if (res.status == 200) {
  589. this.$message.info(res.message)
  590. this.cansel()
  591. } else {
  592. // this.$message.warning(res.message)
  593. }
  594. this.loading = false
  595. })
  596. },
  597. // 获取明细数据
  598. getDetail (id) {
  599. getLuckyDrawDetail({ id: id }).then(res => {
  600. if (res.status == 200) {
  601. this.participantsNum = res.data.participantsNum
  602. this.taskParticipantsNum = res.data.taskParticipantsNum
  603. this.state = res.data.state
  604. this.titleText = this.state == 1 ? '查看活动' : '编辑活动'
  605. if (this.state == 1) {
  606. this.rules = this.getRules(false)
  607. }
  608. res.data.luckyDrawPrizeList.map((item, index) => {
  609. if (!item.hasOwnProperty('prizeRate')) {
  610. item.prizeRate = ''
  611. }
  612. if (!item.hasOwnProperty('prizeNum')) {
  613. item.prizeNum = ''
  614. }
  615. if (this.participantsNum <= 0) {
  616. delete item.id
  617. }
  618. })
  619. this.form = Object.assign({}, this.form, res.data)
  620. this.form.isPeopleLimit = this.form.isPeopleLimit == 1
  621. this.form.time = [moment(this.form.activeStartTime), moment(this.form.activeEndTime)]
  622. this.form.zjXz = this.getGzVal(this.form.luckyDrawWinPrizeLimitList, 0)
  623. this.form.cjGz = this.getGzVal(this.form.luckyDrawTaskList, 1)
  624. console.log(this.form.luckyDrawPrizeList)
  625. // 回显图片
  626. const _this = this
  627. setTimeout(() => {
  628. _this.form.luckyDrawPrizeList.map((item, index) => {
  629. _this.$refs[`prizeImage${index}`][0].setFileList(item.prizeImage)
  630. item.isPrizeLimit = Number(item.isPrizeLimit)
  631. })
  632. }, 500)
  633. }
  634. })
  635. },
  636. getRules (required) {
  637. return {
  638. activeName: [{ required: required, message: '请输入活动名称', trigger: ['blur', 'change'] }],
  639. time: [{ required: required, message: '请选择活动时间', trigger: ['blur', 'change'] }],
  640. purchaseTimesGold: [{ required: required, message: '请输入付费抽奖规则', trigger: ['blur', 'change'] }],
  641. prizeDesc: [{ required: required, message: '请输入奖品说明', trigger: ['blur', 'change'] }],
  642. activeLimitDesc: [{ required: required, message: '请输入抽奖条件', trigger: ['blur', 'change'] }],
  643. activeDesc: [{ required: required, message: '请输入抽奖说明', trigger: ['blur', 'change'] }],
  644. prizeClsNum: [{ required: required, message: '请选择转盘类型', trigger: ['blur', 'change'] }]
  645. }
  646. },
  647. getGzVal (data, type) {
  648. const arr = []
  649. data.map(item => {
  650. arr.push(type == 1 ? item.taskCode : item.winPrizeLimitCode)
  651. })
  652. return arr
  653. },
  654. // 取消
  655. cansel () {
  656. this.isShow = false
  657. this.participantsNum = 0
  658. this.taskParticipantsNum = 0
  659. this.state = 0
  660. this.form.isPeopleLimit = false
  661. this.form.luckyDrawPrizeList = []
  662. this.form.luckyDrawTaskList = []
  663. this.form.luckyDrawWinPrizeLimitList = []
  664. this.form.zjXz = []
  665. this.form.cjGz = []
  666. if (this.form.id) {
  667. delete this.form.id
  668. }
  669. this.rules = this.getRules(true)
  670. }
  671. },
  672. created () {
  673. this.$nextTick(() => {
  674. setTimeout(() => {
  675. this.zjXz = this.$refs.zjXzType.getOptionDatas()
  676. this.cjGz = this.$refs.zsGzType.getOptionDatas()
  677. this.rules = this.getRules(true)
  678. }, 500)
  679. })
  680. },
  681. watch: {
  682. showEditModal (newValue, oldValue) {
  683. this.isShow = newValue
  684. },
  685. isShow (val) {
  686. if (!val) {
  687. this.$emit('close')
  688. } else {
  689. this.$nextTick(() => {
  690. this.$refs.ruleForm.resetFields()
  691. })
  692. }
  693. },
  694. itemId (newValue, oldValue) {
  695. if (newValue && this.isShow) {
  696. this.getDetail(newValue)
  697. } else {
  698. this.titleText = '新增活动'
  699. }
  700. }
  701. }
  702. }
  703. </script>
  704. <style lang="less">
  705. .addLottery-modal{
  706. .ant-modal-body{
  707. padding: 15px 25px;
  708. height: 600px;
  709. overflow: auto;
  710. .upload-file .ant-upload.ant-upload-select-picture-card, .upload-file .ant-upload-list-picture-card .ant-upload-list-item{
  711. width: 40px;
  712. height: 40px;
  713. }
  714. .upload-file .ant-upload-list-picture-card-container{
  715. width: 40px;
  716. height: 40px;
  717. }
  718. .upload-file{
  719. height: 40px!important;
  720. }
  721. .upload-file .ant-upload-select-picture-card i{
  722. font-size: 16px;
  723. margin-top: 10px;
  724. }
  725. .ant-upload.ant-upload-select-picture-card > .ant-upload{
  726. padding: 0;
  727. }
  728. .upload-file .ant-upload.ant-upload-select-picture-card, .upload-file .ant-upload-list-picture-card .ant-upload-list-item{
  729. padding: 0;
  730. }
  731. }
  732. .ant-input[disabled]{
  733. background: #F8F8F8;
  734. color: #666;
  735. }
  736. .ant-input-disabled,.ant-select-disabled .ant-select-selection,.ant-input-number-disabled{
  737. background: #F8F8F8;
  738. color: #666;
  739. }
  740. .form-titles{
  741. border-bottom: 1px solid #eee;
  742. padding-bottom: 10px;
  743. margin-bottom: 20px;
  744. }
  745. .form-item{
  746. display: flex;
  747. align-items: center;
  748. padding: 5px;
  749. }
  750. .upload-desc{
  751. font-size: 12px;
  752. margin-left: 10px;
  753. }
  754. .red{
  755. color: red;
  756. }
  757. }
  758. </style>