renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 投放账户管理

Browse Source
This commit is contained in:
rd
2025-07-02 15:30:13 +08:00
parent 8ef31e82e2
commit f35dd2dfa9
59 changed files with 521 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/property-marketing/brands/brand-materials/style.scss
View File

@ -44,7 +44,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/component.scss
View File

@ -31,7 +31,7 @@
}
.arco-form-item-label {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
View File

@ -198,7 +198,7 @@ const columns = [
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
View File

@ -190,7 +190,7 @@ const columns = [
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
View File

@ -9,7 +9,7 @@
.account-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
View File

@ -20,7 +20,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

4
src/views/property-marketing/media-account/account-dashboard/index.vue
View File

@ -64,11 +64,9 @@ import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY } from './constants';
import { INITIAL_QUERY, CARD_FIELDS } from './constants';
import { CARD_FIELDS } from './constants';
import icon1 from '@/assets/img/icon-question.png';
const query = ref(cloneDeep(INITIAL_QUERY));

2
src/views/property-marketing/media-account/account-dashboard/style.scss
View File

@ -17,7 +17,7 @@
border: 1px solid #e6e6e8;
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-style: normal;
}
:deep(.arco-btn) {

2
src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
View File

@ -21,7 +21,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-detail/style.scss
View File

@ -4,7 +4,7 @@
flex-direction: column;
:deep(.cts) {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

9
src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
View File

@ -4,7 +4,14 @@
-->
<template>
<div class="card-container">
<div v-for="(item, index) in dataSource" :key="index" class="card-item">
<div
v-for="(item, index) in dataSource"
:key="index"
class="card-item"
:class="{
checked: isSelected(item),
}"
>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name }}</p>

11
src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
View File

@ -19,7 +19,7 @@
align-items: flex-start;
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
margin-right: 20px;
flex-shrink: 0;
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -44,7 +44,7 @@
.cts {
@include ellipsis;
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -61,7 +61,7 @@
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 10px;
font-style: normal;
font-weight: 400;
@ -82,5 +82,8 @@
justify-content: flex-end;
padding-top: 8px;
}
&.checked {
border: 1px solid var(--Brand-6, #6D4CFE);
}
}
}

4
src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
View File

