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

Merge remote-tracking branch 'origin/feature/0625_账户管理' into feature/v1.3_营销资产中台

Browse Source
This commit is contained in:
rd
2025-06-27 09:32:07 +08:00
parent 645816c1f5 d74e98a346
commit c0ed584575
60 changed files with 3021 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/property-marketing/component.scss Normal file
View File

@ -0,0 +1,48 @@
.arco-input-wrapper,
.arco-select-view-single,
.arco-select-view-multiple {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.arco-modal {
.arco-modal-header {
border-bottom: none;
height: 56px;
padding: 22px 24px 16px 24px;
.arco-modal-title {
justify-content: flex-start;
}
}
.arco-modal-body {
padding: 24px 24px 20px;
.arco-form-item {
margin-bottom: 16px;
.arco-form-item-label {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
}
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
}
.arco-modal-footer {
border-top: none;
padding: 0;
}
}

12
src/views/property-marketing/media-account/account-dashboard/index.vue Normal file
View File

@ -0,0 +1,12 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 10:02:20
-->
<template></template>
<script lang="ts"></script>
<style scoped lang="scss">
@import './style.scss';
</style>

0
src/views/property-marketing/media-account/account-dashboard/style.scss Normal file
View File

70
src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue Normal file
View File

@ -0,0 +1,70 @@
<!--
* @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"
:footer="false"
modal-class="account-manage-modal"
@close="onClose"
>
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 {{ accountName }} 这个账号吗？</span>
</div>
<div class="text-right">
<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
>
</div>
</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>

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

@ -0,0 +1,109 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:31:15
-->
<template>
<div class="card-container">
<div v-for="(item, index) in dataSource" :key="index" class="card-item">
<a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
<div class="ml-8px flex-1">
<p class="name">{{ item.name }}</p>
<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>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
</div>
<div class="field-row">
<span class="label">账号ID</span>
<span class="cts">{{ item.account_id }}</span>
</div>
<div class="field-row">
<span class="label">手机号码</span>
<span class="cts">{{ item.mobile }}</span>
</div>
<div class="field-row">
<span class="label">运营人员</span>
<span class="cts">{{ item.operator?.name }}</span>
</div>
<div class="field-row">
<span class="label">分组</span>
<span class="cts">{{ item.group?.name }}</span>
</div>
<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">
<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" @click="openDelete(item)" />
<a-button class="w-64px search-btn mr-8px" size="mini">
<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" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
import { STATUS_LIST } from '../../constants';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
},
selectedItems: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
// 判断当前 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.id);
};
const openDelete = (item) => {
emits('delete', item);
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

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

@ -0,0 +1,103 @@
.card-container {
flex: 1;
display: grid;
grid-template-rows: repeat(2, 1fr); /* 2行 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
gap: 20px;
.card-item {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-bottom: 11px;
// line-height: 22px; /* 157.143% */
}
.label {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
.field-row {
width: 100%;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-size: 12px;
font-style: normal;
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;
padding: 0px 4px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
.text {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&:not(:last-child) {
margin-right: 4px;
}
}
&:last-child {
margin-bottom: 8px;
}
}
.operate-row {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 8px;
}
}
}

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

