addlotterySetModal.vue 25 KB

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