增加查看广告信息抽屉

src/views/campaignTask/CampaignTaskManage.vue

@@ -145,9 +145,6 @@
       :visible.sync="detailVisible"
       width="80%"
     >
-      <div style="margin-bottom: 15px; text-align: right;">
-        <el-button icon="el-icon-refresh" @click="refreshTaskDetail">刷新</el-button>
-      </div>
       <el-table :data="currentTaskDetail" border>
         <el-table-column prop="id" label="ID"></el-table-column>
         <el-table-column prop="advertiserId" label="广告账户ID"></el-table-column>
@@ -175,9 +172,79 @@
             </el-tag>
           </template>
         </el-table-column>
+        <!-- 新增操作列 -->
+        <el-table-column label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button 
+              type="primary" 
+              size="mini" 
+              v-if="scope.row.adInfo" 
+              @click="showAdInfo(scope.row)">
+              广告信息
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </el-dialog>
     
+    <!-- 广告信息抽屉 -->
+    <el-drawer
+      title="广告信息"
+      :visible.sync="drawerVisible"
+      direction="rtl"
+      size="50%"
+      :modal-append-to-body="false"
+    >
+      <div v-if="currentAdInfo" class="drawer-content">
+        <!-- 标题部分 -->
+        <div class="section-title">标题</div>
+        <div class="headlines-section">
+          <div v-for="(headline, index) in currentAdInfo.headlines" :key="'headline-'+index" class="headline-item">
+            <div class="item-content">{{headline.text}}</div>
+          </div>
+        </div>
+
+        <!-- 描述部分 -->
+        <div class="section-title">描述</div>
+        <div class="descriptions-section">
+          <div v-for="(desc, index) in currentAdInfo.descriptions" :key="'desc-'+index" class="description-item">
+            <div class="item-content">{{desc.text}}</div>
+          </div>
+        </div>
+
+        <!-- 图片部分 -->
+        <div class="section-title">图片</div>
+        <div class="images-section">
+          <div v-for="(imgUrl, index) in currentAdInfo.imageUrls" :key="'img-'+index" class="image-item">
+            <img :src="imgUrl" @click="previewImage(imgUrl)" class="thumbnail">
+          </div>
+        </div>
+
+        <!-- 视频部分 -->
+        <div class="section-title">视频</div>
+        <div class="videos-section">
+          <div v-for="(video, index) in currentAdInfo.videoInfos" :key="'video-'+index" class="video-item">
+            <video 
+              :src="video.url" 
+              class="video-thumbnail" 
+              preload="metadata" 
+              @click="playVideo(video.url)">
+            </video>
+            <div class="video-name">{{video.name}}</div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+
+    <!-- 图片预览 -->
+    <el-dialog :visible.sync="previewVisible" append-to-body class="preview-dialog">
+      <img :src="previewImageUrl" class="preview-image" alt="预览图片">
+    </el-dialog>
+
+    <!-- 视频播放 -->
+    <el-dialog :visible.sync="videoPlayVisible" append-to-body width="70%" class="video-dialog">
+      <video :src="currentVideoUrl" controls autoplay class="video-player"></video>
+    </el-dialog>
     
   </div>
 </template>
@@ -226,7 +293,12 @@ export default {
       detailVisible: false,
       errorReasonVisible: false,
       currentTaskDetail: null,
-      currentTaskId: null
+      drawerVisible: false,
+      currentAdInfo: null,
+      previewVisible: false,
+      previewImageUrl: '',
+      videoPlayVisible: false,
+      currentVideoUrl: ''
     }
   },
   created() {
@@ -351,7 +423,6 @@ export default {
       this.detailVisible = true;
       this.detailLoading = true;
       this.currentTaskDetail = null;
-      this.currentTaskId = row.id;
       
       getCampaignTaskDetails({taskId: row.id}).then(response => {
         if (response.status === 200) {
@@ -366,27 +437,6 @@ export default {
         this.detailLoading = false;
       });
     },
-    
-    refreshTaskDetail() {
-      if (!this.currentTaskId) {
-        this.$message.warning('无法刷新，任务ID不存在');
-        return;
-      }
-      
-      this.detailLoading = true;
-      getCampaignTaskDetails({taskId: this.currentTaskId}).then(response => {
-        if (response.status === 200) {
-          this.currentTaskDetail = response.result.data;
-        } else {
-          this.$message.error(response.msg || '获取任务详情失败');
-        }
-      }).catch(error => {
-        console.error('获取任务详情失败:', error);
-        this.$message.error('获取任务详情失败: ' + error.message);
-      }).finally(() => {
-        this.detailLoading = false;
-      });
-    },
 
     async handleStart(row) {
       try {
@@ -447,6 +497,31 @@ export default {
       } catch (e) {
         return jsonString;
       }
+    },
+
+    showAdInfo(row) {
+      if (row && row.adInfo) {
+        try {
+          // 如果adInfo是字符串，则解析为JSON对象
+          this.currentAdInfo = typeof row.adInfo === 'string' ? JSON.parse(row.adInfo) : row.adInfo;
+          this.drawerVisible = true;
+        } catch (error) {
+          console.error('解析广告信息失败:', error);
+          this.$message.error('无法解析广告信息');
+        }
+      } else {
+        this.$message.info('没有广告信息');
+      }
+    },
+    
+    previewImage(url) {
+      this.previewImageUrl = url;
+      this.previewVisible = true;
+    },
+    
+    playVideo(url) {
+      this.currentVideoUrl = url;
+      this.videoPlayVisible = true;
     }
   }
 }
@@ -562,4 +637,103 @@ export default {
 .mt-3 {
   margin-top: 1rem;
 }
+
+/* 抽屉内容样式 */
+.drawer-content {
+  padding: 20px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 20px 0 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.headlines-section,
+.descriptions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.headline-item,
+.description-item {
+  background-color: #f5f7fa;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.item-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+  color: #666;
+}
+
+.item-content {
+  word-break: break-all;
+}
+
+.images-section,
+.videos-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.image-item,
+.video-item {
+  width: calc(33.333% - 15px);
+  margin-bottom: 15px;
+}
+
+.thumbnail,
+.video-thumbnail {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.thumbnail:hover,
+.video-thumbnail:hover {
+  transform: scale(1.05);
+}
+
+.video-name {
+  font-size: 12px;
+  margin-top: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 80vh;
+}
+
+.video-player {
+  width: 100%;
+}
+
+/* 大型屏幕上的响应式布局 */
+@media (min-width: 1200px) {
+  .image-item,
+  .video-item {
+    width: calc(25% - 15px);
+  }
+}
+
+/* 小型屏幕上的响应式布局 */
+@media (max-width: 768px) {
+  .image-item,
+  .video-item {
+    width: calc(50% - 15px);
+  }
+}
 </style>