@ -0,0 +1,282 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
:title="isEdit ? '编辑账号' : '添加账号'"
modal-class="add-account-modal"
:footer="false"
width="500px"
:mask-closable="false"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item label="上传方式" required>
<a-radio-group v-model="uploadType">
<a-radio value="manual">手动添加账号</a-radio>
<a-radio value="batch">批量导入账号</a-radio>
</a-radio-group>
</a-form-item>
<!-- 批量导入账号模式下的内容 -->
<template v-if="isBatchImport">
<a-form-item label="账号文件" required>
<!-- 默认状态 -->
<div class="upload-block">
<template v-if="uploadStatus === 'default'">
<a-upload draggable :custom-request="handleUpload" />
</template>
<template v-else>
<div class="flex items-center">
<div
class="flex items-center justify-between py-9px px-12px flex-1 import-row"
:class="{
error: uploadStatus === 'error',
}"
>
<div class="flex items-center">
<icon-file size="16" />
<span class="name ml-8px">{{ fileName }}</span>
</div>
<span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
</div>
<img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
</div>
</template>
<div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
<img :src="icon1" width="16" height="16" class="mr-4px" />
<span class="dt">下载账号导入模板.xlsx</span>
</div>
</div>
</a-form-item>
</template>
<!-- 手动添加账号 -->
<template v-else>
<a-form-item label="手机号" field="mobile" required>
<a-input v-model="form.mobile" placeholder="请输入..." size="large" />
</a-form-item>
<a-form-item label="运营人员" field="operator_name" required>
<a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="号码持有人" field="holder_name" required>
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
</a-form-item>
<a-form-item label="运营平台" required>
<a-radio-group v-model="form.platform">
<a-radio :value="0">抖音</a-radio>
<a-radio :value="1">小红书</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="选择分组">
<GroupSelect
v-model="form.group_id"
:multiple="false"
:options="groupOptions"
placeholder="请选择…"
size="large"
/>
</a-form-item>
<a-form-item label="选择标签">
<TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
</a-form-item>
</template>
<div class="mt-24px text-right">
<a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">
{{ isBatchImport ? '确定导入' : '生成授权码' }}
</a-button>
</div>
</a-form>
<QrCodeModal ref="qrCodeModalRef" />
<ImportPromptModal ref="importPromptModalRef" />
</a-modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import TagSelect from '../tag-select';
import GroupSelect from '../group-select';
import QrCodeModal from '../qrCode-modal';
import ImportPromptModal from '../import-prompt-modal';
import {
fetchAccountTags,
fetchAccountGroups,
postMediaAccounts,
getMediaAccountsDetail,
putMediaAccounts,
getTemplateUrl,
} from '@/api/all/propertyMarketing';
import icon1 from '@/assets/img/media-account/icon-download.png';
import icon2 from '@/assets/img/media-account/icon-delete.png';
const groupOptions = ref([]);
const tagOptions = ref([]);
const visible = ref(false);
const uploadType = ref('manual');
const uploadStatus = ref('default');
const id = ref('');
const isEdit = ref(false);
const fileName = ref('账号导入模板.xlsx');
const formRef = ref();
const qrCodeModalRef = ref(null);
const importPromptModalRef = ref(null);
const form = reactive({
mobile: '',
operator_name: '',
holder_name: '',
platform: 0,
group_id: '',
tag_ids: [],
});
const isBatchImport = computed(() => uploadType.value === 'batch');
const confirmBtnText = computed(() => {
if (isBatchImport.value) return '确定导入';
return isEdit.value ? '确定' : '生成授权码';
});
const rules = {
mobile: [
{
required: true,
message: '请填写手机号',
trigger: ['blur', 'change'],
},
{
validator: (value, callback) => {
if (!/^1[3-9]\d{9}$/.test(value)) {
callback('手机号格式不正确');
} else {
callback();
}
},
trigger: ['blur', 'change'],
},
],
operator_name: [{ required: true, message: '请输入运营人员' }],
holder_name: [{ required: true, message: '请输入号码持有人' }],
};
// 获取分组数据
const getGroups = async () => {
try {
const { code, data } = await fetchAccountGroups();
if (code === 200) {
groupOptions.value = data;
}
} catch (error) {
console.error('获取分组列表失败:', error);
}
};
// 获取标签数据
const getTags = async () => {
try {
const { code, data } = await fetchAccountTags();
if (code === 200) {
tagOptions.value = data;
}
} catch (error) {
console.error('获取标签列表失败:', error);
}
};
function handleUpload({ file, onSuccess, onError }) {
// 模拟上传
uploadStatus.value = 'error';
}
function removeFile() {
fileName.value = '';
uploadStatus.value = 'default';
}
function retryUpload() {
handleUpload();
// uploadStatus.value = 'default';
}
const reset = () => {
formRef.value.resetFields();
formRef.value.clearValidate();
fileName.value = '';
uploadStatus.value = 'default';
uploadType.value = 'manual';
};
function onClose() {
reset();
visible.value = false;
}
const open = (accountId = '') => {
id.value = accountId;
isEdit.value = !!accountId;
if (accountId) {
getAccountDetail();
}
getGroups();
getTags();
visible.value = true;
};
const 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;
}
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 } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '修改成功' : '生成授权码成功');
if (isEdit.value) {
visible.value = false;
} else {
handleSuccess();
}
}
}
});
}
const handleSuccess = () => {
qrCodeModalRef.value.open();
};
const handleDownloadTemplate = async () => {
const { code, data } = await getTemplateUrl();
if (code === 200) {
window.open(data.url, '_blank');
}
};
// 对外暴露打开弹窗方法
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
</style>

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

