增加媒体账号授权页面

src/api/accountManagement.js

+import request from '@/utils/request'
+
+/**
+ * 获取账号列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function getAccountList(params) {
+  return request({
+    url: '/api/account/list',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 删除账号
+ * @param {Object} data 账号信息
+ * @returns {Promise}
+ */
+export function deleteAccount(data) {
+  return request({
+    url: '/api/account/delete',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 刷新账号授权
+ * @param {Object} data 账号信息
+ * @returns {Promise}
+ */
+export function refreshToken(data) {
+  return request({
+    url: '/api/account/refresh-token',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取Google授权URL
+ * @returns {Promise}
+ */
+export function getGoogleAuthUrl() {
+  return request({
+    url: process.env.PUTIN_API + '/api/oauth/google/auth-url',
+    method: 'get'
+  })
+}
+

src/router/index.js

@@ -55,19 +55,19 @@ export const constantRouterMap = [
   },
 
   {
-    path: "/intelligentDelivery", // 智能投放
+    path: "/intelligentDelivery", // 推广管理
     name: "intelligentDelivery",
     component: Layout,
     meta: {
-      title: "智能投放",
+      title: "推广管理",
       icon: "chart"
     },
     children: [
       {
-        path: "/intelligentDelivery/createDelivery",
-        name: "intelligentDelivery.createDelivery",
-        component: () => import("@/views/createDelivery"),
-        meta: { title: "创意投放", icon: "chart" }
+        path: "/intelligentDelivery/account-manager", // 媒体账号管理
+        name: "intelligentDelivery.account-manager",
+        component: () => import('@/views/promotionManagement/AccountManagement'),
+        meta: { title: "媒体账号管理", icon: "user" }
       },
 
       {
@@ -173,6 +173,24 @@ export const constantRouterMap = [
     ]
   },
 
+  {
+    path: "/promotionManagement", // 推广管理
+    name: "promotionManagement",
+    component: Layout,
+    meta: {
+      title: "推广管理",
+      icon: "form"
+    },
+    children: [
+      {
+        path: "/promotionManagement/account", // 账号管理
+        name: "promotionManagement.account",
+        component: () => import('@/views/promotionManagement/AccountManagement'),
+        meta: { title: "账号管理", icon: "user" }
+      }
+    ]
+  },
+
   {
     path: "/tools", // 资产管理
     name: "tools",

src/views/layout/Layout.vue

@@ -18,7 +18,7 @@
         <!-- 带子菜单的导航项 -->
         <el-submenu index="2">
           <template slot="title">推广管理</template>
-          <el-menu-item index="/intelligentDelivery/createDelivery">创建计划</el-menu-item>
+          <el-menu-item index="/intelligentDelivery/account-manager">媒体账号管理</el-menu-item>
           <el-menu-item index="/intelligentDelivery/campaign-task">计划投放</el-menu-item>
           <el-menu-item index="/intelligentDelivery/campaign-template">计划模板</el-menu-item>
         </el-submenu>

src/views/promotionManagement/AccountManagement.vue

+<template>
+  <div class="app-container">
+    <!-- 顶部平台按钮区域 -->
+    <div class="platform-buttons">
+      <el-button
+        class="authorization-btn"
+        type="primary"
+        @click="googleAuthorization"
+      >Google</el-button>
+      <el-button
+        class="authorization-btn"
+        type="primary"
+        @click="facebookAuthorization"
+      >Facebook</el-button>
+    </div>
+
+    <!-- 过滤条件区域 -->
+    <el-form :inline="true" class="filter-container">
+      <el-form-item label="平台">
+        <el-select v-model="condition.platform" clearable filterable @change="getAccountList">
+          <el-option
+            v-for="item in platformList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="账号ID">
+        <el-input v-model="condition.accountId" placeholder="请输入账号ID" clearable />
+      </el-form-item>
+
+      <el-form-item label="账号名称">
+        <el-input v-model="condition.accountName" placeholder="请输入账号名称" clearable />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="getAccountList">查询</el-button>
+        <el-button @click="resetCondition">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 账户列表表格 -->
+    <el-table
+      v-loading="listLoading"
+      element-loading-text="加载中"
+      :data="tableData"
+      border
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column prop="id" label="序号" width="60" align="center" />
+      <el-table-column prop="accountId" label="账号ID" align="center" />
+      <el-table-column prop="accountName" label="账号名称" align="center" />
+      <el-table-column prop="email" label="账号邮箱" align="center" />
+      <el-table-column prop="platformName" label="平台" align="center" />
+      <el-table-column label="授权状态" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+            {{ scope.row.status === 1 ? '正常' : '异常' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="180" align="center">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="small"
+            plain
+            @click="refreshToken(scope.row)"
+            :disabled="scope.row.status !== 2"
+          >
+            刷新授权
+          </el-button>
+          <el-button
+            type="danger"
+            size="small"
+            plain
+            @click="deleteAccount(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      background
+      :total="totalNum"
+      :page-size="condition.size"
+      :current-page="condition.offset"
+      style="text-align: right; margin-top: 15px"
+      layout="total, prev, pager, next, sizes"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import { getAccountList, deleteAccount, refreshToken, getGoogleAuthUrl } from '@/api/accountManagement'
+
+export default {
+  name: 'AccountManagement',
+  data() {
+    return {
+      // 查询条件
+      condition: {
+        platform: '',
+        accountId: '',
+        accountName: '',
+        offset: 1,
+        size: 10
+      },
+      // 平台列表
+      platformList: [
+        { value: 'google', label: 'Google' },
+        { value: 'facebook', label: 'Facebook' }
+      ],
+      // 表格数据
+      tableData: [],
+      // 总记录数
+      totalNum: 0,
+      // 加载状态
+      listLoading: false
+    }
+  },
+  created() {
+    // 初始化加载数据
+    this.getAccountList()
+  },
+  methods: {
+    // 获取账号列表
+    async getAccountList() {
+      this.listLoading = true
+      try {
+        const res = await getAccountList(this.condition)
+        if (res.code === 200) {
+          this.tableData = res.data.list || []
+          this.totalNum = res.data.total || 0
+        } else {
+          this.$message.error(res.message || '获取账号列表失败')
+        }
+      } catch (error) {
+        console.error('获取账号列表异常', error)
+        this.$message.error('获取账号列表失败')
+      } finally {
+        this.listLoading = false
+      }
+    },
+
+    // 谷歌授权
+    googleAuthorization() {
+      // 调用后端获取授权URL，并跳转到Google授权页面
+      getGoogleAuthUrl().then(res => {
+        if (res.status === 200) {
+          window.location.href = res.result.data.url
+        } else {
+          this.$message.error(res.message || 'Google授权失败')
+        }
+      }).catch(error => {
+        console.error('Google授权异常', error)
+        this.$message.error('获取Google授权链接失败')
+      })
+    },
+
+    // Facebook授权
+    facebookAuthorization() {
+      // 调用后端获取授权URL，并跳转到Facebook授权页面
+      this.$http.get('/api/account/facebook/auth-url').then(res => {
+        if (res.data.code === 200) {
+          window.location.href = res.data.data
+        } else {
+          this.$message.error(res.data.message || 'Facebook授权失败')
+        }
+      }).catch(error => {
+        console.error('Facebook授权异常', error)
+        this.$message.error('获取Facebook授权链接失败')
+      })
+    },
+
+    // 刷新授权
+    async refreshToken(row) {
+      try {
+        const res = await refreshToken({ accountId: row.accountId, platform: row.platform })
+        if (res.code === 200) {
+          this.$message.success('刷新授权成功')
+          this.getAccountList()
+        } else {
+          this.$message.error(res.message || '刷新授权失败')
+        }
+      } catch (error) {
+        console.error('刷新授权异常', error)
+        this.$message.error('刷新授权失败')
+      }
+    },
+
+    // 删除账号
+    deleteAccount(row) {
+      this.$confirm('确认删除该账号?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          const res = await deleteAccount({ accountId: row.accountId, platform: row.platform })
+          if (res.code === 200) {
+            this.$message.success('删除成功')
+            this.getAccountList()
+          } else {
+            this.$message.error(res.message || '删除失败')
+          }
+        } catch (error) {
+          console.error('删除账号异常', error)
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {
+        // 取消删除
+      })
+    },
+
+    // 重置查询条件
+    resetCondition() {
+      this.condition = {
+        platform: '',
+        accountId: '',
+        accountName: '',
+        offset: 1,
+        size: 10
+      }
+      this.getAccountList()
+    },
+
+    // 页码变化
+    handleCurrentChange(page) {
+      this.condition.offset = page
+      this.getAccountList()
+    },
+
+    // 每页显示条数变化
+    handleSizeChange(size) {
+      this.condition.size = size
+      this.condition.offset = 1
+      this.getAccountList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+.platform-buttons {
+  margin-bottom: 20px;
+}
+
+.authorization-btn {
+  margin-right: 10px;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+}
+</style>