Joywork/templates/modals/chat_cian_avito.php
2026-05-22 21:21:54 +03:00

608 lines
37 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
.chat-cian {
position: fixed;
top: 0;
right: 0;
z-index: 99999;
min-width: 950px;
max-width: 950px;
-webkit-box-shadow: 0px 0px 24px rgba(0,0,0,0.15);
box-shadow: 0px 0px 24px rgba(0,0,0,0.15);
border-radius: 5px;
margin: 0 auto;
}
.chat-cian * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.chat-block_cian__left_list {
background: #FFFFFF;
min-height: 100%;
/* border-right: 1px solid #DEDEDE;*/
overflow: hidden;
/* width: 0;
min-width: 0;*/
}
.chat-block_cian__left_list {
height: 487px;
overflow-y: auto;
margin-right: 5px;
background-clip: content-box;
}
.chat-cian .chat-block__left_item-icon {
overflow:unset;
}
.chat-cian .chat-block__left_item-icon img {
border-radius: 5px;
}
a.message__block_name{
font-weight: 600;
font-size: 14px;
color: #73A1FB;
margin-bottom: 5px;
border: none;
background-color: transparent;
cursor: pointer;
}
.quantity-participant-cian button{
position: relative;
margin-left: 10px;
padding: 3px 15px 6px;
font-size: 14px;
}
.chat-block__top_right-icons .jw__g-button{
position: relative;
padding: 3px 15px 6px;
font-size: 14px;
}
/*.chat-block_cian__left_list.show {
width: 337px;
min-width: 337px
}*/
</style>
<div id="chat_cian" class="chat-cian hidden" v-show="isShowCian">
<div id="chat-spinner" style="position: absolute;width: 100%;height: 100%;background: white;z-index: 999;opacity: 50%;display: none;">
<div style="display: block;position: absolute;text-align: center;top: 50%;left: calc(50% + 55px);margin-top: -48px;margin-left: -48px;z-index: 10;">
<img src="/images/rocket-spinner.svg" width="96px">
</div>
</div>
<div class="chat-block__top">
<div class="chat-block__top_left">
<button class="chat-block__top_left-burger">
<span></span>
<span></span>
<span></span>
</button>
<div class="chat-block__top_left-icon">
<img src="/images/chat/chat-icon.png" alt="img" style="display:none">
</div>
<button class="chat-block__top_left-add" style="display:none">
<img src="/images/chat/plus-icon.svg" alt="img">
</button>
<div class="modal-add">
<div class="modal-add__wrapper">
<div class="modal-add__one">
<div class="modal-add__one_input" style="display: none;">
<form action="#">
<input type="text" placeholder="Поиск контакта">
<button class="modal-add__one_input-btn">
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</form>
</div>
<!-- <div class="modal-add__one_btn" id="agencyChatCreate">
<button>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</button>
<span>
Создать чат агентства
</span>
</div>-->
<div class="modal-add__one_btn" id="otherChatCreate">
<button>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</button>
<span>
Создать беседу
</span>
</div>
<div class="modal-add__one_list" style="display: none;"></div>
</div>
<div class="modal-add__two">
<form action="#">
<div class="modal-add__two_input">
<input type="text" id="chatGroupName" placeholder="Введите название группы">
</div>
<div class="modal-add__two_list" style="display: none;">
</div>
<button type="button" class="modal-add__two_btn create-agency-channel">
Создать
</button>
<button type="button" class="modal-add__two_btn cancel-add">
Отменить
</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat-block__top_right">
<div class="chat-block__top_right-text">
<span class="name-chat-cian">{{ nameGroup }}</span>
<span class="quantity-participant-cian">
<a href="javascript:{}" @click="openObjectCard" class="message__block_name">{{ nameChat }}</a>
</span>
</div>
<div class="chat-block__top_right-icons">
<form class="chat-block__top_right-form" style="display: none;">
<input placeholder="Поиск" type="text" class="search">
<button>
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</form>
<button class="dots chat-block__top_right-btn dots-modal-show" style="display: none;">
<img src="/images/chat/menu-icon.svg" alt="img">
</button>
<button v-if="!isEmpty(nameChat)" @click="openReqForm" class="jw__g-button">Создать заявку</button>
<button @click="close_cian" class="closed chat-block__top_right-btn">
<img src="/images/chat/close-icon.svg" alt="img">
</button>
<div class="dots-modal">
<button class="dots-modal__btn1">
<span>Данные группы</span>
</button>
<button class="dots-modal__btn2" style="display: none;">
<span>Добавить в группу</span>
</button>
<button class="dots-modal__btn3">
<span>Очистить чат</span>
</button>
<button class="dots-modal__btn4">
<span>Выйти из группы</span>
</button>
</div>
<div class="dots-modal__add">
<form action="#">
<!--<div class="dots-modal__add_input">
<input type="text" placeholder="Поиск контакта">
<button>
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</div>-->
<div class="dots-modal__add_list">
</div>
<button class="dots-modal__add_btn" type="button" onclick="addUsersToChannel(); event.preventDefault(); event.stopPropagation(); return false;">
Добавить
</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat-block__wrapper">
<div class="chat-block__left show">
<div class="chat-block__left_wrapper">
<div class="chat-block__left_search" style="display: none;">
<form action="#">
<div class="chat-block__left_search-input">
<input name="search-contact" type="text" placeholder="Поиск контакта">
<button class="chat-block__left_search-icon">
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</div>
</form>
</div>
<div class="chat-block_cian__left_list">
<template v-for="(chat, chatId) in chats">
<div @click="open_chat(chatId)" class="chat-block__left_item" :class="{'active': chat.is_active}">
<div class="chat-block__left_item-icon">
<img v-if="chat.offers && chat.offers[0].mainPhoto" :src="chat.offers[0].mainPhoto.miniUrl" alt="img">
</div>
<div class="chat-block__left_item-text">
<span class="name ">{{ chat.users[0].name }}</span>
<span class="letter" v-if="chat.offers">{{ chat.offers[0].title }}</span>
<span class="when">{{ chat.chats[0].update_at }}</span>
</div>
<div class="chat-block__left_item-quantity" v-if="chat.new_mes && chat.new_mes > 0">{{ chat.new_mes }}</div>
</div>
</template>
</div>
</div>
</div>
<div class="chat-block__right show">
<div class="chat-block__right_wrapper">
<div class="chat-block__right_field" id="chat-content-cian">
<div v-if="error" style="font-weight: bold;margin: 100px 0;text-align: center;font-size: 20px;">
{{ error_mes }}
</div>
<!-- <div class="chat-block__right_field-when">Сегодня</div>-->
<div v-for="mes in listMessage" v-show="!error" class="message">
<div class="message__block">
<button class="message__block_name">{{ mes.userName }}</button>
<span class="message__block_text">{{ mes.content.text }}</span>
<span class="message__block_time">{{ mes.createdAt }}</span>
</div>
</div>
</div>
<div class="chat-block__right_bottom">
<div>
<div class="chat-block__right_bottom-textarea">
<button class="attach" style="display: none;">
<img src="/images/chat/paper-clip-icon.svg" alt="img">
</button>
<textarea placeholder="Написать сообщение" v-model="text_mes"></textarea>
<button type="button" class="send" @click="send_mes_cian">
отправить
</button>
</div>
</div>
</div>
</div>
<!-- <div class="group-data">
<div class="group-data__top">
<table style="width: 100%;">
<tr>
<td style="width: 128px;">
<div class="group-data__top_icon" style="cursor: pointer;">
<img id="chatGroupImage" src="/images/chat/group.png" alt="img">
</div>
</td>
<td>
<div class="group-data__top_text">
<div class="group-data__top_text-name">
<span class="name" id="chatExtInfoName">
Название группы
</span>
<div class="rename-input">
<form action="#">
<input type="text" id="chatGroupNameInput" placeholder="Название группы">
<button class="rename-input__btn" onclick="renameChatGroup(); return false;">
<img src="/images/chat/check-icon.svg" alt="img">
</button>
</form>
</div>
</div>
<div class="group-data__top_text-create" id="chatExtInfoDate">
Создана 12.06.2021 15:34
</div>
<div class="group-data__top_text-add" style="display: none;">
<button class="add">
<span>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</span>
<span>Добавить участника</span>
</button>
</div>
</div>
</td>
<td style="width: 25px;">
<button class="group-data__top_rename">
<img src="/images/chat/rename-icon.svg" alt="img">
</button>
</td>
<td style="width: 25px;vertical-align: top;">
<button class="group-data__top_close">
<img src="/images/chat/close-icon.svg" alt="img">
</button>
</td>
</tr>
<tr id="changeGroupAvatarBlock" style="display: none;">
<td colspan="4" style="padding-top: 10px;">
<input type="text" class="chat-group-avatar-input" id="chatGroupAvatarInput" placeholder="Ссылка на аватар группы">
<button class="change-avatar-input__btn" onclick="changeAvatarForGroup(); return false;">
<img src="/images/chat/check-icon.svg" alt="img">
</button>
</td>
</tr>
</table>
</div>
<div class="group-data__center">
<div class="group-data__center_title">
Участники группы
</div>
<div class="group-data__center_list">
</div>
</div>
<div class="group-data__bottom">
<button class="group-data__bottom_btn" onclick="if (confirm('Удалить беседу безвозвратно?')) {deleteGroup(); return false;}">
<img src="/images/chat/remove-icon_big.svg" alt="img">
</button>
<div class="group-data__bottom_text">
Удалить группу
</div>
</div>
</div>-->
</div>
</div>
</div>
<div id="chat_avito" class="chat-cian hidden" v-show="isShowAvito">
<div id="chat-spinner" style="position: absolute;width: 100%;height: 100%;background: white;z-index: 999;opacity: 50%;display: none;">
<div style="display: block;position: absolute;text-align: center;top: 50%;left: calc(50% + 55px);margin-top: -48px;margin-left: -48px;z-index: 10;">
<img src="/images/rocket-spinner.svg" width="96px">
</div>
</div>
<div class="chat-block__top">
<div class="chat-block__top_left">
<button class="chat-block__top_left-burger">
<span></span>
<span></span>
<span></span>
</button>
<div class="chat-block__top_left-icon">
<img src="/images/chat/chat-icon.png" alt="img" style="display:none">
</div>
<button class="chat-block__top_left-add" style="display:none">
<img src="/images/chat/plus-icon.svg" alt="img">
</button>
<div class="modal-add">
<div class="modal-add__wrapper">
<div class="modal-add__one">
<div class="modal-add__one_input" style="display: none;">
<form action="#">
<input type="text" placeholder="Поиск контакта">
<button class="modal-add__one_input-btn">
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</form>
</div>
<!-- <div class="modal-add__one_btn" id="agencyChatCreate">
<button>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</button>
<span>
Создать чат агентства
</span>
</div>-->
<!--<div class="modal-add__one_btn" id="otherChatCreate">
<button>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</button>
<span>
Создать беседу
</span>
</div>-->
<div class="modal-add__one_list" style="display: none;"></div>
</div>
<div class="modal-add__two">
<form action="#">
<div class="modal-add__two_input">
<input type="text" placeholder="Введите название группы">
</div>
<div class="modal-add__two_list" style="display: none;">
</div>
<button type="button" class="modal-add__two_btn create-agency-channel">
Создать
</button>
<button type="button" class="modal-add__two_btn cancel-add">
Отменить
</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat-block__top_right">
<div class="chat-block__top_right-text">
<span class="name-chat-cian">{{ nameGroup }}</span>
<span class="quantity-participant-cian">
<a href="javascript:{}" @click="openObjectCard" class="message__block_name">{{ nameChat }}</a>
</span>
</div>
<div class="chat-block__top_right-icons">
<form class="chat-block__top_right-form" style="display: none;">
<input placeholder="Поиск" type="text" class="search">
<button>
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</form>
<button class="dots chat-block__top_right-btn dots-modal-show" style="display: none;">
<img src="/images/chat/menu-icon.svg" alt="img">
</button>
<button v-if="!isEmpty(nameChat)" @click="openReqForm" class="jw__g-button">Создать заявку</button>
<button @click="close_avito" class="closed chat-block__top_right-btn">
<img src="/images/chat/close-icon.svg" alt="img">
</button>
<div class="dots-modal">
<button class="dots-modal__btn1">
<span>Данные группы</span>
</button>
<button class="dots-modal__btn2" style="display: none;">
<span>Добавить в группу</span>
</button>
<button class="dots-modal__btn3">
<span>Очистить чат</span>
</button>
<button class="dots-modal__btn4">
<span>Выйти из группы</span>
</button>
</div>
<div class="dots-modal__add">
<form action="#">
<!--<div class="dots-modal__add_input">
<input type="text" placeholder="Поиск контакта">
<button>
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</div>-->
<div class="dots-modal__add_list">
</div>
<button class="dots-modal__add_btn" type="button" onclick="addUsersToChannel(); event.preventDefault(); event.stopPropagation(); return false;">
Добавить
</button>
</form>
</div>
</div>
</div>
</div>
<div class="chat-block__wrapper">
<div class="chat-block__left show">
<div class="chat-block__left_wrapper">
<div class="chat-block__left_search" style="display: none;">
<form action="#">
<div class="chat-block__left_search-input">
<input name="search-contact" type="text" placeholder="Поиск контакта">
<button class="chat-block__left_search-icon">
<img src="/images/chat/search-icon.svg" alt="img">
</button>
</div>
</form>
</div>
<div class="chat-block_cian__left_list">
<template v-for="(chat, chatId) in chats">
<div @click="open_chat(chatId)" class="chat-block__left_item" :class="{'active': chat.is_active}">
<div class="chat-block__left_item-icon">
<img style="height:45px;" v-if="chat.details.context.value.images.main.img" :src="chat.details.context.value.images.main.img" alt="img">
</div>
<div class="chat-block__left_item-text">
<span class="name ">{{ chat.details.users[0].name }}</span>
<span class="letter">{{ chat.details.context.value.title }}</span>
<span class="when">{{ chat.update }}</span>
</div>
<div class="chat-block__left_item-quantity" v-if="chat.new_mess && chat.new_mess > 0">{{ chat.new_mess }}</div>
</div>
</template>
</div>
</div>
</div>
<div class="chat-block__right show">
<div class="chat-block__right_wrapper">
<div class="chat-block__right_field" id="chat-content-avito">
<div v-if="error" style="font-weight: bold;margin: 100px 0;text-align: center;font-size: 20px;">
{{ error_mes }}
</div>
<!-- <div class="chat-block__right_field-when">Сегодня</div>-->
<div v-for="mes in listMessage" v-show="!error" class="message">
<div class="message__block">
<button class="message__block_name">{{ mes.userName }}</button>
<span class="message__block_text">{{ mes.details.payload.value.content.text }}</span>
<span class="message__block_time">{{ mes.create }}</span>
</div>
</div>
</div>
<div class="chat-block__right_bottom">
<div>
<div class="chat-block__right_bottom-textarea">
<button class="attach" style="display: none;">
<img src="/images/chat/paper-clip-icon.svg" alt="img">
</button>
<textarea placeholder="Написать сообщение" v-model="text_mes"></textarea>
<button type="button" class="send" @click="send_mes_cian">
отправить
</button>
</div>
</div>
</div>
</div>
<!-- <div class="group-data">
<div class="group-data__top">
<table style="width: 100%;">
<tr>
<td style="width: 128px;">
<div class="group-data__top_icon" style="cursor: pointer;">
<img id="chatGroupImage" src="/images/chat/group.png" alt="img">
</div>
</td>
<td>
<div class="group-data__top_text">
<div class="group-data__top_text-name">
<span class="name" id="chatExtInfoName">
Название группы
</span>
<div class="rename-input">
<form action="#">
<input type="text" id="chatGroupNameInput" placeholder="Название группы">
<button class="rename-input__btn" onclick="renameChatGroup(); return false;">
<img src="/images/chat/check-icon.svg" alt="img">
</button>
</form>
</div>
</div>
<div class="group-data__top_text-create" id="chatExtInfoDate">
Создана 12.06.2021 15:34
</div>
<div class="group-data__top_text-add" style="display: none;">
<button class="add">
<span>
<img src="/images/chat/plus-icon-mini.svg" alt="img">
</span>
<span>Добавить участника</span>
</button>
</div>
</div>
</td>
<td style="width: 25px;">
<button class="group-data__top_rename">
<img src="/images/chat/rename-icon.svg" alt="img">
</button>
</td>
<td style="width: 25px;vertical-align: top;">
<button class="group-data__top_close">
<img src="/images/chat/close-icon.svg" alt="img">
</button>
</td>
</tr>
<tr id="changeGroupAvatarBlock" style="display: none;">
<td colspan="4" style="padding-top: 10px;">
<input type="text" class="chat-group-avatar-input" id="chatGroupAvatarInput" placeholder="Ссылка на аватар группы">
<button class="change-avatar-input__btn" onclick="changeAvatarForGroup(); return false;">
<img src="/images/chat/check-icon.svg" alt="img">
</button>
</td>
</tr>
</table>
</div>
<div class="group-data__center">
<div class="group-data__center_title">
Участники группы
</div>
<div class="group-data__center_list">
</div>
</div>
<div class="group-data__bottom">
<button class="group-data__bottom_btn" onclick="if (confirm('Удалить беседу безвозвратно?')) {deleteGroup(); return false;}">
<img src="/images/chat/remove-icon_big.svg" alt="img">
</button>
<div class="group-data__bottom_text">
Удалить группу
</div>
</div>
</div>-->
</div>
</div>
</div>
<div id="error_message_chats" class="hidden">
<div v-show="is_show" class="f__modal-bg" style="z-index: 99999;">
<div v-show="is_show" class="f__modal full-modal" style="padding-bottom: 20px; width:560px">
<span class="pseudo-link closer" @click="close"><i class="ti-close"></i></span>
<h3>Ошибка!</h3>
<div style="font-size: 18px; padding-bottom: 15px;">
Cообщения не настроены!
</div>
<div class="video-frame" style="font-size:18px; padding-bottom: 15px;">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/vue_scripts/chat_cian_avito_vue.js?<?=filemtime($_SERVER['DOCUMENT_ROOT'].'/js/vue_scripts/chat_cian_avito_vue.js')?>"></script>