liveLotteryConf.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="直播间ID" prop="liveId">
  5. <el-input
  6. v-model="queryParams.liveId"
  7. placeholder="请输入直播间ID"
  8. clearable
  9. size="small"
  10. :disabled="canLiveId"
  11. @keyup.enter.native="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item label="参与方式" prop="require">
  15. <el-select v-model="queryParams.require" placeholder="请输入参与抽奖方式">
  16. <el-option v-for="(item,index) in requireOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="抽奖状态" prop="require">
  20. <el-select v-model="queryParams.lotteryStatus" placeholder="请输入参与抽奖方式">
  21. <el-option v-for="(item,index) in lotteryStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="抽奖标题" prop="desc">
  25. <el-input
  26. v-model="queryParams.desc"
  27. placeholder="请输入描述"
  28. clearable
  29. size="small"
  30. @keyup.enter.native="handleQuery"
  31. />
  32. </el-form-item>
  33. <el-form-item label="创建日期" prop="createTime">
  34. <el-date-picker clearable size="small"
  35. v-model="queryParams.createTime"
  36. type="date"
  37. value-format="yyyy-MM-dd"
  38. placeholder="选择创建日期">
  39. </el-date-picker>
  40. </el-form-item>
  41. <el-form-item>
  42. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  43. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  44. </el-form-item>
  45. </el-form>
  46. <el-row :gutter="10" class="mb8">
  47. <el-col :span="1.5">
  48. <el-button
  49. type="primary"
  50. plain
  51. icon="el-icon-plus"
  52. size="mini"
  53. @click="handleAdd"
  54. v-hasPermi="['live:liveLotteryConf:add']"
  55. >新增</el-button>
  56. </el-col>
  57. <el-col :span="1.5">
  58. <el-button
  59. type="success"
  60. plain
  61. icon="el-icon-edit"
  62. size="mini"
  63. :disabled="single"
  64. @click="handleUpdate"
  65. v-hasPermi="['live:liveLotteryConf:edit']"
  66. >修改</el-button>
  67. </el-col>
  68. <!-- <el-col :span="1.5">
  69. <el-button
  70. type="danger"
  71. plain
  72. icon="el-icon-delete"
  73. size="mini"
  74. :disabled="multiple"
  75. @click="handleDelete"
  76. v-hasPermi="['live:liveLotteryConf:remove']"
  77. >删除</el-button>
  78. </el-col>-->
  79. <el-col :span="1.5">
  80. <el-button
  81. type="warning"
  82. plain
  83. icon="el-icon-download"
  84. size="mini"
  85. :loading="exportLoading"
  86. @click="handleExport"
  87. v-hasPermi="['live:liveLotteryConf:export']"
  88. >导出</el-button>
  89. </el-col>
  90. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  91. </el-row>
  92. <el-table border v-loading="loading" :data="liveLotteryConfList" @selection-change="handleSelectionChange">
  93. <el-table-column type="selection" width="55" align="center" />
  94. <el-table-column label="抽奖ID" align="center" prop="lotteryId" />
  95. <el-table-column label="操作商品" align="center" class-name="small-padding fixed-width">
  96. <template slot-scope="scope">
  97. <el-button v-if="scope.row.lotteryStatus+'' === '0'" @click="handleUpdateProduct(scope.row)">编辑商品</el-button>
  98. <el-button v-else @click="handleDetailProduct(scope.row)">查看商品</el-button>
  99. </template>
  100. </el-table-column>
  101. <el-table-column label="直播间ID" align="center" prop="liveId" />
  102. <el-table-column label="参与方式" align="center" prop="require" :formatter="requireFormatter"/>
  103. <el-table-column label="抽奖状态" align="center" prop="lotteryStatus" :formatter="lotteryStatusFormatter"/>
  104. <el-table-column label="配置" align="center" prop="requireConf" />
  105. <el-table-column label="持续时间" align="center" prop="duration" />
  106. <el-table-column label="抽奖标题" align="center" prop="desc" />
  107. <el-table-column label="创建日期" align="center" prop="createTime" width="180">
  108. <template slot-scope="scope">
  109. <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  113. <template slot-scope="scope">
  114. <el-button
  115. size="mini"
  116. type="text"
  117. icon="el-icon-edit"
  118. @click="handleUpdate(scope.row)"
  119. v-hasPermi="['live:liveLotteryConf:edit']"
  120. style="margin-left: 10px"
  121. >修改</el-button>
  122. <!-- 开始 -->
  123. <el-button
  124. size="mini"
  125. type="text"
  126. icon="el-icon-delete"
  127. @click="handleStatusChange(scope.row,'1')"
  128. v-hasPermi="['live:liveLotteryConf:edit']"
  129. >开始</el-button>
  130. <!-- 暂停 -->
  131. <el-button
  132. size="mini"
  133. type="text"
  134. icon="el-icon-delete"
  135. @click="handleStatusChange(scope.row,'3')"
  136. v-hasPermi="['live:liveLotteryConf:edit']"
  137. >暂停</el-button>
  138. <!-- 结算 -->
  139. <el-button
  140. size="mini"
  141. type="text"
  142. icon="el-icon-delete"
  143. @click="handleStatusChange(scope.row,'2')"
  144. v-hasPermi="['live:liveLotteryConf:edit']"
  145. >结算</el-button>
  146. <el-button
  147. size="mini"
  148. type="text"
  149. icon="el-icon-delete"
  150. @click="handleDelete(scope.row)"
  151. v-hasPermi="['live:liveLotteryConf:edit']"
  152. >删除</el-button>
  153. </template>
  154. </el-table-column>
  155. </el-table>
  156. <pagination
  157. v-show="total>0"
  158. :total="total"
  159. :page.sync="queryParams.pageNum"
  160. :limit.sync="queryParams.pageSize"
  161. @pagination="getList"
  162. />
  163. <!-- 添加或修改直播抽奖配置对话框 -->
  164. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  165. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  166. <el-form-item label="直播间ID" prop="liveId">
  167. <el-input v-model="form.liveId" placeholder="请输入直播间ID"
  168. :disabled="canLiveId"/>
  169. </el-form-item>
  170. <el-form-item label="参与方式" prop="require">
  171. <el-select v-model="form.require" placeholder="请输入参与抽奖方式">
  172. <el-option v-for="(item,index) in requireOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  173. </el-select>
  174. </el-form-item>
  175. <!-- <el-form-item label="方式配置" prop="requireConf">-->
  176. <!-- <el-input v-model="form.requireConf" placeholder="请输入参与抽奖方式" />-->
  177. <!-- <span style="margin-bottom:10px;font-size: 10px; font-family: Arial,serif">当参与方式选择为“送礼参与”或“下单参与”时,此处填写商品ID及数量</span>-->
  178. <!-- </el-form-item>-->
  179. <el-form-item label="持续时间" prop="duration" style="margin-top: 50px;">
  180. <el-input v-model="form.duration" placeholder="请输入持续时间 单位:分" />
  181. </el-form-item>
  182. <el-form-item label="抽奖标题" prop="desc">
  183. <el-input v-model="form.desc" placeholder="请输入描述" />
  184. </el-form-item>
  185. </el-form>
  186. <div slot="footer" class="dialog-footer">
  187. <el-button type="primary" @click="submitForm">确 定</el-button>
  188. <el-button @click="cancel">取 消</el-button>
  189. </div>
  190. </el-dialog>
  191. <el-dialog :title="titleProduct" :visible.sync="openProduct" width="800px" append-to-body>
  192. <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px" :disabled="isDetail">
  193. <!-- 基础信息 -->
  194. <el-row :gutter="20">
  195. <el-col :span="12">
  196. <el-form-item label="抽奖ID" prop="lotteryId">
  197. <el-input v-model="form1.lotteryId" placeholder="请输入抽奖ID" />
  198. </el-form-item>
  199. </el-col>
  200. <el-col :span="12">
  201. <!-- <el-form-item label="直播间ID" prop="liveId">
  202. <el-input v-model="form1.liveId" placeholder="请输入直播间ID" />
  203. </el-form-item>-->
  204. </el-col>
  205. </el-row>
  206. <!-- 动态奖品配置 -->
  207. <el-divider content-position="left">奖品配置</el-divider>
  208. <el-card v-for="(prize, index) in form1.prizes" :key="index" class="prize-card" shadow="hover">
  209. <div slot="header" class="prize-header">
  210. <span><b>奖品等级 :{{ prize.prizeLevel }}</b></span>
  211. <el-button
  212. v-if="form1.prizes.length > 1"
  213. @click="removePrize(index)"
  214. type="danger"
  215. icon="el-icon-delete"
  216. size="mini"
  217. circle
  218. ></el-button>
  219. </div>
  220. <el-row :gutter="20">
  221. <el-col :span="12">
  222. <el-form-item
  223. label="商品名称"
  224. :prop="'prizes.' + index + '.productId'"
  225. :rules="[{ required: true, message: '请输入商品', trigger: 'blur' }]">
  226. <!-- <el-input v-model="prize.productId" placeholder="请输入商品ID" />-->
  227. <el-select
  228. v-model="prize.productId"
  229. filterable
  230. clearable
  231. remote
  232. reserve-keyword
  233. placeholder="请输入关键字搜索"
  234. :remote-method="fetchProducts"
  235. :loading="loadingProducts"
  236. size="small"
  237. style="width: 180px"
  238. >
  239. <el-option
  240. v-for="product in productOptions"
  241. :key="product.goodsId"
  242. :label="product.productName"
  243. :value="product.goodsId"
  244. />
  245. <span style="float: left">{{ product.goodsId }}</span>
  246. <span style="margin-left: 30px ;">{{product.productName}}</span>
  247. </el-select>
  248. </el-form-item>
  249. </el-col>
  250. <el-col :span="12">
  251. <el-form-item
  252. label="奖品等级"
  253. :prop="'prizes.' + index + '.prizeLevel'"
  254. :rules="[{ required: true, message: '请输入奖品等级', trigger: 'blur' }]">
  255. <el-input v-model="prize.prizeLevel" placeholder="请输入奖品等级" />
  256. </el-form-item>
  257. </el-col>
  258. </el-row>
  259. <el-row :gutter="20">
  260. <el-col :span="12">
  261. <el-form-item
  262. label="单奖数量"
  263. :prop="'prizes.' + index + '.perLotteryNum'"
  264. :rules="[
  265. { required: true, message: '请输入单次中奖数量', trigger: 'blur' },
  266. { type: 'number', message: '必须为数字值' }
  267. ]">
  268. <el-input-number
  269. v-model="prize.perLotteryNum"
  270. :min="1"
  271. :max="100"
  272. controls-position="right"
  273. placeholder="单次中奖数量" />
  274. </el-form-item>
  275. </el-col>
  276. <el-col :span="12">
  277. <el-form-item
  278. label="奖励总份数"
  279. :prop="'prizes.' + index + '.totalLots'"
  280. :rules="[
  281. { required: true, message: '请输入奖励总份数', trigger: 'blur' },
  282. { type: 'number', message: '必须为数字值' }
  283. ]">
  284. <el-input-number
  285. v-model="prize.totalLots"
  286. :min="1"
  287. controls-position="right"
  288. placeholder="奖励总份数" />
  289. </el-form-item>
  290. </el-col>
  291. </el-row>
  292. <el-row :gutter="20">
  293. <el-col :span="12">
  294. <el-form-item
  295. label="实发份数"
  296. :prop="'prizes.' + index + '.totalSend'"
  297. >
  298. <el-input-number
  299. v-model="prize.totalSend"
  300. :min="0"
  301. :max="prize.totalLots"
  302. controls-position="right"
  303. placeholder="实际发放份数"
  304. :disabled="true"/>
  305. </el-form-item>
  306. </el-col>
  307. </el-row>
  308. </el-card>
  309. <div class="add-prize-btn">
  310. <el-button
  311. @click="addPrize"
  312. type="primary"
  313. icon="el-icon-plus"
  314. plain
  315. size="small">
  316. 添加奖品配置
  317. </el-button>
  318. </div>
  319. </el-form>
  320. <div slot="footer" class="dialog-footer">
  321. <el-button @click="cancel1">取 消</el-button>
  322. <el-button type="primary" @click="submitForm1">确 定</el-button>
  323. </div>
  324. </el-dialog>
  325. </div>
  326. </template>
  327. <script>
  328. import { listLiveLotteryConf, getLiveLotteryConf, delLiveLotteryConf, addLiveLotteryConf, updateLiveLotteryConf, exportLiveLotteryConf } from "@/api/live/liveLotteryConf";
  329. import LiveLotteryProductConf from '@/views/live/liveLotteryProductConf/index.vue'
  330. import {
  331. listStoreProduct,
  332. updateLiveLotteryProductConf
  333. } from '@/api/live/liveLotteryProductConf'
  334. import { listLiveGoods } from '@/api/live/liveGoods'
  335. export default {
  336. name: "LiveLotteryConf",
  337. components: { LiveLotteryProductConf },
  338. data() {
  339. return {
  340. //字典
  341. requireOptions: [],
  342. // 抽奖状态
  343. lotteryStatusOptions: [],
  344. //加载商品
  345. loadingProducts: false,
  346. //
  347. productOptions: [],
  348. isDetail: false,
  349. canLiveId:false,
  350. //parentLiveId
  351. parentLiveId : null,
  352. liveId: null,
  353. // 遮罩层
  354. loading: true,
  355. // 导出遮罩层
  356. exportLoading: false,
  357. // 选中数组
  358. ids: [],
  359. // 非单个禁用
  360. single: true,
  361. // 非多个禁用
  362. multiple: true,
  363. // 显示搜索条件
  364. showSearch: true,
  365. // 总条数
  366. total: 0,
  367. // 直播抽奖配置表格数据
  368. liveLotteryConfList: [],
  369. // 弹出层标题
  370. title: "",
  371. titleProduct: "编辑抽奖商品",
  372. // 是否显示弹出层
  373. open: false,
  374. openProduct: false,
  375. // 查询参数
  376. queryParams: {
  377. pageNum: 1,
  378. pageSize: 10,
  379. liveId: null,
  380. require: null,
  381. desc: null,
  382. createTime: null,
  383. lotteryStatus: null
  384. },
  385. //商品信息列表
  386. productList: [],
  387. // 商品信息
  388. product: {
  389. productId: null,
  390. prizeLevel: null,
  391. perLotteryNum: null,
  392. totalLots: null,
  393. totalSend: null
  394. },
  395. // 表单参数
  396. form:{
  397. lotteryId: '',
  398. liveId: '',
  399. require: '',
  400. requireConf: '',
  401. duration: null,
  402. desc: null
  403. },
  404. // 表单参数
  405. form1: {
  406. liveId: '',
  407. lotteryId: '',
  408. prizes: [this.getDefaultPrize()]
  409. },
  410. // 表单校验
  411. rules: {
  412. liveId: [
  413. { required: true, message: "直播间ID不能为空", trigger: "blur" }
  414. ],
  415. require: [
  416. { required: true, message: "参与抽奖方式", trigger: "blur" }
  417. ],
  418. //如果require为2或3,requireConf不能为空
  419. requireConf: [
  420. { validator: this.validRequireConf,message: "当参与方式选择为“送礼参与”或“下单参与”时,对应的配置:送礼数量/指定商品Id及数量不能为空", trigger: "blur" }
  421. ],
  422. duration: [
  423. { required: true, message: "持续时间 单位:分不能为空", trigger: "blur" }
  424. ],
  425. desc: [
  426. { required: true, message: "描述不能为空", trigger: "blur" }
  427. ],
  428. },
  429. //抽奖商品表单
  430. rules1: {
  431. lotteryId: [
  432. { required: true, message: '请输入抽奖ID', trigger: 'blur' }
  433. ],
  434. liveId: [
  435. { required: true, message: '请输入直播间ID', trigger: 'blur' }
  436. ]
  437. }
  438. };
  439. },
  440. watch: {
  441. // 监听路由的 query 参数变化
  442. '$route.query': {
  443. handler(newQuery) {
  444. if (this.$route.params.liveId) {
  445. this.liveId = this.$route.params.liveId;
  446. }else {
  447. this.liveId = this.$route.query.liveId;
  448. }
  449. this.parentLiveId = this.liveId;
  450. this.queryParams.liveId = this.parentLiveId;
  451. if(this.queryParams.liveId){
  452. this.form.liveId = this.parentLiveId;
  453. //设置查询条件直播间ID不可修改
  454. this.canLiveId = true;
  455. }
  456. this.getList();
  457. },
  458. // 初始化时立即执行一次
  459. immediate: true
  460. }
  461. },
  462. created() {
  463. // 1在线观众 2下单 3送礼
  464. this.getDicts("sys_live_lottery_require").then(response => {
  465. this.requireOptions = response.data;
  466. });
  467. this.getDicts("sys_live_lottery_status").then(response => {
  468. this.lotteryStatusOptions = response.data;
  469. });
  470. if (this.$route.params.liveId) {
  471. this.liveId = this.$route.params.liveId;
  472. }else {
  473. this.liveId = this.$route.query.liveId;
  474. }
  475. this.parentLiveId = this.liveId;
  476. this.queryParams.liveId = this.parentLiveId;
  477. if(this.queryParams.liveId){
  478. this.form.liveId = this.parentLiveId;
  479. //设置查询条件直播间ID不可修改
  480. this.canLiveId = true;
  481. }
  482. this.getList();
  483. },
  484. mounted() {
  485. this.$watch(
  486. () => this.form.require,
  487. (newVal) => {
  488. this.$refs.form.validateField('requireConf');
  489. }
  490. );
  491. },
  492. methods: {
  493. async fetchProducts(query) {
  494. if (!query) {
  495. this.productOptions = [];
  496. return;
  497. }
  498. const queryParam = {
  499. liveId : this.liveId,
  500. keywords: query
  501. }
  502. this.loadingProducts = true;
  503. try {
  504. listLiveGoods(queryParam).then(response => {
  505. this.productOptions = response.rows;
  506. })
  507. } catch (err) {
  508. console.error('查询商品失败:', err);
  509. this.productOptions = [];
  510. } finally {
  511. this.loadingProducts = false;
  512. }
  513. },
  514. // 获取默认奖品配置
  515. getDefaultPrize() {
  516. return {
  517. productId: '',
  518. prizeLevel: '',
  519. perLotteryNum: 1,
  520. totalLots: 1,
  521. totalSend: 0
  522. }
  523. },
  524. // 添加奖品配置
  525. addPrize() {
  526. this.form1.prizes.push(this.getDefaultPrize())
  527. },
  528. // 删除奖品配置
  529. removePrize(index) {
  530. if (this.form1.prizes.length <= 1) {
  531. this.$message.warning('至少需要保留一个奖品配置')
  532. return
  533. }
  534. this.form1.prizes.splice(index, 1)
  535. },
  536. requireFormatter(row, column) {
  537. return this.selectDictLabel(this.requireOptions, row.require);
  538. },
  539. lotteryStatusFormatter(row, column) {
  540. return this.selectDictLabel(this.lotteryStatusOptions, row.lotteryStatus);
  541. },
  542. validRequireConf(rule, value, callback) {
  543. if(this.form.require+"" === "2" || this.form.require+"" === "3"){
  544. if(!value){
  545. callback(new Error());
  546. return false;
  547. }
  548. }
  549. callback();
  550. return true;
  551. },
  552. /** 查询直播抽奖配置列表 */
  553. getList() {
  554. this.loading = true;
  555. listLiveLotteryConf(this.queryParams).then(response => {
  556. this.liveLotteryConfList = response.rows;
  557. this.total = response.total;
  558. this.loading = false;
  559. });
  560. },
  561. // 取消按钮
  562. cancel() {
  563. this.open = false;
  564. this.reset();
  565. },
  566. // 取消
  567. cancel1() {
  568. this.openProduct = false;
  569. },
  570. // 重置表单
  571. resetForm1() {
  572. this.form1 = {
  573. lotteryId: '',
  574. liveId: '',
  575. prizes: [this.getDefaultPrize()]
  576. }
  577. },
  578. // 表单重置
  579. reset() {
  580. this.form = {
  581. lotteryId: null,
  582. liveId: null,
  583. require: null,
  584. requireConf: null,
  585. duration: null,
  586. desc: null
  587. };
  588. this.resetForm("form");
  589. this.checkParentLiveId();
  590. },
  591. /** 搜索按钮操作 */
  592. handleQuery() {
  593. this.queryParams.pageNum = 1;
  594. this.getList();
  595. },
  596. /** 重置按钮操作 */
  597. resetQuery() {
  598. this.queryParams = {
  599. pageNum: 1,
  600. pageSize: 10,
  601. liveId: null,
  602. require: null,
  603. desc: null,
  604. createTime: null,
  605. lotteryStatus: null
  606. }
  607. this.resetForm("queryForm");
  608. this.checkParentLiveId();
  609. this.handleQuery();
  610. },
  611. //判断父页面传入参数
  612. checkParentLiveId(){
  613. if(this.parentLiveId){
  614. this.form.liveId = this.parentLiveId;
  615. this.queryParams.liveId = this.parentLiveId;
  616. }
  617. },
  618. // 多选框选中数据
  619. handleSelectionChange(selection) {
  620. this.ids = selection.map(item => item.lotteryId)
  621. this.single = selection.length!==1
  622. this.multiple = !selection.length
  623. },
  624. /** 新增按钮操作 */
  625. handleAdd() {
  626. this.reset();
  627. this.open = true;
  628. this.title = "添加直播抽奖配置";
  629. },
  630. /** 修改按钮操作 */
  631. handleUpdate(row) {
  632. this.reset();
  633. const lotteryId = row.lotteryId || this.ids
  634. //只能对未开始或暂停的抽奖进行修改
  635. if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
  636. this.msgError("只能对未开始或暂停的抽奖进行修改");
  637. return;
  638. }
  639. getLiveLotteryConf(lotteryId).then(response => {
  640. this.form = response.data;
  641. this.open = true;
  642. this.title = "修改直播抽奖配置";
  643. });
  644. },
  645. /** 修改按钮操作 */
  646. handleUpdateProduct(row) {
  647. this.form1.lotteryId = row.lotteryId;
  648. //如果状态为已结束,则不能修改
  649. if(row.lotteryStatus+"" === "2"){
  650. this.msgError("已结束的抽奖不能修改");
  651. return;
  652. }
  653. this.openProduct = true;
  654. this.isDetail = false;
  655. listStoreProduct(row.lotteryId).then(response => {
  656. this.form1 = response.data;
  657. if(this.form1.prizes.length === 0)
  658. this.form1.prizes = [this.getDefaultPrize()]
  659. this.form1.liveId = row.liveId;
  660. });
  661. },
  662. /** 详情按钮操作 */
  663. handleDetailProduct(row) {
  664. this.form1.lotteryId = row.lotteryId;
  665. //如果状态为已结束,则不能修改
  666. if(row.status+"" === "2"){
  667. this.msgError("已结束的抽奖不能修改");
  668. return;
  669. }
  670. this.openProduct = true;
  671. this.isDetail = true;
  672. listStoreProduct(row.lotteryId).then(response => {
  673. this.form1 = response.data;
  674. this.form1.liveId = row.liveId;
  675. });
  676. },
  677. /** 抽奖状态修改 */
  678. handleStatusChange(row, status) {
  679. if (this.$store.state.liveWs[this.liveId] == null) {
  680. this.msgError("请从直播间进行操作!");
  681. return;
  682. }
  683. //结束的抽奖不能进行操作
  684. if(row.lotteryStatus+"" === "2"){
  685. this.msgError("已结束的抽奖不能进行操作");
  686. return;
  687. }
  688. switch (status+"") {
  689. case "1":
  690. //只能对未开启的抽奖进行操作
  691. if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
  692. this.msgError("只能对未开启或暂停的抽奖进行开始操作");
  693. return;
  694. }
  695. break;
  696. case "2":
  697. //只能对进行中或暂停的抽奖进行结算
  698. if(row.lotteryStatus+"" !== "1" && row.lotteryStatus+"" !== "3"){
  699. this.msgError("只能对进行中或暂停的抽奖进行结算");
  700. return;
  701. }
  702. break;
  703. case "3":
  704. //只能对进行中的抽奖执行暂停操作
  705. if(row.lotteryStatus+"" !== "1"){
  706. this.msgError("只能对进行中的抽奖执行暂停操作");
  707. return;
  708. }
  709. break;
  710. default:
  711. return;
  712. }
  713. const doLotteryParam = {
  714. lotteryId: row.lotteryId,
  715. lotteryStatus: status,
  716. duration: row.duration
  717. };
  718. updateLiveLotteryConf(doLotteryParam).then(response => {
  719. if(response.code === 200){
  720. const msg = {
  721. cmd: 'lottery',
  722. data: doLotteryParam
  723. };
  724. this.$store.state.liveWs[this.liveId].send(JSON.stringify(msg));
  725. this.msgSuccess("修改成功");
  726. }else{
  727. this.msgError(response.msg);
  728. }
  729. this.open = false;
  730. this.getList();
  731. });
  732. },
  733. /** 提交按钮 */
  734. submitForm() {
  735. this.$refs["form"].validate(valid => {
  736. if (valid) {
  737. if (this.form.lotteryId != null) {
  738. updateLiveLotteryConf(this.form).then(response => {
  739. this.msgSuccess("修改成功");
  740. this.open = false;
  741. this.getList();
  742. });
  743. } else {
  744. addLiveLotteryConf(this.form).then(response => {
  745. this.msgSuccess("新增成功");
  746. this.open = false;
  747. this.getList();
  748. });
  749. }
  750. }
  751. });
  752. },
  753. submitForm1() {
  754. this.$refs["form1"].validate(valid => {
  755. if (valid) {
  756. updateLiveLotteryProductConf(this.form1).then(response => {
  757. //200 成功
  758. this.msgSuccess("保存成功");
  759. this.openProduct = false;
  760. this.resetForm1();
  761. });
  762. }
  763. });
  764. },
  765. /** 删除按钮操作 */
  766. handleDelete(row) {
  767. //如果抽奖状态不为0,则不能删除
  768. if(row.lotteryStatus+"" !== "0"){
  769. this.msgError("只能删除未开始的抽奖配置");
  770. return;
  771. }
  772. const lotteryIds = row.lotteryId || this.ids;
  773. this.$confirm('是否确认删除直播抽奖配置编号为"' + lotteryIds + '"的数据项?', "警告", {
  774. confirmButtonText: "确定",
  775. cancelButtonText: "取消",
  776. type: "warning"
  777. }).then(function() {
  778. return delLiveLotteryConf(lotteryIds);
  779. }).then(() => {
  780. this.getList();
  781. this.msgSuccess("删除成功");
  782. const msg = {
  783. cmd: 'lottery',
  784. data: {
  785. lotteryId: row.lotteryId,
  786. lotteryStatus: 2,
  787. duration: row.duration
  788. }
  789. };
  790. this.$store.state.liveWs[this.liveId].send(JSON.stringify(msg));
  791. }).catch(() => {});
  792. },
  793. /** 导出按钮操作 */
  794. handleExport() {
  795. const queryParams = this.queryParams;
  796. this.$confirm('是否确认导出所有直播抽奖配置数据项?', "警告", {
  797. confirmButtonText: "确定",
  798. cancelButtonText: "取消",
  799. type: "warning"
  800. }).then(() => {
  801. this.exportLoading = true;
  802. return exportLiveLotteryConf(queryParams);
  803. }).then(response => {
  804. this.download(response.msg);
  805. this.exportLoading = false;
  806. }).catch(() => {});
  807. }
  808. }
  809. };
  810. </script>
  811. <style scoped>
  812. .prize-card {
  813. margin-bottom: 20px;
  814. }
  815. .prize-header {
  816. display: flex;
  817. justify-content: space-between;
  818. align-items: center;
  819. }
  820. .add-prize-btn {
  821. margin-top: 10px;
  822. text-align: center;
  823. }
  824. .dialog-footer {
  825. text-align: right;
  826. }
  827. </style>