+
-
-
添加新标签
-
+
+
+
+
{{ tag.name }}
-
-
-
+
+
+ 暂无标签
+
+
+
+
+ 去添加
+
+
+
+
+
+
+
@@ -55,29 +66,29 @@ 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 emit = defineEmits(['update']);
+
const visible = ref(false);
-const list = ref([]);
+const allDataSource = ref([]);
+const showDataSource = ref([]);
const addTagRef = ref(null);
const deleteTagRef = ref(null);
+const query = ref({
+ name: '',
+});
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 { code, data } = await getTagsList();
+ if (code === 200) {
+ allDataSource.value = data ?? [];
+ showDataSource.value = allDataSource.value;
+ }
+};
+
+const handleSearch = () => {
+ showDataSource.value = allDataSource.value.filter((item) => item.name.includes(query.value.name));
};
const open = () => {
@@ -85,6 +96,9 @@ const open = () => {
getData();
};
const close = () => {
+ showDataSource.value = [];
+ allDataSource.value = [];
+ query.value.name = '';
visible.value = false;
};
const openAdd = () => {
@@ -99,39 +113,14 @@ function openEdit(record) {
function openDelete(record) {
deleteTagRef.value.open(record);
}
+const update = () => {
+ getData();
+ emit('update');
+};
defineExpose({ open });
diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
index f8fa609..90f1b17 100644
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss
@@ -5,7 +5,6 @@
.arco-modal-body {
padding: 24px 24px 44px !important;
- max-height: 304px;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -16,25 +15,31 @@
}
}
.tag-list {
- flex: 1;
- overflow-y: auto;
display: flex;
flex-wrap: wrap;
+ gap: 12px;
.tag-item {
+ height: 24px;
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: 'PuHuiTi-Medium';
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 22px; /* 157.143% */
+ 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;
+ }
}
}
}
diff --git a/src/views/property-marketing/media-account/account-manage/constants.ts b/src/views/property-marketing/media-account/account-manage/constants.ts
index 93aee6a..0185fde 100644
--- a/src/views/property-marketing/media-account/account-manage/constants.ts
+++ b/src/views/property-marketing/media-account/account-manage/constants.ts
@@ -11,6 +11,12 @@ export const INITIAL_QUERY = {
tag_ids: [],
};
+export const INITIAL_PAGE_INFO = {
+ page: 1,
+ pageSize: 8,
+ total: 0,
+};
+
export const PLATFORM_LIST = [
{
label: '抖音',
@@ -23,10 +29,10 @@ export const PLATFORM_LIST = [
];
export enum EnumStatus {
- NORMAL = 1,
- PAUSE = 3,
UNAUTHORIZED = 0,
+ NORMAL = 1,
ABNORMAL = 2,
+ PAUSE = 3,
ABNORMAL_LOGIN = 4,
ABNORMAL_REQUEST = 5,
ABNORMAL_FREEZE = 6,
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index d63e884..9bac505 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -28,7 +28,7 @@