添加Google Ads绑定账号功能

src/views/adweb/site/AdwebSite.api.ts

@@ -12,6 +12,8 @@ enum Api {
   importExcel = '/adweb/adwebSite/importExcel',
   exportXls = '/adweb/adwebSite/exportXls',
   gtmListUrl = 'gtm/add/list',
+  getGoogleAdsAccount = '/marketing/googleads/account/get',
+  bindGoogleAdsAccount = '/marketing/googleads/account/add', // 添加绑定接口地址
 }
 
 /**
@@ -73,3 +75,15 @@ export const saveOrUpdate = (params, isUpdate) => {
   const url = isUpdate ? Api.edit : Api.save;
   return defHttp.post({ url: url, params }, { isTransformResponse: false });
 };
+
+/**
+ * 获取Google Ads账号信息
+ * @param params
+ */
+export const getGoogleAdsAccount = (params) => defHttp.get({ url: Api.getGoogleAdsAccount, params });
+
+/**
+ * 绑定Google Ads账号
+ * @param params
+ */
+export const bindGoogleAdsAccount = (params) => defHttp.post({ url: Api.bindGoogleAdsAccount, params }, { joinParamsToUrl: true });

src/views/adweb/site/AdwebSiteList.vue

@@ -159,6 +159,7 @@
     <gtm-add ref="gtmRef" />
     <!--SEO流程-->
     <seo-process ref="seoProcessRef" :visible="seoProcessVisible" :title="processTitle" @close="closeProcess" @reload="reload" />
+    <google-ads-modal ref="googleAdsModalRef" @success="reload" />
   </div>
 </template>
 
@@ -178,6 +179,7 @@
   import { RoleEnum } from '@/enums/roleEnum';
   import { useMessage } from '@/hooks/web/useMessage';
   import SiteSetEnquiry from '@/views/adweb/site/components/SiteSetEnquiry.vue';
+  import GoogleAdsModal from './components/GoogleAdsModal.vue';
 
   const formRef = ref();
   const queryParam = reactive<any>({});
@@ -189,6 +191,7 @@
   const seoProcessRef = ref();
   const gtmRef = ref();
   const siteSetEnquiryRef = ref();
+  const googleAdsModalRef = ref();
 
   const isAdmin = computed(() => userStore.getRoleList.includes(RoleEnum.ADMIN));
   const { createMessage } = useMessage();
@@ -362,6 +365,9 @@
       dropDown.push({
         label: '跟踪代码',
         onClick: addGtm.bind(null, record),
+      },{
+        label: 'Google Ads帐号',
+        onClick: bindGoogleAds.bind(null, record),
       });
     }
 
@@ -415,6 +421,10 @@
   function closeProcess() {
     seoProcessVisible.value = false;
   }
+
+  function bindGoogleAds(record) {
+    googleAdsModalRef.value.init({ record });
+  }
 </script>
 
 <style lang="less" scoped>

src/views/adweb/site/components/GoogleAdsModal.vue

@@ -0,0 +1,103 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    title="绑定Google Ads帐号"
+    @ok="handleSubmit"
+    width="850"
+    showFooter
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { BasicForm, useForm } from '/@/components/Form';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getGoogleAdsAccount, bindGoogleAdsAccount } from '../AdwebSite.api';
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+
+const formSchema = [
+  {
+    field: 'googleAdsAccount',
+    label: 'Google Ads帐号',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'apiAccessToken',
+    label: 'API Access Token',
+    component: 'Input',
+  },
+  {
+    field: 'siteCode',
+    label: '站点代码',
+    component: 'Input',
+    required: true,
+    show: false,
+  },
+];
+
+const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
+  labelWidth: 120,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner();
+
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    const params: Record<string, any> = {
+      customerId: values.googleAdsAccount,
+      siteCode: values.siteCode,
+    };
+    if (values.apiAccessToken) {
+      params.refreshToken = values.apiAccessToken;
+    }
+    await bindGoogleAdsAccount(params);
+    createMessage.success('Google Ads账号绑定成功');
+    emit('success');
+    closeDrawer();
+  } catch (error) {
+    createMessage.error('绑定Google Ads账号失败');
+    console.error(error);
+  }
+}
+
+// Add this method to handle initialization
+const init = async (data: { record: Recordable }) => {
+  resetFields();
+  setDrawerProps({ visible: true, confirmLoading: true });
+  
+  try {
+    // 将 siteCode 作为路径参数传递
+    const params = {
+      siteCode: data.record.code
+    };
+    const res = await getGoogleAdsAccount(params);
+    if (res) {
+      setFieldsValue({
+        googleAdsAccount: res.customerId,
+        apiAccessToken: res.refreshToken,
+        siteCode: data.record.code,
+      });
+    }
+  } catch (error) {
+    createMessage.error('获取Google Ads账号信息失败');
+    console.error(error);
+  } finally {
+    setDrawerProps({ confirmLoading: false });
+  }
+};
+
+// Expose the init method
+defineExpose({
+  init
+});
+</script>