|
|
@@ -127,15 +127,21 @@
|
|
|
center
|
|
|
is-link
|
|
|
title="群公告"
|
|
|
- :value="setData?.groupNotice ? '' : '未设置'"
|
|
|
+ :value="setData?.groupNotice?.messageContent ? '' : '未设置'"
|
|
|
></van-cell>
|
|
|
|
|
|
- <van-cell size="large" center>
|
|
|
+ <van-cell @click="handleDescription" size="large" center>
|
|
|
<template #title>
|
|
|
<p class="w-full line-clamp-1">群介绍：{{ setData?.description }}</p>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
- <van-cell size="large" center title="群聊类型">
|
|
|
+ <van-cell
|
|
|
+ @click="getTreeType"
|
|
|
+ size="large"
|
|
|
+ :is-link="isRankAndFiler(userGroupData?.groupRole)"
|
|
|
+ center
|
|
|
+ title="群聊类型"
|
|
|
+ >
|
|
|
<template #value>
|
|
|
<p class="w-full line-clamp-1">{{ setData?.belongTypeIdDictMap?.name }}</p>
|
|
|
</template>
|
|
|
@@ -174,18 +180,27 @@
|
|
|
<span>开启后，在群聊广场和个人主页</span>
|
|
|
</template>
|
|
|
<template #right-icon>
|
|
|
- <van-switch v-model="isPublic" active-color="#FF9300" inactive-color="#dcdee0" />
|
|
|
+ <van-switch
|
|
|
+ v-model="isPublic"
|
|
|
+ @click="changeIsPublic"
|
|
|
+ active-color="#FF9300"
|
|
|
+ inactive-color="#dcdee0"
|
|
|
+ />
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
<van-cell size="large" center title="群聊邀请确认">
|
|
|
<template #label>
|
|
|
- <!-- class="text-base text-black/[0.4]" -->
|
|
|
<span>
|
|
|
启用后，群成员需群主或群管理员确认才能邀请朋友进群。扫描二维码进群将同时停用
|
|
|
</span>
|
|
|
</template>
|
|
|
<template #right-icon>
|
|
|
- <van-switch v-model="isNeedConfirm" active-color="#FF9300" inactive-color="#dcdee0" />
|
|
|
+ <van-switch
|
|
|
+ v-model="isNeedConfirm"
|
|
|
+ @click="changeIsNeedConfirm"
|
|
|
+ active-color="#FF9300"
|
|
|
+ inactive-color="#dcdee0"
|
|
|
+ />
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
|
|
|
@@ -335,15 +350,94 @@
|
|
|
clearable
|
|
|
:placeholder="dialogPlaceholder"
|
|
|
v-model="groupName"
|
|
|
- maxlength="12"
|
|
|
+ maxlength="30"
|
|
|
/>
|
|
|
</div>
|
|
|
</ChatDialog>
|
|
|
+
|
|
|
+ <van-dialog width="90%" v-model:show="showBelongTypeId" show-cancel-button>
|
|
|
+ <template #title>
|
|
|
+ <div class="w-full flex justify-between items-center px-16 py-11 border-b-[1px]">
|
|
|
+ <h1>群类型</h1>
|
|
|
+ <div class="w-32 h-32 -mt-3 shrink-0" @click="showBelongTypeId = false">
|
|
|
+ <img
|
|
|
+ @click="visible = false"
|
|
|
+ class="w-full h-full object-cover"
|
|
|
+ src="~/assets/img/note-create/close.svg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="w-full px-16 py-20 card-list">
|
|
|
+ <template v-for="(subItem, subIndex) in groupTypeList" :key="subItem?.id">
|
|
|
+ <div
|
|
|
+ :class="` h-40 mb-4 relative ${showIndex == subItem.id ? ' border-[#FF9300] border-2 shadow-[0_4px_4px_0px_rgba(0,0,0,0.1)]' : ''} pl-22 flex justify-start items-center shrink-0 text-xl text-black-6 font-semibold bg-[#F7F8FA] rounded-md`"
|
|
|
+ @click="handleTypeClick(subItem)"
|
|
|
+ >
|
|
|
+ <div class="w-24 h-24 shrink-0 mr-6">
|
|
|
+ <img
|
|
|
+ class="w-full h-full object-cover"
|
|
|
+ :src="item?.typeIcon ? item?.typeIcon : city"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span class="line-clamp-1">
|
|
|
+ {{ subItem.typeName }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="showIndex == subItem.id"
|
|
|
+ class="absolute rounded-t-md square1 -top-2 -left-2 z-1"
|
|
|
+ ></div>
|
|
|
+ <div v-if="showIndex == subItem.id" class="w-14 h-14 absolute top-0 left-0 z-2">
|
|
|
+ <img class="w-full h-full object-cover" alt="" src="~/assets/img/chat/check.svg" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="showIndex == subItem.id && subItem?.children.length > 0"
|
|
|
+ class="item__child mb-4 w-full relative flex justify-start box-border flex-wrap pl-21 pt-14 bg-[#F7F7F7] rounded-md"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="`w-32 h-8 absolute -top-[8px] ${subIndex % 2 != 0 ? 'right-[23px]' : 'left-[23px]'} `"
|
|
|
+ >
|
|
|
+ <img class="w-full h-full" src="~/assets/img/chat/polygon.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ <template v-for="el in subItem.children" :key="el?.id">
|
|
|
+ <div
|
|
|
+ @click="childrenHandleTypeClick(el)"
|
|
|
+ :class="`${childrenIndex == el.id ? 'text-[#FF9300] border-[#FF9300] border-[2px] bg-[#FF9300]/[0.08]' : 'bg-white border text-black-6'} py-5 mr-8 mb-12 rounded-[4px] text-sm box-border px-12`"
|
|
|
+ >
|
|
|
+ {{ el.typeName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="w-full px-40 pb-30">
|
|
|
+ <van-button
|
|
|
+ style="font-size: 16px"
|
|
|
+ type="primary"
|
|
|
+ color="#FF9300"
|
|
|
+ round
|
|
|
+ block
|
|
|
+ @click="changeBelongTypeId"
|
|
|
+ >
|
|
|
+ 确认
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
+import city from '~/assets/img/chat/city-one.svg'
|
|
|
+
|
|
|
const route = useRoute()
|
|
|
-const router = useRouter()
|
|
|
|
|
|
const userInfoStore = useUserInfoStore()
|
|
|
const { userInfo } = storeToRefs(userInfoStore)
|
|
|
@@ -360,14 +454,10 @@ onMounted(() => {
|
|
|
userInfoStore.getUserInfo()
|
|
|
getGroupSetData()
|
|
|
})
|
|
|
-// computed(() => route.query.userId ?? '')
|
|
|
|
|
|
let setData = reactive({
|
|
|
- // groupId: computed(() => route.query.groupId ?? ''),
|
|
|
- userId: userInfo.value.userId
|
|
|
- // groupRole: 1
|
|
|
- // groupNotice:
|
|
|
- // '群公告模版 1.本群提倡友好理性交流，鼓励群友多发言，多互动 2.禁止无意义刷屏、发送广告信息以及谩骂等不良消息 3.为了保证群活跃不经常发言的群友，可能会被定时清理出群'
|
|
|
+ userId: userInfo.value.userId,
|
|
|
+ belongTypeIdDictMap: {}
|
|
|
})
|
|
|
|
|
|
watch([() => route.query.groupId, () => route.query.userId], () => {}, {
|
|
|
@@ -384,6 +474,7 @@ const groupName = ref('')
|
|
|
const isPublic = ref(false)
|
|
|
const isNeedConfirm = ref(false)
|
|
|
const isNotDisturb = ref(false)
|
|
|
+const showBelongTypeId = ref(false)
|
|
|
const isTop = ref(false)
|
|
|
|
|
|
// 弹出窗
|
|
|
@@ -404,63 +495,135 @@ const openDialog = (item) => {
|
|
|
}
|
|
|
// 弹窗确认的事件
|
|
|
const confirm = () => {
|
|
|
- if (userGroupData.value?.groupRole == 1 && isRemark.value == 0) {
|
|
|
- changeGroupName()
|
|
|
- } else {
|
|
|
- }
|
|
|
+ if (userGroupData.value?.groupRole == 1 && isRemark.value == 0)
|
|
|
+ changeGroupName({ groupName: groupName.value })
|
|
|
|
|
|
if (isRemark.value == 1) changeTourMember({ groupId: setData.id, remark: groupName.value })
|
|
|
|
|
|
if (isRemark.value == 2)
|
|
|
changeGroupName({
|
|
|
- groupId: setData.id,
|
|
|
groupNickname: groupName.value
|
|
|
})
|
|
|
|
|
|
// showDialog.value = false
|
|
|
}
|
|
|
|
|
|
-// 修改群名称
|
|
|
-const changeGroupName = async () => {
|
|
|
+// groupName 修改群名称
|
|
|
+// belongTypeId 群聊类型
|
|
|
+// groupAvatar 群头像
|
|
|
+// isNeedConfirm 是否开启群验证 0 否 1 是
|
|
|
+// isPublic 是否公开展示 0隐藏 1公开
|
|
|
+
|
|
|
+// 修我在群里的昵称 修改群名称
|
|
|
+const changeGroupName = async (body) => {
|
|
|
try {
|
|
|
const { data } = await request('/website/tourGroup/updateGroup', {
|
|
|
method: 'post',
|
|
|
body: {
|
|
|
groupId: setData.id,
|
|
|
- groupName: groupName.value
|
|
|
+ ...body
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (data) {
|
|
|
- showSuccessToast('修改成功')
|
|
|
+ userGroupData.value[Object.keys(body)[0]] = groupName.value
|
|
|
+
|
|
|
+ // showSuccessToast('修改成功')
|
|
|
} else {
|
|
|
- showFailToast('修改失败')
|
|
|
+ // showFailToast('修改失败')
|
|
|
}
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
-// 修改群名称
|
|
|
-const changeGroup2 = async () => {
|
|
|
- let body = { isNeedConfirm: changeStateBoolean(isNeedConfirm.value) }
|
|
|
- // changeGroupName()
|
|
|
+
|
|
|
+// 是否开启群验证
|
|
|
+const changeIsNeedConfirm = async () => {
|
|
|
+ changeGroupBelongTypeIdIsNeedConfirm({ isNeedConfirm: changeStateBoolean(isNeedConfirm.value) })
|
|
|
+}
|
|
|
+
|
|
|
+// 是否公开展示
|
|
|
+const changeIsPublic = async () => {
|
|
|
+ changeGroupBelongTypeIdIsNeedConfirm({ isPublic: changeStateBoolean(isPublic.value) })
|
|
|
+}
|
|
|
+
|
|
|
+const showIndex = ref(null)
|
|
|
+const childrenIndex = ref(null)
|
|
|
+
|
|
|
+const groupTypeList = ref([])
|
|
|
+const subTypeList = ref([])
|
|
|
+const groupTypeName = ref('')
|
|
|
+
|
|
|
+// 选中群类型的方法
|
|
|
+const handleTypeClick = (item) => {
|
|
|
+ if (showIndex.value == item?.id) {
|
|
|
+ showIndex.value = null
|
|
|
+ subTypeList.value = []
|
|
|
+ } else {
|
|
|
+ showIndex.value = item.id
|
|
|
+ subTypeList.value = item.children
|
|
|
+ }
|
|
|
+}
|
|
|
+// 选中群类型子集的方法
|
|
|
+const childrenHandleTypeClick = (item) => {
|
|
|
+ childrenIndex.value = item.id
|
|
|
+ groupTypeName.value = item.typeName
|
|
|
}
|
|
|
|
|
|
-// async function changeGroupName(params) {
|
|
|
-// try {
|
|
|
-// const { data } = await request('/website/tourGroup/updateGroup', {
|
|
|
-// method: 'post',
|
|
|
-// body: {
|
|
|
-// groupId: setData.id,
|
|
|
-// ...params
|
|
|
-// }
|
|
|
-// })
|
|
|
-
|
|
|
-// if (data) {
|
|
|
-// showSuccessToast('修改成功')
|
|
|
-// } else {
|
|
|
-// showFailToast('修改失败')
|
|
|
-// }
|
|
|
-// } catch (error) {}
|
|
|
-// }
|
|
|
+// 获取群类型
|
|
|
+async function getTreeType() {
|
|
|
+ if (isRankAndFiler(userGroupData.value?.groupRole)) {
|
|
|
+ try {
|
|
|
+ const { data } = await request('/website/tourGroupType/treeType')
|
|
|
+ if (Array.isArray(data) && data.length) {
|
|
|
+ groupTypeList.value = data
|
|
|
+
|
|
|
+ data.map((item) => {
|
|
|
+ item.children.map((el) => {
|
|
|
+ if (el.id == setData?.belongTypeId) {
|
|
|
+ showIndex.value = item.id
|
|
|
+ childrenIndex.value = setData.belongTypeId
|
|
|
+ subTypeList.value = item.children
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ showBelongTypeId.value = true
|
|
|
+ } else {
|
|
|
+ groupTypeList.value = []
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 群聊类型
|
|
|
+const changeBelongTypeId = async () => {
|
|
|
+ if (childrenIndex.value != setData.belongTypeId) {
|
|
|
+ changeGroupBelongTypeIdIsNeedConfirm({ belongTypeId: childrenIndex.value })
|
|
|
+ }
|
|
|
+ showBelongTypeId = false
|
|
|
+}
|
|
|
+
|
|
|
+// 修改 群聊类型 是否开启群验证
|
|
|
+async function changeGroupBelongTypeIdIsNeedConfirm(body) {
|
|
|
+ try {
|
|
|
+ const { data } = await request('/website/tourGroup/updateGroup', {
|
|
|
+ method: 'post',
|
|
|
+ body: {
|
|
|
+ groupId: setData.id,
|
|
|
+ ...body
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data) {
|
|
|
+ if ((userGroupData.value[Object.keys(body)[0]] = 'belongTypeId')) {
|
|
|
+ setData.belongTypeIdDictMap.name = groupTypeName.value
|
|
|
+ }
|
|
|
+ // showSuccessToast('修改成功')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ } catch (error) {}
|
|
|
+}
|
|
|
|
|
|
// 修改备注名 和修改自己在群里的备注
|
|
|
const changeTourMember = async (body) => {
|
|
|
@@ -474,9 +637,9 @@ const changeTourMember = async (body) => {
|
|
|
if (data) {
|
|
|
//修改成功
|
|
|
if ((Object.keys(body)[1] = 'remark')) {
|
|
|
- userGroupData.groupRemark = groupName.value
|
|
|
+ userGroupData.value.groupRemark = groupName.value
|
|
|
} else {
|
|
|
- userGroupData[Object.keys(body)[1]] = groupName.value
|
|
|
+ userGroupData.value[Object.keys(body)[1]] = groupName.value
|
|
|
}
|
|
|
showSuccessToast('操作成功')
|
|
|
} else {
|
|
|
@@ -485,16 +648,18 @@ const changeTourMember = async (body) => {
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
|
|
|
+// 弹窗的取消
|
|
|
const cancel = () => {
|
|
|
showDialog.value = false
|
|
|
}
|
|
|
|
|
|
-// 改变状态的公用方法
|
|
|
+// 数字转换成布尔值
|
|
|
const changeState = (state) => {
|
|
|
if (state == 1) return true
|
|
|
if (state == 0) return false
|
|
|
}
|
|
|
|
|
|
+// 布尔值转换成数字
|
|
|
const changeStateBoolean = (state) => {
|
|
|
if (state) {
|
|
|
return 1
|
|
|
@@ -513,6 +678,7 @@ const handleIsNotDisturb = () => {
|
|
|
handleBoolean({ isNotDisturb: changeStateBoolean(isNotDisturb.value) })
|
|
|
}
|
|
|
|
|
|
+// 是否免打扰和 是否置顶 公共
|
|
|
const handleBoolean = async (params) => {
|
|
|
try {
|
|
|
let { data } = await request('/website/tourMember/updateSingleTourMember', {
|
|
|
@@ -532,6 +698,7 @@ const handleBoolean = async (params) => {
|
|
|
}
|
|
|
} catch (error) {}
|
|
|
}
|
|
|
+
|
|
|
// 获取群设置的配置信息
|
|
|
const getGroupSetData = async () => {
|
|
|
const { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
|
|
|
@@ -548,7 +715,6 @@ const getGroupSetData = async () => {
|
|
|
console.log(userInfo.value.userId, 'userInfo')
|
|
|
|
|
|
userGroupData.value = data.memberList.find((item) => item.userId == userInfo.value.userId)
|
|
|
- console.log()
|
|
|
|
|
|
console.log(userGroupData.value, '4444')
|
|
|
console.log(userGroupData.value.groupRole, 'userGroupData groupRole')
|
|
|
@@ -561,11 +727,6 @@ const getGroupSetData = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 返回上一页
|
|
|
-const onClickLeft = () => {
|
|
|
- router.back()
|
|
|
-}
|
|
|
-
|
|
|
// 是否是普通成员
|
|
|
const isRankAndFiler = (role) => {
|
|
|
return role == 1 || role == 2 ? true : false
|
|
|
@@ -594,10 +755,6 @@ const clearChatHistory = () => {
|
|
|
|
|
|
// 点击公告
|
|
|
const handleAnnouncement = () => {
|
|
|
- console.log(userGroupData.value?.groupRole, 'userGroupData?.groupRole')
|
|
|
- console.log(!isRankAndFiler(3))
|
|
|
- // && !setData?.groupNotice
|
|
|
- // if (isRankAndFiler(userGroupData.value?.groupRole)) {
|
|
|
navigateTo({
|
|
|
path: '/chat/announcement',
|
|
|
query: {
|
|
|
@@ -606,16 +763,29 @@ const handleAnnouncement = () => {
|
|
|
groupRole: userGroupData.value?.groupRole
|
|
|
}
|
|
|
})
|
|
|
- // } else {
|
|
|
- // showConfirmDialog({
|
|
|
- // width: 260,
|
|
|
- // message: `只有群主${setData?.groupName ? setData?.groupName : ''}或群管理员才能修改公告`,
|
|
|
- // showCancelButton: false,
|
|
|
- // confirmButtonColor: '#FF9300',
|
|
|
- // confirmButtonText: '我知道了'
|
|
|
- // }).then(() => {})
|
|
|
- // return
|
|
|
- // }
|
|
|
+}
|
|
|
+
|
|
|
+// 修改群介绍
|
|
|
+const handleDescription = () => {
|
|
|
+ if (isRankAndFiler(userGroupData.value?.groupRole)) {
|
|
|
+ showDialog({
|
|
|
+ width: 260,
|
|
|
+ title: '群介绍',
|
|
|
+ message: setData.description,
|
|
|
+ confirmButtonColor: '#FF9400'
|
|
|
+ }).then(() => {
|
|
|
+ // on close
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ showDialog({
|
|
|
+ width: 260,
|
|
|
+ title: '群介绍',
|
|
|
+ message: setData.description,
|
|
|
+ confirmButtonColor: '#FF9400'
|
|
|
+ }).then(() => {
|
|
|
+ // on close
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 退出群聊
|
|
|
@@ -624,9 +794,7 @@ function handleExitGroupChat() {
|
|
|
width: 260,
|
|
|
title: '提示',
|
|
|
message: `是否${isRankAndFiler(userGroupData?.groupRole) ? '解散' : '退出'}当前群聊${setData?.groupName ? `"${setData?.groupName}"` : ''}`,
|
|
|
- // showCancelButton: false,
|
|
|
confirmButtonColor: '#FF9300'
|
|
|
- // confirmButtonText: '我知道了'
|
|
|
})
|
|
|
.then(async () => {
|
|
|
const res = await request('/website/tourGroup/exitGroup', {
|
|
|
@@ -648,4 +816,22 @@ function handleExitGroupChat() {
|
|
|
::v-deep .van-dialog__header {
|
|
|
padding-top: 21px;
|
|
|
}
|
|
|
+
|
|
|
+.card-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-auto-flow: dense; /* 确保项目会填充所有的网格单元 */
|
|
|
+ grid-gap: 12px;
|
|
|
+
|
|
|
+ .item__child {
|
|
|
+ grid-column: span 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .square1 {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 28px solid transparent; /* 创建三角形 */
|
|
|
+ border-left: 28px solid #ff9300; /* 三角形的颜色 */
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