@ -0,0 +1,63 @@
@import "@/views/property-marketing/component.scss";
.add-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;
}
}
}

141
src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue Normal file
View File

@ -0,0 +1,141 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="container px-24px pt-12px pb-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账号名称/ID/手机号</span>
<a-space size="medium">
<a-input
v-model="query.search"
class="w-240px"
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-160px">
<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>
</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.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</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 mb-20px">
<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-320px">
<tag-select v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
</div>
</div>
<a-space class="flex items-center">
<a-button class="w-84px search-btn" 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>
</a-space>
</div>
</template>
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
import TagSelect from '../tag-select/index.vue';
import GroupSelect from '../group-select/index.vue';
import {
INITIAL_QUERY,
PLATFORM_LIST,
STATUS_LIST,
} from '@/views/property-marketing/media-account/account-manage/constants';
const emits = defineEmits('onSearch', 'onReset');
const query = ref(cloneDeep(INITIAL_QUERY));
const tags = ref([]);
const groups = ref([]);
const operators = ref([]);
const handleSearch = () => {
emits('onSearch', query);
};
const handleReset = () => {
query.value = cloneDeep(INITIAL_QUERY);
emits('onReset');
};
const getTags = async () => {
const { code, data } = await fetchAccountTags();
if (code === 200) {
tags.value = data;
}
};
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(() => {
getTags();
getGroups();
getOperators();
});
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

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

@ -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%;
}
}
}
}

80
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue Normal file
View File

@ -0,0 +1,80 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 11:44:17
-->
<template>
<a-modal
v-model:visible="visible"
:title="isEdit ? '编辑分组' : '添加新分组'"
modal-class="account-manage-modal"
width="400px"
:footer="false"
@close="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '分组名称' : '新分组名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
<div class="text-right">
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</div>
</a-form>
</a-modal>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue';
import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
const visible = ref(false);
const isEdit = ref(false);
const formRef = ref();
const form = ref({ name: '' });
const groupId = ref('');
const rules = {
name: [{ required: true, message: '请输入分组名称' }],
};
function resetForm() {
nextTick(() => {
formRef.value?.clearValidate();
});
}
function onClose() {
visible.value = false;
form.value.name = '';
groupId.value = '';
isEdit.value = false;
resetForm();
}
const open = (record = {}) => {
const { id = '', name = '' } = record;
groupId.value = id;
isEdit.value = !!id;
form.value.name = name;
visible.value = true;
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putGroup : postAccountGroups;
const _params = isEdit.value ? { id: groupId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
}
});
}
defineExpose({ open });
</script>

63
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue Normal file
View File

@ -0,0 +1,63 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 11:45:05
-->
<template>
<a-modal
v-model:visible="visible"
title="删除分组"
width="400px"
:footer="false"
modal-class="account-manage-modal"
@close="onClose"
>
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ groupName }}" 这个分组吗？</span>
</div>
<div class="text-right">
<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
>
</div>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { deleteGroup } 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 groupId = ref('');
const groupName = ref('');
function onClose() {
visible.value = false;
groupId.value = '';
groupName.value = '';
emits('close');
}
const open = (record) => {
const { id = '', name = '' } = record;
groupId.value = id;
groupName.value = name;
visible.value = true;
};
async function onDelete() {
const { code } = await deleteGroup(groupId.value);
if (code === 200) {
AMessage.success('删除成功');
emits('success');
onClose();
}
}
defineExpose({ open });
</script>

185
src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue Normal file
View File

