349 lines
8.5 KiB
Vue
349 lines
8.5 KiB
Vue
<template>
|
||
<el-container class="mainNoBack userBox">
|
||
<el-aside class="userAside" width="220px">
|
||
<el-container>
|
||
<el-main class="nopadding">
|
||
<div class="contacts">
|
||
<div class="contactsTitle">联系人</div>
|
||
<div class="bodyView">
|
||
<div class="itemCol" v-for="(item,index) in contactsList" :key="index">
|
||
<div class="avatar">
|
||
<el-avatar :size="36" src="https://fsd/ad/png" fit="contain">
|
||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||
</el-avatar>
|
||
</div>
|
||
<div class="viewRight">
|
||
<div class="title">{{item.name==""?'匿名':item.name}}</div>
|
||
<div class="msg">{{item.msg}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-aside>
|
||
<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
|
||
<div class="mainBody">
|
||
<div class="mainTitle">龙隆</div>
|
||
<div class="mainView">
|
||
<el-scrollbar ref="scrollbar">
|
||
<div class="msgList">
|
||
<div class="msgItem" :class="user_id === item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
|
||
<div class="avatar" v-if="user_id != item.to_user_id">
|
||
<el-avatar :size="36" :src="item.avatar" fit="contain">
|
||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||
</el-avatar>
|
||
</div>
|
||
<div class="msgText">
|
||
<div class="msgTitle">{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}</div>
|
||
<div class="textCom">
|
||
<div v-html="item.to_message"></div>
|
||
</div>
|
||
</div>
|
||
<div class="avatar" v-if="user_id === item.to_user_id">
|
||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
|
||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||
</el-avatar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
<div class="mainFooter">
|
||
<div class="tagList">
|
||
<div class="tagItem"><el-icon size="18"><sc-icon-Attachment/></el-icon></div>
|
||
<div class="tagItem"><el-icon size="18"><sc-icon-Record/></el-icon></div>
|
||
<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
|
||
</div>
|
||
<div class="sendView">
|
||
<el-input v-model="params.to_message" class="customTextarea" type="textarea" placeholder="请输入.." :rows="3" resize="none"></el-input>
|
||
<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
|
||
<el-icon size="22"><sc-icon-SendCustom /></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
<el-aside class="userAside" width="260px">
|
||
<el-container>
|
||
<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
|
||
<div class="contactsUserInfo">
|
||
<div class="contactsTitle">
|
||
<el-avatar :size="56" src="https://fsd/ad/png" fit="contain">
|
||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||
</el-avatar>
|
||
</div>
|
||
<div class="bodyView">
|
||
<div class="itemCol">
|
||
<div class="name">昵称</div>
|
||
<div class="text">龙隆</div>
|
||
</div>
|
||
<div class="itemCol">
|
||
<div class="name">手机号</div>
|
||
<div class="text">18998321489</div>
|
||
</div>
|
||
<div class="itemCol">
|
||
<div class="name">邮箱</div>
|
||
<div class="text">263489003@qq.com</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-aside>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import {eventBus} from "@/utils/eventBus";
|
||
|
||
export default {
|
||
name: "faq",
|
||
data(){
|
||
return{
|
||
contactsList:[
|
||
{name:"龙隆",msg:"嘻嘻"},
|
||
{name:"骁骁",msg:"测试信息"},
|
||
{name:"管理员",msg:"怎么能快速挣够一百万"},
|
||
{name:"",msg:"真机运行不需要检查更新，真机运行时appid固定为'HBuilder'"},
|
||
{name:"",msg:"真机运行不需要检查更新，真机运行时appid固定为'HBuilder'"},
|
||
],
|
||
msgList:[],
|
||
user_id:0,
|
||
|
||
params:{
|
||
to_user_id:"",
|
||
to_message:"",
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||
this.user_id = userInfo.id;
|
||
this.params.to_user_id = userInfo.id;
|
||
|
||
// 获取新消息
|
||
eventBus.$on('sockBack', this.getWsResult);
|
||
},
|
||
methods:{
|
||
getWsResult(res){
|
||
if(res.data && (res.data.type == 36 || res.data.type == 37)){
|
||
switch(res.data.type) {
|
||
case 36:
|
||
this.msgList = res.data.rows;
|
||
this.scrollDown();
|
||
break;
|
||
case 37:
|
||
this.params.to_user_id = res.data.user.uid;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
|
||
async sendCustomer() {
|
||
if(this.params.to_message =="") return
|
||
const res = await this.$API.customer.send.post(this.params);
|
||
if(res.code == 200){
|
||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||
this.msgList.push({
|
||
to_user_id:userInfo.id,
|
||
from_user:{
|
||
name:userInfo.name,
|
||
avatar:userInfo.avatar
|
||
},
|
||
to_message:this.params.to_message
|
||
});
|
||
this.params.to_message = "";
|
||
this.scrollDown();
|
||
}
|
||
},
|
||
|
||
scrollDown() {
|
||
this.$nextTick(() => {
|
||
const wrap = this.$refs.scrollbar;
|
||
if(wrap){
|
||
const e = wrap.$el.querySelector('.el-scrollbar__wrap')
|
||
e.scrollTop = e.scrollHeight;
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .noBorderRadius{border-radius: 0;}
|
||
.contacts{
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.contactsTitle{
|
||
padding: 5px 10px;
|
||
font-size: 14px;
|
||
}
|
||
.bodyView{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 5px;
|
||
.itemCol{
|
||
padding: 10px 8px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
.viewRight{
|
||
margin-left: 10px;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
.title{
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.msg{
|
||
width: 100%;
|
||
color: #888888;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
.itemCol:hover{
|
||
background: #F6FBFF;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.contactsUserInfo{
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 10px;
|
||
.contactsTitle{
|
||
padding: 20px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid #F6F6F6;
|
||
}
|
||
.bodyView{
|
||
flex:1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px 5px;
|
||
.itemCol{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
.name{
|
||
color: #888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mainBody{
|
||
height: 100%;
|
||
padding: 15px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.mainTitle{
|
||
border-bottom: 1px solid #F6F6F6;
|
||
padding-bottom: 10px;
|
||
margin: 0 10px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
.mainView{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
padding-bottom: 10px;
|
||
.msgList{
|
||
padding: 10px;
|
||
.msgItem{
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
.avatar{
|
||
padding-right: 10px;
|
||
}
|
||
.msgText{
|
||
.msgTitle{
|
||
padding:0 0 8px 0;
|
||
color: #555;
|
||
}
|
||
.textCom{
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
}
|
||
.msgRightItem{
|
||
justify-content: flex-end;
|
||
.avatar{
|
||
padding-left: 10px;
|
||
padding-right: 0;
|
||
}
|
||
.msgText{
|
||
.msgTitle{
|
||
text-align: right;
|
||
}
|
||
.textCom{
|
||
background: var(--el-color-primary);
|
||
color: var(--el-color-white);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mainFooter{
|
||
margin: 0 10px 5px 10px;
|
||
padding: 10px 0;
|
||
border: 1px solid #F6F6F6;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
.tagList{
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #F6F6F6;
|
||
padding-bottom: 10px;
|
||
.tagItem{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
.customTextarea{
|
||
font-size:13px;
|
||
::v-deep .el-textarea__inner{
|
||
box-shadow: none;
|
||
border: 0;
|
||
padding:10px 35px 10px 10px;
|
||
}
|
||
::v-deep .el-textarea__inner::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
.saveBtn{
|
||
position: absolute;
|
||
bottom:20px;
|
||
right: 10px;
|
||
z-index: 10;
|
||
color: #A8ABB2;
|
||
border-radius: 3px;
|
||
cursor: not-allowed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.saveActive{
|
||
cursor: pointer;
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
}
|
||
</style>
|