Explorar o código

导出减少字段

yuhongqi hai 13 horas
pai
achega
85f9a47a87
Modificáronse 2 ficheiros con 269 adicións e 39 borrados
  1. 9 0
      src/api/live/live.js
  2. 260 39
      src/views/live/liveConfig/watchReward.vue

+ 9 - 0
src/api/live/live.js

@@ -132,3 +132,12 @@ export function generateCode(data) {
     params: data
   })
 }
+
+// 查询 his 平台大礼品奖励配置(rewardType=6)
+export function listBigGiftReward(query) {
+  return request({
+    url: '/live/live/bigGiftReward/list',
+    method: 'get',
+    params: query
+  })
+}

+ 260 - 39
src/views/live/liveConfig/watchReward.vue

@@ -48,13 +48,81 @@
           </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
+              :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-input v-model="watchRewardForm.receivePrompt" placeholder="请输入领取提示语"></el-input>-->
 <!--        </el-form-item>-->
 
         <!-- 红包设置 -->
-        <div>
+        <div v-if="watchRewardForm.action !== '3'">
           <div class="section-title">红包设置</div>
 
           <!-- 根据实施动作类型显示不同的表单内容 -->
@@ -109,7 +177,7 @@
         </div>
 
         <!-- 其他设置 -->
-        <div >
+        <div v-if="watchRewardForm.action !== '3'">
           <div class="section-title">其他设置</div>
 
           <template v-if="watchRewardForm.action === '1'">
@@ -171,6 +239,7 @@
 
 <script>
 import {addConfig, getConfig, updateConfig} from "@/api/live/liveQuestionLive";
+import {listBigGiftReward} from "@/api/live/live";
 
 export default {
   props:{
@@ -215,37 +284,12 @@ export default {
         // 积分使用引导语
         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: [
         // {
@@ -255,11 +299,59 @@ export default {
         {
           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': {
@@ -277,32 +369,145 @@ export default {
     }
   },
   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 = JSON.parse(response.data)
+          this.watchRewardForm = this.mergeWatchRewardForm(JSON.parse(response.data));
         }
         this.loading = false
       })
     },
     saveWatchReward() {
       this.$refs["watchRewardForm"].validate(valid => {
-        console.log(valid)
         if (valid) {
+          const payload = this.buildSavePayload();
           if (this.watchRewardForm.id == null) {
-            // 调用保存观看奖励接口
-            // 实现保存逻辑
-            addConfig(this.watchRewardForm,this.liveId).then(res => {
+            addConfig(payload, this.liveId).then(res => {
               if (res.code == 200) {
                 this.msgSuccess("修改成功");
+                this.getLiveConfig();
               }
             })
           } else {
-            updateConfig(this.watchRewardForm,this.liveId).then(response => {
+            updateConfig(payload, this.liveId).then(response => {
               this.msgSuccess("修改成功");
+              this.getLiveConfig();
             });
           }
         }
@@ -413,4 +618,20 @@ export default {
   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>