@ -0,0 +1,185 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
width="900px"
modal-class="account-manage-modal"
:footer="false"
title="分组管理"
:mask-closable="false"
@close="close"
>
<template v-if="!list.length">
<div class="flex items-center justify-center flex-col">
<div class="w-120px h-120px flex items-center justify-center mb-32px">
<img :src="icon2" width="106" height="72" />
</div>
<span class="s1 mb-16px">暂无分组</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>去添加</template>
</a-button>
</div>
</template>
<template v-else>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
><template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>添加新分组</template>
</a-button>
<a-table
:columns="columns"
:data="list"
row-key="id"
:loading="loading"
:scroll="{ y: 500 }"
:pagination="false"
@change="onTableChange"
>
<template #action="{ record }">
<div class="flex items-center">
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
<a-button type="primary" @click="openEdit(record)">编辑</a-button>
</div>
</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>
</template>
<AddGroup ref="addGroupRef" @success="getData" />
<DeleteGroup ref="deleteGroupRef" @success="getData" />
</a-modal>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getGroupList } from '@/api/all/propertyMarketing';
import AddGroup from './add-group.vue';
import DeleteGroup from './delete-group.vue';
import icon1 from '@/assets/img/media-account/icon-delete.png';
import icon2 from '@/assets/img/media-account/icon-empty.png';
import icon3 from '@/assets/img/media-account/icon-add.png';
const visible = ref(false);
const isEdit = ref(false);
const addGroupRef = ref(null);
const deleteGroupRef = ref(null);
const currentGroup = ref(null);
const list = ref([]);
const loading = ref(false);
const pageInfo = reactive({
page: 1,
pageSize: 20,
total: 0,
});
const sortInfo = ref({
field: '',
direction: '',
});
const columns = [
{ title: '分组名称', dataIndex: 'name' },
{
title: '创建人',
dataIndex: 'creator',
render: ({ record }) => record.creator?.name || '-',
},
{
title: '创建日期',
dataIndex: 'created_at',
width: 160,
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ title: '操作', slotName: 'action', align: 'center', width: 120 },
];
function open() {
visible.value = true;
getData();
}
function openAdd() {
addGroupRef.value.open();
}
function openEdit(record) {
addGroupRef.value.open(record);
}
function openDelete(record) {
deleteGroupRef.value.open(record);
}
async function getData() {
try {
loading.value = true;
const { page, pageSize } = pageInfo;
const params = {
page,
pageSize,
};
if (sortInfo.value.field && sortInfo.value.direction) {
params.orderField = sortInfo.value.field;
params.orderType = sortInfo.value.direction === 'ascend' ? 'asc' : 'desc';
}
const { code, data } = await getGroupList(params);
if (code === 200) {
list.value = data.list;
pageInfo.total = data.total;
}
} finally {
loading.value = false;
}
}
const onTableChange = (pagination, filters, sorter) => {
if (sorter && sorter.field) {
sortInfo.value.field = sorter.field;
sortInfo.value.direction = sorter.order;
} else {
sortInfo.value.field = '';
sortInfo.value.direction = '';
}
getData();
};
const onPageChange = (current) => {
pageInfo.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.page = 1;
getData();
};
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
</style>

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

@ -0,0 +1,62 @@
@import '@/views/property-marketing/component.scss';
.account-manage-modal {
border-radius: 8px;
.arco-modal-body {
.arco-btn {
.arco-btn-icon {
line-height: 16px;
}
}
.s1 {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
.pagination-box {
display: flex;
width: 100%;
padding: 16px 24px;
justify-content: flex-end;
align-items: center;
.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-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,
.arco-pagination-jumper-input {
border-radius: 4px;
border: 1px solid var(--BG-300, #e6e6e8);
background-color: #fff;
}
}
}
}
.danger-btn {
border: none !important;
background-color: #f64b31 !important;
}
}

64
src/views/property-marketing/media-account/account-manage/components/group-select/index.vue Normal file
View File

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

51
src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue Normal file
View File

@ -0,0 +1,51 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
width="480px"
title="导入提示"
modal-class="import-prompt-modal"
:footer="false"
:mask-closable="false"
@close="close"
>
<div class="flex flex-col items-center">
<div class="flex items-center">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
</div>
<div class="mt-24px text-right w-100%">
<a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
<a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
</div>
</div>
</a-modal>
</template>
<script setup>
import { defineExpose } from 'vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const visible = ref(false);
const open = () => {
visible.value = true;
};
const close = () => {
visible.value = false;
};
const handleOk = () => {
close();
};
defineExpose({
open,
});
</script>
<style lang="scss">
@import './style.scss';
</style>

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

@ -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% */
}
}
}

46
src/views/property-marketing/media-account/account-manage/components/qrCode-modal/index.vue Normal file
View File

