|
@@ -48,13 +48,81 @@
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</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
|
|
|
|
|
+ :disabled="isViewOnly"
|
|
|
|
|
+ :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-form-item label="领取提示语" prop="receivePrompt">-->
|
|
|
<!-- <el-input v-model="watchRewardForm.receivePrompt" placeholder="请输入领取提示语"></el-input>-->
|
|
<!-- <el-input v-model="watchRewardForm.receivePrompt" placeholder="请输入领取提示语"></el-input>-->
|
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-form-item>-->
|
|
|
|
|
|
|
|
<!-- 红包设置 -->
|
|
<!-- 红包设置 -->
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div v-if="watchRewardForm.action !== '3'">
|
|
|
<div class="section-title">红包设置</div>
|
|
<div class="section-title">红包设置</div>
|
|
|
|
|
|
|
|
<!-- 根据实施动作类型显示不同的表单内容 -->
|
|
<!-- 根据实施动作类型显示不同的表单内容 -->
|
|
@@ -109,7 +177,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 其他设置 -->
|
|
<!-- 其他设置 -->
|
|
|
- <div >
|
|
|
|
|
|
|
+ <div v-if="watchRewardForm.action !== '3'">
|
|
|
<div class="section-title">其他设置</div>
|
|
<div class="section-title">其他设置</div>
|
|
|
|
|
|
|
|
<template v-if="watchRewardForm.action === '1'">
|
|
<template v-if="watchRewardForm.action === '1'">
|
|
@@ -171,6 +239,7 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import {addConfig, getConfig, updateConfig} from "@/api/live/liveQuestionLive";
|
|
import {addConfig, getConfig, updateConfig} from "@/api/live/liveQuestionLive";
|
|
|
|
|
+import {listBigGiftReward} from "@/api/live/live";
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
props:{
|
|
props:{
|
|
@@ -215,37 +284,12 @@ export default {
|
|
|
// 积分使用引导语
|
|
// 积分使用引导语
|
|
|
scoreGuideText: '',
|
|
scoreGuideText: '',
|
|
|
// 积分使用引导链接
|
|
// 积分使用引导链接
|
|
|
- scoreGuideLink: ''
|
|
|
|
|
- },
|
|
|
|
|
- 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'}
|
|
|
|
|
- ]
|
|
|
|
|
|
|
+ scoreGuideLink: '',
|
|
|
|
|
+ // 大礼品抽奖ID(action=3时仅保存此ID)
|
|
|
|
|
+ bigGiftRewardId: null
|
|
|
},
|
|
},
|
|
|
|
|
+ bigGiftRewardList: [],
|
|
|
|
|
+ bigGiftRewardLoading: false,
|
|
|
// 添加实施动作选项
|
|
// 添加实施动作选项
|
|
|
actionOptions: [
|
|
actionOptions: [
|
|
|
// {
|
|
// {
|
|
@@ -255,11 +299,59 @@ export default {
|
|
|
{
|
|
{
|
|
|
label: '积分红包',
|
|
label: '积分红包',
|
|
|
value: '2'
|
|
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: {
|
|
watch: {
|
|
|
// 监听路由的 query 参数变化
|
|
// 监听路由的 query 参数变化
|
|
|
'$route.query': {
|
|
'$route.query': {
|
|
@@ -277,32 +369,145 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
-
|
|
|
|
|
|
|
+ this.loadBigGiftRewardList();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
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(){
|
|
getLiveConfig(){
|
|
|
getConfig(this.liveId).then(response => {
|
|
getConfig(this.liveId).then(response => {
|
|
|
if(response.code === 200 && response.data != null && response.data.length > 0){
|
|
if(response.code === 200 && response.data != null && response.data.length > 0){
|
|
|
- this.watchRewardForm = JSON.parse(response.data)
|
|
|
|
|
|
|
+ this.watchRewardForm = this.mergeWatchRewardForm(JSON.parse(response.data));
|
|
|
}
|
|
}
|
|
|
this.loading = false
|
|
this.loading = false
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
saveWatchReward() {
|
|
saveWatchReward() {
|
|
|
this.$refs["watchRewardForm"].validate(valid => {
|
|
this.$refs["watchRewardForm"].validate(valid => {
|
|
|
- console.log(valid)
|
|
|
|
|
if (valid) {
|
|
if (valid) {
|
|
|
|
|
+ const payload = this.buildSavePayload();
|
|
|
if (this.watchRewardForm.id == null) {
|
|
if (this.watchRewardForm.id == null) {
|
|
|
- // 调用保存观看奖励接口
|
|
|
|
|
- // 实现保存逻辑
|
|
|
|
|
- addConfig(this.watchRewardForm,this.liveId).then(res => {
|
|
|
|
|
|
|
+ addConfig(payload, this.liveId).then(res => {
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
this.msgSuccess("修改成功");
|
|
this.msgSuccess("修改成功");
|
|
|
|
|
+ this.getLiveConfig();
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
} else {
|
|
} else {
|
|
|
- updateConfig(this.watchRewardForm,this.liveId).then(response => {
|
|
|
|
|
|
|
+ updateConfig(payload, this.liveId).then(response => {
|
|
|
this.msgSuccess("修改成功");
|
|
this.msgSuccess("修改成功");
|
|
|
|
|
+ this.getLiveConfig();
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -413,4 +618,20 @@ export default {
|
|
|
padding: 8px 20px;
|
|
padding: 8px 20px;
|
|
|
font-size: 13px;
|
|
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>
|
|
</style>
|