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

<template >
<div class="app-container live-page">
    <div class="live-page__header">
      <h2 class="live-page__title">观看奖励</h2>
    </div>

    <div class="live-panel">
<div v-loading.fullscreen.lock="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 v-model="watchRewardForm.participateCondition" label="1">
            达到指定观看时长
          </el-radio>
        </el-form-item>

        <!-- 观看时长 -->
        <el-form-item label="观看时长" prop="watchDuration">
          <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-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>

        <!-- 抽奖设置 -->
        <template v-if="watchRewardForm.action === '3'">
          <el-form-item label="选择抽奖" prop="bigGiftRewardId">
            <el-select
              v-model="watchRewardForm.bigGiftRewardId"
              placeholder="请选择抽奖活动"
              style="width: 300px;"
              filterable
              :loading="bigGiftRewardLoading"
            >
              <el-option
                v-for="item in bigGiftRewardList"
                :key="getRewardId(item)"
                :label="getRewardName(item)"
                :value="getRewardId(item)"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="奖品内容" v-if="watchRewardForm.bigGiftRewardId">
            <template v-if="selectedBigGiftReward">
              <el-descriptions :column="2" border size="small" class="reward-desc">
                <el-descriptions-item label="抽奖名称">{{ selectedBigGiftReward.name || '-' }}</el-descriptions-item>
                <el-descriptions-item label="抽奖ID">{{ selectedBigGiftReward.id }}</el-descriptions-item>
                <el-descriptions-item label="期望价值">{{ selectedBigGiftReward.expectedValue != null ? selectedBigGiftReward.expectedValue + ' 元' : '-' }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ formatRewardStatus(selectedBigGiftReward.status) }}</el-descriptions-item>
                <el-descriptions-item label="描述" :span="2">{{ selectedBigGiftReward.description || '-' }}</el-descriptions-item>
              </el-descriptions>
              <el-table
                v-if="prizePreviewList.length > 0"
                :data="prizePreviewList"
                border
                size="small"
                style="width: 100%; margin-top: 12px;"
                max-height="420"
              >
                <el-table-column label="图标" width="70" align="center">
                  <template slot-scope="scope">
                    <el-image
                      v-if="scope.row.iconUrl"
                      :src="scope.row.iconUrl"
                      :preview-src-list="[scope.row.iconUrl]"
                      fit="cover"
                      class="prize-icon"
                    />
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column label="奖品名称" prop="name" min-width="140" show-overflow-tooltip />
                <el-table-column label="奖品类型" width="100" align="center">
                  <template slot-scope="scope">
                    {{ formatRewardType(scope.row.type) }}
                  </template>
                </el-table-column>
                <el-table-column label="数量/金额" width="100" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.amount != null ? scope.row.amount : '-' }}
                  </template>
                </el-table-column>
                <el-table-column label="概率权重" prop="probability" width="100" align="center" />
              </el-table>
              <div v-else class="empty-prize-tip">暂无奖品明细</div>
            </template>
            <div v-else class="empty-prize-tip">已选择抽奖 ID：{{ watchRewardForm.bigGiftRewardId }}（奖品详情加载中或未找到）</div>
          </el-form-item>
        </template>

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

        <!-- 红包设置 -->
        <div v-if="watchRewardForm.action !== '3'">
          <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.action !== '3'">
          <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>
    </div>
</div>
</template>

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

