加个没写完的上传页面

src/api/report.js

@@ -420,6 +420,29 @@ export function getGoogleTokenList() {
     method: "get",
   })
 }
+export function getYoutubeAccountList() {
+  return request({
+    // url: 'http://localhost:8567/youtube/getYoutubeAccount',
+    url: 'https://putinapi.zhangxindiet.com/youtube/getYoutubeAccount',
+    method: "get",
+  })
+}
+export function getYoutubeCategoryId(params) {
+  return request({
+    // url: 'http://localhost:8567/youtube/getYoutubeCategoryId',
+    url: 'https://putinapi.zhangxindiet.com/youtube/getYoutubeCategoryId',
+    method: "get",
+    params
+  })
+}
+export function getListMyPlaylists(params) {
+  return request({
+    // url: 'http://localhost:8567/youtube/getListMyPlaylists',
+    url: 'https://putinapi.zhangxindiet.com/youtube/getListMyPlaylists',
+    method: "get",
+    params
+  })
+}
 
 // 获取指定账户的转化列表
 export function fetchConversionAction(data) {

src/router/index.js

@@ -91,6 +91,12 @@ export const constantRouterMap = [
         name: "assetManagement.createMaterial",
         component: () => import("@/views/authAccount/googleOauthYoutube"),
         meta: { title: "创意素材", icon: "chart" }
+      },
+      {
+        path: "/assetManagement/uploadYoutube",
+        name: "assetManagement.createMaterial",
+        component: () => import("@/views/uploadYoutube/uploadYoutube"),
+        meta: { title: "创意素材", icon: "chart" }
       }
     ]
   },

src/views/uploadYoutube/uploadYoutube.vue

