ylrz_his_scrm_adminUI/src/views/live/liveConfig/watchReward.vue

<template >
  <div v-loading="loading">
    <!-- 提示信息 -->
    <div class="tip-message" >
      设置观看奖励，用户达到直播观看时长后可领取奖励
    </div>

    <!-- 开启观看奖励开关 -->
    <div class="reward-switch">
      <span class="switch-label">开启观看奖励</span>
      <el-switch v-model="watchRewardForm.enabled"></el-switch>
    </div>

    <!-- 观看奖励设置 -->
    <div v-if="watchRewardForm.enabled" class="section-block">
      <div class="section-title">观看奖励设置</div>

      <!-- 表单内容 -->
      <el-form
        :model="watchRewardForm"
        :rules="rules"
        ref="watchRewardForm"
        label-width="130px"
      >
        <!-- 参与条件 -->
        <el-form-item label="参与条件" prop="participateCondition">
          <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" 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="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"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 领取提示语 -->
<!--        <el-form-item label="领取提示语" prop="receivePrompt">-->
<!--          <el-input v-model="watchRewardForm.receivePrompt" placeholder="请输入领取提示语"></el-input>-->
<!--        </el-form-item>-->

        <!-- 红包设置（仅在达到指定观看时长时显示） -->
        <div v-if="watchRewardForm.participateCondition === '1'">
          <div class="section-title">红包设置</div>

          <!-- 根据实施动作类型显示不同的表单内容 -->
          <template v-if="watchRewardForm.action === '1'">
            <!-- 现金红包设置 -->
            <!-- 红包发放方式   1固定金额 2随机金额 -->
            <el-form-item label="红包发放方式" prop="redPacketType">
              <el-radio-group v-model="watchRewardForm.redPacketType">
                <el-radio label="1">固定金额</el-radio>
                <el-radio label="2">随机金额</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 红包金额 -->
            <el-form-item label="红包金额" prop="redPacketAmount">
              <el-input v-model="watchRewardForm.redPacketAmount" placeholder="请输入红包金额"></el-input>
            </el-form-item>

            <!-- 红包发放数量 -->
            <el-form-item label="红包发放数量" prop="redPacketCount">
              <el-input v-model="watchRewardForm.redPacketCount" placeholder="红包数量+28888人数"></el-input>
            </el-form-item>

            <!-- 红包领取方式  1二维码核销 2微信提现 -->
            <el-form-item label="红包领取方式" prop="receiveMethod">
              <el-radio-group v-model="watchRewardForm.receiveMethod">
                <el-radio label="1">二维码领取</el-radio>
                <el-radio label="2">微信发放</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>

          <template v-else>
            <!-- 积分红包设置 -->
            <!-- 积分值 -->
            <el-form-item label="积分值" prop="scoreAmount">
              <el-input
                v-model="watchRewardForm.scoreAmount"
                placeholder="请输入积分值"                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <!-- 最大领取人数 -->
<!--            <el-form-item label="最大领取人数" prop="maxReceivers">-->
<!--              <el-input-->
<!--                v-model="watchRewardForm.maxReceivers"-->
<!--                placeholder="请输入最大领取人数"                style="width: 300px;"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
          </template>
        </div>

        <!-- 其他设置（仅在达到指定观看时长时显示） -->
        <div v-if="watchRewardForm.participateCondition === '1'">
          <div class="section-title">其他设置</div>

          <template v-if="watchRewardForm.action === '1'">
            <!-- 客服引导  1跟进企业微信 2不设置 -->
            <el-form-item label="客服引导" prop="showGuide">
              <el-radio-group v-model="watchRewardForm.showGuide">
                <el-radio label="1">跟进企业微信</el-radio>
                <el-radio label="2">不设置</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 客服引导语 -->
            <el-form-item label="客服引导语" prop="guideText">
              <el-input
                v-model="watchRewardForm.guideText"
                placeholder="请输入客服引导语"                style="width: 300px;"
              ></el-input>
            </el-form-item>
          </template>

          <template v-else>
            <!-- 积分使用引导语 -->
            <el-form-item label="积分使用引导语" prop="scoreGuideText">
              <el-input
                v-model="watchRewardForm.scoreGuideText"
                placeholder="请输入积分使用引导语"                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <!-- 积分使用引导链接 -->
            <el-form-item label="积分使用引导链接" prop="scoreGuideLink">
              <el-input
                v-model="watchRewardForm.scoreGuideLink"
                placeholder="请输入积分使用引导链接"                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <!-- 引导语 -->
<!--            <el-form-item label="引导语" prop="guideText">-->
<!--              <el-input-->
<!--                v-model="watchRewardForm.guideText"-->
<!--                placeholder="请输入引导语"                style="width: 300px;"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
          </template>
        </div>

        <!-- 保存按钮 -->
        <div class="form-actions">
          <el-button type="primary" @click="saveWatchReward">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {addConfig, getConfig, updateConfig} from "@/api/live/liveQuestionLive";