@ -141,7 +141,7 @@ const fileName = ref('账号导入模板.xlsx');
const formRef = ref();
const authorizedAccountModalRef = ref(null);
const importPromptModalRef = ref(null);
const form = reactive({
const form = ref({
mobile: '',
operator_name: '',
holder_name: '',
@ -289,7 +289,7 @@ const handleSuccess = (id) => {
const handleDownloadTemplate = async () => {
const { code, data } = await getTemplateUrl();
if (code === 200) {
window.open(data.url, '_blank');
window.open(data.download_url, '_blank');
}
};

4
src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
View File

@ -9,7 +9,7 @@
width: 100%;
.dt {
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -21,7 +21,7 @@
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

6
src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
View File

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
View File

@ -6,7 +6,7 @@
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
View File

@ -6,7 +6,7 @@
// min-height: 200px;
.t1 {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
View File

@ -20,7 +20,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

4
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
View File

@ -10,7 +10,7 @@
}
.s1 {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
.arco-pagination-jumper-prepend {
color: var(--Text-2, #3c4043);
text-align: right;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
View File

@ -4,7 +4,7 @@
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

6
src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
View File

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
View File

@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
.text {
color: var(--BG-700, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 12px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
View File

@ -30,7 +30,7 @@
gap: 12px;
.text {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

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

@ -92,7 +92,7 @@
size="mini"
show-total
show-jumper
show-page-size
:show-page-size="false"
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@ -142,8 +142,8 @@ const batchGroupModalRef = ref(null);
const tipStatus = ref(2);
const pageInfo = reactive({
page: 1,
pageSize: 20,
total: 100,
pageSize: 8,
total: 0,
});
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
@ -169,8 +169,8 @@ const getData = async () => {
// ...query.value,
// });
// if (code === 200) {
// dataSource.value = data.data;
// pageInfo.total = total;
// dataSource.value = data?.data ?? [];
// pageInfo.total = data?.total ?? 0;
// }
dataSource.value = [
{

6
src/views/property-marketing/media-account/account-manage/style.scss
View File

@ -15,7 +15,7 @@
.filter-wrap {
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-style: normal;
}
:deep(.arco-btn) {
@ -29,7 +29,7 @@
border-radius: 2px;
background: #f0edff;
.label {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -60,7 +60,7 @@
padding: 0;
cursor: pointer;
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss
View File

@ -13,7 +13,7 @@
.a-card-title {
color: var(--Text-1, #211F24);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;

4
src/views/property-marketing/put-account/account-dashboard/style.scss
View File

@ -28,7 +28,7 @@
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-style: normal;
}
@ -91,7 +91,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-data/components/account-table/style.scss
View File

@ -9,7 +9,7 @@
.account-table {
.cts {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
View File

@ -21,7 +21,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-data/style.scss
View File

@ -23,7 +23,7 @@
}
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-style: normal;
}
:deep(.arco-btn) {

17
src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
View File

@ -9,14 +9,14 @@
<template>
<a-modal
v-model:visible="visible"
:title="isBatch ? '批量删除账号' : '删除账号'"
width="400px"
:title="isBatch ? '批量删除账户' : '删除账户'"
width="480px"
modal-class="account-manage-modal"
@close="onClose"
>
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账号吗？</span>
<span>确认删除 {{ accountName }} 这个账户吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
@ -29,10 +29,10 @@
<script setup>
import { ref } from 'vue';
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['success', 'close']);
const emits = defineEmits(['update', 'close']);
const visible = ref(false);
const accountId = ref(null);
@ -56,11 +56,12 @@ const open = (record) => {
};
async function onDelete() {
const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
const { code } = await _fn(accountId.value);
const _fn = isBatch.value ? batchDeletePlacementAccounts : deletePlacementAccount;
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success('删除成功');
emits('success');
emits('update', isBatch.value ? accountId.value : [accountId.value]);
onClose();
}
}

88
src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
View File

@ -4,21 +4,28 @@
-->
<template>
<div class="card-container">
<div v-for="(item, index) in dataSource" :key="index" class="card-item">
<div
v-for="(item, index) in dataSource"
:key="index"
class="card-item"
:class="{
checked: isSelected(item),
}"
>
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name }}</p>
<p class="name">{{ item.name || '-' }}</p>
<div class="field-row">
<span class="label">状态</span>
<StatusBox :status="item.status" />
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
<img :src="PLATFORM_LIST.find((v) => v.value === item.platform)?.icon" width="14" height="14" />
</div>
<div class="field-row">
<span class="label">账号ID</span>
<span class="cts">{{ item.account_id }}</span>
<span class="cts">{{ item.account_id || '-' }}</span>
</div>
<div class="field-row">
<span class="label">手机号码</span>
@ -29,34 +36,15 @@
<span class="cts">{{ item.operator?.name }}</span>
</div>
<div class="field-row">
<span class="label">分组</span>
<span class="cts">{{ item.group?.name }}</span>
<span class="label">账户总消耗</span>
<span class="cts">{{ `￥${formatNumberShow({ value: item.total_use_amount, showExactValue: true })}` }}</span>
</div>
<div class="field-row">
<span class="label">标签</span>
<div class="flex items-center">
<a-tooltip
v-if="item.tags.length > 2"
position="bottom"
:content="
item.tags
.slice(2)
.map((v) => v.name)
.join(',')
"
>
<div class="tag-box">
<span class="text">{{ `+${item.tags.length - 2}` }}</span>
</div>
</a-tooltip>
<div v-for="(tag, index) in item.tags.slice(0, 2).reverse()" :key="index" class="tag-box">
<span class="text">{{ tag.name }}</span>
</div>
</div>
<span class="label">账户余额</span>
<span class="cts">{{ `￥${formatNumberShow({ value: item.balance_amount, showExactValue: true })}` }}</span>
</div>
<div class="operate-row">
<img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
v-if="showPauseButton(item.status)"
class="w-64px search-btn mr-8px"
@ -65,16 +53,9 @@
>
<template #default>暂停同步</template>
</a-button>
<a-tooltip v-if="isDisabledReauthorize(item.status)" :content="getTooltipText(item.status)">
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>重新授权</template>
</a-button>
</a-tooltip>
<template v-else>
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>{{ isUnauthorizedStatus(item.status) ? '去授权' : '重新授权' }}</template>
</a-button>
</template>
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>获取凭证</template>
</a-button>
<a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
<template #default>编辑</template>
@ -82,21 +63,21 @@
</div>
</div>
</div>
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
</div>
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
import { STATUS_LIST, EnumStatus } from '../../constants';
import { STATUS_LIST, EnumStatus, PLATFORM_LIST } from '../../constants';
import { formatNumberShow } from '@/utils/tools';
import PauseAccountPatchModal from './pause-account-patch';
import StatusBox from '../status-box';
import AuthorizedAccountModal from '../authorized-account-modal';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-delete.png';
import icon1 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
dataSource: {
@ -138,10 +119,7 @@ const openDelete = (item) => {
};
const handleReauthorize = (item) => {
const isUnauthorized = isUnauthorizedStatus(item.status);
if (isUnauthorized) {
authorizedAccountModalRef.value?.open(item.id);
}
authorizedAccountModalRef.value?.open(item.id, item.last_synced_at);
};
const handlePause = (item) => {
@ -149,19 +127,7 @@ const handlePause = (item) => {
};
const showPauseButton = (status) => {
return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
};
const isUnauthorizedStatus = (status) => {
return [EnumStatus.UNAUTHORIZED].includes(status);
};
// 三种异常情况
const isDisabledReauthorize = (status) => {
return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
};
const getTooltipText = (status) => {
return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
return status === EnumStatus.NORMAL;
};
</script>

12
src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
View File

@ -3,24 +3,24 @@
* @Date: 2025-06-27 14:41:20
-->
<template>
<a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
<a-modal v-model:visible="visible" title="暂停同步" width="480px" modal-class="account-manage-modal" @close="onClose">
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
</div>
<template #footer>
<a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
<a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { pausePatchAccount } from '@/api/all/propertyMarketing';
import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const emits = defineEmits(['success', 'close']);
const emits = defineEmits(['update', 'close']);
const visible = ref(false);
const accountId = ref(null);
@ -42,10 +42,10 @@ const open = (record) => {
};
async function onConfirm() {
const { code } = await pausePatchAccount(accountId.value);
const { code } = await pausePatchPlacementAccount(accountId.value);
if (code === 200) {
AMessage.success('暂停成功');
emits('success');
emits('update');
onClose();
}
}

13
src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
View File

@ -9,7 +9,7 @@
display: grid;
// grid-template-rows: repeat(2, 1fr); /* 2行 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
gap: 20px;
gap: 20px;
.card-item {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
@ -19,7 +19,7 @@
align-items: flex-start;
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
margin-right: 20px;
flex-shrink: 0;
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -44,7 +44,7 @@
.cts {
@include ellipsis;
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 12px;
font-style: normal;
font-weight: 400;
@ -61,7 +61,7 @@
.text {
@include ellipsis();
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 10px;
font-style: normal;
font-weight: 400;
@ -82,5 +82,8 @@
justify-content: flex-end;
padding-top: 8px;
}
&.checked {
border: 1px solid var(--Brand-6, #6D4CFE);
}
}
}

185
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -5,60 +5,74 @@
<template>
<a-modal
v-model:visible="visible"
:title="isEdit ? '编辑账号' : '添加账号'"
:title="isEdit ? '编辑账户' : '添加账户'"
modal-class="add-put-account-modal"
width="500px"
:mask-closable="false"
unmount-on-close
@close="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item v-if="!isEdit" label="上传方式" required>
<a-radio-group v-model="uploadType">
<a-radio value="manual">手动添加账号</a-radio>
<a-radio value="batch">批量导入账号</a-radio>
<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>
<a-form-item label="账户文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === 'default'">
<a-upload draggable :custom-request="handleUpload" />
<template v-if="uploadStatus === UploadStatus.DEFAULT">
<a-upload
ref="uploadRef"
action="/"
draggable
:custom-request="handleUpload"
accept=".xlsx,.xls,.docx,.doc"
:show-file-list="false"
/>
</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',
error: uploadStatus === 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>
<span
v-if="uploadStatus === UploadStatus.ERROR"
class="upload-error flex-shrink-0"
@click="handleBatchImport"
>
点击重试
</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>
<span class="dt">下载账户导入模板.xlsx</span>
</div>
</div>
</a-form-item>
</template>
<!-- 手动添加账号 -->
<!-- 手动添加账户 -->
<template v-else>
<template v-if="isEdit">
<a-form-item label="账号名称" field="name">
<a-form-item label="账户名称" field="name">
<a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账号ID" field="account_id">
<a-form-item label="账户ID" field="account_id">
<a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="状态" field="status">
@ -76,18 +90,35 @@
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="运营平台" :required="!isEdit">
<img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
<div v-if="isEdit" class="flex items-center">
<img :src="PLATFORM_LIST[form.platform].icon" width="14" height="14" class="mr-4px" />
<span>{{ PLATFORM_LIST[form.platform].label }}</span>
</div>
<a-radio-group v-else v-model="form.platform">
<a-radio :value="0">抖音</a-radio>
<a-radio :value="1">小红书</a-radio>
<a-radio v-for="item in PLATFORM_LIST" :key="item.value" :value="item.value">
<div class="flex items-center">
<img :src="item.icon" width="14" height="14" class="mr-4px" />
<span>{{ item.label }}</span>
</div>
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="同步项目数据" field="sync_project_data">
<template v-if="isEdit">
<a-form-item label="账户总消耗" field="total_use_amount">
<a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
<a-form-item label="账户余额" field="balance_amount">
<a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
</a-form-item>
</template>
<a-form-item label="同步项目数据" field="is_sync">
<template #label>
<span class="label">同步项目数据</span>
<icon-question-circle size="14" class="ml-4px color-#737478" />
<a-tooltip content="同步项目数据后，账户数据将同步到项目中">
<icon-question-circle size="14" class="ml-4px color-#737478" />
</a-tooltip>
</template>
<a-switch v-model="form.sync_project_data" size="medium" />
<a-switch v-model="form.is_sync" size="medium" :checked-value="1" :un-checked-value="0" />
</a-form-item>
</template>
</a-form>
@ -98,50 +129,55 @@
</a-button>
</template>
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
<ImportPromptModal ref="importPromptModalRef" />
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
<!-- <ImportPromptModal ref="importPromptModalRef" /> -->
</a-modal>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ref, defineEmits } from 'vue';
import AuthorizedAccountModal from '../authorized-account-modal';
import ImportPromptModal from '../import-prompt-modal';
// import ImportPromptModal from '../import-prompt-modal';
import StatusBox from '../status-box';
import { PLATFORM_LIST } from '../../constants';
import {
postMediaAccounts,
getMediaAccountsDetail,
putMediaAccounts,
getTemplateUrl,
postPlacementAccounts,
getPlacementAccountsDetail,
putPlacementAccounts,
getPlacementAccountsTemplateUrl,
batchPlacementAccounts,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
import icon3 from '@/assets/img/media-account/icon-dy.png';
import icon4 from '@/assets/img/media-account/icon-xhs.png';
const emits = defineEmits(['update']);
const UploadStatus = {
DEFAULT: 'default',
WAITING: 'waiting',
ERROR: 'error',
};
const visible = ref(false);
const uploadType = ref('manual');
const uploadStatus = ref('default');
const uploadStatus = ref(UploadStatus.DEFAULT);
const id = ref('');
const isEdit = ref(false);
const fileName = ref('账号导入模板.xlsx');
const formRef = ref();
const fileName = ref('');
const formRef = ref(null);
const authorizedAccountModalRef = ref(null);
const importPromptModalRef = ref(null);
const form = reactive({
// const importPromptModalRef = ref(null);
const uploadRef = ref(null);
const file = ref(null);
const form = ref({
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
});
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '下一步';
is_sync: 0,
});
const rules = {
@ -166,27 +202,35 @@ const rules = {
holder_name: [{ required: true, message: '请输入号码持有人' }],
};
function handleUpload({ file, onSuccess, onError }) {
// 模拟上传
uploadStatus.value = 'error';
}
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '下一步';
});
const handleUpload = async (option) => {
const { fileItem } = option;
uploadStatus.value = UploadStatus.WAITING;
file.value = fileItem.file;
fileName.value = fileItem.name;
};
function removeFile() {
fileName.value = '';
uploadStatus.value = 'default';
file.value = null;
uploadStatus.value = UploadStatus.DEFAULT;
}
function retryUpload() {
handleUpload();
// uploadStatus.value = 'default';
}
const reset = () => {
formRef.value.resetFields();
formRef.value.clearValidate();
fileName.value = '';
file.value = null;
isEdit.value = false;
uploadStatus.value = 'default';
uploadStatus.value = UploadStatus.DEFAULT;
uploadType.value = 'manual';
};
function onClose() {
@ -206,15 +250,33 @@ const open = (accountId = '') => {
};
const getAccountDetail = async () => {
const { code, data } = await getMediaAccountsDetail(id.value);
const { code, data } = await getPlacementAccountsDetail(id.value);
if (code === 200) {
form.value = data;
}
};
const handleBatchImport = () => {
onClose();
importPromptModalRef.value.open();
const handleBatchImport = async () => {
try {
const formData = new FormData();
formData.append('file', file.value);
const { code } = await batchPlacementAccounts(formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (code === 200) {
AMessage.success('导入成功');
onClose();
} else {
uploadStatus.value = UploadStatus.ERROR;
}
} catch (error) {
uploadStatus.value = UploadStatus.ERROR;
}
// importPromptModalRef.value.open();
};
async function onSubmit() {
@ -223,18 +285,17 @@ async function onSubmit() {
return;
}
handleSuccess();
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = id.value ? putMediaAccounts : postMediaAccounts;
const _params = id.value ? { id: id.value, ...form.value } : form;
const _fn = id.value ? putPlacementAccounts : postPlacementAccounts;
const _params = id.value ? { id: id.value, ...form.value } : form.value;
const { code, data } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '修改成功' : '添加成功');
isEdit.value && AMessage.success('修改成功');
emits('update');
if (isEdit.value) {
visible.value = false;
onClose();
} else {
handleSuccess(data?.id);
}
@ -248,9 +309,9 @@ const handleSuccess = (id) => {
};
const handleDownloadTemplate = async () => {
const { code, data } = await getTemplateUrl();
const { code, data } = await getPlacementAccountsTemplateUrl();
if (code === 200) {
window.open(data.url, '_blank');
window.open(data.download_url, '_blank');
}
};

4
src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
View File

@ -9,7 +9,7 @@
width: 100%;
.dt {
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -21,7 +21,7 @@
background: var(--BG-200, #f2f3f5);
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

197
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -6,13 +6,27 @@
<a-modal
v-model:visible="visible"
width="480px"
title="授权账号"
title="获取凭证"
modal-class="authorized-account-modal"
:mask-closable="false"
:footer="!isLoading"
@close="close"
>
<div class="flex flex-col items-center">
<div v-if="showSyncTip">
<div class="flex items-center mb-20px">
<img :src="icon1" width="16" height="16" class="mr-16px" />
<p class="s2">
检测到该账户最后更新日期为{{ exactFormatTime(lastSyncedAt, 'MM-DD', 'YYYY-MM-DD') }}，已有{{
dayjs().diff(dayjs(lastSyncedAt * 1000), 'day')
}}天未同步最新数据。
</p>
</div>
<a-radio-group v-model="syncType" class="ml-32px">
<a-radio value="sync" class="mb-16px">立即同步遗漏数据 - 获取完整的最新数据 （推荐）</a-radio>
<a-radio value="no_sync">仅授权不更新 - 继续使用当前不完全的数据</a-radio>
</a-radio-group>
</div>
<div v-else class="flex flex-col items-center">
<template v-if="isLoading">
<a-progress
:percent="progress"
@ -30,112 +44,153 @@
<p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
</template>
<template v-else>
<!-- <div class="flex items-center mb-16px">
<img :src="icon1" width="16" height="16" />
<span class="ml-8px red-text">未识别到有效二维码。</span>
</div> -->
<div class="img-box">
<img :src="imgUrl" width="160" height="160" class="mb-16px" />
<div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
<icon-refresh size="24" class="mb-13px" />
<p class="s1">二维码失效</p>
<p class="s1">请点击刷新</p>
</div>
</div>
<span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
</template>
<a-form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item label="账户" field="account">
<a-input v-model="form.account" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="密码" field="password">
<a-input-password v-model="form.password" placeholder="请输入..." size="large" />
</a-form-item>
</a-form>
</template>
</div>
<template #footer>
<a-button v-if="isCompleted" size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button size="large" class="cancel-btn" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
</template>
</a-modal>
</template>
<script setup>
import { defineExpose, ref, onUnmounted } from 'vue';
import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
import dayjs from 'dayjs';
import { defineExpose, ref, computed, defineEmits } from 'vue';
import { exactFormatTime } from '@/utils/tools';
import { putPlacementAccountsAuthorized, getPlacementAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-warn.png';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
const OVERDUE_TIME = 30000; // 失效时间
const emits = defineEmits(['update']);
const visible = ref(false);
const isOverdue = ref(false); // 二维码失效
const isLoading = ref(false);
const isCompleted = ref(false);
const isSuccess = ref(false);
const formRef = ref(null);
const failReason = ref('');
const progress = ref(0);
const id = ref('');
const imgUrl = ref('');
const lastSyncedAt = ref(null);
const syncType = ref('sync'); // sync ｜ no_sync
const showSyncTip = ref(false);
const form = ref({
account: '',
password: '',
});
let progressTimer = null;
let overdueTimer = null;
let statusPollingTimer = null;
const rules = {
account: [
{
required: true,
message: '请输入账户',
trigger: ['blur', 'change'],
},
],
password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
};
const notCompleted = computed(() => {
return !isCompleted.value;
});
const confirmBtnText = computed(() => {
if (notCompleted.value) return '完成扫码';
return isSuccess.value ? '继续添加' : '重新扫码';
if (!isCompleted.value) return '确定';
return isSuccess.value ? '继续添加' : '重试';
});
const open = (accountId) => {
const open = (accountId, last_synced_at = null) => {
id.value = accountId;
getAuthorizedQrCode();
lastSyncedAt.value = last_synced_at;
visible.value = true;
};
const close = () => {
isOverdue.value = false;
formRef.value.resetFields();
formRef.value.clearValidate();
isLoading.value = false;
isCompleted.value = false;
isSuccess.value = false;
failReason.value = '';
progress.value = 0;
id.value = '';
lastSyncedAt.value = null;
syncType.value = 'sync';
showSyncTip.value = false;
clearFakeProgressTimer();
clearOverdueTimer();
clearStatusPollingTimer();
visible.value = false;
};
const getAuthorizedQrCode = async () => {
const { code, data } = await getAuthorizedImage(id.value);
// 轮询接口
const getAuthorizedStatus = async () => {
const { code, data } = await getPlacementAccountsAuthorizedStatus(id.value);
if (code === 200) {
imgUrl.value = data.url;
overdueTimer = null;
// 约定：后端限制40s内必须扫码，前端定30s后失效
overdueTimer = setTimeout(() => {
isOverdue.value = true;
}, OVERDUE_TIME);
const { status, message } = data;
if (status !== 0) {
isCompleted.value = true;
isSuccess.value = status === 1;
failReason.value = status === 2 ? message : '';
}
}
};
const startStatusPolling = () => {
clearStatusPollingTimer();
statusPollingTimer = setInterval(async () => {
if (!isCompleted.value) {
await getAuthorizedStatus();
if (isCompleted.value) {
// 结束时，进度条直接到100%，并清理动画
progress.value = 1;
clearFakeProgressTimer();
clearStatusPollingTimer();
isLoading.value = false;
}
}
}, 2000);
};
const clearStatusPollingTimer = () => {
if (statusPollingTimer) {
clearInterval(statusPollingTimer);
statusPollingTimer = null;
}
};
const startLoading = async () => {
isLoading.value = true;
progress.value = 0;
startFakeProgressPolling();
// const { code } = await startPatchAccount(id.value);
// if (code === 200) {
// isLoading.value = true;
// progress.value = 0;
// startFakeProgressPolling();
// }
const { code } = await putPlacementAccountsAuthorized({ id: id.value, ...form.value });
if (code === 200) {
isLoading.value = true;
isCompleted.value = false;
progress.value = 0;
startFakeProgressPolling();
startStatusPolling();
}
};
const startFakeProgressPolling = () => {
clearFakeProgressTimer();
progressTimer = setInterval(() => {
if (progress.value < 0.99) {
if (!isCompleted.value && progress.value < 0.99) {
const step = Math.random() * 0.04 + 0.01;
progress.value = Math.min(progress.value + step, 0.99);
progress.value = Number(progress.value.toFixed(2));
} else if (!isCompleted.value && progress.value >= 0.99) {
progress.value = 0.99; // 卡在99%
} else {
clearFakeProgressTimer();
clearStatusPollingTimer();
}
}, 1000);
};
@ -146,25 +201,31 @@ const clearFakeProgressTimer = () => {
progressTimer = null;
}
};
const clearOverdueTimer = () => {
if (overdueTimer) {
clearTimeout(overdueTimer);
overdueTimer = null;
}
};
const handleOk = () => {
if (notCompleted.value) {
clearOverdueTimer();
if (isOverdue.value) {
AMessage.error('二维码已失效，请重新扫码');
return;
}
startLoading();
if (lastSyncedAt.value) {
formRef.value.validate(async (errors) => {
if (!errors) {
showSyncTip.value = true;
}
});
return;
}
if (isCompleted.value) {
if (isSuccess.value) {
emits('update');
close();
} else {
startLoading();
}
} else {
formRef.value.validate(async (errors) => {
if (!errors) {
startLoading();
}
});
}
};
defineExpose({

6
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
View File

@ -20,7 +20,7 @@
.s1 {
color: var(--BG-White, #fff);
text-align: center;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -30,7 +30,7 @@
}
.s2 {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -40,7 +40,7 @@
overflow: hidden;
color: var(--Functional-Red-6, #f64b31);
text-overflow: ellipsis;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

12
src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
View File

@ -73,12 +73,8 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { fetchAccountOperators } from '@/api/all/propertyMarketing';
import {
INITIAL_QUERY,
PLATFORM_LIST,
STATUS_LIST,
} from '@/views/property-marketing/put-account/account-manage/constants';
import { fetchPlacementAccountOperators } from '@/api/all/propertyMarketing';
import { PLATFORM_LIST, STATUS_LIST } from '@/views/property-marketing/put-account/account-manage/constants';
const props = defineProps({
query: {
@ -99,14 +95,14 @@ const handleReset = () => {
emits('onReset');
};
const getOperators = async () => {
const { code, data } = await fetchAccountOperators();
const { code, data } = await fetchPlacementAccountOperators();
if (code === 200) {
operators.value = data;
}
};
onMounted(() => {
// getOperators();
getOperators();
});
</script>

2
src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
View File

@ -20,7 +20,7 @@
.label {
margin-right: 8px;
color: #211f24;
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
View File

@ -4,7 +4,7 @@
.arco-modal-body {
.tip {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;

2
src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
View File

@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
.text {
color: var(--BG-700, #737478);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 12px;
font-style: normal;
font-weight: 400;

27
src/views/property-marketing/put-account/account-manage/constants.ts
View File

@ -2,6 +2,10 @@
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:24:59
*/
import icon1 from '@/assets/img/media-account/icon-jl.png';
import icon2 from '@/assets/img/media-account/icon-jg.png';
import icon3 from '@/assets/img/media-account/icon-bili.png';
export const INITIAL_QUERY = {
search: '',
status: '',
@ -11,23 +15,31 @@ export const INITIAL_QUERY = {
export const PLATFORM_LIST = [
{
label: '抖音',
label: '巨量',
value: 0,
icon: icon1,
},
{
label: '小红书',
label: '聚光',
value: 1,
icon: icon2,
},
{
label: 'B站',
value: 2,
icon: icon3,
},
];
export enum EnumStatus {
NORMAL = 1,
PAUSE = 3,
UNAUTHORIZED = 0,
ABNORMAL = 2,
NORMAL = 1,
PAUSE = 2,
ABNORMAL = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
ABNORMAL_MISSING = 7,
}
export const STATUS_LIST = [
@ -69,4 +81,9 @@ export const STATUS_LIST = [
value: EnumStatus.ABNORMAL_FREEZE,
tooltip: '账号被冻结/封禁',
},
{
text: '数据缺失',
label: '数据缺失',
value: EnumStatus.ABNORMAL_MISSING,
},
];

128
src/views/property-marketing/put-account/account-manage/index.vue
View File

@ -20,8 +20,9 @@
</div>
<div
v-if="dataSource.length > 0"
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
:class="selectedItems.length > 0 ? 'selected' : 'normal'"
>
<div class="flex items-center">
<div class="flex items-center">
@ -41,14 +42,8 @@
<span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
</template>
<template v-else>
<img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
<span class="label">
{{
isNormalStatus
? '太棒啦！所有账号都在正常运行。'
: `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
}}
</span>
<img :src="icon4" width="16" height="16" class="mr-8px" />
<span class="label"> 太棒啦！所有账号都在正常运行。 </span>
</template>
</div>
</div>
@ -56,29 +51,26 @@
<template v-if="selectedItems.length > 0">
<img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
</template>
<div v-else>
<a-space v-if="isAbnormalStatus" class="flex items-center">
<a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</div>
</div>
<div class="card-wrap">
<AccountTable
v-if="dataSource.length > 0"
:dataSource="dataSource"
:selectedItems="selectedItems"
@selectionChange="handleSelectionChange"
@delete="handleDelete"
@openEdit="handleOpenEdit"
@update="getData"
/>
<div class="pagination-box">
<NoData v-else />
<div v-if="pageInfo.total > 0" class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:show-page-size="false"
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@ -87,8 +79,8 @@
</div>
</div>
<AddAccountModal ref="addAccountModalRef" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
<AddAccountModal ref="addAccountModalRef" @update="getData" />
<DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
</div>
</template>
@ -101,7 +93,7 @@ import AddAccountModal from './components/add-account-modal';
import DeleteAccountModal from './components/account-table/delete-account';
import { INITIAL_QUERY } from './constants';
import { getMediaAccounts } from '@/api/all/propertyMarketing';
import { getPlacementAccounts } from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-add.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
@ -113,18 +105,15 @@ const tagsManageModalRef = ref(null);
const addAccountModalRef = ref(null);
const deleteAccountRef = ref(null);
const tipStatus = ref(2);
const pageInfo = reactive({
page: 1,
pageSize: 20,
total: 100,
pageSize: 8,
total: 0,
});
const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const selectedItems = ref([]);
const isNormalStatus = computed(() => tipStatus.value === 1);
const isAbnormalStatus = computed(() => tipStatus.value === 2);
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
const indeterminate = computed(
() => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
@ -135,72 +124,16 @@ onMounted(() => {
});
const getData = async () => {
console.log('getData');
// 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 = [
{
id: 1,
name: '全球',
account_id: 1,
mobile: 1777777,
status: 0,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
{
name: '标签3',
},
{
name: '标签4',
},
{
name: '标签5',
},
],
},
{
id: 2,
name: '全球2',
account_id: 1,
mobile: 1777777,
status: 4,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
],
},
];
const { page, pageSize } = pageInfo;
const { code, data, total } = await getPlacementAccounts({
page,
page_size: pageSize,
...query.value,
});
if (code === 200) {
dataSource.value = data?.data ?? [];
pageInfo.total = data?.total ?? 0;
}
};
const reload = () => {
pageInfo.page = 1;
@ -260,9 +193,14 @@ const handleDelete = (item) => {
const handleCloseTip = () => {
selectedItems.value = [];
};
const handleOpenAbnormalAccount = () => {
query.value.status = 2;
reload();
// const handleOpenAbnormalAccount = () => {
// query.value.status = 2;
// reload();
// };
const onDeleteSuccess = (ids) => {
selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
getData();
};
</script>

15
src/views/property-marketing/put-account/account-manage/style.scss
View File

@ -15,7 +15,7 @@
.filter-wrap {
.top {
.title {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-style: normal;
}
:deep(.arco-btn) {
@ -29,7 +29,7 @@
border-radius: 2px;
background: #f0edff;
.label {
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -41,12 +41,6 @@
color: #211f24;
}
}
&.abnormal {
background: #ffe7e4;
.label {
color: #211f24;
}
}
.err-btn {
background-color: #f64b31 !important;
color: var(--BG-white, #fff);
@ -60,7 +54,7 @@
padding: 0;
cursor: pointer;
color: var(--Brand-Brand-6, #6d4cfe);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
@ -69,7 +63,7 @@
margin-right: 16px;
}
&.red {
color: #F64B31;
color: #f64b31;
}
}
}
@ -82,7 +76,6 @@
padding: 16px 24px;
justify-content: flex-end;
align-items: center;
}
}
}

6
src/views/property-marketing/put-account/investment-guidelines/components/month-data/style.scss
View File

@ -19,7 +19,7 @@
.month-text-blue {
color: var(--Brand-Brand-6, #6D4CFE);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word
@ -29,7 +29,7 @@
.month-text-red {
color: var(--Functional-Danger-6, #F64B31);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word
@ -39,7 +39,7 @@
.month-text-black {
color: var(--Text-1, #211F24);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 24px;
word-wrap: break-word

2
src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
View File

@ -137,7 +137,7 @@ const topImages = [top1, top2, top3];
// 下载
color: var(--Brand-6, #6d4cfe);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;

4
src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
View File

@ -100,7 +100,7 @@ const handleSearch = () => {
// 搜索
color: var(--Brand-6, #6d4cfe);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
height: 32px;
@ -112,7 +112,7 @@ const handleSearch = () => {
// 重置
color: var(--Text-2, #3c4043);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
height: 32px;

12
src/views/property-marketing/put-account/investment-guidelines/style.scss
View File

@ -34,7 +34,7 @@
.a-tab-class {
color: var(--Brand-6, #6D4CFE);
font-size: 66px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 30px;
word-wrap: break-word;
@ -49,7 +49,7 @@
flex-direction: column;
color: var(--Text-1, #211F24);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 26px;
word-wrap: break-word;
@ -103,7 +103,7 @@
flex-direction: column;
color: var(--Text-1, #211F24);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 26px;
word-wrap: break-word
@ -131,7 +131,7 @@
// 总体策略
color: var(--Text-1, #211F24);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
word-wrap: break-word
@ -141,7 +141,7 @@
align-self: stretch;
color: var(--Text-2, #3C4043);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
word-wrap: break-word
@ -153,7 +153,7 @@
// 表现分析
color: var(--Text-1, #211F24);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-family: PuHuiTi-Medium;
font-weight: 400;
line-height: 22px;
word-wrap: break-word