@ -0,0 +1,46 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:51:46
-->
<template>
<a-modal
v-model:visible="visible"
width="480px"
title="添加账号"
modal-class="qrCode-modal"
:footer="false"
:mask-closable="false"
@close="close"
>
<div class="flex flex-col items-center">
<img src="" width="160" height="160" class="mb-16px" />
<span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
<div class="mt-24px text-center">
<a-button type="primary" size="large" @click="handleOk"> 完成扫码 </a-button>
</div>
</div>
</a-modal>
</template>
<script setup>
import { defineExpose } from 'vue';
const visible = ref(false);
const open = () => {
visible.value = true;
};
const close = () => {
visible.value = false;
};
const handleOk = () => {
console.log('handleOk');
};
defineExpose({
open,
});
</script>
<style lang="scss">
@import './style.scss';
</style>

19
src/views/property-marketing/media-account/account-manage/components/qrCode-modal/style.scss Normal file
View File

@ -0,0 +1,19 @@
.qrCode-modal {
border-radius: 8px;
.arco-modal-header {
border-bottom: none;
height: 56px;
padding: 22px 24px 16px 24px;
.arco-modal-title {
justify-content: flex-start;
}
}
.arco-modal-body {
padding: 20px 24px 20px;
}
.arco-modal-footer {
border-top: none;
padding: 0;
}
}

64
src/views/property-marketing/media-account/account-manage/components/tag-select/index.vue Normal file
View File

@ -0,0 +1,64 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<a-select
v-model="selectedTags"
:multiple="multiple"
size="medium"
:placeholder="placeholder"
allow-clear
@change="handleChange"
>
<a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
{{ item.name }}
</a-option>
</a-select>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: [Array, String, Number],
default: () => [],
},
multiple: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: '全部',
},
options: {
type: Array,
default: () => [],
},
});
const emits = defineEmits(['update:modelValue', 'change']);
const selectedTags = ref(props.multiple ? [] : '');
// 监听外部传入的值变化
watch(
() => props.modelValue,
(newVal) => {
selectedTags.value = newVal;
},
{ immediate: true },
);
// 监听内部值变化，向外部发送更新
watch(selectedTags, (newVal) => {
emits('update:modelValue', newVal);
});
const handleChange = (value) => {
selectedTags.value = value;
emits('change', value);
};
</script>

80
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue Normal file
View File

@ -0,0 +1,80 @@
<!--
* @Author: AI
* @Date: 2025-06-27
-->
<template>
<a-modal
v-model:visible="visible"
:title="isEdit ? '编辑标签' : '添加新标签'"
modal-class="tags-manage-modal"
width="400px"
:footer="false"
@close="onClose"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
<a-form-item :label="isEdit ? '标签名称' : '新标签名称'" field="name" required>
<a-input v-model="form.name" placeholder="请输入…" />
</a-form-item>
<div class="text-right">
<a-button class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
</div>
</a-form>
</a-modal>
</template>
<script setup>
import { ref, nextTick } from 'vue';
import { postAccountTags, putTag } from '@/api/all/propertyMarketing';
const emits = defineEmits(['success', 'close']);
const visible = ref(false);
const isEdit = ref(false);
const formRef = ref();
const form = ref({ name: '' });
const tagId = ref('');
const rules = {
name: [{ required: true, message: '请输入标签名称' }],
};
function resetForm() {
nextTick(() => {
formRef.value?.clearValidate();
});
}
function onClose() {
visible.value = false;
form.value.name = '';
tagId.value = '';
isEdit.value = false;
resetForm();
}
const open = (record = {}) => {
const { id = '', name = '' } = record;
tagId.value = id;
isEdit.value = !!id;
form.value.name = name;
visible.value = true;
};
async function onSubmit() {
formRef.value.validate(async (errors) => {
if (!errors) {
const _fn = isEdit.value ? putTag : postAccountTags;
const _params = isEdit.value ? { id: tagId.value, ...form.value } : form.value;
const { code } = await _fn(_params);
if (code === 200) {
AMessage.success(isEdit.value ? '编辑成功' : '添加成功');
emits('success');
onClose();
}
}
});
}
defineExpose({ open });
</script>

63
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue Normal file
View File

@ -0,0 +1,63 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-26 17:23:52
-->
<template>
<a-modal
v-model:visible="visible"
title="删除标签"
width="400px"
:footer="false"
modal-class="account-manage-modal"
@close="onClose"
>
<div class="flex items-center mb-24px">
<img :src="icon1" width="20" height="20" class="mr-12px" />
<span>确认删除 "{{ tagName }}" 这个标签吗？</span>
</div>
<div class="text-right">
<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
>
</div>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { deleteTag } 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 tagId = ref('');
const tagName = ref('');
function onClose() {
visible.value = false;
tagId.value = '';
tagName.value = '';
emits('close');
}
const open = (record) => {
const { id = '', name = '' } = record;
tagId.value = id;
tagName.value = name;
visible.value = true;
};
async function onDelete() {
const { code } = await deleteTag(tagId.value);
if (code === 200) {
AMessage.success('删除成功');
emits('success');
onClose();
}
}
defineExpose({ open });
</script>

