feat: 新媒体账号管理

src/views/property-marketing/media-account/account-manage/index.vue

@@ -0,0 +1,178 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 10:00:50
+-->
+<template>
+  <div class="account-manage-wrap">
+    <div class="filter-wrap bg-#fff border-radius-8px">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
+        <div class="flex items-center">
+          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
+            <template #icon>
+              <img :src="icon3" width="16" height="16" />
+            </template>
+            <template #default>标签管理</template>
+          </a-button>
+          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
+            <template #icon>
+              <img :src="icon2" width="16" height="16" />
+            </template>
+            <template #default>分组管理</template>
+          </a-button>
+          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
+            <template #icon>
+              <img :src="icon1" width="16" height="16" />
+            </template>
+            <template #default>添加账号</template>
+          </a-button>
+        </div>
+      </div>
+      <FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
+    </div>
+
+    <div
+      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      :class="{
+        normal: isNormalStatus,
+        abnormal: isAbnormalStatus,
+      }"
+    >
+      <div class="flex items-center">
+        <template v-if="isNormalStatus || isAbnormalStatus">
+          <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+          <span class="label">
+            {{
+              isNormalStatus
+                ? '太棒啦！所有账号都在正常运行。'
+                : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
+            }}
+          </span>
+        </template>
+      </div>
+      <div>
+        <a-space v-if="isAbnormalStatus" class="flex items-center">
+          <a-button class="w-96px err-btn" size="mini">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+    <div class="card-wrap">
+      <AccountTable :dataSource="dataSource" />
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+
+    <GroupManageModal ref="groupManageModalRef" />
+    <TagsManageModal ref="tagsManageModalRef" />
+    <AddAccountModal ref="addAccountModalRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import FilterBlock from './components/filter-block';
+import AccountTable from './components/account-table';
+import GroupManageModal from './components/group-manage-modal';
+import TagsManageModal from './components/tags-manage-modal';
+import AddAccountModal from './components/add-account-modal';
+
+import { INITIAL_QUERY } from './constants';
+
+import icon1 from '@/assets/img/media-account/icon-add.png';
+import icon2 from '@/assets/img/media-account/icon-group.png';
+import icon3 from '@/assets/img/media-account/icon-tag.png';
+import icon4 from '@/assets/img/media-account/icon-success.png';
+import icon5 from '@/assets/img/media-account/icon-warn.png';
+
+const groupManageModalRef = ref(null);
+const tagsManageModalRef = ref(null);
+const addAccountModalRef = ref(null);
+
+const tipStatus = ref(2);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+const query = ref(cloneDeep(INITIAL_QUERY));
+const dataSource = ref([]);
+
+const isNormalStatus = computed(() => tipStatus.value === 1);
+const isAbnormalStatus = computed(() => tipStatus.value === 2);
+
+onMounted(() => {
+  getData();
+});
+
+const getData = () => {
+  console.log('getData', query.value, pageInfo);
+  dataSource.value = new Array(8).fill({
+    id: 1,
+    name: '全球',
+    account_id: 1,
+    mobile: 1777777,
+    status: 1,
+    platform: 0,
+    operator: {
+      name: '小周',
+    },
+    group: {
+      name: '美团组',
+    },
+    tags: [
+      {
+        name: '标签1',
+      },
+      {
+        name: '标签2',
+      },
+    ],
+  });
+};
+const handleSearch = (newQuery) => {
+  query.value = { ...newQuery };
+  getData();
+};
+const handleReset = () => {
+  query.value = cloneDeep(INITIAL_QUERY);
+  getData();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  pageInfo.page = 1;
+  getData();
+};
+
+const handleOpenGroupModal = () => {
+  groupManageModalRef.value?.open();
+};
+const handleOpenTagsModal = () => {
+  tagsManageModalRef.value?.open();
+};
+const handleOpenAccountModal = () => {
+  addAccountModalRef.value?.open();
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>