Skip to content

C
company_app
提交 fbb744cc 作者: 施汉文
操作

🌈 style: 客服标签添加

上级 272b2066
正在显示 包含 304 行增加 和 187 行删除
src/views/popup/AddTagsDrawer/index.vue
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
}, },
data() { data() {
return { return {
show: true, show: false,
inputValue: "", inputValue: "",
defaultCheckedIds: [], defaultCheckedIds: [],
list: [], //默认选中 list: [], //默认选中
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
await this.getRoleLabel(); await this.getRoleLabel();
await this.handleChange(); await this.handleChange();
}, },
open() { open(list) {
this.show = true; this.show = true;
}, },
close() { close() {
......
src/views/userInfo/components/gameInfo/ZyouTag.vue
<template> <template>
<div> <div>
<div class="item rowFlex columnCenter spaceBetween zyouTag"> <div class="item spaceBetween zyouTag grid grid-cols-12">
<div class="rowFlex columnCenter"> <div class="rowFlex col-span-3">
<span class="label">掌游标签:</span> <span class="label">掌游标签:</span>
<i <!-- <i
:class="['el-icon-arrow-' + (showZyouTag ? 'down' : 'right'), 'tag-icon']" :class="[
'el-icon-arrow-' + (showZyouTag ? 'down' : 'right'),
'tag-icon',
]"
@click="toggleZyouTag" @click="toggleZyouTag"
></i> ></i> -->
</div>
<div class="space-y-[8px] col-span-9 flex flex-col">
<div
v-for="(item, index) in roleLabelList"
:key="index"
class="self-start flex group"
>
<div
class="px-[6px] rounded-[4px] bg-[#F5F5F5] gap-[4px] flex items-center h-[22px]"
>
<div>{{ tagNmae[item.label_type] }}</div>
<div class="h-[9px] w-[1px] bg-[#D0D1D3]"></div>
<div v-if="item.label.length > 1" class="flex-1 truncate">
{{
`${item.label[0].label_group_name} / ${item.label[0].label_name}`
}}
</div>
<div v-else-if="item.label.length > 0" class="flex-1 truncate">
{{
`${item.label[0].label_group_name} / ${item.label[0].label_name}`
}}
</div>
<div v-else class="flex-1 truncate">--</div>
<el-tooltip
effect="dark"
placement="top"
v-if="item.label.length > 1"
>
<div
slot="content"
class="grid grid-cols-2 gap-[4px] max-w-[200px]"
>
<div
v-for="value in item.label"
class="px-[6px] w-full rounded-[4px] bg-[rgba(255,255,255,0.2)] flex items-center h-[22px] overflow-hidden"
>
<span class="truncate">
{{ `${value.label_group_name} / ${value.label_name}` }}
</span>
</div> </div>
</div> </div>
<el-button type="text" size="small"
>+{{ item.label.length }}
</el-button>
</el-tooltip>
</div>
<iconpark-icon
name="ziliao-tianjia"
class="group-hover:visible invisible text-primary text-[14px] ml-[6px]"
@click="addTag(item.label)"
></iconpark-icon>
</div>
</div>
</div>
<!-- 掌游标签列表 -->
<!-- 掌游标签列表 --> <!-- 掌游标签列表 -->
<div v-if="showZyouTag" class="zyou-tag-list"> <div v-if="showZyouTag" class="zyou-tag-list">
<div v-for="(item, index) in roleLabelList" :key="index" class="tag-group"> <div
v-for="(item, index) in roleLabelList"
:key="index"
class="tag-group"
>
<div class="tag-group-header"> <div class="tag-group-header">
<div class="tag-type-name">{{ item.label_type_name }}</div> <div class="tag-type-name">{{ item.label_type_name }}</div>
<i v-if="item.label_type ==2" class="el-icon-circle-plus" style="color: var(--el-color-primary)" @click="toggleAddTag(index)"></i> <i
v-if="item.label_type == 2"
class="el-icon-circle-plus"
style="color: var(--el-color-primary)"
@click="toggleAddTag(index)"
></i>
</div> </div>
<!-- 新增标签区域 --> <!-- 新增标签区域 -->
<div v-if="showAddTagIndex === index" class="add-tag-area"> <div v-if="showAddTagIndex === index" class="add-tag-area">
...@@ -39,8 +106,15 @@ ...@@ -39,8 +106,15 @@
></el-cascader> ></el-cascader>
<div class="button-group"> <div class="button-group">
<el-button type="text" size="small" @click="handleSelectChange(searchValue)">确定</el-button> <el-button
<el-button type="text" size="small" @click="toggleAddTag(-1)">取消</el-button> type="text"
size="small"
@click="handleSelectChange(searchValue)"
>确定</el-button
>
<el-button type="text" size="small" @click="toggleAddTag(-1)"
>取消</el-button
>
</div> </div>
</div> </div>
</div> </div>
...@@ -53,7 +127,7 @@ ...@@ -53,7 +127,7 @@
trigger="click" trigger="click"
@show="getTagCreateInfo(tag.id)" @show="getTagCreateInfo(tag.id)"
> >
<div style="height: 50px;"> <div style="height: 50px">
<div v-if="tagInfo.create_user" class="tag-info-item"> <div v-if="tagInfo.create_user" class="tag-info-item">
<span class="tag-info-label">操作人：</span> <span class="tag-info-label">操作人：</span>
<span class="tag-info-value">{{ tagInfo.create_user }}</span> <span class="tag-info-value">{{ tagInfo.create_user }}</span>
...@@ -64,253 +138,289 @@ ...@@ -64,253 +138,289 @@
</div> </div>
</div> </div>
<el-tag slot="reference" class="tag-item"> <el-tag slot="reference" class="tag-item">
<span v-if="tag.label_group_name">{{ tag.label_group_name || '' }} / </span> <span v-if="tag.label_group_name"
<span>{{ tag.label_name || '' }}</span> >{{ tag.label_group_name || "" }} /
</span>
<span>{{ tag.label_name || "" }}</span>
</el-tag> </el-tag>
</el-popover> </el-popover>
</div> </div>
</div> </div>
</div> </div>
<AddTagsDrawer ref="addTagsDrawer" :game-user-info="gameUserInfo" />
</div> </div>
</template> </template>
<script> <script>
import { editRoleLabel, roleGetRoleLabel, roleLabelSearch, selectSearch, getRoleLabelCreate } from '@/api/game' import {
import { mapState,mapActions } from 'vuex' editRoleLabel,
import { debounce } from '@/utils' roleGetRoleLabel,
export default { roleLabelSearch,
name: 'ZyouTag', selectSearch,
getRoleLabelCreate,
} from "@/api/game";
import { mapState, mapActions } from "vuex";
import { debounce } from "@/utils";
import AddTagsDrawer from "@/views/popup/AddTagsDrawer/index.vue";
export default {
name: "ZyouTag",
components: {
AddTagsDrawer,
},
props: { props: {
accountSelect: { accountSelect: {
type: [String, Number], type: [String, Number],
default: '' default: "",
}, },
gameUserInfo: { gameUserInfo: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
} },
}, },
data() { data() {
return { return {
tagNmae: {
1: "运营",
2: "客服",
3: "GS",
},
showZyouTag: false, // 控制标签显示隐藏 showZyouTag: false, // 控制标签显示隐藏
roleLabelList: [], // 角色标签列表 roleLabelList: [], // 角色标签列表
showAddTagIndex: -1, // 当前显示新增标签的索引 showAddTagIndex: -1, // 当前显示新增标签的索引
searchValue: '', // 搜索框的值 searchValue: "", // 搜索框的值
searchOptions: [], // 搜索选项 searchOptions: [], // 搜索选项
labelTypeList: [], // 标签类型列表 labelTypeList: [], // 标签类型列表
loading: false, // 加载状态 loading: false, // 加载状态
tagInfo: {} // 标签创建信息 tagInfo: {}, // 标签创建信息
} };
}, },
computed: { computed: {
...mapState('user', ['cser_id','cser_name','corp_id','weixin_blongs_id_list']), ...mapState("user", [
"cser_id",
"cser_name",
"corp_id",
"weixin_blongs_id_list",
]),
}, },
watch: { watch: {
accountSelect: { accountSelect: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal) {
this.getRoleLabelList() this.getRoleLabelList();
} }
}, },
immediate: true immediate: true,
} },
}, },
async mounted() { async mounted() {
await this.requestCompanyviewConfig({corp_id:this.corp_id}) await this.requestCompanyviewConfig({ corp_id: this.corp_id });
this.getLabelType() this.getLabelType();
this.getRoleLabelList() this.getRoleLabelList();
this.searchLabel('') this.searchLabel("");
}, },
methods: { methods: {
...mapActions('user', ['requestCompanyviewConfig']), ...mapActions("user", ["requestCompanyviewConfig"]),
// 获取标签类型 // 获取标签类型
async getLabelType() { async getLabelType() {
try { try {
const res = await selectSearch({ const res = await selectSearch({
type: 'label_type' type: "label_type",
}) });
if (res.status_code === 1) { if (res.status_code === 1) {
console.log('getLabelType') console.log("getLabelType");
this.labelTypeList = res.data.data || [] this.labelTypeList = res.data.data || [];
} }
} catch (error) { } catch (error) {
console.error('获取标签类型失败:', error) console.error("获取标签类型失败:", error);
} }
}, },
getRoleLabelList: debounce(function() { getRoleLabelList: debounce(function () {
this.getRoleLabelListFn() this.getRoleLabelListFn();
}, 500), }, 500),
// 获取角色标签列表 // 获取角色标签列表
async getRoleLabelListFn() { async getRoleLabelListFn() {
console.log('延迟') console.log("延迟");
if (!this.accountSelect) return if (!this.accountSelect) return;
this.loading = true this.loading = true;
try { try {
const weixin_blongs_id = this.weixin_blongs_id_list.map(item => item.value) const weixin_blongs_id = this.weixin_blongs_id_list.map(
(item) => item.value
);
const res = await roleGetRoleLabel({ const res = await roleGetRoleLabel({
member_id: this.accountSelect, member_id: this.accountSelect,
weixin_blongs_id: weixin_blongs_id weixin_blongs_id: weixin_blongs_id,
}) });
if (res.status_code === 1 && res.data.data.length > 0) { if (res.status_code === 1 && res.data.data.length > 0) {
const labelData = res.data.data || [] const labelData = res.data.data || [];
const groupedLabels = {} const groupedLabels = {};
labelData.forEach(item => { labelData.forEach((item) => {
if (item.label && item.label.length > 0) { if (item.label && item.label.length > 0) {
item.label.forEach(label => { item.label.forEach((label) => {
label.label_type = Number(item.label_type) label.label_type = Number(item.label_type);
}) });
} }
}) });
// 初始化标签组 // 初始化标签组
this.labelTypeList.forEach(type => { this.labelTypeList.forEach((type) => {
groupedLabels[type.value] = { groupedLabels[type.value] = {
label_type: type.value, label_type: type.value,
label_type_name: type.label, label_type_name: type.label,
label: [] label: [],
} };
}) });
// 分组标签数据 // 分组标签数据
labelData.forEach(item => { labelData.forEach((item) => {
if (item.label && item.label.length > 0) { if (item.label && item.label.length > 0) {
const labelType = item.label[0].label_type const labelType = item.label[0].label_type;
if (groupedLabels[labelType]) { if (groupedLabels[labelType]) {
groupedLabels[labelType].label = item.label groupedLabels[labelType].label = item.label;
} }
} }
}) });
// 转换为数组格式 // 转换为数组格式
this.roleLabelList = Object.values(groupedLabels) this.roleLabelList = Object.values(groupedLabels);
console.log(this.roleLabelList, 'roleLabelList') console.log(this.roleLabelList, "roleLabelList");
} else { } else {
this.roleLabelList = this.labelTypeList.map(item => { this.roleLabelList = this.labelTypeList.map((item) => {
return { return {
label_type: item.value, label_type: item.value,
label_type_name: item.label, label_type_name: item.label,
label: [] label: [],
} };
}) });
} }
} catch (error) { } catch (error) {
console.error('获取角色标签列表失败:', error) console.error("获取角色标签列表失败:", error);
} finally { } finally {
this.loading = false this.loading = false;
} }
}, },
addTag(list) {
this.$refs.addTagsDrawer.open(list);
},
// 搜索标签 // 搜索标签
async searchLabel(query) { async searchLabel(query) {
try { try {
const weixin_blongs_id = this.weixin_blongs_id_list.map(item => item.value) const weixin_blongs_id = this.weixin_blongs_id_list.map(
(item) => item.value
);
const res = await roleLabelSearch({ const res = await roleLabelSearch({
label_name: query.trim() || '', label_name: query.trim() || "",
weixin_blongs_id: weixin_blongs_id || [], weixin_blongs_id: weixin_blongs_id || [],
label_type: 2 label_type: 2,
}) });
if (res.status_code === 1) { if (res.status_code === 1) {
this.searchOptions = res.data.data || [] this.searchOptions = res.data.data || [];
// 找出 label_group_id 相同的 然后 把 children 合并 // 找出 label_group_id 相同的 然后 把 children 合并
const groupedItems = this.searchOptions.reduce((acc, curr) => { const groupedItems = this.searchOptions.reduce((acc, curr) => {
const key = curr.label_group_id const key = curr.label_group_id;
if (!acc[key]) { if (!acc[key]) {
acc[key] = { acc[key] = {
label_name: curr.label_group_name, label_name: curr.label_group_name,
label_id: curr.label_group_id, label_id: curr.label_group_id,
select_type: Number(curr.select_type), select_type: Number(curr.select_type),
children: [] children: [],
} };
} }
// 将标签添加到对应标签组的children中 // 将标签添加到对应标签组的children中
acc[key].children.push({ acc[key].children.push({
label_name: curr.label_name, label_name: curr.label_name,
label_id: curr.id, label_id: curr.id,
disabled: false // 默认不禁用 disabled: false, // 默认不禁用
}) });
return acc return acc;
}, {}) }, {});
// 处理单选标签组，为已选中项以外的选项添加disabled属性 // 处理单选标签组，为已选中项以外的选项添加disabled属性
Object.values(groupedItems).forEach(group => { Object.values(groupedItems).forEach((group) => {
if (group.select_type === 1) { if (group.select_type === 1) {
// 如果是单选标签组，需要禁用其他选项 // 如果是单选标签组，需要禁用其他选项
const selectedIds = Array.isArray(this.searchValue) ? this.searchValue : [] const selectedIds = Array.isArray(this.searchValue)
const hasSelectedInThisGroup = group.children.some(child => ? this.searchValue
: [];
const hasSelectedInThisGroup = group.children.some((child) =>
selectedIds.includes(child.label_id) selectedIds.includes(child.label_id)
) );
if (hasSelectedInThisGroup) { if (hasSelectedInThisGroup) {
group.children.forEach(child => { group.children.forEach((child) => {
// 如果当前选项不在已选中列表中，则禁用 // 如果当前选项不在已选中列表中，则禁用
if (!selectedIds.includes(child.label_id)) { if (!selectedIds.includes(child.label_id)) {
child.disabled = true child.disabled = true;
} }
}) });
} }
} }
}) });
this.searchOptions = Object.values(groupedItems) this.searchOptions = Object.values(groupedItems);
} }
} catch (error) { } catch (error) {
console.error('搜索标签失败:', error) console.error("搜索标签失败:", error);
} }
}, },
// 添加标签 // 添加标签
async addLabel(selectedLabels) { async addLabel(selectedLabels) {
console.log(selectedLabels, 'selectedLabels') console.log(selectedLabels, "selectedLabels");
const labelId = selectedLabels.map(label => label.label_id) const labelId = selectedLabels.map((label) => label.label_id);
if (!this.accountSelect || !labelId) { if (!this.accountSelect || !labelId) {
this.$message.error('请选择标签') this.$message.error("请选择标签");
return return;
} }
if (!this.gameUserInfo || !this.gameUserInfo.role_info || !this.gameUserInfo.role_info.role_id) { if (
this.$message.error('该账号未创角无法添加标签') !this.gameUserInfo ||
return !this.gameUserInfo.role_info ||
!this.gameUserInfo.role_info.role_id
) {
this.$message.error("该账号未创角无法添加标签");
return;
} }
try { try {
const res = await editRoleLabel({ const res = await editRoleLabel({
role_id: this.gameUserInfo.role_info.role_id || '', role_id: this.gameUserInfo.role_info.role_id || "",
member_id: this.accountSelect, member_id: this.accountSelect,
label_id: labelId, label_id: labelId,
user_id: this.cser_id, user_id: this.cser_id,
user_name: this.cser_name, user_name: this.cser_name,
role_name: this.gameUserInfo.role_info.role_name || '', role_name: this.gameUserInfo.role_info.role_name || "",
cp_role_id: this.gameUserInfo.role_info.cp_role_id || '' cp_role_id: this.gameUserInfo.role_info.cp_role_id || "",
}) });
if (res.status_code === 1) { if (res.status_code === 1) {
this.$message.success(res.msg) this.$message.success(res.msg);
this.searchValue = '' this.searchValue = "";
this.showAddTagIndex = -1 this.showAddTagIndex = -1;
// 暂时隐藏 // 暂时隐藏
// this.roleLabelList[1].label.push(...selectedLabels) // this.roleLabelList[1].label.push(...selectedLabels)
// 重置所有标签的禁用状态 // 重置所有标签的禁用状态
this.searchOptions.forEach(group => { this.searchOptions.forEach((group) => {
if (group.children) { if (group.children) {
group.children.forEach(child => { group.children.forEach((child) => {
child.disabled = false child.disabled = false;
}) });
} }
}) });
// 刷新标签列表 // 刷新标签列表
setTimeout(() => { setTimeout(() => {
this.getRoleLabelList() this.getRoleLabelList();
}, 500) }, 500);
} }
} catch (error) { } catch (error) {
console.error('添加标签失败:', error) console.error("添加标签失败:", error);
} }
}, },
// 切换标签显示 // 切换标签显示
toggleZyouTag() { toggleZyouTag() {
this.showZyouTag = !this.showZyouTag this.showZyouTag = !this.showZyouTag;
}, },
// 切换新增标签区域显示 // 切换新增标签区域显示
toggleAddTag(index) { toggleAddTag(index) {
this.showAddTagIndex = this.showAddTagIndex === index ? -1 : index this.showAddTagIndex = this.showAddTagIndex === index ? -1 : index;
if (this.showAddTagIndex === -1) { if (this.showAddTagIndex === -1) {
this.searchValue = '' this.searchValue = "";
// this.searchOptions = [] // this.searchOptions = []
} }
}, },
...@@ -319,101 +429,113 @@ ...@@ -319,101 +429,113 @@
handleSelectChange(value) { handleSelectChange(value) {
if (value && Array.isArray(value) && value.length > 0) { if (value && Array.isArray(value) && value.length > 0) {
// 获取当前标签组的标签 // 获取当前标签组的标签
const currentGroupLabels = this.roleLabelList.find(item => Number(item.label_type) === 2).label const currentGroupLabels = this.roleLabelList.find(
(item) => Number(item.label_type) === 2
).label;
// 获取所有选中标签的信息 // 获取所有选中标签的信息
const selectedLabels = [] const selectedLabels = [];
// 遍历所有标签组 // 遍历所有标签组
this.searchOptions.forEach(group => { this.searchOptions.forEach((group) => {
// 找出该组中被选中的标签 // 找出该组中被选中的标签
const selectedInGroup = group.children.filter(child => const selectedInGroup = group.children.filter((child) =>
value.includes(child.label_id) value.includes(child.label_id)
) );
// 如果是单选标签组且选中了多个，只保留第一个 // 如果是单选标签组且选中了多个，只保留第一个
if (group.select_type === 1 && selectedInGroup.length > 1) { if (group.select_type === 1 && selectedInGroup.length > 1) {
this.$message.warning(`标签组"${group.label_name}"为单选，只能选择一个标签`) this.$message.warning(
`标签组"${group.label_name}"为单选，只能选择一个标签`
);
// 只添加第一个选中的标签 // 只添加第一个选中的标签
selectedLabels.push(selectedInGroup[0]) selectedLabels.push(selectedInGroup[0]);
} else { } else {
// 多选标签组或单选标签组只选了一个，全部添加 // 多选标签组或单选标签组只选了一个，全部添加
selectedLabels.push(...selectedInGroup) selectedLabels.push(...selectedInGroup);
} }
}) });
if (!selectedLabels || selectedLabels.length === 0) { if (!selectedLabels || selectedLabels.length === 0) {
this.$message.warning('请选择有效的标签') this.$message.warning("请选择有效的标签");
return return;
} }
// 检查selectedLabels中的标签组是否与currentGroupLabels中的标签组重复 // 检查selectedLabels中的标签组是否与currentGroupLabels中的标签组重复
if (currentGroupLabels && currentGroupLabels.length > 0) { if (currentGroupLabels && currentGroupLabels.length > 0) {
const existingGroupIds = currentGroupLabels.map(label => label.label_group_id) const existingGroupIds = currentGroupLabels.map(
(label) => label.label_group_id
);
const hasConflict = selectedLabels.some(label => const hasConflict = selectedLabels.some((label) =>
existingGroupIds.includes(label.label_group_id) existingGroupIds.includes(label.label_group_id)
) );
if (hasConflict) { if (hasConflict) {
this.$message.warning('一标签组下只能选择一个标签') this.$message.warning("一标签组下只能选择一个标签");
return return;
} }
this.addLabel(selectedLabels) this.addLabel(selectedLabels);
} else { } else {
this.addLabel(selectedLabels) this.addLabel(selectedLabels);
} }
} else { } else {
this.$message.warning('请选择标签') this.$message.warning("请选择标签");
} }
}, },
// 处理级联选择器选择变化 // 处理级联选择器选择变化
handleCascaderChange(value) { handleCascaderChange(value) {
// 每次选择变化时，重新处理searchOptions // 每次选择变化时，重新处理searchOptions
// 重置所有选项的disabled状态 // 重置所有选项的disabled状态
this.searchOptions.forEach(group => { this.searchOptions.forEach((group) => {
if (group.children) { if (group.children) {
group.children.forEach(child => { group.children.forEach((child) => {
child.disabled = false child.disabled = false;
}) });
} }
}) });
if (Array.isArray(value) && value.length > 0) { if (Array.isArray(value) && value.length > 0) {
// 检查是否有全选操作 // 检查是否有全选操作
const prevValue = [...this.searchValue || []] const prevValue = [...(this.searchValue || [])];
// 找出所有单选标签组 // 找出所有单选标签组
const singleSelectGroups = this.searchOptions.filter(group => group.select_type === 1) const singleSelectGroups = this.searchOptions.filter(
(group) => group.select_type === 1
);
// 检查单选标签组是否有全选操作 // 检查单选标签组是否有全选操作
for (const group of singleSelectGroups) { for (const group of singleSelectGroups) {
// 获取当前组中的所有标签ID // 获取当前组中的所有标签ID
const groupLabelIds = group.children.map(child => child.label_id) const groupLabelIds = group.children.map((child) => child.label_id);
// 检查当前组中选中的标签数量 // 检查当前组中选中的标签数量
const selectedInThisGroup = groupLabelIds.filter(id => value.includes(id)) const selectedInThisGroup = groupLabelIds.filter((id) =>
value.includes(id)
);
// 如果选中的标签数量大于1，说明可能是全选操作 // 如果选中的标签数量大于1，说明可能是全选操作
if (selectedInThisGroup.length > 1) { if (selectedInThisGroup.length > 1) {
// 提示用户只能选择一个标签 // 提示用户只能选择一个标签
this.$message.warning(`标签组"${group.label_name}"为单选，只能选择一个标签`) this.$message.warning(
`标签组"${group.label_name}"为单选，只能选择一个标签`
);
// 清空该组的选择 // 清空该组的选择
const newValue = value.filter(id => !groupLabelIds.includes(id)) const newValue = value.filter((id) => !groupLabelIds.includes(id));
// 更新选择值 // 更新选择值
this.searchValue = newValue this.searchValue = newValue;
return return;
} }
// 如果该单选标签组有选中的标签，则禁用其他标签 // 如果该单选标签组有选中的标签，则禁用其他标签
if (selectedInThisGroup.length === 1) { if (selectedInThisGroup.length === 1) {
group.children.forEach(child => { group.children.forEach((child) => {
if (!value.includes(child.label_id)) { if (!value.includes(child.label_id)) {
child.disabled = true child.disabled = true;
} }
}) });
} }
// 如果没有选中的标签，则不需要禁用任何标签，已经在前面重置了 // 如果没有选中的标签，则不需要禁用任何标签，已经在前面重置了
} }
...@@ -422,27 +544,27 @@ ...@@ -422,27 +544,27 @@
}, },
// 获取标签创建信息 // 获取标签创建信息
async getTagCreateInfo(id) { async getTagCreateInfo(id) {
this.tagInfo = {} this.tagInfo = {};
try { try {
const res = await getRoleLabelCreate({ const res = await getRoleLabelCreate({
id: id id: id,
}) });
if (res.status_code === 1) { if (res.status_code === 1) {
this.tagInfo = res.data.data || {} this.tagInfo = res.data.data || {};
} else { } else {
this.$message.error(res.msg || '获取标签信息失败') this.$message.error(res.msg || "获取标签信息失败");
} }
} catch (error) { } catch (error) {
console.error('获取标签创建信息失败:', error) console.error("获取标签创建信息失败:", error);
this.$message.error('获取标签信息失败') this.$message.error("获取标签信息失败");
} }
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item { .item {
width: 100%; width: 100%;
height: auto; height: auto;
font-size: 14px; font-size: 14px;
...@@ -465,14 +587,14 @@ ...@@ -465,14 +587,14 @@
color: #333333; color: #333333;
margin-right: 8px; margin-right: 8px;
} }
} }
.zyou-tag-list { .zyou-tag-list {
.tag-group { .tag-group {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
width: 100%; width: 100%;
background: #F7F8FA; background: #f7f8fa;
border-radius: 4px; border-radius: 4px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -484,17 +606,17 @@ ...@@ -484,17 +606,17 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
padding-top:10px; padding-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
.tag-type-name { .tag-type-name {
font-size: 14px; font-size: 14px;
color: #323335; color: #323335;
font-weight: 500; font-weight: 500;
} }
.el-icon-circle-plus{ .el-icon-circle-plus {
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
color: #3491FA !important; color: #3491fa !important;
} }
} }
.tag-list { .tag-list {
...@@ -503,7 +625,7 @@ ...@@ -503,7 +625,7 @@
color: #323335; color: #323335;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #D6D9E0; border: 1px solid #d6d9e0;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
...@@ -520,20 +642,19 @@ ...@@ -520,20 +642,19 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
}
} }
} }
} }
.tag-icon { }
.tag-icon {
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
color: #909399; color: #909399;
&:hover { &:hover {
color: #409EFF; color: #409eff;
} }
} }
.tag-info-item { .tag-info-item {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 12px; font-size: 12px;
...@@ -546,5 +667,5 @@ ...@@ -546,5 +667,5 @@
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
} }
</style> </style>
\ No newline at end of file
src/views/userInfo/components/gameInfo/gameUserInfo.vue
...@@ -300,8 +300,6 @@ ...@@ -300,8 +300,6 @@
</div> </div>
</div> </div>
</div> </div>
<AddTagsDrawer ref="addTagsDrawer" :game-user-info="gameUserInfo" />
</div> </div>
</template> </template>
<script> <script>
...@@ -313,14 +311,13 @@ import moment from "moment"; ...@@ -313,14 +311,13 @@ import moment from "moment";
import ZyouTag from "./ZyouTag.vue"; import ZyouTag from "./ZyouTag.vue";
import { debounce } from "@/utils"; import { debounce } from "@/utils";
import LastLogin from "@/views/components/quickSendGame/sendGame/lastLogin.vue"; import LastLogin from "@/views/components/quickSendGame/sendGame/lastLogin.vue";
import AddTagsDrawer from "@/views/popup/AddTagsDrawer/index.vue";
export default { export default {
name: "gameUserInfo", name: "gameUserInfo",
components: { components: {
ZyouTag, ZyouTag,
MarketingPanel, MarketingPanel,
LastLogin, LastLogin,
AddTagsDrawer,
}, },
props: ["gameUserInfo", "chatUserDetails"], props: ["gameUserInfo", "chatUserDetails"],
data() { data() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论