export default {
  data() {
    return {
      loading: true,
      liveId: null,
      watchRewardForm: {
        id: null,
        liveId: null,
        // 是否启用观看奖励
        enabled: false,
        // 参与条件 1:达到指定观看时长 2:启用完课积分
        participateCondition: '1',
        // 观看时长
        watchDuration: '',
        // 实施动作
        action: '2',
        // 领取提示语
        receivePrompt: '',
        // 红包发放方式（固定金额/随机金额）
        redPacketType: '1',
        // 红包金额
        redPacketAmount: '',
        // 红包发放数量
        redPacketCount: '',
        // 红包领取方式
        receiveMethod: '1',
        // 是否显示客服引导
        showGuide: '1',
        // 客服引导语
        guideText: '',
        // 积分值
        scoreAmount: '',
        // // 最大领取人数
        // maxReceivers: '',
        // 积分使用引导语
        scoreGuideText: '',
        // 积分使用引导链接
        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: 'change'}
        ],
        watchDuration:[
          { 
            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:[
          { 
            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'}
        // ],
        redPacketType:[
          { required: true, message: '请选择红包发放方式', trigger: 'blur'}
        ],
        redPacketAmount:[
          { required: true, message: '请输入红包金额', trigger: 'blur'}
        ],
        receiveMethod:[
          { required: true, message: '请选择红包领取方式', trigger: 'blur'}
        ],
        // guideText:[
        //   { required: true, message: '请输入客服引导语', trigger: 'blur'}
        // ],
        showGuide:[
          { required: true, message: '请选择是否显示客服引导', trigger: 'blur'}
        ]
      },
      // 添加实施动作选项
      actionOptions: [
        // {
        //   label: '现金红包',
        //   value: '1'
        // },
        {
          label: '积分红包',
          value: '2'
        }
      ],

    };
  },
  watch: {
    // 监听路由的 query 参数变化
    '$route.query': {
      handler(newQuery) {
        this.liveId = this.$route.params.liveId
        this.watchRewardForm.liveId = this.liveId
        if(this.liveId == null) {
          return;
        }
        this.getLiveConfig();
      },
      // 初始化时立即执行一次
      immediate: true
    },
    // 监听开启观看奖励开关变化
    'watchRewardForm.enabled': {
      handler(newValue, oldValue) {
        // 只有当关闭开关时才自动保存（从 true 变为 false）
        if (oldValue === true && newValue === false && this.liveId) {
          this.autoSaveEnabled();
        }
      }
    }
  },
  created() {
  },
  methods: {
    getLiveConfig(){
      getConfig(this.liveId).then(response => {
        if(response.code === 200 && response.data != null && response.data.length > 0){
          this.watchRewardForm = JSON.parse(response.data)
        }
        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)
        if (valid) {
          if (this.watchRewardForm.id == null) {
            // 调用保存观看奖励接口
            // 实现保存逻辑
            addConfig(this.watchRewardForm,this.liveId).then(res => {
              if (res.code == 200) {
                this.msgSuccess("修改成功");
              }
            })
          } else {
            updateConfig(this.watchRewardForm,this.liveId).then(response => {
              this.msgSuccess("修改成功");
            });
          }
        }
      })
    },
  }
};
</script>

<style scoped>
/* 提示信息样式 */
.tip-message {
  padding: 12px 16px;
  background-color: #FFF6F2;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}


/* 开关容器样式 */
.reward-switch {
  margin-left: 200px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

/* 开关标签样式 */
.reward-switch .switch-label {
  margin-right: 10px;
  font-size: 14px;
  color: #333;
  margin-left: 50px;
}

/* 表单区块样式 */
.section-block {
  width: 50%;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-left: 50px;
  margin-bottom: 20px;
}

/* 标题样式 */
.section-block .section-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
  line-height: 1;
}

/* 表单样式 */
.reward-form {
  margin-top: 20px;
}

/* 表单项样式 */
.reward-form .el-form-item {
  margin-bottom: 22px;
  padding-left: 50px;
}

.reward-form .el-form-item:last-child {
  margin-bottom: 0;
}

/* 表单标签样式 */
.reward-form .el-form-item .el-form-item__label {
  color: #606266;
}

/* 输入框统一宽度 */
.reward-form .el-form-item .el-input {
  width: 300px;
}

/* 必填项星号样式 */
.reward-form .el-form-item.is-required .el-form-item__label:before {
  color: #F56C6C;
}

/* 观看时长输入框样式 */
.reward-form .el-form-item .duration-input {
  width: 300px;
}

.reward-form .el-form-item .duration-input .el-input__inner {
  text-align: left;
}

/* 保存按钮样式 */
.form-actions {
  width: 600px;
  text-align: center;
  margin-top: 30px;
}

.form-actions .el-button {
  padding: 8px 20px;
  font-size: 13px;
}
</style>