ylrz_his_scrm_companyUI/src/views/live/liveConfig/index.vue

<template>
  <div class="live-config-container">
    <!-- 根tabs -->
    <el-tabs v-model="rootActiveName" @tab-click="handleClick" class="white-bg-tabs">
      <el-tab-pane v-for="item in rootTabs" :key="item.name" :label="item.label" :name="item.name">
        <!-- 营销内容 start -->
        <el-tabs v-if="item.name == 'market'" v-model="marketActiveName" type="card" @tab-click="handleTabClick">
          <el-tab-pane v-for="marketItem in marketTabs" :key="marketItem.name" :label="marketItem.label" :name="marketItem.name" class="market-tab-pane">
            <!-- 观看奖励 start -->
            <template>
              <div v-if="marketItem.name == 'watchReward'">
                <!-- 提示信息 -->
                <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>

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

                    <!-- 红包设置 -->
                    <div>
                      <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 >
                      <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>

            <!-- 答题 start -->
            <div v-if="marketItem.name == 'answer'">
              <div class="tip-box">
                选择用于本节直播课程的题库试题，试题可用于直播间内发送
                <el-link
                  type="primary"
                  style="margin-left: 5px;"
                  @click="handleToQuestionBank"
                >配置题库试题 >></el-link>
              </div>

              <el-button type="primary" icon="el-icon-plus" style="margin: 20px 0;" @click="handleAddQuestion">添加试题</el-button>
              <!-- 试题列表表格 -->
              <el-table
                :data="questionLiveList"
                style="width: 100%"
                v-loading="loading"
              >
                <!-- 题干列：显示试题的主要内容 -->
                <el-table-column
                  prop="title"
                  label="题干"
                  show-overflow-tooltip
                ></el-table-column>

                <!-- 题型列：显示是单选还是多选 -->
                <el-table-column
                  prop="type"
                  label="题型"
                >
                  <template slot-scope="scope">
                    {{ scope.row.type === 1 ? '单选题' : '多选题' }}
                  </template>
                </el-table-column>

                <!-- 创建时间列：显示试题创建的时间 -->
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                ></el-table-column>

                <!-- 操作列：包含编辑和删除按钮 -->
                <el-table-column
                  label="操作"
                  width="180"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <!-- 删除按钮：用于移除试题 -->
                    <el-button
                      type="text"
                      size="small"
                      style="color: #F56C6C;"
                      @click="handleDelete(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件：用于分页展示试题列表 -->
              <pagination
                v-show="questionTotal > 0"
                :total="questionTotal"
                :page.sync="questionParams.pageNum"
                :limit.sync="questionParams.pageSize"
                @pagination="getLiveQuestionLiveList"
                style="margin-top: 20px;"
              />

              <!-- 添加试题弹窗 -->
              <el-dialog
                title="添加试题"
                :visible.sync="questionDialogVisible"
                width="800px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
              >
                <div class="dialog-content">
                  <div style="text-align: right; margin-bottom: 20px;">
                    <el-input
                      v-model="searchTitle"
                      placeholder="请输入搜索内容"
                      style="width: 300px;"
                      @input="handleQuestionSearch"
                    ></el-input>
                  </div>

                  <el-table
                    ref="questionTable"
                    :data="questionList"
                    style="width: 100%"
                    v-loading="questionLoading"
                    @selection-change="handleSelectionChange"
                    @row-click="handleRowClick"
                    row-key="id"
                  >
                    <!-- 复选框列：用于多选试题 -->
                    <el-table-column
                      type="selection"
                      width="55"
                    >
                    </el-table-column>
                    <!-- 题干列：显示试题的主要内容 -->
                    <el-table-column
                      prop="title"
                      label="题干"
                      class-name="clickable-column"
                    ></el-table-column>
                    <!-- 题型列：显示单选或多选 -->
                    <el-table-column
                      prop="type"
                      label="题型"
                      class-name="clickable-column"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.type === 1 ? '单选题' : '多选题' }}
                      </template>
                    </el-table-column>
                    <!-- 创建人列 -->
                    <el-table-column
                      prop="createBy"
                      label="创建人"
                      class-name="clickable-column"
                    ></el-table-column>
                    <!-- 创建时间列 -->
                    <el-table-column
                      prop="createTime"
                      label="创建时间"
                      width="150"
                      class-name="clickable-column"
                    ></el-table-column>
                  </el-table>

                  <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getQuestionList"
                    style="margin-top: 20px;"
                  />
                </div>
                <div slot="footer" class="dialog-footer">
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span class="selected-count">当前已选择 <span style="color: #00BFFF; font-style: italic;">{{ selectedQuestions.length }}</span> 题</span>
                    <div>
                      <el-button @click="questionDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirmAddQuestion">确 定</el-button>
                    </div>
                  </div>
                </div>
              </el-dialog>
            </div>
            <!-- 答题 end -->

            <!-- 直播商品start -->
            <div v-if="marketItem.name == 'goods'">

              <el-button type="primary" icon="el-icon-plus" style="margin: 20px 0;" @click="handleAddLiveGoods">添加商品</el-button>
              <!-- 试题列表表格 -->
              <el-table
                :data="goodsLiveList"
                style="width: 100%"
                v-loading="loading"
              >
                <!-- 题干列：显示试题的主要内容 -->
                <el-table-column
                  prop="goodsId"
                  label="商品id"
                  show-overflow-tooltip
                ></el-table-column>

                <!-- 题型列：显示是单选还是多选 -->
                <el-table-column
                  prop="storeId"
                  label="店铺id"
                >
                </el-table-column>

                <!-- 创建时间列：显示试题创建的时间 -->
                <el-table-column
                  prop="productId"
                  label="商品id"
                ></el-table-column>

                <!-- 操作列：包含编辑和删除按钮 -->
                <el-table-column
                  label="操作"
                  width="180"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <!-- 删除按钮：用于移除试题 -->
                    <el-button
                      type="text"
                      size="small"
                      style="color: #F56C6C;"
                      @click="handleGoodDelete(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页组件：用于分页展示试题列表 -->
              <pagination
                v-show="goodsTotal > 0"
                :total="goodsTotal"
                :page.sync="goodsParams.pageNum"
                :limit.sync="goodsParams.pageSize"
                @pagination="getLiveGoodsList"
                style="margin-top: 20px;"
              />

              <!-- 添加商品弹窗 -->
              <el-dialog
                title="添加商品"
                :visible.sync="goodsDialogVisible"
                width="800px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
              >
                <div class="dialog-content">
                  <div style="text-align: right; margin-bottom: 20px;">
                    <el-input
                      v-model="searchTitle"
                      placeholder="请输入搜索内容"
                      style="width: 300px;"
                      @input="handleGoodsSearch"
                    ></el-input>
                  </div>

                  <el-table
                    ref="goodsTable"
                    :data="goodsList"
                    style="width: 100%"
                    v-loading="goodsLoading"
                    @selection-change="handleGoodsChange"
                    @row-click="handleGoodsRowClick"
                    row-key="id"
                  >
                    <!-- 复选框列：用于多选试题 -->
                    <el-table-column
                      type="selection"
                      width="55"
                    >
                    </el-table-column>
                    <!-- 题干列：显示试题的主要内容 -->
                    <el-table-column
                      prop="storeName"
                      label="商铺名称"
                      class-name="clickable-column"
                    ></el-table-column>
                    <el-table-column
                      prop="productName"
                      label="产品"
                      class-name="clickable-column"
                    ></el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格"
                      class-name="clickable-column"
                    ></el-table-column>
                    <el-table-column
                      prop="stock"
                      label="库存"
                      class-name="clickable-column"
                    ></el-table-column>
                  </el-table>

                  <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getStoreProductLists"
                    style="margin-top: 20px;"
                  />
                </div>
                <div slot="footer" class="dialog-footer">
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span class="selected-count">当前已选择 <span style="color: #00BFFF; font-style: italic;">{{ selectedGoods.length }}</span> 商品</span>
                    <div>
                      <el-button @click="goodsDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirmAddGoods">确 定</el-button>
                    </div>
                  </div>
                </div>
              </el-dialog>
            </div>
            <!-- 直播商品end -->

          </el-tab-pane>
        </el-tabs>
        <!-- 营销内容 end -->
      </el-tab-pane>
    </el-tabs>
    <!-- 根tabs end -->
  </div>
