Merge branch 'feature/v1.3_营销资产中台' of http://gogs.lvfunai.com:444/ai-team/lingji-work-fe into feature/v1.3_营销资产中台
# Conflicts: # src/router/routes/modules/propertyMarketing.ts
This commit is contained in:
林志军
@ -20,9 +20,9 @@
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #heatLevel>
|
||||
<a-space>
|
||||
@ -85,23 +85,11 @@
|
||||
/>
|
||||
</template>
|
||||
<template #tred="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px"
|
||||
v-if="record.trend > 0"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#F64B31' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-rise />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
<a-statistic
|
||||
v-else
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
></a-statistic>
|
||||
<div class="flex items-center justify-end" :class="record.trend >= 0 ? 'color-#f64b31' : 'color-#25c883'">
|
||||
<icon-arrow-up v-if="record.trend >= 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ `${record.trend === 0 ? 0 : Math.abs(record.trend * 100)}%` }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
@ -126,7 +114,7 @@
|
||||
<a-space>
|
||||
<a-space style="width: 320px">
|
||||
<div id="container" style="height: 180px; width: 180px"></div>
|
||||
<a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
|
||||
<a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
|
||||
<a-space>
|
||||
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
|
||||
<span>正面情绪 </span>
|
||||
@ -144,9 +132,9 @@
|
||||
:data="rowData"
|
||||
:span-method="spanMethod"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #felling="{ record }">
|
||||
<img
|
||||
@ -188,9 +176,9 @@
|
||||
:columns="columns3"
|
||||
:data="keywordList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #rank="{ record }">
|
||||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||||
@ -254,10 +242,10 @@
|
||||
</template>
|
||||
<template #tred="{ record }">
|
||||
<a-statistic
|
||||
v-if="record.trend > 0"
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#F64B31' }"
|
||||
v-if="record.trend > 0"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-rise />
|
||||
@ -277,7 +265,7 @@
|
||||
</a-table>
|
||||
</a-space>
|
||||
<!-- modal -->
|
||||
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
|
||||
<a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
|
||||
<template #title>
|
||||
<span style="text-align: left; width: 100%">新兴关键词</span>
|
||||
</template>
|
||||
@ -594,12 +582,12 @@ const getNewKeywordList = async () => {
|
||||
};
|
||||
|
||||
const drawChart = () => {
|
||||
var dom = document.getElementById('container');
|
||||
var myChart = echarts.init(dom, null, {
|
||||
let dom = document.getElementById('container');
|
||||
let myChart = echarts.init(dom, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
});
|
||||
var option;
|
||||
let option;
|
||||
option = {
|
||||
color: ['#25C883', '#F64B31'],
|
||||
series: [
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 10:33:06
|
||||
*/
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '账号名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '项目分组',
|
||||
dataIndex: 'group.name',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '运营人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: 'AI评价',
|
||||
dataIndex: 'ai_evaluation',
|
||||
width: 260,
|
||||
},
|
||||
{
|
||||
title: '粉丝量',
|
||||
dataIndex: 'fans_number',
|
||||
width: 180,
|
||||
tooltip: '账号当前粉丝总数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '总赞藏数',
|
||||
dataIndex: 'like_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的点赞和收藏总数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '观看量',
|
||||
dataIndex: 'view_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总观看次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '观看量环比',
|
||||
dataIndex: 'view_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的观看量变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '点赞量',
|
||||
dataIndex: 'like_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总点赞数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '点赞量环比',
|
||||
dataIndex: 'like_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的点赞量变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最新内容标题/日期',
|
||||
dataIndex: 'like_chain1',
|
||||
width: 240,
|
||||
tooltip: '最新发布内容的标题和发布日期',
|
||||
},
|
||||
{
|
||||
title: '最新作品观看数',
|
||||
dataIndex: 'latest_view_number',
|
||||
width: 180,
|
||||
tooltip: '最新发布内容的观看次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最新作品日增长',
|
||||
dataIndex: 'latest_daily_growth',
|
||||
width: 180,
|
||||
tooltip: '最新作品每日观看量的增长情况',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '次新内容标题/日期',
|
||||
dataIndex: 'like_chain4',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '次新作品观看数',
|
||||
dataIndex: 'second_latest_view_number',
|
||||
width: 180,
|
||||
tooltip: '倒数第二个发布内容的观看次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '次新作品日增长',
|
||||
dataIndex: 'second_latest_daily_growth',
|
||||
width: 180,
|
||||
tooltip: '倒数第二个作品每日观看量的增长情况',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,189 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 18:08:04
|
||||
-->
|
||||
<template>
|
||||
<div class="action-row mb-12px flex justify-between">
|
||||
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
|
||||
>全选</a-checkbox
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
<template #default>自定义列</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
:selected-keys="selectedItems"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="account-table w-100%"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
|
||||
<div class="status-tag" :class="`status-tag-${record.status}`">
|
||||
<span class="cts status-tag-text">{{
|
||||
STATUS_LIST.find((item) => item.value === record.status)?.label
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
|
||||
<div class="ai-evaluation-row flex">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
|
||||
class="mr-8px icon"
|
||||
/>
|
||||
<div>
|
||||
<p class="cts">{{ record.ai_evaluation?.text }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ `观看: ${record.ai_evaluation?.look_chain}% 点赞: ${record.ai_evaluation?.like_chain}%` }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
|
||||
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
|
||||
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ formatTableField(column, record) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
|
||||
</template>
|
||||
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
import icon5 from '@/assets/img/media-account/icon5.png';
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
);
|
||||
const indeterminate = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
|
||||
);
|
||||
|
||||
const rowSelection = computed(() => ({
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
}));
|
||||
|
||||
const handleSelectAll = (checked) => {
|
||||
if (checked) {
|
||||
selectedItems.value = props.dataSource.map((item) => item.id);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
emit('selectionChange', checked ? selectedItems.value : []);
|
||||
};
|
||||
|
||||
const handleDetail = (record) => {
|
||||
router.push(`/media-account/detail/${record.id}`);
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSorterChange = (column, order) => {
|
||||
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
};
|
||||
|
||||
const handleSelect = (selectedRowKeys, selectedRows) => {
|
||||
selectedItems.value = selectedRowKeys;
|
||||
emit('selectionChange', selectedRows);
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
emit('export');
|
||||
};
|
||||
|
||||
const resetTable = () => {
|
||||
selectedItems.value = [];
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
.action-row {
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-table {
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.status-tag {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
|
||||
.status-tag-text {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
&-3 {
|
||||
background: #fff7e5;
|
||||
.status-tag-text {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
.status-tag-text {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-0 {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
.status-tag-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-evaluation-row {
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
.rate-row {
|
||||
&.up {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
&.down {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">分组</span>
|
||||
<a-space class="w-200px">
|
||||
<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-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space class="w-240px">
|
||||
<a-select
|
||||
v-model="query.date_range"
|
||||
size="medium"
|
||||
placeholder="全部"
|
||||
class="w-120px"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<template #arrow-icon> <icon-calendar size="16" /> </template>
|
||||
<a-option :value="7" label="近7天">近7天</a-option>
|
||||
<a-option :value="14" label="近14天">近14天</a-option>
|
||||
<a-option :value="30" label="近30天">近30天</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import GroupSelect from '../group-select/index.vue';
|
||||
import { STATUS_LIST } from '@/views/property-marketing/media-account/account-dashboard/constants';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
|
||||
const tags = ref([]);
|
||||
const groups = ref([]);
|
||||
const operators = ref([]);
|
||||
|
||||
const handleSearch = () => {
|
||||
emits('onSearch', props.query);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
emits('onReset');
|
||||
};
|
||||
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
}
|
||||
};
|
||||
const getOperators = async () => {
|
||||
const { code, data } = await fetchAccountOperators();
|
||||
if (code === 200) {
|
||||
operators.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getGroups();
|
||||
// getOperators();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
.container {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.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);
|
||||
}
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #211f24;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 17:23:56
|
||||
*/
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon1.png';
|
||||
import icon2 from '@/assets/img/media-account/icon2.png';
|
||||
import icon3 from '@/assets/img/media-account/icon3.png';
|
||||
import icon4 from '@/assets/img/media-account/icon4.png';
|
||||
|
||||
export const CARD_FIELDS = [
|
||||
{
|
||||
label: '账号总数',
|
||||
prop: 'total_number',
|
||||
icon: icon1,
|
||||
},
|
||||
{
|
||||
label: '总粉丝数',
|
||||
prop: 'total_fans_number',
|
||||
icon: icon2,
|
||||
tooltip: '总粉丝数',
|
||||
},
|
||||
{
|
||||
label: '总赞藏数',
|
||||
prop: 'total_like_number',
|
||||
icon: icon3,
|
||||
tooltip: '总赞藏数',
|
||||
},
|
||||
{
|
||||
label: '近7日观看数',
|
||||
prop: 'in_the_past_seven_days_view_number',
|
||||
icon: icon4,
|
||||
tooltip: '近7日观看数',
|
||||
},
|
||||
];
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
group_ids: [],
|
||||
date_range: '',
|
||||
column: '',
|
||||
order: '',
|
||||
};
|
||||
|
||||
export enum EnumStatus {
|
||||
NORMAL = 1,
|
||||
PAUSE = 3,
|
||||
UNAUTHORIZED = 0,
|
||||
ABNORMAL = 2,
|
||||
ABNORMAL_LOGIN = 4,
|
||||
ABNORMAL_REQUEST = 5,
|
||||
ABNORMAL_FREEZE = 6,
|
||||
}
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
},
|
||||
];
|
||||
@ -3,9 +3,323 @@
|
||||
* @Date: 2025-06-25 10:02:20
|
||||
-->
|
||||
|
||||
<template></template>
|
||||
<template>
|
||||
<div class="account-dashboard-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
|
||||
<div class="top flex h-64px py-10px justify-between items-center mb-19px">
|
||||
<div class="flex items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
|
||||
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-row flex">
|
||||
<div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
|
||||
<div class="flex items-center mb-8px">
|
||||
<img :src="item.icon" width="24" height="24" class="mr-8px" />
|
||||
<p class="s2 color-#211F24">{{ item.label }}</p>
|
||||
<a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
|
||||
<img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<span class="s1 color-#211F24 ml-32px">{{
|
||||
item.prop === 'total_like_number'
|
||||
? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
|
||||
: formatNumberShow(overviewData[item.prop])
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px mb-16px">
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<AccountTable
|
||||
ref="accountTableRef"
|
||||
:dataSource="dataSource"
|
||||
@selectionChange="handleSelectionChange"
|
||||
@export="handleExport"
|
||||
@sorterChange="handleSorterChange"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts"></script>
|
||||
<script setup>
|
||||
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 { CARD_FIELDS } from './constants';
|
||||
import icon1 from '@/assets/img/icon-question.png';
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const dataSource = ref([]);
|
||||
const overviewData = ref({});
|
||||
const selectedRowKeys = ref([]);
|
||||
const accountTableRef = ref(null);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
// 测试数据
|
||||
const mockData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '抖音官方账号',
|
||||
mobile: '13800138001',
|
||||
account_id: 'douyin_001',
|
||||
holder_name: '张三',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 1250000,
|
||||
like_number: 890000,
|
||||
collect_number: 45000,
|
||||
view_number: 5600000,
|
||||
view_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
ai_evaluation: {
|
||||
status: 1,
|
||||
text: '表现优质 | 建议保持',
|
||||
look_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小红书美妆号',
|
||||
mobile: '13800138002',
|
||||
account_id: 'xhs_001',
|
||||
holder_name: '李四',
|
||||
operator_id: 2,
|
||||
platform: 1,
|
||||
group_id: 2,
|
||||
status: 1,
|
||||
is_pause: 1,
|
||||
fans_number: 890000,
|
||||
like_number: 670000,
|
||||
collect_number: 89000,
|
||||
view_number: 3200000,
|
||||
view_chain: -5.2,
|
||||
like_chain: 15.7,
|
||||
ai_evaluation: {
|
||||
status: 2,
|
||||
text: '表现中等 | 建议优化',
|
||||
look_chain: -12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 2,
|
||||
name: '王运营',
|
||||
},
|
||||
group: {
|
||||
id: 2,
|
||||
name: '小红书组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '抖音美食号',
|
||||
mobile: '13800138003',
|
||||
account_id: 'douyin_002',
|
||||
holder_name: '王五',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 0,
|
||||
is_pause: 0,
|
||||
fans_number: 0,
|
||||
like_number: 0,
|
||||
collect_number: 0,
|
||||
view_number: 0,
|
||||
view_chain: 0,
|
||||
like_chain: 0,
|
||||
ai_evaluation: {
|
||||
status: 3,
|
||||
text: '表现较差 | 建议整改',
|
||||
look_chain: -12.5,
|
||||
like_chain: -8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '小红书穿搭号',
|
||||
mobile: '13800138004',
|
||||
account_id: 'xhs_002',
|
||||
holder_name: '赵六',
|
||||
operator_id: 2,
|
||||
platform: 1,
|
||||
group_id: 2,
|
||||
status: 2,
|
||||
is_pause: 0,
|
||||
fans_number: 450000,
|
||||
like_number: 320000,
|
||||
collect_number: 23000,
|
||||
view_number: 1800000,
|
||||
view_chain: -12.8,
|
||||
like_chain: -8.5,
|
||||
operator: {
|
||||
id: 2,
|
||||
name: '王运营',
|
||||
},
|
||||
group: {
|
||||
id: 2,
|
||||
name: '小红书组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '抖音科技号',
|
||||
mobile: '13800138005',
|
||||
account_id: 'douyin_003',
|
||||
holder_name: '钱七',
|
||||
operator_id: 3,
|
||||
platform: 0,
|
||||
group_id: 3,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 2100000,
|
||||
like_number: 1500000,
|
||||
collect_number: 120000,
|
||||
view_number: 8900000,
|
||||
view_chain: 25.6,
|
||||
like_chain: 18.9,
|
||||
operator: {
|
||||
id: 3,
|
||||
name: '陈运营',
|
||||
},
|
||||
group: {
|
||||
id: 3,
|
||||
name: '科技组',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const getOverviewData = async () => {
|
||||
// 使用模拟数据
|
||||
overviewData.value = {
|
||||
total_number: 5,
|
||||
total_fans_number: 4690000,
|
||||
total_like_number: 3380000,
|
||||
total_collect_number: 1230000,
|
||||
in_the_past_seven_days_view_number: 19500000,
|
||||
};
|
||||
|
||||
// 如果有真实接口，可以这样调用：
|
||||
// const { code, data } = await getAccountBoardOverview();
|
||||
// if (code === 200) {
|
||||
// overviewData.value = data;
|
||||
// }
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
// 使用模拟数据
|
||||
dataSource.value = mockData;
|
||||
pageInfo.total = mockData.length;
|
||||
|
||||
// 如果有真实接口，可以这样调用：
|
||||
// const { code, data } = await getAccountBoardList(query.value);
|
||||
// if (code === 200) {
|
||||
// dataSource.value = data.data;
|
||||
// pageInfo.total = data.total;
|
||||
// }
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.page = current;
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
selectedRowKeys.value = [];
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
accountTableRef.value?.resetTable();
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (selectedRows) => {
|
||||
selectedRowKeys.value = selectedRows;
|
||||
console.log('选中的账号:', selectedRowKeys.value);
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
postAccountBoardExport({
|
||||
...query.value,
|
||||
}).then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code === 200) {
|
||||
console.log(data.download_url);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.column = column;
|
||||
query.value.order = order;
|
||||
reload();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getOverviewData();
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
.account-dashboard-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-style: normal;
|
||||
}
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-row {
|
||||
.overview-item {
|
||||
height: 88px;
|
||||
border-radius: 8px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
padding: 16px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:58:25
|
||||
-->
|
||||
<template>
|
||||
<div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
|
||||
<div class="title-row">
|
||||
<span class="cts !text-18px !lh-26px">账号信息</span>
|
||||
</div>
|
||||
<div class="account-info-box">
|
||||
<div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
|
||||
<div
|
||||
v-for="(field, colIdx) in row"
|
||||
:key="colIdx"
|
||||
:class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
|
||||
>
|
||||
<!-- 第二组的AI评价占1/2宽度 -->
|
||||
<template v-if="rowIdx === 1 && colIdx === 0">
|
||||
<div class="flex items-center mb-4px">
|
||||
<img width="16" height="16" :src="icon1" class="mr-4px" />
|
||||
<span class="cts !color-#737478 mr-4px">AI评价</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="
|
||||
detailData.ai_evaluation?.status === 1
|
||||
? icon4
|
||||
: detailData.ai_evaluation?.status === 2
|
||||
? icon3
|
||||
: icon2
|
||||
"
|
||||
class="mr-8px"
|
||||
/>
|
||||
|
||||
<span v-if="detailData.ai_evaluation" class="cts">
|
||||
{{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
|
||||
detailData.ai_evaluation.like_chain
|
||||
}}%
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 其他项占1/4宽度 -->
|
||||
<template v-else>
|
||||
<div class="flex items-center mb-4px">
|
||||
<p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
|
||||
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<p class="cts">
|
||||
<!-- 状态特殊渲染 -->
|
||||
<template v-if="field.type === 'status'">
|
||||
<span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
|
||||
<span v-else style="color: #ff4d4f">异常</span>
|
||||
</template>
|
||||
<!-- 环比字段特殊渲染 -->
|
||||
<template v-else-if="field.type === 'rate'">
|
||||
<span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
|
||||
<icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
|
||||
<icon-arrow-down v-else />
|
||||
{{ detailData[field.dataIndex] }}%
|
||||
</span>
|
||||
</template>
|
||||
<!-- 普通字段，支持多层key -->
|
||||
<template v-else>
|
||||
{{ formatTableField(field, detailData, true) }}
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { accountInfoFields } from '../../constants';
|
||||
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon5.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const detailData = ref({
|
||||
id: 1,
|
||||
name: '抖音官方账号',
|
||||
mobile: '13800138001',
|
||||
account_id: 'douyin_001',
|
||||
holder_name: '张三',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 1250000,
|
||||
like_number: 890000,
|
||||
collect_number: 45000,
|
||||
view_number: 5600000,
|
||||
view_chain: -12.5,
|
||||
like_chain: 8.3,
|
||||
ai_evaluation: {
|
||||
status: 1,
|
||||
text: '表现优质 | 建议保持',
|
||||
look_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
});
|
||||
|
||||
const getDetail = async () => {
|
||||
const { code, data } = await getAccountBoardDetail(id);
|
||||
if (code === 200) {
|
||||
detailData.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
.account-info-wrap {
|
||||
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 13:30:58
|
||||
*/
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
publish_date: [],
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '笔记标题',
|
||||
dataIndex: 'name',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
dataIndex: 'publish_date',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '曝光量',
|
||||
dataIndex: 'exposure_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总曝光次数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '观看量',
|
||||
dataIndex: 'view_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总观看次数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '点赞量',
|
||||
dataIndex: 'like_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总点赞数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '收藏量',
|
||||
dataIndex: 'collect_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总收藏数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '评论数',
|
||||
dataIndex: 'comment_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总评论数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '分享量',
|
||||
dataIndex: 'share_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总转发数',
|
||||
align: 'right',
|
||||
},
|
||||
|
||||
{
|
||||
title: '封面点击率',
|
||||
dataIndex: 'cover_click_rate',
|
||||
width: 180,
|
||||
tooltip: '封面点击率',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:58:09
|
||||
-->
|
||||
<template>
|
||||
<div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex my-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">笔记标题</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">发布日期</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-range-picker
|
||||
v-model="query.publish_date"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
class="w-100%"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-table :data="dataSource" row-key="id" :pagination="false" :scroll="{ x: '100%' }" class="w-100%" bordered>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell="{ record }">
|
||||
<template v-if="column.dataIndex === 'publish_date'">
|
||||
{{ exactFormatTime(record.publish_date) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const dataSource = ref([]);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log(query.value);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.page = current;
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
// const { code, data } = await getAccountBoardList(query.value);
|
||||
// if (code === 200) {
|
||||
// dataSource.value = data?.list || [];
|
||||
// pageInfo.total = data.total;
|
||||
// }
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
.note-table-wrap {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple),
|
||||
:deep(.arco-picker) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #211f24;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:55:44
|
||||
*/
|
||||
export const accountInfoFields = [
|
||||
[
|
||||
{ label: '账号名称', dataIndex: 'name' },
|
||||
{ label: '项目分组', dataIndex: 'group.name' },
|
||||
{ label: '状态', dataIndex: 'status', type: 'status' },
|
||||
{ label: '运营人员', dataIndex: 'operator.name' },
|
||||
],
|
||||
[
|
||||
{ label: 'AI评价', dataIndex: 'ai_evaluation' },
|
||||
{ label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
|
||||
{ label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
|
||||
],
|
||||
[
|
||||
{ label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
|
||||
{ label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
|
||||
{ label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
|
||||
{ label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
|
||||
],
|
||||
];
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 11:21:10
|
||||
-->
|
||||
<template>
|
||||
<div class="account-detail-wrap">
|
||||
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
|
||||
<icon-left size="16" />
|
||||
<spa class="cts ml-8px">账号详情</spa>
|
||||
</div>
|
||||
<AccountInfo />
|
||||
<NoteTable />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AccountInfo from './components/account-info';
|
||||
import NoteTable from './components/note-table';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/media-account/dashboard');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
.account-detail-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.cts) {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.title-row) {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@
|
||||
.card-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
// grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 20px;
|
||||
.card-item {
|
||||
|
||||
@ -31,19 +31,19 @@
|
||||
<p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center mb-16px">
|
||||
<!-- <div class="flex items-center mb-16px">
|
||||
<img :src="icon1" width="16" height="16" />
|
||||
<span class="ml-8px red-text">未识别到有效二维码。</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="img-box">
|
||||
<img :src="imgUrl" width="160" height="160" class="mb-16px" />
|
||||
<div v-if="isOverdue" class="mask">
|
||||
<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 class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
|
||||
<span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
@ -62,8 +62,10 @@ import icon1 from '@/assets/img/media-account/icon-warn.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 visible = ref(false);
|
||||
const isOverdue = ref(false);
|
||||
const isOverdue = ref(false); // 二维码失效
|
||||
const isLoading = ref(false);
|
||||
const isCompleted = ref(false);
|
||||
const isSuccess = ref(false);
|
||||
@ -73,6 +75,7 @@ const id = ref('');
|
||||
const imgUrl = ref('');
|
||||
|
||||
let progressTimer = null;
|
||||
let overdueTimer = null;
|
||||
|
||||
const notCompleted = computed(() => {
|
||||
return !isCompleted.value;
|
||||
@ -84,7 +87,7 @@ const confirmBtnText = computed(() => {
|
||||
|
||||
const open = (accountId) => {
|
||||
id.value = accountId;
|
||||
handleAuthorizedImage();
|
||||
getAuthorizedQrCode();
|
||||
visible.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
@ -95,14 +98,21 @@ const close = () => {
|
||||
failReason.value = '';
|
||||
progress.value = 0;
|
||||
id.value = '';
|
||||
|
||||
clearFakeProgressTimer();
|
||||
clearOverdueTimer();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleAuthorizedImage = async () => {
|
||||
const getAuthorizedQrCode = async () => {
|
||||
const { code, data } = await getAuthorizedImage(id.value);
|
||||
if (code === 200) {
|
||||
imgUrl.value = data.url;
|
||||
overdueTimer = null;
|
||||
|
||||
// 约定：后端限制40s内必须扫码，前端定30s后失效
|
||||
overdueTimer = setTimeout(() => {
|
||||
isOverdue.value = true;
|
||||
}, OVERDUE_TIME);
|
||||
}
|
||||
};
|
||||
const startLoading = async () => {
|
||||
@ -136,18 +146,27 @@ 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();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
clearFakeProgressTimer();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
|
||||
@ -27,8 +27,8 @@
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
item.label
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
@ -54,7 +54,7 @@
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">分组</span>
|
||||
<a-space class="w-200px">
|
||||
@ -112,7 +112,6 @@ const handleSearch = () => {
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
emits('update:query', cloneDeep(INITIAL_QUERY));
|
||||
emits('onReset');
|
||||
};
|
||||
|
||||
|
||||
@ -9,11 +9,40 @@
|
||||
title="重新授权"
|
||||
modal-class="reauthorize-account-modal"
|
||||
:mask-closable="false"
|
||||
:footer="!isLoading"
|
||||
:footer="taskStep !== TASK_STEP.loading"
|
||||
@close="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<template v-if="isLoading">
|
||||
<template v-if="taskStep === TASK_STEP.default">
|
||||
<template v-if="hasUnsyncData">
|
||||
<div class="flex items-center mb-20px">
|
||||
<img :src="icon4" width="16" height="16" class="mr-16px" />
|
||||
<span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
|
||||
</div>
|
||||
<a-radio-group v-model="actionType" class="ml-32px">
|
||||
<a-radio :value="1" class="mb-16px"
|
||||
><span class="s2"
|
||||
>立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
|
||||
></a-radio
|
||||
>
|
||||
<a-radio :value="2" class="mb-16px"
|
||||
><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
|
||||
>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<template v-else>
|
||||
<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>
|
||||
</template>
|
||||
<template v-else-if="taskStep === TASK_STEP.loading">
|
||||
<a-progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
@ -24,57 +53,32 @@
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
|
||||
</template>
|
||||
<template v-else-if="loadingStep === 1">
|
||||
<div class="flex items-center mb-20px">
|
||||
<img :src="icon4" width="16" height="16" class="mr-16px" />
|
||||
<span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
|
||||
</div>
|
||||
<a-radio-group v-model="actionType" class="ml-32px">
|
||||
<a-radio :value="1" class="mb-16px"
|
||||
><span class="s2"
|
||||
>立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
|
||||
></a-radio
|
||||
>
|
||||
<a-radio :value="2" class="mb-16px"><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<template v-else-if="loadingStep === 2">
|
||||
<div class="flex items-center mb-20px">
|
||||
<img :src="icon4" width="16" height="16" class="mr-16px" />
|
||||
<span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
|
||||
</div>
|
||||
<div class="w-100% pl-32px">
|
||||
<div class="account-tip-box">
|
||||
<p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
|
||||
<p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="isCompleted">
|
||||
<template v-if="isNicknameChanged">
|
||||
<div class="flex items-center mb-20px">
|
||||
<img :src="icon4" width="16" height="16" class="mr-16px" />
|
||||
<span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
|
||||
</div>
|
||||
<div class="w-100% pl-32px">
|
||||
<div class="account-tip-box">
|
||||
<p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
|
||||
<p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
|
||||
<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">
|
||||
<icon-refresh size="24" class="mb-13px" />
|
||||
<p class="s1">二维码失效</p>
|
||||
<p class="s1">请点击刷新</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button v-if="isCompleted || [1, 3].includes(actionType)" size="large" class="cancel-btn" @click="close"
|
||||
<a-button
|
||||
v-if="(taskStep === TASK_STEP.default && hasUnsyncData) || taskStep === TASK_STEP.end"
|
||||
size="large"
|
||||
class="cancel-btn"
|
||||
@click="close"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
|
||||
@ -91,64 +95,81 @@ import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const OVERDUE_TIME = 30000; // 失效时间
|
||||
const TASK_STEP = {
|
||||
default: 1,
|
||||
loading: 2,
|
||||
end: 3,
|
||||
};
|
||||
|
||||
const visible = ref(false);
|
||||
const isOverdue = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isCompleted = ref(false);
|
||||
const isOverdue = ref(false); // 二维码失效
|
||||
const isSuccess = ref(false);
|
||||
const failReason = ref('');
|
||||
const progress = ref(0);
|
||||
const id = ref('');
|
||||
const imgUrl = ref('');
|
||||
const loadingStep = ref(0); // 1 | 2
|
||||
|
||||
const taskStep = ref(TASK_STEP.default);
|
||||
const hasUnsyncData = ref(false); // 含有未同步数据
|
||||
const isNicknameChanged = ref(false); // 昵称发生变化
|
||||
const actionType = ref(1);
|
||||
|
||||
let progressTimer = null;
|
||||
let overdueTimer = null;
|
||||
|
||||
const notCompleted = computed(() => {
|
||||
return !isCompleted.value;
|
||||
});
|
||||
const confirmBtnText = computed(() => {
|
||||
if (loadingStep.value === 1) return '确定';
|
||||
if (loadingStep.value === 2) return '确定覆盖';
|
||||
if (taskStep.value === TASK_STEP.default) {
|
||||
return hasUnsyncData.value ? '确定' : '完成扫码';
|
||||
}
|
||||
|
||||
if (notCompleted.value) return '完成扫码';
|
||||
if (taskStep.value === TASK_STEP.end) {
|
||||
if (isNicknameChanged.value) return '确定覆盖';
|
||||
return isSuccess.value ? '继续添加' : '重新扫码';
|
||||
}
|
||||
|
||||
return isSuccess.value ? '继续添加' : '重新扫码';
|
||||
return '';
|
||||
});
|
||||
|
||||
const open = (accountId) => {
|
||||
id.value = accountId;
|
||||
handleAuthorizedImage();
|
||||
getAuthorizedQrCode();
|
||||
visible.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
isOverdue.value = false;
|
||||
isLoading.value = false;
|
||||
isCompleted.value = false;
|
||||
isSuccess.value = false;
|
||||
failReason.value = '';
|
||||
progress.value = 0;
|
||||
loadingStep.value = 0;
|
||||
taskStep.value = TASK_STEP.default;
|
||||
actionType.value = 1;
|
||||
hasUnsyncData.value = false;
|
||||
isNicknameChanged.value = false;
|
||||
id.value = '';
|
||||
|
||||
clearFakeProgressTimer();
|
||||
clearOverdueTimer();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleAuthorizedImage = async () => {
|
||||
const getAuthorizedQrCode = async () => {
|
||||
const { code, data } = await getAuthorizedImage(id.value);
|
||||
if (code === 200) {
|
||||
imgUrl.value = data.url;
|
||||
overdueTimer = null;
|
||||
|
||||
// 约定：后端限制40s内必须扫码，前端定30s后失效
|
||||
overdueTimer = setTimeout(() => {
|
||||
isOverdue.value = true;
|
||||
}, OVERDUE_TIME);
|
||||
}
|
||||
};
|
||||
const startLoading = async () => {
|
||||
isLoading.value = true;
|
||||
taskStep.value = TASK_STEP.loading;
|
||||
progress.value = 0;
|
||||
startFakeProgressPolling();
|
||||
// const { code } = await startPatchAccount(id.value);
|
||||
// if (code === 200) {
|
||||
// isLoading.value = true;
|
||||
// taskStep.value = TASK_STEP.loading;
|
||||
// progress.value = 0;
|
||||
// startFakeProgressPolling();
|
||||
// }
|
||||
@ -162,7 +183,7 @@ const startFakeProgressPolling = () => {
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else {
|
||||
loadingStep.value = 2;
|
||||
taskStep.value = TASK_STEP.end;
|
||||
clearFakeProgressTimer();
|
||||
}
|
||||
}, 1000);
|
||||
@ -174,23 +195,50 @@ const clearFakeProgressTimer = () => {
|
||||
progressTimer = null;
|
||||
}
|
||||
};
|
||||
const clearOverdueTimer = () => {
|
||||
if (overdueTimer) {
|
||||
clearTimeout(overdueTimer);
|
||||
overdueTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const getSyncDataStatus = () => {
|
||||
return hasUnsyncData.value;
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (loadingStep.value === 1) {
|
||||
if (taskStep.value === TASK_STEP.default) {
|
||||
clearOverdueTimer();
|
||||
|
||||
if (isOverdue.value) {
|
||||
AMessage.error('二维码已失效，请重新扫码');
|
||||
return;
|
||||
}
|
||||
|
||||
const _hasUnsyncData = getSyncDataStatus();
|
||||
if (!_hasUnsyncData) {
|
||||
hasUnsyncData.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
startLoading();
|
||||
return;
|
||||
}
|
||||
|
||||
if (notCompleted.value) {
|
||||
loadingStep.value = 1;
|
||||
return;
|
||||
if (taskStep.value === TASK_STEP.end) {
|
||||
if (isNicknameChanged.value) {
|
||||
isNicknameChanged.value = false;
|
||||
console.log('确定覆盖');
|
||||
} else {
|
||||
if (isSuccess.value) {
|
||||
console.log('继续添加');
|
||||
} else {
|
||||
console.log('重新扫码');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
clearFakeProgressTimer();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
|
||||
@ -34,32 +34,39 @@ export enum EnumStatus {
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-manage-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<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">
|
||||
@ -236,6 +236,10 @@ const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
selectedItems.value = [];
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
@ -13,8 +13,6 @@
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
@ -84,39 +82,7 @@
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
:deep(.arco-pagination) {
|
||||
.arco-pagination-list {
|
||||
.arco-pagination-item {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
&.arco-pagination-item-ellipsis {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.arco-pagination-item-active {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-pagination-jumper-input {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
.arco-pagination-jumper-prepend {
|
||||
color: var(--Text-2, #3c4043);
|
||||
text-align: right;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.arco-select-view-single {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,239 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 10:33:06
|
||||
*/
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '账号名称',
|
||||
dataIndex: 'name',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '项目分组',
|
||||
dataIndex: 'group.name',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 180,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: '运营人员',
|
||||
dataIndex: 'operator.name',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '账户总消耗',
|
||||
dataIndex: 'total_consumption',
|
||||
width: 180,
|
||||
tooltip: '账号总消耗',
|
||||
prefix: '¥',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '账户余额',
|
||||
dataIndex: 'balance',
|
||||
width: 180,
|
||||
tooltip: '账号余额',
|
||||
prefix: '¥',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'AI评价',
|
||||
dataIndex: 'ai_evaluation',
|
||||
width: 260,
|
||||
},
|
||||
{
|
||||
title: 'ROI',
|
||||
dataIndex: 'roi',
|
||||
width: 180,
|
||||
tooltip: '账号ROI',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'ROI环比',
|
||||
dataIndex: 'roi_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的ROI变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CPA',
|
||||
dataIndex: 'cpa',
|
||||
width: 180,
|
||||
tooltip: '账号CPA',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CPA环比',
|
||||
dataIndex: 'roi_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的CPA变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '转化数',
|
||||
dataIndex: 'conversion_number',
|
||||
width: 180,
|
||||
tooltip: '账号转化数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '转化数环比',
|
||||
dataIndex: 'conversion_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的转化数变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CVR',
|
||||
dataIndex: 'conversion_rate',
|
||||
width: 180,
|
||||
tooltip: '账号转化率',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CVR环比',
|
||||
dataIndex: 'conversion_rate_chain',
|
||||
width: 180,
|
||||
tooltip: '相比上一周期的CVR变化百分比',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最新投放计划标题/日期',
|
||||
dataIndex: 'like_chain1',
|
||||
width: 260,
|
||||
tooltip: '最新发布内容的标题和发布日期',
|
||||
},
|
||||
{
|
||||
title: '最新投放计划表现',
|
||||
dataIndex: 'latest_plan_performance',
|
||||
width: 180,
|
||||
tooltip: '最新投放计划表现',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '展示量',
|
||||
dataIndex: 'view_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总展示次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '点击量',
|
||||
dataIndex: 'click_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总点击次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '点击率',
|
||||
dataIndex: 'click_rate',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总点击率',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '平均点击成本',
|
||||
dataIndex: 'avg_click_cost',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的平均点击成本',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '千次展现费用',
|
||||
dataIndex: 'cost_per_thousand_views',
|
||||
width: 180,
|
||||
prefix: '¥',
|
||||
tooltip: '账号所有内容的千次展现费用',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '平均转化成本',
|
||||
dataIndex: 'avg_conversion_cost',
|
||||
width: 180,
|
||||
prefix: '¥',
|
||||
tooltip: '账号所有内容的平均转化成本',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '深度转化数',
|
||||
dataIndex: 'deep_conversion_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总深度转化次数',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '深度转化率',
|
||||
dataIndex: 'deep_conversion_rate',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总深度转化率',
|
||||
align: 'right',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,213 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 18:08:04
|
||||
-->
|
||||
<template>
|
||||
<div class="action-row mb-12px flex justify-between">
|
||||
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
|
||||
>全选</a-checkbox
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
|
||||
<template #icon> <icon-download /> </template>
|
||||
<template #default>导出数据</template>
|
||||
</a-button>
|
||||
<a-button class="w-110px search-btn" size="medium">
|
||||
<template #icon>
|
||||
<img :src="icon1" width="14" height="14" />
|
||||
</template>
|
||||
<template #default>自定义列</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
:selected-keys="selectedItems"
|
||||
:pagination="false"
|
||||
:scroll="{ x: '100%' }"
|
||||
class="account-table w-100%"
|
||||
bordered
|
||||
@sorter-change="handleSorterChange"
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in getColumns()"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'platform'" #cell="{ record }">
|
||||
{{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
|
||||
<div class="status-tag" :class="`status-tag-${record.status}`">
|
||||
<span class="cts status-tag-text">{{
|
||||
STATUS_LIST.find((item) => item.value === record.status)?.label
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
|
||||
<div class="ai-evaluation-row flex">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
|
||||
class="mr-8px icon"
|
||||
/>
|
||||
<div>
|
||||
<p class="cts">{{ record.ai_evaluation?.text }}</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">
|
||||
{{ `ROI: ${record.ai_evaluation?.look_chain}% CVR: ${record.ai_evaluation?.like_chain}%` }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else-if="
|
||||
[
|
||||
'view_chain',
|
||||
'roi_chain',
|
||||
'like_chain',
|
||||
'cpa_chain',
|
||||
'conversion_chain',
|
||||
'conversion_rate_chain',
|
||||
].includes(column.dataIndex)
|
||||
"
|
||||
#cell="{ record }"
|
||||
>
|
||||
<div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
|
||||
<icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
|
||||
<icon-arrow-down v-else size="16" />
|
||||
{{ formatTableField(column, record) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
|
||||
<p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
|
||||
<p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
|
||||
</template>
|
||||
|
||||
<template v-else #cell="{ record }">
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
import icon5 from '@/assets/img/media-account/icon5.png';
|
||||
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isAccountTab: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
);
|
||||
const indeterminate = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
|
||||
);
|
||||
|
||||
const rowSelection = computed(() => ({
|
||||
type: 'checkbox',
|
||||
showCheckedAll: true,
|
||||
}));
|
||||
|
||||
const handleSelectAll = (checked) => {
|
||||
if (checked) {
|
||||
selectedItems.value = props.dataSource.map((item) => item.id);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
emit('selectionChange', checked ? selectedItems.value : []);
|
||||
};
|
||||
|
||||
const handleDetail = (record) => {
|
||||
router.push(`/media-account/detail/${record.id}`);
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSorterChange = (column, order) => {
|
||||
emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
|
||||
};
|
||||
|
||||
const handleSelect = (selectedRowKeys, selectedRows) => {
|
||||
selectedItems.value = selectedRowKeys;
|
||||
emit('selectionChange', selectedRows);
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
emit('export');
|
||||
};
|
||||
const getColumns = () => {
|
||||
const columns = cloneDeep(TABLE_COLUMNS);
|
||||
if (!props.isAccountTab) {
|
||||
const _target = columns.find((item) => item.dataIndex === 'name');
|
||||
_target.title = '项目名称';
|
||||
}
|
||||
return columns;
|
||||
};
|
||||
|
||||
const resetTable = () => {
|
||||
selectedItems.value = [];
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
.action-row {
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-table {
|
||||
.cts {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.status-tag {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: var(--Functional-Red-1, #ffe9e7);
|
||||
|
||||
.status-tag-text {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
&-3 {
|
||||
background: #fff7e5;
|
||||
.status-tag-text {
|
||||
color: var(--Functional-yellow-6, #ffae00);
|
||||
}
|
||||
}
|
||||
&-1 {
|
||||
background: var(--Functional-Green-1, #ebf7f2);
|
||||
.status-tag-text {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
&-0 {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
.status-tag-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-evaluation-row {
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
.rate-row {
|
||||
&.up {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
&.down {
|
||||
color: var(--Functional-Green-6, #25c883);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
-->
|
||||
<template>
|
||||
<div class="container px-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账号名称</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">项目分组</span>
|
||||
<a-space class="w-200px">
|
||||
<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-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-space class="w-240px">
|
||||
<a-range-picker
|
||||
v-model="query.date_range"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
class="w-100%"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import GroupSelect from '../group-select/index.vue';
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
|
||||
const tags = ref([]);
|
||||
const groups = ref([]);
|
||||
const operators = ref([]);
|
||||
|
||||
const handleSearch = () => {
|
||||
emits('onSearch', props.query);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
emits('onReset');
|
||||
};
|
||||
|
||||
const getGroups = async () => {
|
||||
const { code, data } = await fetchAccountGroups();
|
||||
if (code === 200) {
|
||||
groups.value = data;
|
||||
}
|
||||
};
|
||||
const getOperators = async () => {
|
||||
const { code, data } = await fetchAccountOperators();
|
||||
if (code === 200) {
|
||||
operators.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getGroups();
|
||||
// getOperators();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
.container {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple),
|
||||
:deep(.arco-picker) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #211f24;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -0,0 +1,65 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 14:16:25
|
||||
*/
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
status: '',
|
||||
operator_id: '',
|
||||
group_ids: [],
|
||||
date_range: [],
|
||||
column: '',
|
||||
order: '',
|
||||
};
|
||||
|
||||
export enum EnumStatus {
|
||||
NORMAL = 1,
|
||||
PAUSE = 3,
|
||||
UNAUTHORIZED = 0,
|
||||
ABNORMAL = 2,
|
||||
ABNORMAL_LOGIN = 4,
|
||||
ABNORMAL_REQUEST = 5,
|
||||
ABNORMAL_FREEZE = 6,
|
||||
}
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
},
|
||||
];
|
||||
245
src/views/property-marketing/put-account/account-data/index.vue
Normal file
245
src/views/property-marketing/put-account/account-data/index.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 14:13:42
|
||||
-->
|
||||
<template>
|
||||
<div class="account-data-wrap">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
|
||||
<a-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<a-tab-pane :key="1" title="账户"></a-tab-pane>
|
||||
<a-tab-pane :key="2" title="项目"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<AccountTable
|
||||
ref="accountTableRef"
|
||||
:isAccountTab="isAccountTab"
|
||||
:dataSource="dataSource"
|
||||
@export="handleExport"
|
||||
@sorterChange="handleSorterChange"
|
||||
@selectionChange="handleSelectionChange"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
import { INITIAL_QUERY } from './constants';
|
||||
|
||||
const query = ref({});
|
||||
const dataSource = ref([]);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
const selectedRowKeys = ref([]);
|
||||
const activeTab = ref(1);
|
||||
const accountTableRef = ref(null);
|
||||
|
||||
const isAccountTab = computed(() => activeTab.value === 1);
|
||||
|
||||
const mockData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '抖音官方账号',
|
||||
mobile: '13800138001',
|
||||
account_id: 'douyin_001',
|
||||
holder_name: '张三',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 1250000,
|
||||
like_number: 890000,
|
||||
collect_number: 45000,
|
||||
view_number: 5600000,
|
||||
view_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
total_consumption: 1000000,
|
||||
balance: 1000000,
|
||||
roi: 1.2,
|
||||
roi_chain: -32.5,
|
||||
cpa: 1.2,
|
||||
cpa_chain: -32.5,
|
||||
conversion_number: 10000,
|
||||
conversion_chain: 12.5,
|
||||
conversion_rate: 1.2,
|
||||
conversion_rate_chain: -2.5,
|
||||
ai_evaluation: {
|
||||
status: 1,
|
||||
text: '表现优质 | 建议保持',
|
||||
look_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小红书美妆号',
|
||||
mobile: '13800138002',
|
||||
account_id: 'xhs_001',
|
||||
holder_name: '李四',
|
||||
operator_id: 2,
|
||||
platform: 1,
|
||||
group_id: 2,
|
||||
status: 1,
|
||||
is_pause: 1,
|
||||
fans_number: 890000,
|
||||
like_number: 670000,
|
||||
collect_number: 89000,
|
||||
view_number: 3200000,
|
||||
view_chain: -5.2,
|
||||
like_chain: 15.7,
|
||||
total_consumption: 1000000,
|
||||
balance: 1000000,
|
||||
roi: 1.2,
|
||||
roi_chain: 12.5,
|
||||
cpa: 1.2,
|
||||
cpa_chain: 22.5,
|
||||
conversion_number: 10000,
|
||||
conversion_chain: 12.5,
|
||||
conversion_rate: 1.2,
|
||||
conversion_rate_chain: -2.5,
|
||||
ai_evaluation: {
|
||||
status: 2,
|
||||
text: '表现中等 | 建议优化',
|
||||
look_chain: -12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 2,
|
||||
name: '王运营',
|
||||
},
|
||||
group: {
|
||||
id: 2,
|
||||
name: '小红书组',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '抖音美食号',
|
||||
mobile: '13800138003',
|
||||
account_id: 'douyin_002',
|
||||
holder_name: '王五',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 0,
|
||||
is_pause: 0,
|
||||
fans_number: 0,
|
||||
like_number: 0,
|
||||
collect_number: 0,
|
||||
view_number: 0,
|
||||
view_chain: 0,
|
||||
like_chain: 0,
|
||||
total_consumption: 1000000,
|
||||
balance: 1000000,
|
||||
roi: 32898,
|
||||
roi_chain: 12.5,
|
||||
cpa: 1.2,
|
||||
cpa_chain: -32.5,
|
||||
conversion_number: 10000,
|
||||
conversion_chain: 12.5,
|
||||
conversion_rate: 1.2,
|
||||
conversion_rate_chain: -2.5,
|
||||
ai_evaluation: {
|
||||
status: 3,
|
||||
text: '表现较差 | 建议整改',
|
||||
look_chain: -12.5,
|
||||
like_chain: -8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const getData = () => {
|
||||
dataSource.value = mockData;
|
||||
pageInfo.total = mockData.length;
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.page = current;
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
selectedRowKeys.value = [];
|
||||
accountTableRef.value?.resetTable();
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleSorterChange = (column, order) => {
|
||||
query.value.column = column;
|
||||
query.value.order = order;
|
||||
reload();
|
||||
};
|
||||
const handleSelectionChange = (selectedRows) => {
|
||||
selectedRowKeys.value = selectedRows;
|
||||
console.log('选中的账号:', selectedRowKeys.value);
|
||||
};
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
activeTab.value = tab.key;
|
||||
handleReset();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
.account-data-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
:deep(.arco-tabs) {
|
||||
.arco-tabs-tab {
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-style: normal;
|
||||
}
|
||||
:deep(.arco-btn) {
|
||||
.arco-btn-icon {
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-row {
|
||||
.overview-item {
|
||||
height: 88px;
|
||||
border-radius: 8px;
|
||||
background: var(--BG-100, #f7f8fa);
|
||||
padding: 16px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-26 17:44:16
|
||||
-->
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-26 17:23:52
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isBatch ? '批量删除账号' : '删除账号'"
|
||||
width="400px"
|
||||
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 danger-btn" status="danger" size="large" @click="onDelete"
|
||||
>确认删除</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
|
||||
const visible = ref(false);
|
||||
const accountId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
const isBatch = computed(() => Array.isArray(accountId.value));
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
accountId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
accountId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
|
||||
const { code } = await _fn(accountId.value);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -5,14 +5,12 @@
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<div v-for="(item, index) in dataSource" :key="index" class="card-item">
|
||||
<a-checkbox></a-checkbox>
|
||||
<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>
|
||||
<div class="field-row">
|
||||
<span class="label">状态</span>
|
||||
<div class="status-box" :class="`status-box-${item.status}`">
|
||||
<span class="text">{{ STATUS_LIST.find((v) => v.value === item.status)?.label ?? '-' }}</span>
|
||||
</div>
|
||||
<StatusBox :status="item.status" />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<span class="label">平台</span>
|
||||
@ -37,31 +35,64 @@
|
||||
<div class="field-row">
|
||||
<span class="label">标签</span>
|
||||
<div class="flex items-center">
|
||||
<div v-for="(tag, index) in item.tags" :key="index" class="tag-box">
|
||||
<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>
|
||||
</div>
|
||||
<div class="operate-row">
|
||||
<img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" />
|
||||
<a-button class="w-64px search-btn mr-8px" size="mini">
|
||||
<img :src="icon3" 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"
|
||||
size="mini"
|
||||
@click="handlePause(item)"
|
||||
>
|
||||
<template #default>暂停同步</template>
|
||||
</a-button>
|
||||
<a-button class="w-64px search-btn mr-8px" size="mini">
|
||||
<template #default>获取凭证</template>
|
||||
</a-button>
|
||||
<a-button class="w-40px search-btn" size="mini">
|
||||
<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-40px search-btn" size="mini" @click="openEdit(item)">
|
||||
<template #default>编辑</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { defineProps, ref, computed } from 'vue';
|
||||
import { STATUS_LIST, EnumStatus } from '../../constants';
|
||||
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';
|
||||
@ -72,7 +103,66 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
|
||||
|
||||
const pauseAccountPatchModalRef = ref(null);
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
|
||||
// 判断当前 item 是否被选中
|
||||
const isSelected = (item) => {
|
||||
return props.selectedItems.some((i) => i.id === item.id);
|
||||
};
|
||||
|
||||
const toggleSelect = (item) => {
|
||||
let newSelected;
|
||||
if (isSelected(item)) {
|
||||
newSelected = props.selectedItems.filter((i) => i.id !== item.id);
|
||||
} else {
|
||||
newSelected = [...props.selectedItems, item];
|
||||
}
|
||||
emits('selectionChange', newSelected);
|
||||
};
|
||||
|
||||
const openEdit = (item) => {
|
||||
emits('openEdit', item);
|
||||
};
|
||||
|
||||
const openDelete = (item) => {
|
||||
emits('delete', item);
|
||||
};
|
||||
|
||||
const handleReauthorize = (item) => {
|
||||
const isUnauthorized = isUnauthorizedStatus(item.status);
|
||||
if (isUnauthorized) {
|
||||
authorizedAccountModalRef.value?.open(item.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePause = (item) => {
|
||||
pauseAccountPatchModalRef.value?.open(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 ?? '-';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-27 14:41:20
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="暂停同步" width="400px" 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>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { pausePatchAccount } from '@/api/all/propertyMarketing';
|
||||
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
|
||||
const visible = ref(false);
|
||||
const accountId = ref(null);
|
||||
const accountName = ref('');
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
accountId.value = null;
|
||||
accountName.value = '';
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
const { id = null, name = '' } = record;
|
||||
accountId.value = id;
|
||||
accountName.value = name;
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onConfirm() {
|
||||
const { code } = await pausePatchAccount(accountId.value);
|
||||
if (code === 200) {
|
||||
AMessage.success('暂停成功');
|
||||
emits('success');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
@ -1,7 +1,13 @@
|
||||
@mixin ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
// grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 20px;
|
||||
.card-item {
|
||||
@ -21,6 +27,8 @@
|
||||
// line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.label {
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 12px;
|
||||
@ -34,6 +42,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.cts {
|
||||
@include ellipsis;
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 12px;
|
||||
@ -41,42 +50,16 @@
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
.status-box {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: #f2f3f5;
|
||||
.text {
|
||||
color: var(--BG-700, #737478);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
|
||||
&-1 {
|
||||
background: #ebf7f2;
|
||||
.text {
|
||||
color: #25c883;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
background: #ffe7e4;
|
||||
.text {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag-box {
|
||||
display: flex;
|
||||
height: 16px;
|
||||
height: 20px;
|
||||
padding: 0px 4px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
max-width: 100px;
|
||||
.text {
|
||||
@include ellipsis();
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 10px;
|
||||
|
||||
@ -0,0 +1,263 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="isEdit ? '编辑账号' : '添加账号'"
|
||||
modal-class="add-put-account-modal"
|
||||
width="500px"
|
||||
:mask-closable="false"
|
||||
@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-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>
|
||||
<template v-if="isEdit">
|
||||
<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-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" field="status">
|
||||
<StatusBox :status="form.status" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<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="!isEdit">
|
||||
<img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
|
||||
<a-radio-group v-else 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="同步项目数据" field="sync_project_data">
|
||||
<template #label>
|
||||
<span class="label">同步项目数据</span>
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</template>
|
||||
<a-switch v-model="form.sync_project_data" size="medium" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" size="large" @click="onSubmit">
|
||||
{{ confirmBtnText }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" />
|
||||
<ImportPromptModal ref="importPromptModalRef" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
import ImportPromptModal from '../import-prompt-modal';
|
||||
import StatusBox from '../status-box';
|
||||
|
||||
import {
|
||||
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';
|
||||
import icon3 from '@/assets/img/media-account/icon-dy.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-xhs.png';
|
||||
|
||||
const visible = ref(false);
|
||||
const uploadType = ref('manual');
|
||||
const uploadStatus = ref('default');
|
||||
const id = ref('');
|
||||
const isEdit = ref(false);
|
||||
const fileName = ref('账号导入模板.xlsx');
|
||||
const formRef = ref();
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
const importPromptModalRef = ref(null);
|
||||
const form = reactive({
|
||||
mobile: '',
|
||||
operator_name: '',
|
||||
holder_name: '',
|
||||
platform: 0,
|
||||
});
|
||||
|
||||
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: '请输入号码持有人' }],
|
||||
};
|
||||
|
||||
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 = '';
|
||||
isEdit.value = false;
|
||||
uploadStatus.value = 'default';
|
||||
uploadType.value = 'manual';
|
||||
};
|
||||
function onClose() {
|
||||
reset();
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const open = (accountId = '') => {
|
||||
id.value = accountId;
|
||||
isEdit.value = !!accountId;
|
||||
|
||||
if (accountId) {
|
||||
getAccountDetail();
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const getAccountDetail = async () => {
|
||||
const { code, data } = await getMediaAccountsDetail(id.value);
|
||||
if (code === 200) {
|
||||
form.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatchImport = () => {
|
||||
onClose();
|
||||
importPromptModalRef.value.open();
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
if (isBatchImport.value) {
|
||||
handleBatchImport();
|
||||
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 { code, data } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success(isEdit.value ? '修改成功' : '添加成功');
|
||||
|
||||
if (isEdit.value) {
|
||||
visible.value = false;
|
||||
} else {
|
||||
handleSuccess(data?.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleSuccess = (id) => {
|
||||
authorizedAccountModalRef.value.open(id);
|
||||
};
|
||||
|
||||
const handleDownloadTemplate = async () => {
|
||||
const { code, data } = await getTemplateUrl();
|
||||
if (code === 200) {
|
||||
window.open(data.url, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
// 对外暴露打开弹窗方法
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
.add-put-account-modal {
|
||||
border-radius: 8px;
|
||||
.w-240px {
|
||||
width: 240px !important;
|
||||
}
|
||||
.arco-modal-body {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="480px"
|
||||
title="授权账号"
|
||||
modal-class="authorized-account-modal"
|
||||
:mask-closable="false"
|
||||
:footer="!isLoading"
|
||||
@close="close"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<template v-if="isLoading">
|
||||
<a-progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="isCompleted">
|
||||
<img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button v-if="isCompleted" 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 icon1 from '@/assets/img/media-account/icon-warn.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 visible = ref(false);
|
||||
const isOverdue = ref(false); // 二维码失效
|
||||
const isLoading = ref(false);
|
||||
const isCompleted = ref(false);
|
||||
const isSuccess = ref(false);
|
||||
const failReason = ref('');
|
||||
const progress = ref(0);
|
||||
const id = ref('');
|
||||
const imgUrl = ref('');
|
||||
|
||||
let progressTimer = null;
|
||||
let overdueTimer = null;
|
||||
|
||||
const notCompleted = computed(() => {
|
||||
return !isCompleted.value;
|
||||
});
|
||||
const confirmBtnText = computed(() => {
|
||||
if (notCompleted.value) return '完成扫码';
|
||||
return isSuccess.value ? '继续添加' : '重新扫码';
|
||||
});
|
||||
|
||||
const open = (accountId) => {
|
||||
id.value = accountId;
|
||||
getAuthorizedQrCode();
|
||||
visible.value = true;
|
||||
};
|
||||
const close = () => {
|
||||
isOverdue.value = false;
|
||||
isLoading.value = false;
|
||||
isCompleted.value = false;
|
||||
isSuccess.value = false;
|
||||
failReason.value = '';
|
||||
progress.value = 0;
|
||||
id.value = '';
|
||||
clearFakeProgressTimer();
|
||||
clearOverdueTimer();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const getAuthorizedQrCode = async () => {
|
||||
const { code, data } = await getAuthorizedImage(id.value);
|
||||
if (code === 200) {
|
||||
imgUrl.value = data.url;
|
||||
overdueTimer = null;
|
||||
|
||||
// 约定：后端限制40s内必须扫码，前端定30s后失效
|
||||
overdueTimer = setTimeout(() => {
|
||||
isOverdue.value = true;
|
||||
}, OVERDUE_TIME);
|
||||
}
|
||||
};
|
||||
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 startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (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 {
|
||||
clearFakeProgressTimer();
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const clearFakeProgressTimer = () => {
|
||||
if (progressTimer) {
|
||||
clearInterval(progressTimer);
|
||||
progressTimer = null;
|
||||
}
|
||||
};
|
||||
const clearOverdueTimer = () => {
|
||||
if (overdueTimer) {
|
||||
clearTimeout(overdueTimer);
|
||||
overdueTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (notCompleted.value) {
|
||||
clearOverdueTimer();
|
||||
|
||||
if (isOverdue.value) {
|
||||
AMessage.error('二维码已失效，请重新扫码');
|
||||
return;
|
||||
}
|
||||
|
||||
startLoading();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
@import '@/views/property-marketing/component.scss';
|
||||
|
||||
.authorized-account-modal {
|
||||
border-radius: 8px;
|
||||
.img-box {
|
||||
position: relative;
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.8;
|
||||
background: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
.s1 {
|
||||
color: var(--BG-White, #fff);
|
||||
text-align: center;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.red-text {
|
||||
overflow: hidden;
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
text-overflow: ellipsis;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 14:02:40
|
||||
@ -24,10 +25,10 @@
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">状态</span>
|
||||
<a-space class="w-160px">
|
||||
<a-space class="w-180px">
|
||||
<a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
|
||||
item.label
|
||||
<a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
|
||||
item.text
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
@ -46,13 +47,15 @@
|
||||
<span class="label">运营人员</span>
|
||||
<a-space class="w-160px">
|
||||
<a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
|
||||
<a-option value="Beijing" label="Beijing">Beijing</a-option>
|
||||
<a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-space class="flex items-center">
|
||||
<a-button class="w-84px search-btn" size="medium" @click="handleSearch">
|
||||
<div class="filter-row flex">
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
@ -64,29 +67,47 @@
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { fetchAccountOperators } from '@/api/all/propertyMarketing';
|
||||
import {
|
||||
INITIAL_QUERY,
|
||||
PLATFORM_LIST,
|
||||
STATUS_LIST,
|
||||
} from '@/views/property-marketing/media-account/account-manage/constants';
|
||||
} from '@/views/property-marketing/put-account/account-manage/constants';
|
||||
|
||||
const emits = defineEmits('onSearch', 'onReset');
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const emits = defineEmits('onSearch', 'onReset', 'update:query');
|
||||
|
||||
const operators = ref([]);
|
||||
|
||||
const handleSearch = () => {
|
||||
emits('onSearch', query);
|
||||
emits('onSearch', props.query);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
emits('onReset');
|
||||
};
|
||||
const getOperators = async () => {
|
||||
const { code, data } = await fetchAccountOperators();
|
||||
if (code === 200) {
|
||||
operators.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getOperators();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="480px"
|
||||
title="导入提示"
|
||||
modal-class="import-prompt-modal"
|
||||
: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>
|
||||
<template #footer>
|
||||
<a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
|
||||
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
|
||||
</template>
|
||||
</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>
|
||||
@ -0,0 +1,14 @@
|
||||
@import "@/views/property-marketing/component.scss";
|
||||
.import-prompt-modal {
|
||||
border-radius: 8px;
|
||||
.arco-modal-body {
|
||||
.tip {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 15:31:15
|
||||
-->
|
||||
<template>
|
||||
<div class="status-box" :class="`status-box-${status}`">
|
||||
<span class="text">{{ statusText }}</span>
|
||||
<a-tooltip v-if="showTooltip" :content="tooltipText">
|
||||
<img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { STATUS_LIST, EnumStatus } from '../../constants';
|
||||
|
||||
import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
|
||||
|
||||
const props = defineProps({
|
||||
status: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const statusText = computed(() => {
|
||||
return STATUS_LIST.find((v) => v.value === props.status)?.label ?? '-';
|
||||
});
|
||||
|
||||
const showTooltip = computed(() => {
|
||||
return isDisabledReauthorize(props.status);
|
||||
});
|
||||
|
||||
const tooltipText = computed(() => {
|
||||
return STATUS_LIST.find((v) => v.value === props.status)?.tooltip ?? '-';
|
||||
});
|
||||
|
||||
const showIcon = computed(() => {
|
||||
return ![EnumStatus.NORMAL, EnumStatus.UNAUTHORIZED].includes(props.status);
|
||||
});
|
||||
|
||||
const iconSrc = computed(() => {
|
||||
return props.status === EnumStatus.PAUSE ? iconWarn1 : iconWarn2;
|
||||
});
|
||||
|
||||
// 判断是否为禁用重新授权的状态
|
||||
const isDisabledReauthorize = (status) => {
|
||||
return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.status-box {
|
||||
display: flex;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
background: #f2f3f5;
|
||||
|
||||
.text {
|
||||
color: var(--BG-700, #737478);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
|
||||
&-1 {
|
||||
background: #ebf7f2;
|
||||
.text {
|
||||
color: #25c883;
|
||||
}
|
||||
}
|
||||
|
||||
&-2,
|
||||
&-4,
|
||||
&-5,
|
||||
&-6 {
|
||||
background: #ffe7e4;
|
||||
.text {
|
||||
color: #f64b31;
|
||||
}
|
||||
}
|
||||
|
||||
&-3 {
|
||||
background: #fff7e5;
|
||||
color: #ffae00;
|
||||
.text {
|
||||
color: #ffae00;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -20,17 +20,53 @@ export const PLATFORM_LIST = [
|
||||
},
|
||||
];
|
||||
|
||||
export enum EnumStatus {
|
||||
NORMAL = 1,
|
||||
PAUSE = 3,
|
||||
UNAUTHORIZED = 0,
|
||||
ABNORMAL = 2,
|
||||
ABNORMAL_LOGIN = 4,
|
||||
ABNORMAL_REQUEST = 5,
|
||||
ABNORMAL_FREEZE = 6,
|
||||
}
|
||||
|
||||
export const STATUS_LIST = [
|
||||
{
|
||||
label: '未授权',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
text: '正常',
|
||||
label: '正常',
|
||||
value: 1,
|
||||
value: EnumStatus.NORMAL,
|
||||
},
|
||||
{
|
||||
text: '暂停同步',
|
||||
label: '暂停同步',
|
||||
value: EnumStatus.PAUSE,
|
||||
},
|
||||
{
|
||||
text: '未授权',
|
||||
label: '未授权',
|
||||
value: EnumStatus.UNAUTHORIZED,
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
label: '异常',
|
||||
value: 2,
|
||||
value: EnumStatus.ABNORMAL,
|
||||
},
|
||||
{
|
||||
text: '异常-登录状态失效',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_LOGIN,
|
||||
tooltip: '登录状态失效，需重新扫码授权',
|
||||
},
|
||||
{
|
||||
text: '异常-请求过于频繁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_REQUEST,
|
||||
tooltip: '请求过于频繁，需等待24小时后重试',
|
||||
},
|
||||
{
|
||||
text: '异常-账号被冻结/封禁',
|
||||
label: '异常',
|
||||
value: EnumStatus.ABNORMAL_FREEZE,
|
||||
tooltip: '账号被冻结/封禁',
|
||||
},
|
||||
];
|
||||
|
||||
@ -4,50 +4,74 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-manage-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<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 type="primary" class="w-139px search-btn" size="medium">
|
||||
<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>
|
||||
<template #default>添加账户</template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
|
||||
<FilterBlock v-model:query="query" @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,
|
||||
}"
|
||||
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
|
||||
>
|
||||
<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 class="flex items-center">
|
||||
<template v-if="selectedItems.length > 0">
|
||||
<a-checkbox
|
||||
:model-value="checkedAll"
|
||||
:indeterminate="indeterminate"
|
||||
class="mr-8px"
|
||||
@change="handleChangeAll"
|
||||
/>
|
||||
<span class="label mr-24px">
|
||||
已选
|
||||
<span class="color-#6D4CFE">{{ selectedItems.length }}</span>
|
||||
个账号
|
||||
</span>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<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">
|
||||
<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 :dataSource="dataSource" />
|
||||
<AccountTable
|
||||
:dataSource="dataSource"
|
||||
:selectedItems="selectedItems"
|
||||
@selectionChange="handleSelectionChange"
|
||||
@delete="handleDelete"
|
||||
@openEdit="handleOpenEdit"
|
||||
/>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
@ -62,6 +86,9 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddAccountModal ref="addAccountModalRef" />
|
||||
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -70,11 +97,21 @@ import { ref } from 'vue';
|
||||
|
||||
import FilterBlock from './components/filter-block';
|
||||
import AccountTable from './components/account-table';
|
||||
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 icon1 from '@/assets/img/media-account/icon-add.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
import icon5 from '@/assets/img/media-account/icon-warn.png';
|
||||
import icon6 from '@/assets/img/media-account/icon-close.png';
|
||||
|
||||
const groupManageModalRef = ref(null);
|
||||
const tagsManageModalRef = ref(null);
|
||||
const addAccountModalRef = ref(null);
|
||||
const deleteAccountRef = ref(null);
|
||||
|
||||
const tipStatus = ref(2);
|
||||
const pageInfo = reactive({
|
||||
@ -82,49 +119,103 @@ const pageInfo = reactive({
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
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,
|
||||
);
|
||||
|
||||
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',
|
||||
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: '小周',
|
||||
},
|
||||
{
|
||||
name: '标签2',
|
||||
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 handleSearch = (newQuery) => {
|
||||
query.value = { ...newQuery };
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
selectedItems.value = [];
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
getData();
|
||||
reload();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
@ -133,8 +224,45 @@ const onPageChange = (current) => {
|
||||
};
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleOpenGroupModal = () => {
|
||||
groupManageModalRef.value?.open();
|
||||
};
|
||||
const handleOpenAccountModal = () => {
|
||||
addAccountModalRef.value?.open();
|
||||
};
|
||||
|
||||
const handleOpenEdit = (item) => {
|
||||
addAccountModalRef.value?.open(item.id);
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
selectedItems.value = val;
|
||||
};
|
||||
const handleChangeAll = (val) => {
|
||||
if (val) {
|
||||
selectedItems.value = cloneDeep(dataSource.value);
|
||||
} else {
|
||||
selectedItems.value = [];
|
||||
}
|
||||
};
|
||||
const handleBatchDelete = () => {
|
||||
const ids = selectedItems.value.map((item) => item.id);
|
||||
const names = selectedItems.value.map((item) => `"${item.name}"`).join(',');
|
||||
deleteAccountRef.value?.open({ id: ids, name: names });
|
||||
};
|
||||
const handleDelete = (item) => {
|
||||
const { id, name } = item;
|
||||
deleteAccountRef.value?.open({ id, name: `"${name}"` });
|
||||
};
|
||||
const handleCloseTip = () => {
|
||||
selectedItems.value = [];
|
||||
};
|
||||
const handleOpenAbnormalAccount = () => {
|
||||
query.value.status = 2;
|
||||
reload();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -13,8 +13,6 @@
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
@ -58,6 +56,22 @@
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
.operation-btn {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--Brand-Brand-6, #6d4cfe);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
&:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
&.red {
|
||||
color: #F64B31;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
@ -68,39 +82,7 @@
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
:deep(.arco-pagination) {
|
||||
.arco-pagination-list {
|
||||
.arco-pagination-item {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
&.arco-pagination-item-ellipsis {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.arco-pagination-item-active {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-pagination-jumper-input {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
.arco-pagination-jumper-prepend {
|
||||
color: var(--Text-2, #3c4043);
|
||||
text-align: right;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.arco-select-view-single {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user