319 lines
8.4 KiB
Vue
319 lines
8.4 KiB
Vue
<template>
|
||
<div class="choose-chat-page">
|
||
<ZPaging ref="zPaging" :show-scrollbar="false">
|
||
<template #top>
|
||
<customNavbar
|
||
:title="$t('pageTitle.select.shareChat')"
|
||
:hideBack="true"
|
||
>
|
||
<template #left>
|
||
<div
|
||
@click="handleClose"
|
||
class="ml-[42rpx] text-[34rpx] leading-[48rpx] font-regular"
|
||
>
|
||
{{ $t('button.text.close') }}
|
||
</div>
|
||
</template>
|
||
<template #right>
|
||
<div
|
||
v-if="!isMultiSelect"
|
||
@click="isMultiSelect = true"
|
||
class="mr-[36rpx] text-[34rpx] leading-[48rpx] font-regular"
|
||
>
|
||
{{ $t('button.multiple.choice') }}
|
||
</div>
|
||
<div v-else class="mr-[36rpx] btnBox">
|
||
<customBtn
|
||
:btnText="
|
||
selectItems.length
|
||
? $t('button.text.done') + `(${selectItems.length})`
|
||
: $t('button.text.done')
|
||
"
|
||
:disabled="!selectItems.length"
|
||
@clickBtn="handleFinish"
|
||
></customBtn>
|
||
</div>
|
||
</template>
|
||
</customNavbar>
|
||
</template>
|
||
<div class="choose-chat">
|
||
<div class="searchRoot">
|
||
<customInput></customInput>
|
||
</div>
|
||
<div class="contentRoot">
|
||
<chatItem
|
||
v-for="(item, index) in items"
|
||
:key="item.index_name"
|
||
:index="index"
|
||
:data="item"
|
||
:isMultiSelect="isMultiSelect"
|
||
@itemClick="itemClick"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<tm-modal
|
||
v-model:show="showWin"
|
||
:height="forwardModalHeight"
|
||
:round="4"
|
||
okColor="#FFFFFF"
|
||
@ok="handleOk"
|
||
@cancel="handleCancel"
|
||
:okText="'发送'"
|
||
>
|
||
<template v-slot:title>
|
||
<div
|
||
class="w-full pl-[30rpx] leading-[48rpx] mt-[30rpx] font-bold text-[32rpx]"
|
||
>
|
||
发送给:
|
||
</div>
|
||
</template>
|
||
<template v-slot:default>
|
||
<div
|
||
class="pl-[22rpx] pr-[32rpx] pt-[10rpx] flex items-center justify-start flex-wrap"
|
||
>
|
||
<div
|
||
v-if="selectItemsModal.length > 1"
|
||
v-for="item in selectItemsModal"
|
||
class="w-1/4 mt-[20rpx] flex flex-col items-center justify-center"
|
||
>
|
||
<div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
|
||
<tm-image
|
||
:width="96"
|
||
:height="96"
|
||
:round="12"
|
||
:src="item.avatar"
|
||
></tm-image>
|
||
</div>
|
||
<div
|
||
class="mt-[8rpx] text-[#666666] text-[24rpx] w-[94rpx] truncate"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-else class="w-full flex items-center justify-start">
|
||
<avatarModule
|
||
:mode="2"
|
||
:avatar="selectItemsModal[0].avatar"
|
||
:groupType="selectItemsModal[0].group_type"
|
||
:customStyle="{ width: '96rpx', height: '96rpx' }"
|
||
></avatarModule>
|
||
<div class="ml-[16rpx] text-[#161616] text-[32rpx] font-bold">
|
||
{{ selectItemsModal[0].name }}
|
||
<span v-if="selectItemsModal[0].talk_type === 2">（{{ selectItemsModal[0].group_member_num }}）</span>
|
||
<span v-if="selectItemsModal[0].group_type === 2" class="depTag tag">
|
||
部门
|
||
</span>
|
||
<span v-if="selectItemsModal[0].group_type === 3" class="projectTag tag">
|
||
项目
|
||
</span>
|
||
<span v-if="selectItemsModal[0].group_type === 4" class="companyTag tag">
|
||
公司
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</tm-modal>
|
||
</ZPaging>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import customInput from '@/components/custom-input/custom-input.vue'
|
||
import avatarModule from '@/components/avatar-module/index.vue'
|
||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
|
||
import { onShow, onLoad } from '@dcloudio/uni-app'
|
||
import { useChatList } from '@/store/chatList/index.js'
|
||
import { useAuth } from '@/store/auth'
|
||
import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
|
||
import chatItem from './components/chatItem.vue'
|
||
import addCircle from '@/static/image/chatList/addCircle.png'
|
||
import lodash from 'lodash'
|
||
|
||
const talkStore = useTalkStore()
|
||
const userStore = useUserStore()
|
||
const { userInfo } = useAuth()
|
||
const dialogueStore = useDialogueStore()
|
||
|
||
const isMultiSelect = ref(false)
|
||
const showWin = ref(false)
|
||
const forwardModalHeight = ref(402)
|
||
|
||
const topItems = computed(() => talkStore.topItems)
|
||
const items = ref([])
|
||
// const items = computed(() => {
|
||
// return lodash.cloneDeep(talkStore.talkItems)
|
||
// })
|
||
|
||
const selectItems = computed(() => {
|
||
return items.value.filter((item) => item.isCheck)
|
||
})
|
||
|
||
const selectItemsModal = ref([])
|
||
|
||
const itemClick = (item) => {
|
||
console.log(item)
|
||
if (isMultiSelect.value) {
|
||
item.isCheck = !item.isCheck
|
||
return false
|
||
}
|
||
selectItemsModal.value = [item]
|
||
forwardModalHeight.value = 402
|
||
showWin.value = true
|
||
}
|
||
|
||
const handleFinish = () => {
|
||
console.log(selectItems.value)
|
||
selectItemsModal.value = selectItems.value
|
||
if (selectItemsModal.value.length > 4) {
|
||
forwardModalHeight.value = 560
|
||
} else {
|
||
forwardModalHeight.value = 402
|
||
}
|
||
showWin.value = true
|
||
}
|
||
|
||
const handleClose = () => {
|
||
dialogueStore.setForwardType('')
|
||
dialogueStore.setForwardMessages([])
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const handleOk = () => {
|
||
let msg_ids = dialogueStore.forwardMessages.map((item) => item.msg_id)
|
||
|
||
let user_ids = []
|
||
let group_ids = []
|
||
|
||
for (let o of selectItemsModal.value) {
|
||
if (o.talk_type == 1) {
|
||
user_ids.push(o.receiver_id)
|
||
} else {
|
||
group_ids.push(o.receiver_id)
|
||
}
|
||
}
|
||
|
||
dialogueStore.ApiForwardRecord({
|
||
mode: dialogueStore.forwardType,
|
||
message_ids: msg_ids,
|
||
uids: user_ids,
|
||
gids: group_ids,
|
||
})
|
||
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
console.log('cancel')
|
||
}
|
||
|
||
watch(
|
||
() => talkStore,
|
||
(newValue, oldValue) => {
|
||
console.log(talkStore)
|
||
},
|
||
{ deep: true, immediate: true },
|
||
)
|
||
|
||
onMounted(() => {
|
||
talkStore.loadTalkList()
|
||
console.log(talkStore.talkItems)
|
||
items.value = lodash.cloneDeep(talkStore.talkItems)
|
||
})
|
||
onUnmounted(() => {
|
||
dialogueStore.setForwardType('')
|
||
dialogueStore.setForwardMessages([])
|
||
})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .zp-paging-container-content {
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.choose-chat {
|
||
flex: 1;
|
||
padding: 20rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||
background-size: cover;
|
||
background-position: bottom center;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.searchRoot {
|
||
background-color: #fff;
|
||
padding: 22rpx 18rpx;
|
||
}
|
||
|
||
.contentRoot {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
.tag{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
// margin-left: 10rpx;
|
||
margin-top: 4rpx;
|
||
vertical-align: top;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
padding: 0 10rpx;
|
||
font-size: 24rpx;
|
||
border-radius: 6rpx;
|
||
font-weight: bold;
|
||
}
|
||
.companyTag {
|
||
border: 1px solid #7a58de;
|
||
color: #7a58de;
|
||
}
|
||
.depTag {
|
||
border: 1px solid #377ec6;
|
||
color: #377ec6;
|
||
}
|
||
.projectTag {
|
||
border: 1px solid #c1681c;
|
||
color: #c1681c;
|
||
}
|
||
.btnBox {
|
||
::v-deep .custom-btn-class {
|
||
padding: 6rpx 24rpx !important;
|
||
width: unset !important;
|
||
min-width: unset !important;
|
||
height: unset !important;
|
||
}
|
||
::v-deep .wd-button__text {
|
||
font-size: 34rpx !important;
|
||
font-weight: 400 !important;
|
||
line-height: 48rpx !important;
|
||
}
|
||
}
|
||
|
||
:deep(.noNvueBorder.round-bl-4) {
|
||
border-top: 1rpx solid #e7e7e7 !important;
|
||
background-color: #ffffff !important;
|
||
|
||
uni-text {
|
||
color: #1a1a1a !important;
|
||
font-size: 32rpx !important;
|
||
line-height: 48rpx !important;
|
||
}
|
||
}
|
||
|
||
:deep(.noNvueBorder.round-br-4) {
|
||
border-top: 1rpx solid #e7e7e7 !important;
|
||
border-left: 1rpx solid #e7e7e7 !important;
|
||
background-color: #ffffff !important;
|
||
|
||
uni-text {
|
||
font-weight: bold;
|
||
color: #46299d !important;
|
||
font-size: 32rpx !important;
|
||
line-height: 48rpx !important;
|
||
}
|
||
}
|
||
</style>
|