</template>

<script>
import {
  listLiveQuestionLive,
  listLiveQuestionOptionList,
  addLiveQuestionLive,
  deleteLiveQuestionLive,
  getConfig,
  addConfig,
  updateConfig
} from '@/api/live/liveQuestionLive'
import {listLiveGoods, delLiveGoods, listStoreProduct} from '@/api/live/liveGoods'
export default {
  name: 'LiveConfig',
  data() {
    return {
      liveId: null,
      loading: true,
      rootActiveName: 'market',
      rootTabs: [
        {
          label: '营销内容',
          name: 'market'
        }
      ],
      marketActiveName: 'watchReward',
      marketTabs: [
        {
          label: '观看奖励',
          name: 'watchReward'
        },
        {
          label: '答题红包',
          name: 'answerRedPacket'
        },
        {
          label: '答题',
          name: 'answer'
        },
        {
          label: '直播商品',
          name: 'goods'
        },
        {
          label: '观看积分 ',
          name: 'watchScore'
        }
      ],
      questionDialogVisible: false,
      goodsDialogVisible: false,
      questionLoading: false,
      goodsLoading: false,
      searchTitle: '',
      questionList: [],
      selectedQuestions: [],
      selectedGoods: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        liveId: null
      },
      questionTotal: 0,
      questionParams: {
        pageNum: 1,
        pageSize: 10,
        liveId: null
      },
      goodsList: [],
      goodsTotal: 0,
      questionLiveList: [],
      goodsLiveList: [],
      goodsLiveTotal: 0,
      goodsParams: {
        pageNum: 1,
        pageSize: 10,
        liveId: null
      },
      queryGoodParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        liveId: null
      },
      rules:{
        participateCondition:[
          { required: true, message: '请选择参与条件', trigger: 'blur'}
        ],
        watchDuration:[
          { required: true, message: '请输入观看时长', trigger: 'blur'}
        ],
        action:[
          { required: true, message: '请选择实施动作', trigger: 'blur'}
        ],
        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'}
        ]
      },
      watchRewardForm: {
        id: null,
        liveId: null,
        // 是否启用观看奖励
        enabled: false,
        // 参与条件
        participateCondition: '1',
        // 观看时长
        watchDuration: '',
        // 实施动作
        action: '1',
        // 领取提示语
        receivePrompt: '',
        // 红包发放方式（固定金额/随机金额）
        redPacketType: '1',
        // 红包金额
        redPacketAmount: '',
        // 红包发放数量
        redPacketCount: '',
        // 红包领取方式
        receiveMethod: '1',
        // 是否显示客服引导
        showGuide: '1',
        // 客服引导语
        guideText: '',
        // 积分值
        scoreAmount: '',
        // 最大领取人数
        maxReceivers: '',
        // 积分使用引导语
        scoreGuideText: '',
        // 积分使用引导链接
        scoreGuideLink: ''
      },
      // 添加实施动作选项
      actionOptions: [
        {
          label: '现金红包',
          value: '1'
        },
        {
          label: '积分红包',
          value: '2'
        }
      ]
    }
  },
  created() {
    this.liveId = this.$route.params.liveId
    this.queryParams.liveId = this.liveId
    this.goodsParams.liveId = this.liveId
    this.questionParams.liveId = this.liveId
    this.watchRewardForm.liveId = this.liveId
    // this.getLiveQuestionLiveList()
    this.getLiveConfig();
  },
  methods: {
    getLiveConfig(){
      getConfig(this.liveId).then(response => {
        if(response.code === 200){
          this.watchRewardForm = JSON.parse(response.data)
        }
      })
    },
    handleClick(tab, event) {
      console.info(tab, event)
    },
    handleToQuestionBank() {
      this.$router.push('/live/liveQuestionBank')
    },
    handleTabClick(tab) {
      if(tab.name === 'answer') {
        // this.getLiveQuestionLiveList()
      }
      if(tab.name === 'goods'){
        this.getLiveGoodsList();
      }
    },
    getLiveGoodsList() {
      this.loading = true
      listLiveGoods().then(response => {
        this.goodsLiveList = response.rows
        this.goodsLiveTotal = response.total
        this.loading = false
      })
    },
    getLiveQuestionLiveList() {
      this.loading = true
      listLiveQuestionLive(this.questionParams).then(response => {
        this.questionLiveList = response.rows
        this.questionTotal = response.total
        this.loading = false
      })
    },
    handleAddQuestion() {
      this.questionDialogVisible = true
      this.getQuestionList()
    },
    handleAddLiveGoods(){
      this.goodsDialogVisible = true;
      this.getStoreProductLists()
    },
    getQuestionList() {
      this.questionLoading = true
      listLiveQuestionOptionList(this.queryParams).then(response => {
        this.questionList = response.rows
        this.total = response.total
        this.questionLoading = false
      })
    },
    handleQuestionSearch() {
      this.queryParams.pageNum = 1
      this.queryParams.title = this.searchTitle
      this.getQuestionList()
    },
    handleGoodsSearch(){
      this.queryParams.pageNum = 1
      this.queryParams.title = this.searchTitle
      this.getQuestionList()
    },
    handleSelectionChange(selection) {
      this.selectedQuestions = selection
    },
    handleGoodsChange(goods) {
      this.selectedGoods = goods
    },
    handleCurrentChange() {
      this.getQuestionList()
    },
    confirmAddQuestion() {
      if (this.selectedQuestions.length === 0) {
        this.$message({
          message: '请选择要添加的试题',
          type: 'warning'
        })
        return
      }
      // 调用添加直播间试题接口
      addLiveQuestionLive({
        liveId: this.liveId,
        questionIds: this.selectedQuestions.map(item => item.id).join(',')
      }).then(response => {
        this.questionDialogVisible = false
        this.getLiveQuestionLiveList()
      })
    },
    confirmAddGoods(){
      if (this.selectedGoods.length === 0) {
        this.$message({
          message: '请选择要添加的商品',
          type: 'warning'
        })
        return
      }
      addLiveGoods({
        liveId: this.liveId,
        goodsIds: this.selectedGoods.map(item => item.goodsId).join(',')
      }).then(response => {
        this.goodsDialogVisible = false
        this.getLiveGoodsList()
      })
    },
    handleDelete(row) {
      // 调用删除直播间试题接口
      deleteLiveQuestionLive({
        liveId: this.liveId,
        ids: row.id
      }).then(response => {
        this.getLiveQuestionLiveList()
      })
    },
    handleGoodDelete(row){
      delLiveGoods(row.goodsId).then(response => {
        this.getLiveGoodsList()
      })
    },
    /** 处理行点击事件 */
    handleRowClick(row, column) {
      // 如果点击的是复选框列，不进行处理
      if (column.type === 'selection') {
        return
      }

      // 获取表格实例
      const table = this.$refs.questionTable[0]
      if (!table) {
        return
      }

      // 判断当前行是否已经被选中
      const isSelected = this.selectedQuestions.some(item => item.id === row.id)

      // 切换选中状态
      table.toggleRowSelection(row, !isSelected)
    },
    /** 处理行点击事件 */
    handleGoodsRowClick(row, column) {
      // 如果点击的是复选框列，不进行处理
      if (column.type === 'selection') {
        return
      }

      // 获取表格实例
      const table = this.$refs.goodsTable[0]
      if (!table) {
        return
      }

      // 判断当前行是否已经被选中
      const isSelected = this.selectedGoods.some(item => item.id === row.id)

      // 切换选中状态
      table.toggleRowSelection(row, !isSelected)
    },
    saveWatchReward() {
      this.$refs["watchRewardForm"][0].validate(valid => {
        if (valid) {
          if (this.watchRewardForm.id == null) {
            // 调用保存观看奖励接口
            // 实现保存逻辑
            addConfig(this.watchRewardForm).then(res => {
              if (res.code == 200) {
                this.msgSuccess("修改成功");
              }
            })
          } else {
            updateConfig(this.watchRewardForm).then(response => {
              this.msgSuccess("修改成功");
            });
          }
        }
      })

    },
    getStoreProductLists() {
      listStoreProduct().then(response => {
        this.goodsList = response.rows
        this.goodsTotal = response.total
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.live-config-container {
  padding: 10px 20px;
  height: calc(100vh - 84px); /* 减去头部导航的高度 */
}
.white-bg-tabs {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  height: 100%;
}

.market-tab-pane {
  height: 74vh;
  overflow-y: auto;
}
.tip-box {
  padding: 12px 16px;
  background-color: #FFF6F2;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
}

/* 修改弹窗相关样式 */
::v-deep .el-dialog {
  height: 90%;
  margin: 0 !important;
  width: 900px !important;
}

::v-deep .el-dialog__body {
  padding: 20px;
  height: calc(100% - 110px);  /* 减去header和footer的高度 */
  overflow: hidden;
}

.dialog-content {
  height: 100%;
  overflow-y: auto;
}

::v-deep .el-dialog__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 1;
  border-top: 1px solid #e4e7ed;
  padding: 15px 20px;
}

::v-deep .el-dialog__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.selected-count {
  color: #999;
  font-size: 14px;
}

/* 可点击列的样式 */
::v-deep .clickable-column {
  cursor: pointer;
}

/* 提示信息样式 */
.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>