From ace3d9b574d3bf43d56f3cb1e4bfdbbc862cda1f Mon Sep 17 00:00:00 2001
From: rd <>
Date: Thu, 26 Jun 2025 11:36:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B4=A6=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |  30 ++
 .../img/media-account/icon-download.png       | Bin 0 -> 421 bytes
 src/assets/img/media-account/icon-warn-1.png  | Bin 0 -> 639 bytes
 .../components/add-account-modal/index.vue    | 273 +++++++++++++++++-
 .../components/add-account-modal/style.scss   | 108 ++++++-
 .../components/filter-block/index.vue         |  31 +-
 .../components/group-manage-modal/index.vue   |   9 +-
 .../components/group-manage-modal/style.scss  |   1 +
 .../components/group-select/index.vue         |  64 ++++
 .../components/import-prompt-modal/index.vue  |  51 ++++
 .../components/import-prompt-modal/style.scss |  32 ++
 .../components/qrCode-modal/index.vue         |  46 +++
 .../components/qrCode-modal/style.scss        |  19 ++
 .../components/tag-select/index.vue           |  64 ++++
 .../components/tags-manage-modal/index.vue    |   9 +-
 .../components/tags-manage-modal/style.scss   |  31 +-
 .../media-account/account-manage/index.vue    |  14 +-
 17 files changed, 712 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/img/media-account/icon-download.png
 create mode 100644 src/assets/img/media-account/icon-warn-1.png
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/group-select/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/qrCode-modal/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/qrCode-modal/style.scss
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 0e68177..0e86efa 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -18,3 +18,33 @@ export const fetchAccountGroups = (params = {}) => {
 export const fetchAccountOperators = (params = {}) => {
   return Http.get('/v1/media-account-operators/list', params);
 };
+
+// 媒体账号-分页
+export const getMediaAccounts = (params = {}) => {
+  return Http.get('/v1/media-accounts', params);
+};
+
+// 媒体账号-添加
+export const postMediaAccounts = (params = {}) => {
+  return Http.post('/v1/media-accounts', params);
+};
+
+// 媒体账号-详情
+export const getMediaAccountsDetail = (id: string) => {
+  return Http.get(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-修改
+export const putMediaAccounts = (id: string) => {
+  return Http.put(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-删除
+export const deleteMediaAccounts = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}`);
+};
+
+// 媒体账号-获取模板地址
+export const getTemplateUrl = (params = {}) => {
+  return Http.get('/v1/media-accounts/template', params);
+};
diff --git a/src/assets/img/media-account/icon-download.png b/src/assets/img/media-account/icon-download.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a0db1bc50025de9592d500ac35f747e9fe1bf3f
GIT binary patch
literal 421
zcmV;W0b2fvP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0Xj)UK~#7F?Uqqa
z!axv)|Jn8c9Kj=S1M$5i+yHzvLhuB7hZ<k4C$I^=BPWn6cmv;McVuWaz#?oHNJH2!
zX)>GL+4;I{It2nXL-6D_`EC)ZuEZRvm&csm;Xw>f$ix>=+*`z2PvD6{%>;oU5Cl#~
zVA$aXj)0SZ6gM*-4-&rLwN};)67%6I>?ELP{K`O+!4KOcWKPz|+Idb62b_9=j_EGa
zJO-mtN`MVMHx*wD2wys)q08RR-SDQv&0mQ!aVmGZ9+$<ho^qPH>|3cFuS;y$ty1wK
zr6T`IcoZ+vJg_7@ix;V${7KC5ExtD*As6<*I)Q#$KNk^C(ovk@0QB4P>t-$`PDj!8
z@|^u0VCpTYWjFu?(_*G>Ib0E_y&2h$ATf+1lD?^xnzf&R{SFXk2%Hl?lG~7mq9TDG
P00000NkvXXu0mjfBi5+B

literal 0
HcmV?d00001

diff --git a/src/assets/img/media-account/icon-warn-1.png b/src/assets/img/media-account/icon-warn-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..40402eba487815a406941dbf66496801eadeb21e
GIT binary patch
literal 639
zcmV-_0)YLAP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0u)I^K~#7F?U><F
z!ypvL|3n9H1G9lTfpG(?epe^(I)Rr7yiQ>KuGS6A2z7(FfeW<wAZag92mx&3_4>O@
zk3tClJi_BWfIT}7Lj-(=BP@{7Q&J>2Q5u){rn-Vkb2h>c0tpgG!Y;w_K*g+MmxAtp
zVb_?#6EA`Mm4qdDqGF0LN)np;2<;?LP9?_--7V%CbxOZEO?~OU)d7i1N!%yGt!AU7
z(Jx#gTLo@W+zO{itH2(_tq>y5Y%4u!>G+84i-R1a`o4`AEy&++M=j6rqo6)z^#J)|
z8GKk`#BT7RSDP)!r1ks|er|+&afvc~soa;LS|3MPub-*aNu{6F*t8(SErueIyOUPc
zKsw~Va>ij~wT3mi1y3<NS@Vx7a5<>;P-{q=e^r5Okj0^*g>4D`IeUSz=-=QRLnBg!
z28T-Hg7(r-o05YkA9gOwJYum`dCVGB;DO8?LdhcfHc@6#u~!|F6$pV-pl}5yE>T7p
zg&r50_TmYKf^9}Y8v^MKL`+tqe@YsAs#hKwZ)F&_MY)zfaf^f@H&<KW?=m0B&<B);
z%0SmZ($Z;!ex|ylE4MXT1<KV#DIvBiGCb{EF?8bY+&AO{Dogq&LUxKe7cN~l`W+t4
zD52s}`LcM~aqY@F5qkV4go@-U>)55BAYfw3dtJmIV2V6OqzVa+wdOBW3#^Daz}&O*
Z`~v?$k_a=)qKN<i002ovPDHLkV1oY*5Sah~

literal 0
HcmV?d00001

diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
index 5dbfd99..3f4d67b 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@@ -3,27 +3,278 @@
  * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal v-model:visible="visible" width="800px" modal-class="add-account-modal" :footer="false" @close="close">
-    <template #title> 添加账号 </template>
+  <a-modal
+    v-model:visible="visible"
+    title="添加账号"
+    modal-class="add-account-modal"
+    :footer="false"
+    width="500px"
+    :mask-closable="false"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+      <a-form-item label="上传方式" required>
+        <a-radio-group v-model="uploadType">
+          <a-radio value="manual">手动添加账号</a-radio>
+          <a-radio value="batch">批量导入账号</a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <!-- 批量导入账号模式下的内容 -->
+      <template v-if="isBatchImport">
+        <a-form-item label="账号文件" required>
+          <!-- 默认状态 -->
+          <div class="upload-block">
+            <template v-if="uploadStatus === 'default'">
+              <a-upload draggable :custom-request="handleUpload" />
+            </template>
+            <template v-else>
+              <div class="flex items-center">
+                <div
+                  class="flex items-center justify-between py-9px px-12px flex-1 import-row"
+                  :class="{
+                    error: uploadStatus === 'error',
+                  }"
+                >
+                  <div class="flex items-center">
+                    <icon-file size="16" />
+                    <span class="name ml-8px">{{ fileName }}</span>
+                  </div>
+                  <span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
+                </div>
+                <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
+              </div>
+            </template>
+            <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
+              <img :src="icon1" width="16" height="16" class="mr-4px" />
+              <span class="dt">下载账号导入模板.xlsx</span>
+            </div>
+          </div>
+        </a-form-item>
+      </template>
+
+      <!-- 手动添加账号 -->
+      <template v-else>
+        <a-form-item label="手机号" field="mobile" required>
+          <a-input v-model="form.mobile" placeholder="请输入..." size="large" />
+        </a-form-item>
+        <a-form-item label="运营人员" field="operator_name" required>
+          <a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
+        </a-form-item>
+        <a-form-item label="号码持有人" field="holder_name" required>
+          <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
+        </a-form-item>
+        <a-form-item label="运营平台" required>
+          <a-radio-group v-model="form.platform">
+            <a-radio :value="0">抖音</a-radio>
+            <a-radio :value="1">小红书</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="选择分组">
+          <GroupSelect
+            v-model="form.group_id"
+            :multiple="false"
+            :options="groupOptions"
+            placeholder="请选择…"
+            size="large"
+          />
+        </a-form-item>
+        <a-form-item label="选择标签">
+          <TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
+        </a-form-item>
+      </template>
+
+      <div class="mt-24px text-right">
+        <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+        <a-button type="primary" size="large" @click="onSubmit">
+          {{ isBatchImport ? '确定导入' : '生成授权码' }}
+        </a-button>
+      </div>
+    </a-form>
+
+    <QrCodeModal ref="qrCodeModalRef" />
+    <ImportPromptModal ref="importPromptModalRef" />
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
+import TagSelect from '../tag-select';
+import GroupSelect from '../group-select';
+import QrCodeModal from '../qrCode-modal';
+import ImportPromptModal from '../import-prompt-modal';
 
+import {
+  fetchAccountTags,
+  fetchAccountGroups,
+  postMediaAccounts,
+  getMediaAccountsDetail,
+  putMediaAccounts,
+  getTemplateUrl,
+} from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/media-account/icon-download.png';
+import icon2 from '@/assets/img/media-account/icon-delete.png';
+
+const groupOptions = ref([]);
+const tagOptions = ref([]);
 const visible = ref(false);
-const open = () => {
+const uploadType = ref('manual');
+const uploadStatus = ref('default');
+const id = ref('');
+const isEdit = ref(false);
+const fileName = ref('账号导入模板.xlsx');
+const formRef = ref();
+const qrCodeModalRef = ref(null);
+const importPromptModalRef = ref(null);
+const form = reactive({
+  mobile: '',
+  operator_name: '',
+  holder_name: '',
+  platform: 0,
+  group_id: '',
+  tag_ids: [],
+});
+
+const isBatchImport = computed(() => uploadType.value === 'batch');
+const confirmBtnText = computed(() => {
+  if (isBatchImport.value) return '确定导入';
+  return isEdit.value ? '确定' : '生成授权码';
+});
+
+const rules = {
+  mobile: [
+    {
+      required: true,
+      message: '请填写手机号',
+      trigger: ['blur', 'change'],
+    },
+    {
+      validator: (value, callback) => {
+        if (!/^1[3-9]\d{9}$/.test(value)) {
+          callback('手机号格式不正确');
+        } else {
+          callback();
+        }
+      },
+      trigger: ['blur', 'change'],
+    },
+  ],
+  operator_name: [{ required: true, message: '请输入运营人员' }],
+  holder_name: [{ required: true, message: '请输入号码持有人' }],
+};
+
+// 获取分组数据
+const getGroups = async () => {
+  try {
+    const { code, data } = await fetchAccountGroups();
+    if (code === 200) {
+      groupOptions.value = data;
+    }
+  } catch (error) {
+    console.error('获取分组列表失败:', error);
+  }
+};
+
+// 获取标签数据
+const getTags = async () => {
+  try {
+    const { code, data } = await fetchAccountTags();
+    if (code === 200) {
+      tagOptions.value = data;
+    }
+  } catch (error) {
+    console.error('获取标签列表失败:', error);
+  }
+};
+
+function handleUpload({ file, onSuccess, onError }) {
+  // 模拟上传
+  uploadStatus.value = 'error';
+}
+
+function removeFile() {
+  fileName.value = '';
+  uploadStatus.value = 'default';
+}
+
+function retryUpload() {
+  handleUpload();
+  // uploadStatus.value = 'default';
+}
+const reset = () => {
+  formRef.value.resetFields();
+  formRef.value.clearValidate();
+
+  fileName.value = '';
+  uploadStatus.value = 'default';
+  uploadType.value = 'manual';
+};
+function onClose() {
+  reset();
+  visible.value = false;
+}
+
+const open = (accountId = '') => {
+  id.value = accountId;
+  isEdit.value = !!accountId;
+  if (accountId) {
+    getAccountDetail();
+  }
+  getGroups();
+  getTags();
+
   visible.value = true;
 };
-const close = () => {
-  visible.value = false;
+
+const getAccountDetail = async () => {
+  const { code, data } = await getMediaAccountsDetail(id.value);
+  if (code === 200) {
+    form.value = data;
+  }
 };
-const handleOk = () => {
-  console.log('handleOk');
+
+const handleBatchImport = () => {
+  onClose();
+  importPromptModalRef.value.open();
 };
-defineExpose({
-  open,
-});
+
+async function onSubmit() {
+  if (isBatchImport.value) {
+    handleBatchImport();
+    return;
+  }
+
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = id.value ? putMediaAccounts : postMediaAccounts;
+      const _params = id.value ? { id: id.value } : form;
+      const { code } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '修改成功' : '生成授权码成功');
+
+        if (isEdit.value) {
+          visible.value = false;
+        } else {
+          handleSuccess();
+        }
+      }
+    }
+  });
+}
+
+const handleSuccess = () => {
+  qrCodeModalRef.value.open();
+};
+
+const handleDownloadTemplate = async () => {
+  const { code, data } = await getTemplateUrl();
+  if (code === 200) {
+    window.open(data.url, '_blank');
+  }
+};
+
+// 对外暴露打开弹窗方法
+defineExpose({ open });
 </script>
 
 <style lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
index 06dee88..61e48a4 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
@@ -1,18 +1,96 @@
 .add-account-modal {
-    .arco-modal-header {
-      border-bottom: none;
-      height: 56px;
-      padding: 22px 24px 16px 24px;
-      .arco-modal-title {
-        justify-content: flex-start;
-      }
-    }
-    .arco-modal-body {
-      padding: 16px 24px 20px;
-    }
-    .arco-modal-footer {
-      border-top: none;
-      padding: 0;
+  border-radius: 8px;
+  .arco-input-wrapper,
+  .arco-select-view-single,
+  .arco-select-view-multiple {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
     }
   }
-  
\ No newline at end of file
+  .w-240px {
+    width: 240px !important;
+  }
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+  .arco-modal-body {
+    padding: 24px 24px 20px;
+    .arco-form-item {
+      margin-bottom: 16px;
+    }
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      background: var(--BG-white, #fff);
+    }
+    .upload-block {
+      width: 100%;
+      .dt {
+        color: var(--Brand-Brand-6, #6d4cfe);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+      .import-row {
+        border-radius: 4px;
+        border: 1px solid var(--BG-400, #d7d7d9);
+        background: var(--BG-200, #f2f3f5);
+        .name {
+          color: var(--Text-1, #211f24);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        &.error {
+          background: #ffe7e4;
+          color: #f64b31;
+          border: none;
+          .name {
+            color: #f64b31;
+          }
+        }
+      }
+      .arco-upload-drag {
+        height: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .arco-icon {
+          margin-bottom: 16px;
+        }
+      }
+    }
+    .upload-dragger {
+      border: 1px dashed #d9d9d9;
+      padding: 24px 0;
+      text-align: center;
+      background: #fafafa;
+      cursor: pointer;
+    }
+    .upload-error {
+      color: #f53f3f;
+      margin-left: 8px;
+      cursor: pointer;
+    }
+  }
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
index 888191e..87d4a77 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@@ -57,35 +57,13 @@
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
-          <a-select
-            v-model="query.group_ids"
-            size="medium"
-            multiple
-            placeholder="全部"
-            allow-clear
-            @change="handleSearch"
-          >
-            <a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
+          <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">标签</span>
         <a-space class="w-320px">
-          <a-select
-            v-model="query.tag_ids"
-            multiple
-            size="medium"
-            placeholder="全部"
-            allow-clear
-            @change="handleSearch"
-          >
-            <a-option v-for="(item, index) in tags" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
+          <tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
         </a-space>
       </div>
     </div>
@@ -109,6 +87,8 @@
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
 import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
+import TagSelect from '../tag-select/index.vue';
+import GroupSelect from '../group-select/index.vue';
 import {
   INITIAL_QUERY,
   PLATFORM_LIST,
@@ -129,6 +109,7 @@ const handleReset = () => {
   query.value = cloneDeep(INITIAL_QUERY);
   emits('onReset');
 };
+
 const getTags = async () => {
   const { code, data } = await fetchAccountTags();
   if (code === 200) {
@@ -138,7 +119,7 @@ const getTags = async () => {
 const getGroups = async () => {
   const { code, data } = await fetchAccountGroups();
   if (code === 200) {
-    tags.value = data;
+    groups.value = data;
   }
 };
 const getOperators = async () => {
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
index 605f2ca..2355602 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@@ -3,7 +3,14 @@
  * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal v-model:visible="visible" width="800px" modal-class="account-manage-modal" :footer="false" @close="close">
+  <a-modal
+    v-model:visible="visible"
+    width="800px"
+    modal-class="account-manage-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
     <template #title> 分组管理 </template>
     <template #footer> </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
index 131322b..30e4ed2 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
@@ -1,4 +1,5 @@
 .account-manage-modal {
+  border-radius: 8px;
   .arco-modal-header {
     border-bottom: none;
     height: 56px;
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-select/index.vue b/src/views/property-marketing/media-account/account-manage/components/group-select/index.vue
new file mode 100644
index 0000000..a736c92
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/group-select/index.vue
@@ -0,0 +1,64 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedGroups"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedGroups = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedGroups.value = newVal;
+  },
+  { immediate: true },
+);
+
+// 监听内部值变化，向外部发送更新
+watch(selectedGroups, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedGroups.value = value;
+  emits('change', value);
+};
+</script>
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
new file mode 100644
index 0000000..7b67178
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
@@ -0,0 +1,51 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="导入提示"
+    modal-class="import-prompt-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <div class="flex items-center">
+        <img :src="icon1" width="20" height="20" class="mr-12px" />
+        <span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
+      </div>
+
+      <div class="mt-24px text-right w-100%">
+        <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+        <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleOk = () => {
+  close();
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
new file mode 100644
index 0000000..5ac2afe
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
@@ -0,0 +1,32 @@
+.import-prompt-modal {
+  border-radius: 8px;
+
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+  .arco-modal-body {
+    padding: 20px 24px 20px;
+    .cancel-btn {
+      border-radius: 4px;
+      border: 1px solid var(--BG-500, #b1b2b5);
+      background: var(--BG-white, #fff);
+    }
+    .tip {
+      color: var(--Text-1, #211f24);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/index.vue
new file mode 100644
index 0000000..c5b12c9
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/index.vue
@@ -0,0 +1,46 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="添加账号"
+    modal-class="qrCode-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <img src="" width="160" height="160" class="mb-16px" />
+      <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+
+      <div class="mt-24px text-center">
+        <a-button type="primary" size="large" @click="handleOk"> 完成扫码 </a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleOk = () => {
+  console.log('handleOk');
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/style.scss
new file mode 100644
index 0000000..8c1aba1
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/qrCode-modal/style.scss
@@ -0,0 +1,19 @@
+.qrCode-modal {
+  border-radius: 8px;
+
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
+    }
+  }
+  .arco-modal-body {
+    padding: 20px 24px 20px;
+  }
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue b/src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue
new file mode 100644
index 0000000..189e336
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue
@@ -0,0 +1,64 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <a-select
+    v-model="selectedTags"
+    :multiple="multiple"
+    size="medium"
+    :placeholder="placeholder"
+    allow-clear
+    @change="handleChange"
+  >
+    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+      {{ item.name }}
+    </a-option>
+  </a-select>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '全部',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const selectedTags = ref(props.multiple ? [] : '');
+
+// 监听外部传入的值变化
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    selectedTags.value = newVal;
+  },
+  { immediate: true },
+);
+
+// 监听内部值变化，向外部发送更新
+watch(selectedTags, (newVal) => {
+  emits('update:modelValue', newVal);
+});
+
+const handleChange = (value) => {
+  selectedTags.value = value;
+  emits('change', value);
+};
+</script>
diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
index 471dfb2..25aa433 100644
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
@@ -3,7 +3,14 @@
  * @Date: 2025-06-25 17:51:46
 -->
 <template>
-  <a-modal v-model:visible="visible" width="800px" modal-class="tags-manage-modal" :footer="false" @close="close">
+  <a-modal
+    v-model:visible="visible"
+    width="800px"
+    modal-class="tags-manage-modal"
+    :footer="false"
+    :mask-closable="false"
+    @close="close"
+  >
     <template #title> 标签管理 </template>
   </a-modal>
 </template>
diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
index 6c21865..318e122 100644
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
@@ -1,18 +1,19 @@
 .tags-manage-modal {
-    .arco-modal-header {
-      border-bottom: none;
-      height: 56px;
-      padding: 22px 24px 16px 24px;
-      .arco-modal-title {
-        justify-content: flex-start;
-      }
-    }
-    .arco-modal-body {
-      padding: 16px 24px 20px;
-    }
-    .arco-modal-footer {
-      border-top: none;
-      padding: 0;
+  border-radius: 8px;
+
+  .arco-modal-header {
+    border-bottom: none;
+    height: 56px;
+    padding: 22px 24px 16px 24px;
+    .arco-modal-title {
+      justify-content: flex-start;
     }
   }
-  
\ No newline at end of file
+  .arco-modal-body {
+    padding: 16px 24px 20px;
+  }
+  .arco-modal-footer {
+    border-top: none;
+    padding: 0;
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index 6c59e6b..14cfc0e 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -91,6 +91,7 @@ import TagsManageModal from './components/tags-manage-modal';
 import AddAccountModal from './components/add-account-modal';
 
 import { INITIAL_QUERY } from './constants';
+import { getMediaAccounts } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon2 from '@/assets/img/media-account/icon-group.png';
@@ -118,8 +119,17 @@ onMounted(() => {
   getData();
 });
 
-const getData = () => {
-  console.log('getData', query.value, pageInfo);
+const getData = async () => {
+  // const { page, pageSize } = pageInfo;
+  // const { code, data, total } = await getMediaAccounts({
+  //   page,
+  //   page_size: pageSize,
+  //   ...query.value,
+  // });
+  // if (code === 200) {
+  //   dataSource.value = data.data;
+  //   pageInfo.total = total;
+  // }
   dataSource.value = new Array(8).fill({
     id: 1,
     name: '全球',