+<template>
+  <div class="video-upload-form">
+    <!-- Header Section -->
+    <div class="form-header">
+      <div class="account-select">
+        <el-select v-model="selectedAccount" placeholder="选择YouTube账户" style="width: 200px;" @change="handleAccountChange">
+          <el-option
+            v-for="account in youtubeAccounts"
+            :key="account.id"
+            :label="account.alias"
+            :value="account.id">
+          </el-option>
+        </el-select>
+        <el-button type="primary" class="add-material-btn">添加素材</el-button>
+      </div>
+    </div>
+
+    <el-form :inline="true" class="demo-form-inline" style="margin-bottom: 20px;">
+      <el-form-item label="选中的视频">
+        <el-tag
+          v-for="video in selectedVideos"
+          :key="video.id"
+          closable
+          @close="removeSelectedVideo(video)"
+        >
+          {{ video.name }}
+        </el-tag>
+      </el-form-item>
+    </el-form>
+
+
+    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column label="缩略图" width="180">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 100px; height: 56px"
+            :src="scope.row.thumbnail"
+            fit="cover"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称" width="180"></el-table-column>
+      <el-table-column prop="title" label="标题"></el-table-column>
+      <el-table-column prop="operation" label="操作" width="180"></el-table-column>
+    </el-table>
+
+
+    <el-form :model="form" label-width="120px">
+
+      <el-form-item label="观众">
+        <span>内容是面向儿童</span>
+        <el-switch v-model="form.isForChildren"></el-switch>
+        <el-tag
+          :type="form.isForChildren ? 'info' : ''"
+          :effect="form.isForChildren ? 'dark' : 'plain'"
+        >
+          内容不是面向儿童
+        </el-tag>
+      </el-form-item>
+
+
+      <el-form-item label="类别" required>
+        <el-select v-model="form.category" placeholder="请选择分类" style="width: 100%" v-if="categories.length > 0">
+          <el-option
+            v-for="category in categories"
+            :key="category.id"
+            :label="category.snippet.title"
+            :value="category.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item label="播放列表" v-if="playlists.length > 0">
+        <el-select v-model="form.playlist" placeholder="请选择播放列表" style="width: calc(100% - 130px)">
+          <el-option
+            v-for="playlist in playlists"
+            :key="playlist.id"
+            :label="playlist.snippet.title"
+            :value="playlist.id"
+          >
+          </el-option>
+        </el-select>
+<!--        <el-button type="primary" plain>创建播放列表</el-button>-->
+      </el-form-item>
+
+
+      <el-form-item label="公开范围">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane label="发布" name="publish">
+            <el-select v-model="form.visibility" placeholder="选择可见性" style="width: 100%">
+              <el-option label="不公开" value="private"></el-option>
+              <el-option label="公开" value="public"></el-option>
+              <el-option label="私密" value="unlisted"></el-option>
+            </el-select>
+          </el-tab-pane>
+<!--          <el-tab-pane label="安排时间" name="schedule"></el-tab-pane>-->
+        </el-tabs>
+      </el-form-item>
+
+
+      <el-form-item label="说明">
+        <el-input
+          type="textarea"
+          :rows="4"
+          placeholder="请输入视频描述"
+          v-model="form.description"
+        ></el-input>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" @click="saveForm">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getYoutubeAccountList, getYoutubeCategoryId, getListMyPlaylists } from '@/api/report';
+
+export default {
+  data() {
+    return {
+      youtubeAccounts: [],
+      selectedAccount: '',
+      tableData: [],
+      selectedVideos: [],
+      categories: [],
+      playlists: [], // 新增的播放列表数据
+      form: {
+        isForChildren: false,
+        category: '',
+        playlist: '',
+        visibility: '不公开列出',
+        description: ''
+      },
+      activeTab: 'publish'
+    }
+  },
+  created() {
+    this.fetchYoutubeAccounts();
+  },
+  methods: {
+    async fetchYoutubeAccounts() {
+      try {
+        const response = await getYoutubeAccountList();
+        if (response.status === 200) {
+          this.youtubeAccounts = response.result.data;
+        } else {
+          this.$message.error('获取YouTube账户列表失败');
+        }
+      } catch (error) {
+        console.error('Error fetching YouTube accounts:', error);
+        this.$message.error('获取YouTube账户列表失败');
+      }
+    },
+    async fetchCategories() {
+      if (!this.selectedAccount) {
+        this.categories = [];
+        return;
+      }
+      try {
+        const response = await getYoutubeCategoryId({ youTubeAccountId: this.selectedAccount });
+        if (response.status === 200) {
+          this.categories = response.result.data;
+        } else {
+          this.$message.error('获取YouTube类别失败');
+        }
+      } catch (error) {
+        console.error('Error fetching YouTube categories:', error);
+        this.$message.error('获取YouTube类别失败');
+      }
+    },
+    async fetchPlaylists() { // 新增的获取播放列表的方法
+      if (!this.selectedAccount) {
+        this.playlists = [];
+        return;
+      }
+      try {
+        const response = await getListMyPlaylists({ youTubeAccountId: this.selectedAccount });
+        if (response.status === 200) {
+          this.playlists = response.result.data;
+        } else {
+          this.$message.error('获取YouTube播放列表失败');
+        }
+      } catch (error) {
+        console.error('Error fetching YouTube playlists:', error);
+        this.$message.error('获取YouTube播放列表失败');
+      }
+    },
+    async handleAccountChange() {
+      await this.fetchCategories();
+      await this.fetchPlaylists();
+    },
+    saveForm() {
+      // 这里添加保存表单的逻辑
+      console.log('表单已保存');
+    },
+    removeSelectedVideo(video) {
+      const index = this.selectedVideos.findIndex(v => v.id === video.id);
+      if (index !== -1) {
+        this.selectedVideos.splice(index, 1);
+      }
+    },
+    handleSelectionChange(val) {
+      this.selectedVideos = val;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.video-upload-form {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.form-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.form-header h2 {
+  margin-right: 20px;
+  white-space: nowrap;
+}
+
+.el-select {
+  margin-right: 10px;
+}
+
+.el-form-item {
+  margin-bottom: 22px;
+}
+
+.el-tag {
+  margin-left: 10px;
+}
+
+.el-tabs__nav {
+  padding-left: 0;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.account-select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.add-material-btn {
+  margin-top: 10px;
+}
+</style>