|
@@ -0,0 +1,1016 @@
|
|
|
+<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
|
|
|
+ label="商品图片"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img
|
|
|
+ :src="scope.row.imgUrl"
|
|
|
+ style="display: block; max-width: 100%; width: 100px; height: 100px"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="productName"
|
|
|
+ label="商品名称"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="price"
|
|
|
+ label="价格"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="stock"
|
|
|
+ label="库存"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="sales"
|
|
|
+ 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="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,addLiveGoods} 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({liveId: this.liveId}).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,
|
|
|
+ productsId: this.selectedGoods.map(item => item.productId).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({liveId:this.liveId}).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>
|