直播 奖励设置 回放时按照时间范围 设置奖励

src/views/live/liveConfig/watchReward.vue

@@ -104,14 +104,36 @@
         </div>
 
         <div v-if="watchRewardForm.participateCondition === '3'">
-          <div class="section-title">录播积分设置</div>
-          <!-- 积分值 -->
-          <el-form-item label="积分值" prop="scoreAmount">
-            <el-input
-              v-model="watchRewardForm.scoreAmount"
-              placeholder="请输入积分值"                style="width: 300px;"
-            ></el-input>
+          <div class="section-title">录播奖励设置</div>
+          <!-- 是否录播可领取奖励 -->
+          <el-form-item label="录播可领取奖励">
+            <el-switch v-model="watchRewardForm.recordRedPacketEnabled"></el-switch>
           </el-form-item>
+          <!-- 录播奖励配置列表 -->
+          <div v-if="watchRewardForm.recordRedPacketEnabled">
+            <div v-for="(item, index) in watchRewardForm.recordTimeRanges" :key="index" class="record-reward-item">
+              <el-time-picker
+                is-range
+                v-model="item.range"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                format="HH:mm"
+                value-format="HH:mm"
+                style="width: 280px;"
+                @change="onTimeRangeChange(index)"
+              ></el-time-picker>
+              <el-radio-group v-model="item.rewardType" style="margin-left: 15px;">
+                <el-radio label="1">红包</el-radio>
+                <el-radio label="2">积分</el-radio>
+              </el-radio-group>
+              <el-input-number v-if="item.rewardType === '1'" v-model="item.redPacketAmount" :min="0.1" :max="10" :step="0.1" style="width: 140px; margin-left: 15px;"></el-input-number>
+              <el-input v-if="item.rewardType === '2'" v-model="item.scoreAmount" placeholder="积分值" style="width: 140px; margin-left: 15px;"></el-input>
+              <el-button type="danger" icon="el-icon-delete" circle style="margin-left: 10px;" @click="removeRecordTimeRange(index)" v-if="watchRewardForm.recordTimeRanges.length > 1"></el-button>
+            </div>
+            <div v-if="timeRangeOverlap" style="color: #F56C6C; font-size: 12px; margin-top: -5px; margin-bottom: 10px;">时间段之间存在重叠，请重新选择</div>
+            <el-button type="primary" icon="el-icon-plus" size="small" @click="addRecordTimeRange">添加时间段</el-button>
+          </div>
         </div>
 
 
@@ -265,6 +287,12 @@ export default {
         guideText: '',
         // 积分值
         scoreAmount: '',
+        // 是否录播可领取奖励
+        recordRedPacketEnabled: false,
+        // 录播奖励配置列表（前端展示用）
+        recordTimeRanges: [{ range: null, rewardType: '1', redPacketAmount: '', scoreAmount: '' }],
+        // 录播奖励配置字符串（提交后端用）
+        recordTimeRangeStr: '',
         // // 最大领取人数
         // maxReceivers: '',
         // 积分使用引导语
@@ -364,7 +392,7 @@ export default {
           value: '2'
         }
       ],