export default {
  data() {
    return {
      loading: true,
      liveId: null,
      watchRewardForm: {
        id: null,
        liveId: null,
        // 是否启用观看奖励
        enabled: false,
        // 参与条件
        participateCondition: '1',
        // 观看时长
        watchDuration: '',
        // 实施动作
        action: '2',
        // 领取提示语
        receivePrompt: '',
        // 红包发放方式（固定金额/随机金额）
        redPacketType: '1',
        // 红包金额
        redPacketAmount: '',
        // 红包发放数量
        redPacketCount: '',
        // 红包领取方式
        receiveMethod: '1',
        // 是否显示客服引导
        showGuide: '1',
        // 客服引导语
        guideText: '',
        // 积分值
        scoreAmount: '',
        // // 最大领取人数
        // maxReceivers: '',
        // 积分使用引导语
        scoreGuideText: '',
        // 积分使用引导链接
        scoreGuideLink: '',
        // 大礼品抽奖ID（action=3时仅保存此ID）
        bigGiftRewardId: null
      },
      bigGiftRewardList: [],
      bigGiftRewardLoading: false,
      // 添加实施动作选项
      actionOptions: [
        // {
        //   label: '现金红包',
        //   value: '1'
        // },
        {
          label: '积分红包',
          value: '2'
        },
        {
          label: '抽奖',
          value: '3'
        }
      ],

    };
  },
  computed: {
    rules() {
      const baseRules = {
        participateCondition: [
          { required: true, message: '请选择参与条件', trigger: 'blur' }
        ],
        watchDuration: [
          { required: true, message: '请输入观看时长', trigger: 'blur' }
        ],
        action: [
          { required: true, message: '请选择实施动作', trigger: 'blur' }
        ]
      };
      if (this.watchRewardForm.action === '3') {
        baseRules.bigGiftRewardId = [
          { required: true, message: '请选择抽奖活动', trigger: 'change' }
        ];
      } else if (this.watchRewardForm.action === '1') {
        baseRules.redPacketType = [
          { required: true, message: '请选择红包发放方式', trigger: 'blur' }
        ];
        baseRules.redPacketAmount = [
          { required: true, message: '请输入红包金额', trigger: 'blur' }
        ];
        baseRules.receiveMethod = [
          { required: true, message: '请选择红包领取方式', trigger: 'blur' }
        ];
        baseRules.showGuide = [
          { required: true, message: '请选择是否显示客服引导', trigger: 'blur' }
        ];
      }
      return baseRules;
    },
    selectedBigGiftReward() {
      if (!this.watchRewardForm.bigGiftRewardId) {
        return null;
      }
      const rewardId = String(this.watchRewardForm.bigGiftRewardId);
      return this.bigGiftRewardList.find(item => String(this.getRewardId(item)) === rewardId) || null;
    },
    prizePreviewList() {
      return this.getPrizeList(this.selectedBigGiftReward);
    }
  },
  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
    }
  },
  created() {
    this.loadBigGiftRewardList();
  },
  methods: {
    getRewardId(item) {
      if (!item) {
        return null;
      }
      return item.id != null ? item.id : (item.rewardId != null ? item.rewardId : item.configId);
    },
    getRewardName(item) {
      if (!item) {
        return '';
      }
      const name = item.name || item.rewardName || item.title || ('抽奖-' + this.getRewardId(item));
      if (item.expectedValue != null && item.expectedValue !== '') {
        return `${name}（期望${item.expectedValue}元）`;
      }
      return name;
    },
    formatRewardStatus(status) {
      if (status === 1 || status === '1') {
        return '启用';
      }
      if (status === 0 || status === '0') {
        return '停用';
      }
      return status != null ? status : '-';
    },
    formatRewardType(type) {
      const typeMap = {
        '1': '现金',
        '2': '芳华币',
        '3': '优惠券',
        '4': '积分',
        '5': '实物商品'
      };
      return typeMap[String(type)] || (type != null ? type : '-');
    },
    getPrizeList(reward) {
      if (!reward || !reward.actualRewards) {
        return [];
      }
      let list = reward.actualRewards;
      if (typeof list === 'string') {
        try {
          list = JSON.parse(list);
        } catch (e) {
          return [];
        }
      }
      return Array.isArray(list) ? list : [];
    },
    loadBigGiftRewardList() {
      this.bigGiftRewardLoading = true;
      listBigGiftReward({
        pageNum: 1,
        pageSize: 100
      }).then(response => {
        this.bigGiftRewardList = response.rows || [];
      }).finally(() => {
        this.bigGiftRewardLoading = false;
      });
    },
    mergeWatchRewardForm(data) {
      const defaults = {
        id: null,
        liveId: this.liveId,
        enabled: false,
        participateCondition: '1',
        watchDuration: '',
        action: '2',
        receivePrompt: '',
        redPacketType: '1',
        redPacketAmount: '',
        redPacketCount: '',
        receiveMethod: '1',
        showGuide: '1',
        guideText: '',
        scoreAmount: '',
        scoreGuideText: '',
        scoreGuideLink: '',
        bigGiftRewardId: null
      };
      const merged = Object.assign({}, defaults, data || {});
      merged.participateCondition = merged.participateCondition != null ? String(merged.participateCondition) : '1';
      merged.action = merged.action != null ? String(merged.action) : '2';
      merged.watchDuration = merged.watchDuration != null ? String(merged.watchDuration) : '';
      if (merged.bigGiftRewardId != null) {
        merged.bigGiftRewardId = Number(merged.bigGiftRewardId);
      }
      return merged;
    },
    buildSavePayload() {
      const form = this.watchRewardForm;
      const common = {
        id: form.id,
        liveId: form.liveId,
        enabled: form.enabled,
        participateCondition: form.participateCondition,
        watchDuration: form.watchDuration,
        action: form.action
      };
      if (form.action === '3') {
        return Object.assign({}, common, {
          bigGiftRewardId: form.bigGiftRewardId
        });
      }
      if (form.action === '1') {
        return Object.assign({}, form, common);
      }
      return Object.assign({}, common, {
        scoreAmount: form.scoreAmount,
        scoreGuideText: form.scoreGuideText,
        scoreGuideLink: form.scoreGuideLink
      });
    },
    getLiveConfig(){
      getConfig(this.liveId).then(response => {
        if(response.code === 200 && response.data != null && response.data.length > 0){
          this.watchRewardForm = this.mergeWatchRewardForm(JSON.parse(response.data));
        }
        this.loading = false
      })
    },
    saveWatchReward() {
      this.$refs["watchRewardForm"].validate(valid => {
        if (valid) {
          const payload = this.buildSavePayload();
          if (this.watchRewardForm.id == null) {
            addConfig(payload, this.liveId).then(res => {
              if (res.code == 200) {
                this.msgSuccess("修改成功");
                this.getLiveConfig();
              }
            })
          } else {
            updateConfig(payload, this.liveId).then(response => {
              this.msgSuccess("修改成功");
              this.getLiveConfig();
            });
          }
        }
      })
    },
  }
};
</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-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;
}

.reward-desc {
  width: 100%;
}

.empty-prize-tip {
  margin-top: 12px;
  color: #909399;
  font-size: 13px;
}

.prize-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
</style>