137
src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue Normal file
View File

@ -0,0 +1,137 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 17:58:28
-->
<template>
<a-modal
v-model:visible="visible"
width="800px"
modal-class="tags-manage-modal"
:footer="false"
:mask-closable="false"
@close="close"
>
<template #title>标签管理</template>
<template v-if="!list.length">
<div class="flex items-center justify-center flex-col">
<div class="w-120px h-120px flex items-center justify-center mb-32px">
<img :src="iconEmpty" width="106" height="72" />
</div>
<span class="s1 mb-16px">暂无标签</span>
<a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
<template #icon>
<img :src="iconAdd" width="16" height="16" />
</template>
<template #default>去添加</template>
</a-button>
</div>
</template>
<template v-else>
<a-button type="primary" size="medium" @click="openAdd">
<template #icon>
<img :src="iconAdd" width="16" height="16" />
</template>
<template #default>添加新标签</template>
</a-button>
<div class="tag-list">
<a-tooltip v-for="tag in list" :key="tag.id" content="双击修改标签名">
<div class="tag-item cursor-pointer" @dblclick="openEdit(tag)">
<span>{{ tag.name }}</span>
<img :src="iconDelete" class="delete-icon" @click="openDelete(tag)" />
</div>
</a-tooltip>
</div>
</template>
<AddTag ref="addTagRef" @success="getData" />
<DeleteTag ref="deleteTagRef" @success="getData" />
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { getTagsList } from '@/api/all/propertyMarketing';
import AddTag from './add-tag.vue';
import DeleteTag from './delete-tag.vue';
import iconAdd from '@/assets/img/media-account/icon-add.png';
import iconEmpty from '@/assets/img/media-account/icon-empty.png';
import iconDelete from '@/assets/img/media-account/icon-delete-1.png';
const visible = ref(false);
const list = ref([]);
const addTagRef = ref(null);
const deleteTagRef = ref(null);
const getData = async () => {
list.value = [
{ id: 1, name: '测试1' },
{ id: 2, name: '测试2' },
{ id: 3, name: '测试3' },
{ id: 4, name: '测试4' },
{ id: 5, name: '测试5' },
{ id: 6, name: '测试6' },
{ id: 7, name: '测试7' },
{ id: 8, name: '测试8' },
{ id: 9, name: '测试9' },
{ id: 10, name: '测试10' },
];
// const { code, data } = await getTagsList();
// if (code === 200) list.value = data.list;
};
const open = () => {
visible.value = true;
getData();
};
const close = () => {
visible.value = false;
};
const openAdd = () => {
// 打开新增标签弹窗
addTagRef.value.open();
};
function openEdit(record) {
addTagRef.value.open(record);
}
function openDelete(record) {
deleteTagRef.value.open(record);
}
defineExpose({ open });
</script>
<style lang="scss">
@import './style.scss';
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 16px;
.tag-item {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 4px;
padding: 4px 12px;
position: relative;
.delete-icon {
position: absolute;
z-index: 1;
top: -6px;
right: -6px;
cursor: pointer;
width: 12px;
height: 12px;
display: none;
}
&:hover {
.delete-icon {
display: block;
}
}
}
}
</style>

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

@ -0,0 +1,42 @@
@import '@/views/property-marketing/component.scss';
.tags-manage-modal {
border-radius: 8px;
.arco-modal-body {
padding: 24px 24px 44px !important;
max-height: 304px;
overflow: hidden;
display: flex;
flex-direction: column;
.arco-btn {
width: fit-content;
.arco-btn-icon {
line-height: 16px;
}
}
.tag-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.tag-item {
display: flex;
height: 32px;
padding: 0px 8px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
gap: 12px;
.text {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
}
}
}
}
}

38
src/views/property-marketing/media-account/account-manage/constants.ts Normal file
View File

