直播控制台红包配置

src/views/live/liveConsole/index.vue

@@ -86,32 +86,40 @@
         </div>
       </div>
       <!-- 底部导航栏 -->
-<!--      <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-microphone" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">语音</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-video-camera" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">视频</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-share" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">分享</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-message" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">评论</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-goods" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">商品</span>-->
-<!--          </div>-->
-<!--          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">-->
-<!--            <i class="el-icon-menu" style="font-size: 20px;"></i>-->
-<!--            <span style="font-size: 12px; margin-top: 4px;">工具箱</span>-->
-<!--          </div>-->
-<!--        </div>-->
+      <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
+        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+          <i class="el-icon-microphone" style="font-size: 20px;"></i>
+          <span style="font-size: 12px; margin-top: 4px;">红包配置</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="handleClickLottery">
+          <i class="el-icon-microphone" style="font-size: 20px;"></i>
+          <span style="font-size: 12px; margin-top: 4px;">抽奖配置</span>
+        </div>
+        <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-microphone" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">语音</span>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-video-camera" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">视频</span>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-share" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">分享</span>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-message" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">评论</span>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-goods" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">商品</span>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer;">
+            <i class="el-icon-menu" style="font-size: 20px;"></i>
+            <span style="font-size: 12px; margin-top: 4px;">工具箱</span>
+          </div>
+        </div>
     </el-col>
     <!-- 直播/视频 end -->
 
@@ -183,9 +191,11 @@ import { getLivingUrl } from '@/api/live/live'
 import { listLiveMsg } from '@/api/live/liveMsg'
 import { LiveWS } from '@/utils/liveWS'
 import flvjs from 'flv.js';