-
+      timeRangeOverlap: false,
     };
   },
   watch: {
@@ -394,11 +422,84 @@ export default {
   created() {
   },
   methods: {
+    addRecordTimeRange() {
+      this.watchRewardForm.recordTimeRanges.push({ range: null, rewardType: '1', redPacketAmount: '', scoreAmount: '' })
+    },
+    removeRecordTimeRange(index) {
+      this.watchRewardForm.recordTimeRanges.splice(index, 1)
+      this.checkOverlap()
+    },
+    onTimeRangeChange(currentIndex) {
+      const current = this.watchRewardForm.recordTimeRanges[currentIndex]
+      if (!current || !current.range || current.range.length !== 2) {
+        this.checkOverlap()
+        return
+      }
+      const currentStart = this.timeToMinutes(current.range[0])
+      const currentEnd = this.timeToMinutes(current.range[1])
+
+      const others = this.watchRewardForm.recordTimeRanges
+        .filter((item, i) => i !== currentIndex && item.range && item.range.length === 2)
+        .map(item => ({
+          start: this.timeToMinutes(item.range[0]),
+          end: this.timeToMinutes(item.range[1])
+        }))
+
+      let overlap = false
+      for (const other of others) {
+        if (currentStart < other.end && other.start < currentEnd) {
+          overlap = true
+          break
+        }
+      }
+
+      if (overlap) {
+        this.$set(current, 'range', null)
+        this.$message.error('时间重叠，请重新选择')
+      }
+
+      this.checkOverlap()
+    },
+    checkOverlap() {
+      const ranges = this.watchRewardForm.recordTimeRanges
+        .filter(item => item.range && item.range.length === 2)
+        .map(item => ({
+          start: this.timeToMinutes(item.range[0]),
+          end: this.timeToMinutes(item.range[1])
+        }))
+      for (let i = 0; i < ranges.length; i++) {
+        for (let j = i + 1; j < ranges.length; j++) {
+          if (ranges[i].start < ranges[j].end && ranges[j].start < ranges[i].end) {
+            this.timeRangeOverlap = true
+            return
+          }
+        }
+      }
+      this.timeRangeOverlap = false
+    },
+    timeToMinutes(timeStr) {
+      if (!timeStr) return 0
+      const parts = timeStr.split(':')
+      return parseInt(parts[0]) * 60 + parseInt(parts[1])
+    },
+    minutesToTime(minutes) {
+      const h = Math.floor(minutes / 60).toString().padStart(2, '0')
+      const m = (minutes % 60).toString().padStart(2, '0')
+      return h + ':' + m
+    },
     getLiveConfig(){
       getConfig(this.liveId).then(response => {
         if(response.code === 200 && response.data != null && response.data.length > 0){
           const serverData = JSON.parse(response.data)
           this.watchRewardForm = Object.assign({}, this.watchRewardForm, serverData)
+          if (this.watchRewardForm.recordTimeRangeStr) {
+            this.watchRewardForm.recordTimeRanges = this.watchRewardForm.recordTimeRangeStr.split(',').map(item => {
+              const parts = item.split('-')
+              return { range: [parts[0], parts[1]], rewardType: parts[2] || '1', redPacketAmount: parts[3] || '', scoreAmount: parts[4] || '' }
+            })
+          } else {
+            this.watchRewardForm.recordTimeRanges = [{ range: null, rewardType: '1', redPacketAmount: '', scoreAmount: '' }]
+          }
           if(this.watchRewardForm.isRedPackageBalanceDeduction == null){
             this.watchRewardForm.isRedPackageBalanceDeduction = '1'
           } else {
@@ -410,8 +511,18 @@ export default {
     },
     // 自动保存开关状态
     autoSaveEnabled() {
+      const submitData = Object.assign({}, this.watchRewardForm)
+      if (submitData.recordTimeRanges && submitData.recordTimeRanges.length > 0) {
+        submitData.recordTimeRangeStr = submitData.recordTimeRanges
+          .filter(item => item.range && item.range.length === 2)
+          .map(item => item.range[0] + '-' + item.range[1] + '-' + item.rewardType + '-' + (item.rewardType === '1' ? item.redPacketAmount : '') + '-' + (item.rewardType === '2' ? item.scoreAmount : ''))
+          .join(',')
+      } else {
+        submitData.recordTimeRangeStr = ''
+      }
+      delete submitData.recordTimeRanges
       if (this.watchRewardForm.id == null) {
-        addConfig(this.watchRewardForm, this.liveId).then(res => {
+        addConfig(submitData, this.liveId).then(res => {
           if (res.code == 200) {
             this.msgSuccess("已关闭观看奖励");
             // 更新 id，下次修改时使用 update
@@ -424,7 +535,7 @@ export default {
           this.watchRewardForm.enabled = true;
         });
       } else {
-        updateConfig(this.watchRewardForm, this.liveId).then(response => {
+        updateConfig(submitData, this.liveId).then(response => {
           if (response.code == 200) {
             this.msgSuccess("已关闭观看奖励");
           }
@@ -438,16 +549,28 @@ export default {
       this.$refs["watchRewardForm"].validate(valid => {
         console.log(valid)
         if (valid) {
+          if (this.timeRangeOverlap) {
+            this.$message.error('时间段之间存在重叠，请重新选择')
+            return
+          }
+          const submitData = Object.assign({}, this.watchRewardForm)
+          if (submitData.recordTimeRanges && submitData.recordTimeRanges.length > 0) {
+            submitData.recordTimeRangeStr = submitData.recordTimeRanges
+              .filter(item => item.range && item.range.length === 2)
+              .map(item => item.range[0] + '-' + item.range[1] + '-' + item.rewardType + '-' + (item.rewardType === '1' ? item.redPacketAmount : '') + '-' + (item.rewardType === '2' ? item.scoreAmount : ''))
+              .join(',')
+          } else {
+            submitData.recordTimeRangeStr = ''
+          }
+          delete submitData.recordTimeRanges
           if (this.watchRewardForm.id == null) {
-            // 调用保存观看奖励接口
-            // 实现保存逻辑
-            addConfig(this.watchRewardForm,this.liveId).then(res => {
+            addConfig(submitData,this.liveId).then(res => {
               if (res.code == 200) {
                 this.msgSuccess("修改成功");
               }
             })
           } else {
-            updateConfig(this.watchRewardForm,this.liveId).then(response => {
+            updateConfig(submitData,this.liveId).then(response => {
               this.msgSuccess("修改成功");
             });
           }
@@ -459,6 +582,19 @@ export default {
 </script>
 
 <style scoped>
+/* 录播奖励配置项样式 */
+.record-reward-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 10px 0;
+  border-top: 1px dashed #dcdfe6;
+}
+.record-reward-item:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
 /* 提示信息样式 */
 .tip-message {
   padding: 12px 16px;