@ -0,0 +1,38 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:24:59
*/
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
group_ids: [],
tag_ids: [],
};
export const PLATFORM_LIST = [
{
label: '抖音',
value: 0,
},
{
label: '小红书',
value: 1,
},
];
export const STATUS_LIST = [
{
label: '未授权',
value: 0,
},
{
label: '正常',
value: 1,
},
{
label: '异常',
value: 2,
},
];

273
src/views/property-marketing/media-account/account-manage/index.vue Normal file
View File

@ -0,0 +1,273 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 10:00:50
-->
<template>
<div class="account-manage-wrap">
<div class="filter-wrap bg-#fff border-radius-8px">
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
<div class="flex items-center">
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
</template>
<template #default>分组管理</template>
</a-button>
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>
<template #default>添加账号</template>
</a-button>
</div>
</div>
<FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
</div>
<div
class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
:class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
>
<div class="flex items-center">
<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" @click="handleBatchTag">批量标签</span>
<span class="operation-btn" @click="handleBatchGroup">批量分组</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>
<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">
<template #default>查看异常账号</template>
</a-button>
</a-space>
</div>
</div>
<div class="card-wrap">
<AccountTable
:dataSource="dataSource"
:selectedItems="selectedItems"
@selectionChange="handleSelectionChange"
@delete="handleDelete"
/>
<div class="pagination-box">
<a-pagination
:total="pageInfo.total"
size="mini"
show-total
show-jumper
show-page-size
:current="pageInfo.page"
:page-size="pageInfo.pageSize"
@change="onPageChange"
@page-size-change="onPageSizeChange"
/>
</div>
</div>
<GroupManageModal ref="groupManageModalRef" />
<TagsManageModal ref="tagsManageModalRef" />
<AddAccountModal ref="addAccountModalRef" />
<DeleteAccountModal ref="deleteAccountRef" @update="getData" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';
import GroupManageModal from './components/group-manage-modal';
import TagsManageModal from './components/tags-manage-modal';
import AddAccountModal from './components/add-account-modal';
import 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 icon2 from '@/assets/img/media-account/icon-group.png';
import icon3 from '@/assets/img/media-account/icon-tag.png';
import icon4 from '@/assets/img/media-account/icon-success.png';
import icon5 from '@/assets/img/media-account/icon-warn.png';
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({
page: 1,
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 = async () => {
// const { page, pageSize } = pageInfo;
// const { code, data, total } = await getMediaAccounts({
// page,
// page_size: pageSize,
// ...query.value,
// });
// if (code === 200) {
// dataSource.value = data.data;
// pageInfo.total = total;
// }
dataSource.value = [
{
id: 1,
name: '全球',
account_id: 1,
mobile: 1777777,
status: 1,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
],
},
{
id: 2,
name: '全球2',
account_id: 1,
mobile: 1777777,
status: 1,
platform: 0,
operator: {
name: '小周',
},
group: {
name: '美团组',
},
tags: [
{
name: '标签1',
},
{
name: '标签2',
},
],
},
];
};
const handleSearch = (newQuery) => {
query.value = { ...newQuery };
getData();
};
const handleReset = () => {
query.value = cloneDeep(INITIAL_QUERY);
getData();
};
const onPageChange = (current) => {
pageInfo.page = current;
getData();
};
const onPageSizeChange = (pageSize) => {
pageInfo.pageSize = pageSize;
pageInfo.page = 1;
getData();
};
const handleOpenGroupModal = () => {
groupManageModalRef.value?.open();
};
const handleOpenTagsModal = () => {
tagsManageModalRef.value?.open();
};
const handleOpenAccountModal = () => {
addAccountModalRef.value?.open();
};
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 = [];
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

122
src/views/property-marketing/media-account/account-manage/style.scss Normal file
View File

@ -0,0 +1,122 @@
.account-manage-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: 16px;
}
}
}
}
.tip-row {
border-radius: 2px;
background: #f0edff;
.label {
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
&.normal {
background: #ebf7f2;
.label {
color: #211f24;
}
}
&.abnormal {
background: #ffe7e4;
.label {
color: #211f24;
}
}
.err-btn {
background-color: #f64b31 !important;
color: var(--BG-white, #fff);
font-family: 'PingFang SC';
font-size: 12px;
font-style: normal;
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;
flex-direction: column;
.pagination-box {
display: flex;
width: 100%;
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);
}
}
}
}
}

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

