|
|
@@ -1,5 +1,5 @@
|
|
|
-<template >
|
|
|
- <div v-loading.fullscreen.lock="loading">
|
|
|
+<template>
|
|
|
+ <div class="watch-reward-page" v-loading="loading">
|
|
|
<!-- 提示信息 -->
|
|
|
<div class="tip-message">
|
|
|
设置观看奖励，用户达到直播观看时长后可领取奖励
|
|
|
@@ -70,6 +70,19 @@
|
|
|
|
|
|
<!-- 完课优惠券配置（仅在启用完课优惠券时显示） -->
|
|
|
<template v-if="watchRewardForm.participateCondition === '3'">
|
|
|
+ <!-- 完课率要求 -->
|
|
|
+ <el-form-item label="完课率要求" prop="completionRate">
|
|
|
+ <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="finishCouponId">
|
|
|
<el-select v-model="watchRewardForm.finishCouponId" placeholder="请选择优惠券" style="width: 300px;">
|
|
|
@@ -107,6 +120,37 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <!-- 今日问题配置 -->
|
|
|
+ <el-form-item label="今日问题" prop="finishQuestionIds">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-button type="primary" plain icon="el-icon-plus" @click="openQuestionDialog">选择试题</el-button>
|
|
|
+ <el-link type="primary" style="margin-left: 12px;" @click="handleToQuestionBank">配置直播课题 >></el-link>
|
|
|
+ <el-table
|
|
|
+ v-if="selectedQuestionList.length > 0"
|
|
|
+ :data="selectedQuestionList"
|
|
|
+ style="width: 100%; margin-top: 12px;"
|
|
|
+ size="small"
|
|
|
+ border
|
|
|
+ max-height="240"
|
|
|
+ >
|
|
|
+ <el-table-column prop="title" label="题干" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="type" label="题型" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.type === 1 ? '单选题' : '多选题' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" style="color: #F56C6C;" @click="removeSelectedQuestion(scope.row)">移除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div v-else style="margin-top: 8px; color: #909399; font-size: 13px;">
|
|
|
+ 观看完视频后将自动弹出今日问题，用户答对后发放福利券
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
</template>
|
|
|
|
|
|
<!-- 实施动作（仅在达到指定观看时长时显示） -->
|
|
|
@@ -287,12 +331,68 @@
|
|
|
</div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 选择今日问题弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="选择今日问题"
|
|
|
+ :visible.sync="questionDialogVisible"
|
|
|
+ width="800px"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ custom-class="question-select-dialog"
|
|
|
+ >
|
|
|
+ <div style="text-align: right; margin-bottom: 16px;">
|
|
|
+ <el-input
|
|
|
+ v-model="questionSearchTitle"
|
|
|
+ placeholder="请输入题干搜索"
|
|
|
+ style="width: 300px;"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuestionSearch"
|
|
|
+ >
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="handleQuestionSearch"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="questionTable"
|
|
|
+ :data="questionOptionList"
|
|
|
+ v-loading="questionLoading"
|
|
|
+ row-key="id"
|
|
|
+ @selection-change="handleQuestionSelectionChange"
|
|
|
+ @row-click="handleQuestionRowClick"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" :reserve-selection="true" />
|
|
|
+ <el-table-column prop="title" label="题干" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="type" label="题型" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.type === 1 ? '单选题' : '多选题' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createBy" label="创建人" width="120" />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="160" />
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="questionOptionTotal > 0"
|
|
|
+ :total="questionOptionTotal"
|
|
|
+ :page.sync="questionQueryParams.pageNum"
|
|
|
+ :limit.sync="questionQueryParams.pageSize"
|
|
|
+ @pagination="loadQuestionOptions"
|
|
|
+ style="margin-top: 16px;"
|
|
|
+ />
|
|
|
+ <div slot="footer">
|
|
|
+ <span style="float: left; line-height: 32px; color: #606266;">
|
|
|
+ 已选择 <span style="color: #409EFF;">{{ tempSelectedQuestions.length }}</span> 题
|
|
|
+ </span>
|
|
|
+ <el-button @click="questionDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmQuestionSelection">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {addConfig, getConfig, updateConfig} from "@/api/live/liveQuestionLive";
|
|
|
import {listLiveCouponOn} from "@/api/live/liveCoupon";
|
|
|
+import {listLiveQuestionBank, getLiveQuestionBank} from "@/api/live/liveQuestionBank";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
@@ -346,6 +446,8 @@ export default {
|
|
|
// 完课优惠券相关配置（participateCondition为3时使用）
|
|
|
// 完课优惠券ID
|
|
|
finishCouponId: null,
|
|
|
+ // 今日问题ID（逗号分隔）
|
|
|
+ finishQuestionIds: '',
|
|
|
// 实施动作为3（优惠券）时的配置
|
|
|
// 优惠券ID
|
|
|
actionCouponId: null,
|
|
|
@@ -375,7 +477,7 @@ export default {
|
|
|
completionRate:[
|
|
|
{
|
|
|
validator: (rule, value, callback) => {
|
|
|
- if (this.watchRewardForm.participateCondition === '2') {
|
|
|
+ if (this.watchRewardForm.participateCondition === '2' || this.watchRewardForm.participateCondition === '3') {
|
|
|
if (!value && value !== 0) {
|
|
|
callback(new Error('请输入完课率要求'));
|
|
|
} else if (value < 1 || value > 100) {
|
|
|
@@ -422,6 +524,22 @@ export default {
|
|
|
trigger: 'change'
|
|
|
}
|
|
|
],
|
|
|
+ finishQuestionIds:[
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (this.watchRewardForm.participateCondition === '3') {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请选择今日问题'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ],
|
|
|
actionCouponId:[
|
|
|
{
|
|
|
validator: (rule, value, callback) => {
|
|
|
@@ -479,7 +597,21 @@ export default {
|
|
|
// 选中的完课优惠券信息
|
|
|
selectedFinishCoupon: {},
|
|
|
// 选中的实施动作优惠券信息
|
|
|
- selectedActionCoupon: {}
|
|
|
+ selectedActionCoupon: {},
|
|
|
+ // 今日问题相关
|
|
|
+ questionDialogVisible: false,
|
|
|
+ questionLoading: false,
|
|
|
+ questionSearchTitle: '',
|
|
|
+ questionOptionList: [],
|
|
|
+ questionOptionTotal: 0,
|
|
|
+ questionQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ title: null,
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ selectedQuestionList: [],
|
|
|
+ tempSelectedQuestions: []
|
|
|
|
|
|
};
|
|
|
},
|
|
|
@@ -567,6 +699,7 @@ export default {
|
|
|
this.selectedActionCoupon = coupon;
|
|
|
}
|
|
|
}
|
|
|
+ this.loadSelectedQuestions();
|
|
|
}
|
|
|
this.loading = false
|
|
|
}).catch(() => {
|
|
|
@@ -613,6 +746,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
saveWatchReward() {
|
|
|
+ this.syncFinishQuestionIds();
|
|
|
this.$refs["watchRewardForm"].validate(valid => {
|
|
|
console.log(valid)
|
|
|
if (valid) {
|
|
|
@@ -631,12 +765,96 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ handleToQuestionBank() {
|
|
|
+ this.$router.push('/live/liveQuestionBank');
|
|
|
+ },
|
|
|
+ openQuestionDialog() {
|
|
|
+ this.questionDialogVisible = true;
|
|
|
+ this.tempSelectedQuestions = [...this.selectedQuestionList];
|
|
|
+ this.loadQuestionOptions();
|
|
|
+ },
|
|
|
+ loadQuestionOptions() {
|
|
|
+ this.questionLoading = true;
|
|
|
+ listLiveQuestionBank(this.questionQueryParams).then(response => {
|
|
|
+ this.questionOptionList = response.rows || [];
|
|
|
+ this.questionOptionTotal = response.total || 0;
|
|
|
+ this.questionLoading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.questionTable) {
|
|
|
+ this.questionOptionList.forEach(row => {
|
|
|
+ const selected = this.tempSelectedQuestions.some(item => item.id === row.id);
|
|
|
+ this.$refs.questionTable.toggleRowSelection(row, selected);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.questionLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleQuestionSearch() {
|
|
|
+ this.questionQueryParams.pageNum = 1;
|
|
|
+ this.questionQueryParams.title = this.questionSearchTitle;
|
|
|
+ this.loadQuestionOptions();
|
|
|
+ },
|
|
|
+ handleQuestionSelectionChange(selection) {
|
|
|
+ const currentPageIds = this.questionOptionList.map(item => item.id);
|
|
|
+ const otherPageSelected = this.tempSelectedQuestions.filter(item => !currentPageIds.includes(item.id));
|
|
|
+ this.tempSelectedQuestions = [...otherPageSelected, ...selection];
|
|
|
+ },
|
|
|
+ handleQuestionRowClick(row, column) {
|
|
|
+ if (column.type === 'selection') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const table = this.$refs.questionTable;
|
|
|
+ if (!table) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const isSelected = this.tempSelectedQuestions.some(item => item.id === row.id);
|
|
|
+ table.toggleRowSelection(row, !isSelected);
|
|
|
+ },
|
|
|
+ confirmQuestionSelection() {
|
|
|
+ if (this.tempSelectedQuestions.length === 0) {
|
|
|
+ this.$message.warning('请至少选择一题');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedQuestionList = [...this.tempSelectedQuestions];
|
|
|
+ this.syncFinishQuestionIds();
|
|
|
+ this.questionDialogVisible = false;
|
|
|
+ },
|
|
|
+ removeSelectedQuestion(row) {
|
|
|
+ this.selectedQuestionList = this.selectedQuestionList.filter(item => item.id !== row.id);
|
|
|
+ this.syncFinishQuestionIds();
|
|
|
+ },
|
|
|
+ syncFinishQuestionIds() {
|
|
|
+ this.watchRewardForm.finishQuestionIds = this.selectedQuestionList.map(item => item.id).join(',');
|
|
|
+ },
|
|
|
+ loadSelectedQuestions() {
|
|
|
+ if (!this.watchRewardForm.finishQuestionIds) {
|
|
|
+ this.selectedQuestionList = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const ids = this.watchRewardForm.finishQuestionIds.split(',').filter(Boolean);
|
|
|
+ if (ids.length === 0) {
|
|
|
+ this.selectedQuestionList = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Promise.all(ids.map(id => getLiveQuestionBank(id))).then(results => {
|
|
|
+ this.selectedQuestionList = results
|
|
|
+ .filter(res => res.code === 200 && res.data)
|
|
|
+ .map(res => res.data);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.watch-reward-page {
|
|
|
+ min-height: 100%;
|
|
|
+ padding-bottom: 40px;
|
|
|
+}
|
|
|
+
|
|
|
/* 提示信息样式 */
|
|
|
.tip-message {
|
|
|
padding: 12px 16px;
|
|
|
@@ -669,12 +887,14 @@ export default {
|
|
|
|
|
|
/* 表单区块样式 */
|
|
|
.section-block {
|
|
|
- width: 50%;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 960px;
|
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
|
border-radius: 4px;
|
|
|
margin-left: 50px;
|
|
|
margin-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
/* 标题样式 */
|
|
|
@@ -767,3 +987,10 @@ export default {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.question-select-dialog .el-dialog__body {
|
|
|
+ max-height: 65vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+</style>
|
