feat: 新媒体账号管理
This commit is contained in:
rd
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" width="800px" modal-class="add-account-modal" :footer="false" @close="close">
|
||||
<template #title> 添加账号 </template>
|
||||
</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>
|
||||
@ -0,0 +1,18 @@
|
||||
.add-account-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: 16px 24px 20px;
|
||||
}
|
||||
.arco-modal-footer {
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @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">
|
||||
<a-select
|
||||
v-model="query.group_ids"
|
||||
size="medium"
|
||||
multiple
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in groups" :key="index" :value="item.id" :label="item.name">{{
|
||||
item.name
|
||||
}}</a-option>
|
||||
</a-select>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">标签</span>
|
||||
<a-space class="w-320px">
|
||||
<a-select
|
||||
v-model="query.tag_ids"
|
||||
multiple
|
||||
size="medium"
|
||||
placeholder="全部"
|
||||
allow-clear
|
||||
@change="handleSearch"
|
||||
>
|
||||
<a-option v-for="(item, index) in tags" :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">
|
||||
<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 {
|
||||
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) {
|
||||
tags.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>
|
||||
@ -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,32 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" width="800px" modal-class="account-manage-modal" :footer="false" @close="close">
|
||||
<template #title> 分组管理 </template>
|
||||
<template #footer> </template>
|
||||
</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>
|
||||
@ -0,0 +1,17 @@
|
||||
.account-manage-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: 16px 24px 20px;
|
||||
}
|
||||
.arco-modal-footer {
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-25 17:51:46
|
||||
-->
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" width="800px" modal-class="tags-manage-modal" :footer="false" @close="close">
|
||||
<template #title> 标签管理 </template>
|
||||
</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>
|
||||
@ -0,0 +1,18 @@
|
||||
.tags-manage-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: 16px 24px 20px;
|
||||
}
|
||||
.arco-modal-footer {
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user