@ -0,0 +1,80 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:31:15
-->
<template>
<div class="card-container">
<div v-for="(item, index) in dataSource" :key="index" class="card-item">
<a-checkbox></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>
</div>
<div class="field-row">
<span class="label">平台</span>
<img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
</div>
<div class="field-row">
<span class="label">账号ID</span>
<span class="cts">{{ item.account_id }}</span>
</div>
<div class="field-row">
<span class="label">手机号码</span>
<span class="cts">{{ item.mobile }}</span>
</div>
<div class="field-row">
<span class="label">运营人员</span>
<span class="cts">{{ item.operator?.name }}</span>
</div>
<div class="field-row">
<span class="label">分组</span>
<span class="cts">{{ item.group?.name }}</span>
</div>
<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">
<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">
<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">
<template #default>编辑</template>
</a-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
import { STATUS_LIST } from '../../constants';
import icon1 from '@/assets/img/media-account/icon-dy.png';
import icon2 from '@/assets/img/media-account/icon-xhs.png';
import icon3 from '@/assets/img/media-account/icon-delete.png';
const props = defineProps({
dataSource: {
type: Array,
default: () => [],
},
});
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

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

@ -0,0 +1,103 @@
.card-container {
flex: 1;
display: grid;
grid-template-rows: repeat(2, 1fr); /* 2行 */
grid-template-columns: repeat(4, 1fr); /* 4列 */
gap: 20px;
.card-item {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 16px 16px;
display: flex;
align-items: flex-start;
.name {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-bottom: 11px;
// line-height: 22px; /* 157.143% */
}
.label {
color: var(--Text-3, #737478);
font-family: 'Alibaba PuHuiTi';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
.field-row {
width: 100%;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-size: 12px;
font-style: normal;
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;
padding: 0px 4px;
align-items: center;
border-radius: 2px;
background: var(--BG-200, #f2f3f5);
.text {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&:not(:last-child) {
margin-right: 4px;
}
}
&:last-child {
margin-bottom: 8px;
}
}
.operate-row {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 8px;
}
}
}

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

@ -0,0 +1,94 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="container px-24px pt-12px pb-24px">
<div class="filter-row flex mb-20px">
<div class="filter-row-item flex items-center">
<span class="label">账号名称/ID/手机号</span>
<a-space size="medium">
<a-input
v-model="query.search"
class="w-240px"
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-160px">
<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>
</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.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
<a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
item.label
}}</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 value="Beijing" label="Beijing">Beijing</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">
<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>
</a-space>
</div>
</template>
<script setup>
import { reactive, defineEmits, defineProps } from 'vue';
import {
INITIAL_QUERY,
PLATFORM_LIST,
STATUS_LIST,
} from '@/views/property-marketing/media-account/account-manage/constants';
const emits = defineEmits('onSearch', 'onReset');
const query = ref(cloneDeep(INITIAL_QUERY));
const handleSearch = () => {
emits('onSearch', query);
};
const handleReset = () => {
query.value = cloneDeep(INITIAL_QUERY);
emits('onReset');
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

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

@ -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%;
}
}
}
}

36
src/views/property-marketing/put-account/account-manage/constants.ts Normal file
View File

@ -0,0 +1,36 @@
/*
* @Author: RenXiaoDong
* @Date: 2025-06-25 15:24:59
*/
export const INITIAL_QUERY = {
search: '',
status: '',
platform: '',
operator_id: '',
};
export const PLATFORM_LIST = [
{
label: '抖音',
value: 0,
},
{
label: '小红书',
value: 1,
},
];
export const STATUS_LIST = [
{
label: '未授权',
value: 0,
},
{
label: '正常',
value: 1,
},
{
label: '异常',
value: 2,
},
];

143
src/views/property-marketing/put-account/account-manage/index.vue Normal file
View File

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

106
src/views/property-marketing/put-account/account-manage/style.scss Normal file
View File

@ -0,0 +1,106 @@
.account-manage-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: 16px;
}
}
}
}
.tip-row {
border-radius: 2px;
background: #f0edff;
.label {
font-family: 'Alibaba PuHuiTi';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
&.normal {
background: #ebf7f2;
.label {
color: #211f24;
}
}
&.abnormal {
background: #ffe7e4;
.label {
color: #211f24;
}
}
.err-btn {
background-color: #f64b31 !important;
color: var(--BG-white, #fff);
font-family: 'PingFang SC';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
}
.card-wrap {
display: flex;
flex-direction: column;
.pagination-box {
display: flex;
width: 100%;
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);
}
}
}
}
}