+import LiveLotteryConf from '@/views/live/liveLotteryConf/index.vue'
 
 export default {
   name: "LiveConsole",
+  components: { LiveLotteryConf },
   data() {
     return {
       tabLeft: {
@@ -258,6 +268,15 @@ export default {
     }
   },
   methods: {
+    handleClickLottery(){
+      //this.$router.push('/live/liveLotteryConf/'+this.liveId);
+      this.$router.push({
+        name: 'LiveLotteryConf',
+        query: {
+          liveId: this.liveId
+        }
+      })
+    },
     getLiveUrl(){
       getLivingUrl(this.liveId).then(res=>{
         if(res.code === 200){

src/views/live/liveLotteryConf/index.vue

@@ -127,7 +127,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleStatusChange(scope.row,'1')"
-            v-hasPermi="['live:liveLotteryConf:remove']"
+            v-hasPermi="['live:liveLotteryConf:edit']"
           >开始</el-button>
           <!-- 暂停 -->
           <el-button
@@ -135,7 +135,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleStatusChange(scope.row,'3')"
-            v-hasPermi="['live:liveLotteryConf:remove']"
+            v-hasPermi="['live:liveLotteryConf:edit']"
           >暂停</el-button>
           <!-- 结算 -->
           <el-button
@@ -143,7 +143,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleStatusChange(scope.row,'2')"
-            v-hasPermi="['live:liveLotteryConf:remove']"
+            v-hasPermi="['live:liveLotteryConf:edit']"
           >结算</el-button>
 
           <el-button
@@ -151,7 +151,7 @@
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['live:liveLotteryConf:remove']"
+            v-hasPermi="['live:liveLotteryConf:edit']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -349,12 +349,6 @@ import { listLiveGoods } from '@/api/live/liveGoods'
 export default {
   name: "LiveLotteryConf",
   components: { LiveLotteryProductConf },
-  props: {
-    liveId: {
-      type: [String, Number],
-      required: false
-    }
-  },
   data() {
     return {
       //字典
@@ -368,7 +362,8 @@ export default {
       isDetail: false,
       canLiveId:false,
       //parentLiveId
-      parentLiveId : this.liveId,
+      parentLiveId : null,
+      liveId: null,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -463,6 +458,8 @@ export default {
     this.getDicts("sys_live_lottery_status").then(response => {
       this.lotteryStatusOptions = response.data;
     });
+    this.liveId = this.$route.query.liveId;
+    this.parentLiveId = this.liveId;
     this.queryParams.liveId = this.parentLiveId;
     if(this.queryParams.liveId){
       this.form.liveId = this.parentLiveId;
@@ -616,7 +613,7 @@ export default {
       this.reset();
       const lotteryId = row.lotteryId || this.ids
       //只能对未开始或暂停的抽奖进行修改
-      if(row.lotteryStatus+"" !== "0" || row.lotteryStatus+"" !== "3"){
+      if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
         this.msgError("只能对未开始或暂停的抽奖进行修改");
         return;
       }
@@ -660,18 +657,23 @@ export default {
     },
     /** 抽奖状态修改 */
     handleStatusChange(row, status) {
+      //结束的抽奖不能进行操作
+      if(row.lotteryStatus+"" === "2"){
+        this.msgError("已结束的抽奖不能进行操作");
+        return;
+      }
       switch (status+"") {
         case "1":
           //只能对未开启的抽奖进行操作
-          if(row.lotteryStatus+"" !== "0"){
-            this.msgError("只能对未开启的抽奖进行开始操作");
+          if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
+            this.msgError("只能对未开启或暂停的抽奖进行开始操作");
             return;
           }
           break;
         case "2":
-          //结束的抽奖不能进行操作
-          if(row.lotteryStatus+"" === "2"){
-            this.msgError("已结束的抽奖不能进行操作");
+          //只能对进行中或暂停的抽奖进行结算
+          if(row.lotteryStatus+"" !== "1" && row.lotteryStatus+"" !== "3"){
+            this.msgError("只能对进行中或暂停的抽奖进行结算");
             return;
           }
           break;
@@ -690,7 +692,8 @@ export default {
         lotteryStatus: status
       };
       updateLiveLotteryConf(doLotteryParam).then(response => {
-        if(response.msg === "1"){
+        if(response.code === 200){
+          sendWs("lottery",response.msg, row.lotteryId,this.liveId);
           this.msgSuccess("修改成功");
         }else{
           this.msgError(response.msg);

src/views/live/liveRedConf/index.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="红包状态 0:未发放 1:已发放 2:已结束" prop="redStatus">
-        <el-input
-          v-model="queryParams.redStatus"
-          placeholder="请输入红包状态 0:未发放 1:已发放 2:已结束"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="红包状态" prop="redStatus">
+        <el-select v-model="queryParams.redStatus" placeholder="请选择红包状态" clearable size="small">
+          <el-option v-for="(item,index) in redStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="红包类型 1:主播发起 2:事件红包" prop="redType">
-        <el-select v-model="queryParams.redType" placeholder="请选择红包类型 1:主播发起 2:事件红包" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+      <el-form-item label="红包类型" prop="redType">
+        <el-select v-model="queryParams.redType" placeholder="请选择红包类型" clearable size="small">
+          <el-option v-for="(item,index) in redTypeOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item label="直播间ID" prop="liveId" >
@@ -78,17 +74,6 @@
           v-hasPermi="['live:liveRedConf:edit']"
         >修改</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['live:liveRedConf:remove']"
-        >删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -106,26 +91,24 @@
     <el-table border v-loading="loading" :data="liveRedConfList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="红包ID" align="center" prop="redId" />
-      <el-table-column label="红包状态 0:未发放 1:已发放 2:已结束" align="center" prop="redStatus" />
+      <el-table-column label="红包状态" align="center" prop="redStatus" :formatter="redStatusFormatter"/>
       <el-table-column label="有效时间 单位：分" align="center" prop="duration" />
-      <el-table-column label="红包类型 1:主播发起 2:事件红包" align="center" prop="redType" />
+      <el-table-column label="红包类型" align="center" prop="redType" :formatter="redTypeFormatter"/>
       <el-table-column label="直播间ID" align="center" prop="liveId" />
-      <el-table-column label="红包数量" align="center" prop="redNum" />
+      <el-table-column label="芳华币数量" align="center" prop="redNum" />
       <el-table-column label="可中奖份量" align="center" prop="totalLots" />
       <el-table-column label="实际发放奖励份量" align="center" prop="totalSend" />
       <el-table-column label="红包标题" align="center" prop="desc" />
-      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
+      <el-table-column label="创建日期" align="center" prop="createTime" width="120">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="修改日期" align="center" prop="updateTime" width="180">
+      <el-table-column label="修改日期" align="center" prop="updateTime" width="120">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="修改人" align="center" prop="updateBy" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -134,13 +117,39 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['live:liveRedConf:edit']"
+            style="margin-left: 10px"
           >修改</el-button>
+          <!-- 开始 -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleStatusChange(scope.row,'1')"
+            v-hasPermi="['live:liveRedConf:edit']"
+          >开始</el-button>
+          <!-- 暂停 -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleStatusChange(scope.row,'3')"
+            v-hasPermi="['live:liveRedConf:edit']"
+          >暂停</el-button>
+          <!-- 结算 -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleStatusChange(scope.row,'2')"
+            v-hasPermi="['live:liveRedConf:edit']"
+          >结算</el-button>
+
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['live:liveRedConf:remove']"
+            v-hasPermi="['live:liveRedConf:edit']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -157,19 +166,19 @@
     <!-- 添加或修改直播红包记录配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="持续时间 单位：分" prop="duration">
+        <el-form-item label="持续时间" prop="duration">
           <el-input v-model="form.duration" placeholder="请输入红包有效时间 单位：分" />
         </el-form-item>
-        <el-form-item label="红包类型 1:直播发起 2:事件红包" prop="redType">
-          <el-select v-model="form.redType" placeholder="请选择红包类型 1:主播发起 2:事件红包">
-            <el-option label="请选择字典生成" value="" />
+<!--        <el-form-item label="红包类型" prop="redType">
+          <el-select v-model="form.redType" placeholder="请选择红包类型">
+            <el-option v-for="(item,index) in redTypeOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
           </el-select>
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="直播间ID" prop="liveId">
           <el-input v-model="form.liveId" placeholder="请输入直播间ID" :disabled="canLiveId"/>
         </el-form-item>
-        <el-form-item label="红包数量" prop="redNum">
-          <el-input v-model="form.redNum" placeholder="请输入红包数量" />
+        <el-form-item label="芳华币数" prop="redNum">
+          <el-input v-model="form.redNum" placeholder="请输入芳华币数量" />
         </el-form-item>
         <el-form-item label="中奖份量" prop="totalLots">
           <el-input v-model="form.totalLots" placeholder="请输入可中奖份量" />
@@ -191,14 +200,11 @@ import { listLiveRedConf, getLiveRedConf, delLiveRedConf, addLiveRedConf, update
 
 export default {
   name: "LiveRedConf",
-  props: {
-    liveId: {
-      type: [String, Number],
-      required: false
-    }
-  },
   data() {
     return {
+      //字典
+      redStatusOptions: [],
+      redTypeOptions: [],
       canLiveId:false,
       //parentLiveId
       parentLiveId : this.liveId,
@@ -240,14 +246,14 @@ export default {
         duration: [
           { required: true, message: "有效时间 单位：分不能为空", trigger: "blur" }
         ],
-        redType: [
-          { required: true, message: "红包类型 1:主播发起 2:事件红包不能为空", trigger: "change" }
-        ],
+        /* redType: [
+          { required: true, message: "红包类型不能为空", trigger: "change" }
+        ], */
         liveId: [
           { required: true, message: "直播间ID不能为空", trigger: "blur" }
         ],
         redNum: [
-          { required: true, message: "红包数量不能为空", trigger: "blur" }
+          { required: true, message: "芳华币数量不能为空", trigger: "blur" }
         ],
         totalLots: [
           { required: true, message: "可中奖份量不能为空", trigger: "blur" }
@@ -259,6 +265,12 @@ export default {
     };
   },
   created() {
+    this.getDicts("sys_live_red_status").then(response => {
+      this.redStatusOptions = response.data;
+    });
+    this.getDicts("sys_live_red_type").then(response => {
+      this.redTypeOptions = response.data;
+    });
     this.queryParams.liveId = this.parentLiveId;
     if(this.queryParams.liveId){
       this.form.liveId = this.parentLiveId;
@@ -267,7 +279,64 @@ export default {
     }
     this.getList();
   },
+  computed: {
+    liveId() {
+      return this.$route.params.liveId;
+    }
+  },
   methods: {
+    handleStatusChange(row, status) {
+      //结束的抽奖不能进行操作
+      if(row.redStatus+"" === "2"){
+        this.msgError("已结束的红包不能进行操作");
+        return;
+      }
+      switch (status+"") {
+        case "1":
+          //只能对未开启的抽奖进行操作
+          if(row.redStatus+"" !== "0" && row.redStatus+"" !== "3"){
+            this.msgError("只能对未开启或暂停的红包进行开始操作");
+            return;
+          }
+          break;
+        case "2":
+          //只能对进行中或暂停的红包进行结算
+          if(row.redStatus+"" !== "1" && row.redStatus+"" !== "3"){
+            this.msgError("只能对进行中或暂停的红包进行结算");
+            return;
+          }
+          break;
+        case "3":
+          //只能对进行中的抽奖执行暂停操作
+          if(row.redStatus+"" !== "1"){
+            this.msgError("只能对进行中的红包执行暂停操作");
+            return;
+          }
+          break;
+        default:
+          return;
+      }
+      const doRedParam = {
+        redId: row.redId,
+        redStatus: status
+      };
+      updateLiveRedConf(doRedParam).then(response => {
+        if(response.code === 200){
+          sendWs("red",response.msg, row.redId,this.liveId);
+          this.msgSuccess("修改成功");
+        }else{
+          this.msgError(response.msg);
+        }
+        this.open = false;
+        this.getList();
+      });
+    },
+    redStatusFormatter(row, column) {
+      return this.selectDictLabel(this.redStatusOptions, row.redStatus);
+    },
+    redTypeFormatter(row, column) {
+      return this.selectDictLabel(this.redTypeOptions, row.redType);
+    },
     /** 查询直播红包记录配置列表 */
     getList() {
       this.loading = true;
@@ -288,7 +357,7 @@ export default {
         redId: null,
         redStatus: null,
         duration: null,
-        redType: null,
+        //redType: null,
         liveId: null,
         redNum: null,
         totalLots: null,
@@ -334,6 +403,11 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      //只能对未开始或暂停的抽奖进行修改
+      if(row.redStatus+"" !== "0" && row.redStatus+"" !== "3"){
+        this.msgError("只能对未开始或暂停的红包进行修改");
+        return;
+      }
       this.reset();
       const redId = row.redId || this.ids
       getLiveRedConf(redId).then(response => {
@@ -353,6 +427,7 @@ export default {
               this.getList();
             });
           } else {
+            this.form.redType = 1;
             addLiveRedConf(this.form).then(response => {
               this.msgSuccess("新增成功");
               this.open = false;
@@ -364,6 +439,11 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
+      //如果状态不为0，则不能删除
+      if (row.redStatus+"" !== "0") {
+        this.msgError("只能删除未发放的红包");
+        return;
+      }
       const redIds = row.redId || this.ids;
       this.$confirm('是否确认删除直播红包记录配置编号为"' + redIds + '"的数据项?', "警告", {
           confirmButtonText: "确定",