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

<!--
 * @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>