积分配置

src/views/live/liveConfig/watchReward.vue

@@ -24,20 +24,51 @@
       >
         <!-- 参与条件 -->
         <el-form-item label="参与条件" prop="participateCondition">
-          <el-radio v-model="watchRewardForm.participateCondition" label="1">
-            达到指定观看时长
-          </el-radio>
+          <el-radio-group v-model="watchRewardForm.participateCondition">
+            <el-radio label="1">达到指定观看时长</el-radio>
+            <el-radio label="2">启用完课积分</el-radio>
+          </el-radio-group>
         </el-form-item>
 
         <!-- 观看时长 -->
-        <el-form-item label="观看时长" prop="watchDuration">
+        <el-form-item label="观看时长" prop="watchDuration" v-if="watchRewardForm.participateCondition === '1'">
           <el-input v-model="watchRewardForm.watchDuration" placeholder="请输入观看时长" class="duration-input">
             <template #append>分钟</template>
           </el-input>
         </el-form-item>
 
-        <!-- 实施动作 -->
-        <el-form-item label="实施动作" prop="action">
+        <!-- 完课率要求 -->
+        <el-form-item label="完课率要求" prop="completionRate" v-if="watchRewardForm.participateCondition === '2'">
+          <el-input-number 
+            v-model="watchRewardForm.completionRate" 
+            :min="1" 
+            :max="100" 
+            :precision="0"
+            placeholder="请输入完课率"
+            style="width: 200px;"
+          ></el-input-number>
+          <span style="margin-left: 10px; color: #909399;">%（观看时长占直播总时长的比例）</span>
+        </el-form-item>
+
+        <!-- 连续完课积分配置 -->
+        <el-form-item label="连续完课积分" prop="pointsConfig" v-if="watchRewardForm.participateCondition === '2'">
+          <div style="display: flex; flex-direction: column; gap: 10px;">
+            <div v-for="(point, index) in watchRewardForm.pointsConfig" :key="index" style="display: flex; align-items: center;">
+              <span style="width: 80px;">第{{ index + 1 }}天：</span>
+              <el-input-number 
+                v-model="watchRewardForm.pointsConfig[index]" 
+                :min="0" 
+                :precision="0"
+                placeholder="请输入积分值"
+                style="width: 200px;"
+              ></el-input-number>
+              <span style="margin-left: 10px; color: #909399;">积分</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <!-- 实施动作（仅在达到指定观看时长时显示） -->
+        <el-form-item label="实施动作" prop="action" v-if="watchRewardForm.participateCondition === '1'">
           <el-select v-model="watchRewardForm.action" placeholder="请选择实施动作" style="width: 300px;">
             <el-option
               v-for="item in actionOptions"
@@ -53,8 +84,8 @@
 <!--          <el-input v-model="watchRewardForm.receivePrompt" placeholder="请输入领取提示语"></el-input>-->
 <!--        </el-form-item>-->
 
-        <!-- 红包设置 -->
-        <div>
+        <!-- 红包设置（仅在达到指定观看时长时显示） -->
+        <div v-if="watchRewardForm.participateCondition === '1'">
           <div class="section-title">红包设置</div>
 
           <!-- 根据实施动作类型显示不同的表单内容 -->
@@ -107,8 +138,8 @@
           </template>
         </div>
 
-        <!-- 其他设置 -->
-        <div >
+        <!-- 其他设置（仅在达到指定观看时长时显示） -->
+        <div v-if="watchRewardForm.participateCondition === '1'">
           <div class="section-title">其他设置</div>
 
           <template v-if="watchRewardForm.action === '1'">
@@ -178,7 +209,7 @@ export default {
         liveId: null,
         // 是否启用观看奖励
         enabled: false,
-        // 参与条件
+        // 参与条件 1:达到指定观看时长 2:启用完课积分
         participateCondition: '1',
         // 观看时长
         watchDuration: '',
@@ -205,17 +236,66 @@ export default {
         // 积分使用引导语
         scoreGuideText: '',
         // 积分使用引导链接
-        scoreGuideLink: ''
+        scoreGuideLink: '',
+        // 完课积分相关配置（participateCondition为2时使用）
+        // 完课率要求（1-100）
+        completionRate: 90,
+        // 连续完课积分配置（第1-10天）
+        pointsConfig: [100, 110, 120, 130, 140, 150, 160, 170, 180, 200]
       },
       rules:{
         participateCondition:[
-          { required: true, message: '请选择参与条件', trigger: 'blur'}
+          { required: true, message: '请选择参与条件', trigger: 'change'}
         ],
         watchDuration:[
-          { required: true, message: '请输入观看时长', trigger: 'blur'}
+          { 
+            validator: (rule, value, callback) => {
+              if (this.watchRewardForm.participateCondition === '1') {
+                if (!value) {
+                  callback(new Error('请输入观看时长'));
+                } else {
+                  callback();
+                }
+              } else {
+                callback();
+              }
+            }, 
+            trigger: 'blur'
+          }
+        ],
+        completionRate:[
+          { 
+            validator: (rule, value, callback) => {
+              if (this.watchRewardForm.participateCondition === '2') {
+                if (!value && value !== 0) {
+                  callback(new Error('请输入完课率要求'));
+                } else if (value < 1 || value > 100) {
+                  callback(new Error('完课率要求范围为1-100'));
+                } else {
+                  callback();
+                }
+              } else {
+                callback();
+              }
+            }, 
+            trigger: 'blur'
+          }
         ],
         action:[
-          { required: true, message: '请选择实施动作', trigger: 'blur'}
+          { 
+            validator: (rule, value, callback) => {
+              if (this.watchRewardForm.participateCondition === '1') {
+                if (!value) {
+                  callback(new Error('请选择实施动作'));
+                } else {
+                  callback();
+                }
+              } else {
+                callback();
+              }
+            }, 
+            trigger: 'change'
+          }
         ],
         // receivePrompt:[
         //   { required: true, message: '请输入领取提示语', trigger: 'blur'}
@@ -263,6 +343,15 @@ export default {
       },
       // 初始化时立即执行一次
       immediate: true
+    },
+    // 监听开启观看奖励开关变化
+    'watchRewardForm.enabled': {
+      handler(newValue, oldValue) {
+        // 只有当关闭开关时才自动保存（从 true 变为 false）
+        if (oldValue === true && newValue === false && this.liveId) {
+          this.autoSaveEnabled();
+        }
+      }
     }
   },
   created() {
@@ -276,6 +365,32 @@ export default {
         this.loading = false
       })
     },
+    // 自动保存开关状态
+    autoSaveEnabled() {
+      if (this.watchRewardForm.id == null) {
+        addConfig(this.watchRewardForm, this.liveId).then(res => {
+          if (res.code == 200) {
+            this.msgSuccess("已关闭观看奖励");
+            // 更新 id，下次修改时使用 update
+            if (res.data && res.data.id) {
+              this.watchRewardForm.id = res.data.id;
+            }
+          }
+        }).catch(() => {
+          // 如果保存失败，恢复开关状态
+          this.watchRewardForm.enabled = true;
+        });
+      } else {
+        updateConfig(this.watchRewardForm, this.liveId).then(response => {
+          if (response.code == 200) {
+            this.msgSuccess("已关闭观看奖励");
+          }
+        }).catch(() => {
+          // 如果保存失败，恢复开关状态
+          this.watchRewardForm.enabled = true;
+        });
+      }
+    },
     saveWatchReward() {
       this.$refs["watchRewardForm"].validate(valid => {
         console.log(valid)