feat: tiktok绑定包列表

src/api/accountManagement.js

@@ -7,7 +7,7 @@ import request from '@/utils/request'
  */
 export function getAccountList(params) {
   return request({
-    url: process.env.PUTIN_API + '/oauth/google/accounts',
+    url: process.env.PUTIN_API + '/oauth/accounts',
     method: 'get',
     params
   })
@@ -48,3 +48,40 @@ export function getFacebookAuthUrl() {
   })
 }
 
+/**
+ * 获取TikTok账户列表
+ * @returns {Promise}
+ */
+export function getTiktokAccountList() {
+  return request({
+    url: process.env.PUTIN_API + '/api/tiktok/oauth/fbAdvertiserList',
+    method: 'get'
+  })
+}
+
+/**
+ * 修改账户信息
+ * @param {Object} params 账户信息
+ * @returns {Promise}
+ */
+export function updateAccount(params) {
+  return request({
+    url: process.env.PUTIN_API + '/api/tiktok/oauth/fbAdvertiserUpdate',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 删除TikTok账户
+ * @param {Number} id 账户ID
+ * @returns {Promise}
+ */
+export function deleteTiktokAccount(id) {
+  return request({
+    url: process.env.PUTIN_API + '/api/tiktok/oauth/fbAdvertiserDelete',
+    method: 'get',
+    params: { id }
+  })
+}
+

src/views/promotionManagement/AccountManagement.vue

@@ -12,6 +12,11 @@
         type="primary"
         @click="facebookAuthorization"
       >Facebook</el-button>
+      <el-button
+        class="authorization-btn"
+        type="primary"
+        @click="tiktokAuthorization"
+      >TikTok</el-button>
     </div>
 
     <!-- 过滤条件区域 -->
@@ -50,15 +55,9 @@
       style="width: 100%"
     >
       <el-table-column prop="id" label="ID" width="60" align="center" />
-      <el-table-column prop="username" label="账号名称" align="center" />
-      <el-table-column prop="email" label="账号邮箱" align="center" />
-      <el-table-column label="平台" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="getPlatformTagType(scope.row.type)">
-            {{ getPlatformName(scope.row.type) }}
-          </el-tag>
-        </template>
-      </el-table-column>
+      <el-table-column prop="actId" label="账户ID" align="center" />
+      <el-table-column prop="name" label="账户名称" align="center" />
+      <el-table-column prop="pkg" label="应用包名" align="center" />
 <!--      <el-table-column label="授权状态" align="center">-->
 <!--        <template slot-scope="scope">-->
 <!--          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">-->
@@ -68,15 +67,14 @@
 <!--      </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="primary"
+            size="small"
+            plain
+            @click="editAccount(scope.row)"
+          >
+            修改
+          </el-button>
           <el-button
             type="danger"
             size="small"
@@ -89,11 +87,35 @@
       </el-table-column>
     </el-table>
 
+    <!-- 修改账户对话框 -->
+    <el-dialog
+      title="修改账户"
+      :visible.sync="editDialogVisible"
+      width="500px"
+      @close="resetEditForm"
+    >
+      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
+        <el-form-item label="账户ID" prop="actId">
+          <el-input v-model="editForm.actId" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="账户名称" prop="name">
+          <el-input v-model="editForm.name" placeholder="请输入账户名称"></el-input>
+        </el-form-item>
+        <el-form-item label="应用包名" prop="pkg">
+          <el-input v-model="editForm.pkg" placeholder="请输入应用包名"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitEdit" :loading="editLoading">确定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
-import { getAccountList, deleteAccount, refreshToken, getGoogleAuthUrl, getFacebookAuthUrl } from '@/api/accountManagement'
+import { getAccountList, deleteAccount, refreshToken, getGoogleAuthUrl, getFacebookAuthUrl, getTiktokAccountList, updateAccount, deleteTiktokAccount } from '@/api/accountManagement'
 
 export default {
   name: 'AccountManagement',
@@ -110,14 +132,38 @@ export default {
       // 平台列表
       platformList: [
         { value: 'google', label: 'Google' },
-        { value: 'facebook', label: 'Facebook' }
+        { value: 'facebook', label: 'Facebook' },
+        { value: 'tiktok', label: 'TikTok' }
       ],
       // 表格数据
       tableData: [],
       // 总记录数
       totalNum: 0,
       // 加载状态
-      listLoading: false
+      listLoading: false,
+      // 修改对话框相关
+      editDialogVisible: false,
+      editLoading: false,
+      editForm: {
+        id: null,
+        actId: '',
+        name: '',
+        pkg: ''
+      },
+      editRules: {
+        name: [
+          { required: true, message: '请输入账户名称', trigger: 'blur' }
+        ],
+        pkg: [
+          { required: true, message: '请输入应用包名', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    // 判断是否为TikTok账户
+    isTikTokAccount() {
+      return this.tableData.some(item => item.actId || item.pkg)
     }
   },
   mounted() {
@@ -175,6 +221,31 @@ export default {
       })
     },
 
+    // TikTok账户列表
+    tiktokAuthorization() {
+      // 调用TikTok账户列表接口
+      this.getTiktokAccountList()
+    },
+
+    // 获取TikTok账户列表
+    async getTiktokAccountList() {
+      this.listLoading = true
+      try {
+        const res = await getTiktokAccountList()
+        if (res.status === 200) {
+          this.tableData = res.result.data || []
+          this.$message.success('获取TikTok账户列表成功')
+        } else {
+          this.$message.error(res.message || '获取TikTok账户列表失败')
+        }
+      } catch (error) {
+        console.error('获取TikTok账户列表异常', error)
+        this.$message.error('获取TikTok账户列表失败')
+      } finally {
+        this.listLoading = false
+      }
+    },
+
     // 刷新授权
     async refreshToken(row) {
       try {
@@ -191,6 +262,58 @@ export default {
       }
     },
 
+    // 修改账户
+    editAccount(row) {
+      this.editForm = {
+        id: row.id,
+        actId: row.actId,
+        name: row.name,
+        pkg: row.pkg
+      }
+      this.editDialogVisible = true
+    },
+
+    // 提交修改
+    async submitEdit() {
+      this.$refs.editForm.validate(async (valid) => {
+        if (valid) {
+          this.editLoading = true
+          try {
+            const res = await updateAccount({
+              id: this.editForm.id,
+              name: this.editForm.name,
+              pkg: this.editForm.pkg
+            })
+            if (res.status === 200) {
+              this.$message.success('修改成功')
+              this.editDialogVisible = false
+              this.getTiktokAccountList()
+            } else {
+              this.$message.error(res.message || '修改失败')
+            }
+          } catch (error) {
+            console.error('修改账户异常', error)
+            this.$message.error('修改失败')
+          } finally {
+            this.editLoading = false
+          }
+        }
+      })
+    },
+
+    // 重置修改表单
+    resetEditForm() {
+      this.editForm = {
+        id: null,
+        actId: '',
+        name: '',
+        pkg: ''
+      }
+      if (this.$refs.editForm) {
+        this.$refs.editForm.resetFields()
+      }
+    },
+
     // 删除账号
     deleteAccount(row) {
       this.$confirm('确认删除该账号?', '提示', {
@@ -199,10 +322,10 @@ export default {
         type: 'warning'
       }).then(async () => {
         try {
-          const res = await deleteAccount(row.id)
+          const res = await deleteTiktokAccount(row.id)
           if (res.status === 200) {
             this.$message.success('删除成功')
-            this.getAccountList()
+            this.getTiktokAccountList()
           } else {
             this.$message.error(res.message || '删除失败')
           }