<template>
|
<div class="chat_bg" v-if="!loading">
|
<el-container height="620px">
|
<el-aside height="620px" width="300px" class='el_aside'>
|
<ul class="left" v-if="tableData.length>0">
|
<li @click="checked(item)" v-for="(item,index) in tableData" :key="index" :class="user_id==item.user_id?'left_item_active d-s-s':'left_item d-s-s'">
|
<div><img class="left_item_img" :src="item.user.avatarUrl" alt=""></div>
|
<div class="flex-1">
|
<div class="left_item_name">{{item.user.nickName}}</div>
|
<div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==0">
|
{{item.newMessage.content}}</div>
|
<div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==1">[图片]</div>
|
<div class="left_item_content" v-if="item.newMessage!=null&&item.newMessage.type==2">[商品]</div>
|
</div>
|
<div v-if="item.newMessage!=null">{{DateToHM(item.newMessage.create_time)}}</div>
|
<div><span class="close_chat icon iconfont icon-shanchu" @click="closeChat(index)"></span></div>
|
</li>
|
</ul>
|
<ul v-else>
|
<div class="notable">当前尚未建立连接</div>
|
</ul>
|
</el-aside>
|
<el-container>
|
<div v-if="!is_open_socket" class="red danger_tip">当前未连接到服务器，请检查网络或者联系平台是否已开启在线客服</div>
|
<el-main class='right'>
|
<el-header class="chat_header">
|
<div class="content_title">{{conversation}}</div>
|
</el-header>
|
<el-main>
|
<ul class="infinite-list" style="overflow:auto" ref='container'>
|
<li v-for="(item,index) in content_list" :key="index" v-if="content_list!=''">
|
<div :class="item.msg_type == 1 ? 'im_text':'im_text2'" class="m-item">
|
<img class="avatar" v-if="item.msg_type==2" :src="item.user.avatarUrl"></img>
|
<img class="avatar" v-if="item.msg_type==1" :src="item.supplier.logo.file_path"></img>
|
<div>
|
<div class="my_date">{{item.create_time}}</div>
|
<div v-if="item.type==0" :class="item.msg_type == 1?'my_content':'you_content'">
|
<div>{{item.content}}</div>
|
</div>
|
<div v-if="item.type==1" :class="item.msg_type == 1?'my_content':'you_content'">
|
<img @click="clickImg(item.content)" class="cont_img" :src="item.content"></img>
|
</div>
|
<div v-if="item.type==2" :class="item.msg_type == 1?'my_content':'you_content'">
|
<div class="product_txtitem">
|
<div>
|
<img class="pro_img" :src="JSON.parse(item.content).product_img"></img>
|
</div>
|
<div>
|
<div class="pro_txtname">{{JSON.parse(item.content).product_name}}</div>
|
<div class="pro_price">￥{{JSON.parse(item.content).product_price}}</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="item.type==3" :class="item.msg_type == 1?'my_content':'you_content'">
|
<div class="product_txtitem">
|
<div>
|
<img class="pro_img" :src="JSON.parse(item.content).product_img"></img>
|
</div>
|
<div>
|
<div class="pro_txtname">{{JSON.parse(item.content).product_name}}</div>
|
<div class="pro_price">
|
￥共计{{JSON.parse(item.content).order_num}}件商品：合计￥{{JSON.parse(item.content).order_price}}
|
</div>
|
</div>
|
<div>
|
<div class="f12 gray6">订单号:{{JSON.parse(item.content).order_no}}</div>
|
<div class="f12 gray6">创建时间:{{JSON.parse(item.content).create_time}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</el-main>
|
<div v-if="user_id!=0" class="bg-white">
|
<el-upload class="avatar-uploader" multiple ref="upload" action="string" accept="image/jpeg,image/png,image/jpg"
|
:before-upload="onBeforeUploadImage" :http-request="UploadImage" :show-file-list="false" :on-change="fileChange">
|
<span class="icon iconfont icon-tupian"></span>
|
</el-upload>
|
<div>
|
<el-input class="chat_input" resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
|
placeholder="请输入内容" v-model="content">
|
</el-input>
|
</div>
|
<div class="pr btnbox"> <button class="send_btn" @click="sendMessage">发消息</button></div>
|
</div>
|
</el-main>
|
<el-aside class='user_info' width="300px">
|
<div>
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="客户信息" name="first">
|
<div>
|
<h2 class="mb18">客户信息</h2>
|
<ul>
|
<li>
|
<div class="item_top">客户名称</div>
|
<div v-if="info&&info.nickName" class="item_btm">{{info.nickName}}</div>
|
<div v-else class="item_btm">-</div>
|
</li>
|
<li>
|
<div class="item_top">联系方式</div>
|
<div v-if="info&&info.mobile" class="item_btm">{{info.mobile}}</div>
|
<div v-else class="item_btm">-</div>
|
</li>
|
<li>
|
<div class="item_top">客户地址</div>
|
<div v-if="info&&info.city" class="item_btm">{{info.province}}省{{info.city}}市</div>
|
<div v-else class="item_btm">-</div>
|
</li>
|
<li>
|
<div class="item_top">客户性别</div>
|
<div v-if="info&&(info.gender==0||info.gender==1)" class="item_btm">{{info.gender?'男':'女'}}</div>
|
<div v-else class="item_btm">-</div>
|
</li>
|
</ul>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="交易订单" name="second">
|
<div class="order_list">
|
<div class="order_item" v-for="(item,index) in order" :key="index">
|
<div class="order_item_top d-b-c mb8">
|
<div class="item_status blue">{{item.delivery_status.text}}</div>
|
<div>{{item.create_time}}</div>
|
</div>
|
<div class="mb8">
|
<div class="d-s-s" v-for="(proitem,proindex) in item.product" :key="proindex">
|
<div><img class="order_img" :src="proitem.image.file_path" alt=""></div>
|
<div>
|
<div>{{proitem.product_name}}</div>
|
<div v-if="proitem.is_user_grade==1">￥{{proitem.grade_product_price}}X{{proitem.total_num}}
|
</div>
|
<div v-else>￥{{proitem.product_price}}X{{proitem.total_num}}</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div>订单编号:{{item.order_no}}</div>
|
<div>付款时间:{{formatDate(item.pay_time*1000)}}</div>
|
<div>实收款:￥{{item.pay_price}}</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
</el-aside>
|
</el-container>
|
|
<!--上传图片-->
|
</el-container>
|
<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
|
<el-dialog :visible.sync="centerDialogVisible" center>
|
<div>
|
<img :src="chooseimg" alt="">
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ServiceApi from '@/api/service.js';
|
import SettingApi from '@/api/setting.js';
|
import FileApi from '@/api/file.js';
|
import Upload from '@/components/file/Upload';
|
import {
|
setCookie,
|
getCookie
|
} from '@/utils/base';
|
export default {
|
data() {
|
return {
|
loading: false,
|
path: "",
|
socketTask: "",
|
// 确保websocket是打开状态
|
is_open_socket: false,
|
content: '',
|
/*列表数据*/
|
tableData: [],
|
pageSize: 20,
|
/* 联系人页数*/
|
curPage: 1,
|
/* 聊天记录页数*/
|
repage: 1,
|
user_id: 0,
|
app_id: 0,
|
shop_supplier_id: 0,
|
my_id: 0,
|
conversation: '会话',
|
content_list: [],
|
/* 聊天滚动条高度*/
|
scrollHeight: 0,
|
nomore: false,
|
isupload: false,
|
/*当前图片类别*/
|
type: null,
|
file_path: '',
|
logo_file_path: '',
|
user_logo_file_path: '',
|
intervalId: null,
|
centerDialogVisible: false,
|
chooseimg: '',
|
info: {},
|
activeName: "second",
|
order: [],
|
is_destory: false
|
}
|
},
|
components: {
|
Upload
|
},
|
watch: {
|
|
},
|
mounted() {
|
// 初始化
|
this.init();
|
this.getTableList();
|
const container = this.$refs.container;
|
//这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
|
setTimeout(() => {
|
this.scrollHeight = container.scrollHeight;
|
}, 800);
|
container.addEventListener('scroll', (e) => {
|
//这里的2秒钟定时是为了避免滑动频繁，节流
|
setTimeout(() => {
|
//滑到顶部时触发下次数据加载
|
if (e.target.scrollTop == 0 && !this.nomore) {
|
//将scrollTop置为10以便下次滑到顶部
|
e.target.scrollTop = 10;
|
//加载数据
|
this.initData();
|
//这里的定时是为了在列表渲染之后才使用scrollTo。
|
this.$nextTick(() => {
|
let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
|
e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
|
});
|
}
|
}, 2000);
|
});
|
},
|
destroyed() {
|
// 销毁监听
|
this.closeSocket();
|
},
|
methods: {
|
init: function() {
|
let self = this;
|
if (typeof(WebSocket) === "undefined") {
|
alert("您的浏览器不支持socket")
|
} else {
|
let _data = getCookie('baseInfo_supplier');
|
this.path = JSON.parse(getCookie('userinfo_supplier')).url;
|
let json = JSON.parse(_data);
|
this.shop_supplier_id = json.user.shop_supplier_id;
|
this.app_id = json.user.app_id;
|
this.my_id = json.user.supplier_user_id;
|
// 实例化socket
|
this.socketTask = new WebSocket(this.path + '/socket?user_id=' + json.user.user_id + '&usertype=supplier')
|
// 监听socket连接
|
this.socketTask.onopen = this.open;
|
// 监听socket关闭
|
this.socketTask.onclose = this.onclose;
|
// 监听socket错误信息
|
this.socketTask.onerror = this.error;
|
}
|
},
|
open: function() {
|
let self = this;
|
console.log("socket连接成功");
|
self.is_open_socket = true;
|
// 开始发送心跳
|
self.startHeart();
|
// 注：只有连接正常打开中 ，才能正常收到消息
|
self.socketTask.onmessage = this.getMessage;
|
},
|
startHeart() {
|
let self = this;
|
let data = JSON.stringify({
|
type: 'ping',
|
user_id: self.user_id,
|
shop_supplier_id: self.shop_supplier_id,
|
supplier_user_id: self.my_id,
|
msg_type: 1,
|
});
|
|
self.intervalId = setInterval(function() {
|
console.log("发送心跳");
|
self.send(data);
|
}, 10000);
|
},
|
/*socket关闭*/
|
onclose() {
|
let self = this;
|
if (self.is_destory) {
|
return;
|
}
|
|
console.log("已经被关闭了");
|
//重连机制
|
self.socketTask = null;
|
self.is_open_socket = false;
|
clearInterval(self.intervalId);
|
self.init();
|
},
|
error: function(e) {
|
console.log("连接错误");
|
console.log(e);
|
},
|
closeSocket: function() {
|
let self = this;
|
self.is_destory = true;
|
if (self.socketTask == null) {
|
return;
|
}
|
let data = JSON.stringify({
|
type: 'close',
|
from_id: self.my_id,
|
to: self.user_id
|
});
|
self.send(data);
|
self.socketTask.close();
|
self.socketTask = null;
|
self.is_open_socket = false;
|
clearInterval(self.intervalId);
|
},
|
getMessage: function(msg) {
|
let newdata = JSON.parse(msg.data);
|
console.log(newdata);
|
let date = new Date()
|
//绑定用户
|
if (newdata.type == 'init') {
|
ServiceApi.bindUid({
|
client_id: newdata.client_id,
|
}, true).then(res => {
|
console.log("init---绑定uid")
|
});
|
}
|
if (!newdata.content) {
|
return false
|
}
|
/* 接收到非状态消息 */
|
// 播放声音
|
this.relist();
|
let audio = new Audio()
|
audio.src = "./static/imgs/notice.mp3";
|
audio.play();
|
console.log('播放声音')
|
/* 收到当前用户的消息*/
|
if (newdata.user_id == this.user_id && newdata.type != 'init' && newdata.type != 'ping') {
|
let item = {
|
content: newdata.content,
|
user_id: newdata.from_id,
|
type: newdata.type,
|
msg_type:2,
|
create_time: this.formatDate(),
|
user: {
|
avatarUrl: this.info.avatarUrl
|
}
|
}
|
this.content_list = [...this.content_list, item];
|
this.$nextTick(() => {
|
this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
|
});
|
}
|
if (this.tableData.length >= 1) {
|
let flag = false;
|
let n = 0;
|
this.tableData.forEach((olditem, index) => {
|
if (olditem.user_id == newdata.from_id) {
|
flag = true;
|
n = index;
|
}
|
})
|
if (flag) {
|
if (newdata.type != 'init' && newdata.type != 'ping') {
|
this.tableData[n].newMessage.content = newdata.content;
|
this.tableData[n].newMessage.type = newdata.type;
|
this.tableData[n].newMessage.create_time = this.formatDate();
|
}
|
this.relist();
|
} else {
|
if (newdata.from_id && newdata.type != 'init' && newdata.type != 'ping') {
|
ServiceApi.getinfo({
|
user_id: newdata.from_id
|
}, true).then(res => {
|
this.tableData.unshift({
|
avatarUrl: res.data.data.userInfo.avatarUrl,
|
nickName: res.data.data.userInfo.nickName,
|
user_id: res.data.data.userInfo.user_id,
|
newMessage: {
|
content: newdata.content,
|
create_time: newdata.time,
|
type: newdata.type
|
}
|
})
|
});
|
}
|
}
|
} else {
|
ServiceApi.getinfo({
|
user_id: newdata.from_id
|
}, true).then(res => {
|
this.tableData.unshift({
|
avatarUrl: res.data.data.userInfo.avatarUrl,
|
nickName: res.data.data.userInfo.nickName,
|
user_id: res.data.data.userInfo.user_id,
|
newMessage: {
|
content: newdata.content,
|
create_time: newdata.time,
|
type: newdata.type
|
}
|
})
|
});
|
}
|
console.log('收到消息');
|
},
|
newData() {
|
let self = this;
|
let Params = {};
|
Params.user_id = self.user_id;
|
Params.page = 1;
|
ServiceApi.recordlist(Params, true)
|
.then(data => {
|
self.loading = false;
|
let list = data.data.list.data;
|
self.content_list = [...self.content_list, list[0]];
|
})
|
.catch(error => {});
|
},
|
send(data) {
|
let self = this;
|
// 未连接
|
if (!self.is_open_socket) {
|
return;
|
}
|
self.socketTask.send(data);
|
},
|
handleClick() {},
|
sendMessage() {
|
let self = this;
|
if (self.content == '') {
|
return false
|
}
|
// 未连接
|
if (!self.is_open_socket) {
|
return;
|
}
|
let data = JSON.stringify({
|
user_id: self.user_id,
|
shop_supplier_id: self.shop_supplier_id,
|
supplier_user_id: self.my_id,
|
msg_type: 1,
|
type: 0,
|
content: self.content,
|
app_id: self.app_id,
|
|
})
|
let newdata = JSON.parse(data)
|
let date = new Date();
|
let item = {
|
content: newdata.content,
|
user_id: newdata.from_id,
|
type: newdata.type,
|
msg_type: 1,
|
supplier:{
|
logo:{
|
file_path:self.logo_file_path
|
}
|
},
|
create_time: self.formatDate(),
|
}
|
self.content_list = [...self.content_list, item];
|
console.log(self.content_list)
|
self.socketTask.send(data);
|
self.content = '';
|
self.$nextTick(() => {
|
self.relist();
|
self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
|
});
|
},
|
/*获取列表*/
|
getTableList() {
|
let self = this;
|
let Params = {};
|
Params.list_rows = 100;
|
Params.nickName = '';
|
self.loading = true;
|
ServiceApi.servicelist(Params, true)
|
.then(data => {
|
self.loading = false;
|
self.tableData = data.data.list.data;
|
self.logo_file_path = data.data.model.logo.file_path;
|
if (self.tableData.length > 0) {
|
self.checked(self.tableData[0]);
|
}
|
})
|
},
|
initData() {
|
this.repage++;
|
this.getRecordlist();
|
},
|
getRecordlist() {
|
let self = this;
|
let Params = {};
|
Params.user_id = self.user_id;
|
Params.page = self.repage;
|
ServiceApi.recordlist(Params, true)
|
.then(data => {
|
self.loading = false;
|
let list = data.data.list.data.reverse();
|
self.content_list = [...list, ...self.content_list];
|
console.log(self.content_list)
|
if (data.data.list.last_page <= self.repage) {
|
self.nomore = true;
|
}
|
this.scrollHeight = this.$refs.container.scrollHeight;
|
if (self.repage == 1) {
|
self.$nextTick(() => {
|
self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
|
});
|
}
|
})
|
.catch(error => {});
|
},
|
checked(item) {
|
this.user_id = item.user_id;
|
this.conversation = item.nickName;
|
this.user_logo_file_path = item.avatarUrl;
|
this.content_list = [];
|
this.info = {};
|
this.repage = 1;
|
this.nomore = false;
|
this.getRecordlist();
|
this.getUserinfo();
|
},
|
DateToHM(string) {
|
let myDate = new Date();
|
let newsDate = new Date(string);
|
if (string) {
|
if (myDate.toLocaleDateString() == newsDate.toLocaleDateString()) {
|
var f = string.split(' ', 2);
|
var t = (f[1] ? f[1] : '').split(':', 3);
|
var hm = t[0] + ':' + t[1]
|
return hm;
|
} else {
|
return newsDate.toLocaleDateString();
|
}
|
|
} else {
|
return '';
|
}
|
|
},
|
/*选择图片*/
|
chooseImg(e) {
|
this.type = e;
|
this.isupload = true;
|
},
|
|
/*关闭选择图片*/
|
returnImgsFunc(e) {
|
let self = this;
|
console.log(e)
|
if (e != null && e.file_path !='') {
|
self.file_path = e.file_path;
|
let data = JSON.stringify({
|
user_id: self.user_id,
|
shop_supplier_id: self.shop_supplier_id,
|
supplier_user_id: self.my_id,
|
msg_type: 1,
|
type: 1,
|
usertype: 'supplier',
|
content: self.file_path,
|
app_id: self.app_id
|
})
|
let newdata = JSON.parse(data);
|
let date = new Date();
|
let item = {
|
content: newdata.content,
|
user_id: newdata.from_id,
|
type: newdata.type,
|
msg_type: 1,
|
create_time: self.formatDate(),
|
supplier:{
|
logo:{
|
file_path:self.logo_file_path
|
}
|
},
|
}
|
this.content_list = [...this.content_list, item];
|
self.socketTask.send(data);
|
self.$nextTick(() => {
|
self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
|
});
|
}
|
self.isupload = false;
|
},
|
clickImg(path) {
|
this.centerDialogVisible = true;
|
this.chooseimg = path;
|
},
|
closeChat(i) {
|
this.tableData.splice(i, 1)
|
},
|
relist() {
|
let self = this;
|
let Params = {};
|
Params.list_rows = 20;
|
Params.nickName = '';
|
ServiceApi.servicelist(Params, true)
|
.then(data => {
|
self.tableData = data.data.list.data;
|
})
|
},
|
formatDate(time) {
|
let date = new Date();
|
if (time) {
|
date = new Date(time);
|
}
|
let year = date.getFullYear(); // 年
|
let month = date.getMonth() + 1; // 月
|
let day = date.getDate(); // 日
|
let week = date.getDay(); // 星期
|
let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
let hour = date.getHours(); // 时
|
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
|
let minute = date.getMinutes(); // 分
|
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
|
let second = date.getSeconds(); // 秒
|
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
|
return `${year}/${month}/${day} ${hour}:${minute}`;
|
},
|
getUserinfo() {
|
let self = this;
|
ServiceApi.getinfo({
|
user_id: this.user_id
|
}, true).then(res => {
|
self.info = res.data.data.userInfo;
|
self.order = res.data.data.orderList;
|
});
|
},
|
dateConversion(str) {
|
let date = '';
|
date = new Date(Date.parse(str.replace(/-/g, "/")));
|
date = date.getTime();
|
return date
|
},
|
/*选择上传图片*/
|
fileChange(e) {
|
console.log(e);
|
},
|
|
/*选择图片之前*/
|
onBeforeUploadImage(file) {
|
const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
|
const isLt1M = file.size / 1024 / 1024 < 2;
|
if (!isIMAGE) {
|
this.$message.error('上传文件只能是图片格式!');
|
}
|
if (!isLt1M) {
|
this.$message.error('上传文件大小不能超过 2MB!');
|
}
|
return isIMAGE && isLt1M;
|
},
|
|
/*上传图片*/
|
UploadImage(param) {
|
let self = this;
|
const loading = this.$loading({
|
lock: true,
|
text: '图片上传中,请等待',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
const formData = new FormData();
|
formData.append('iFile', param.file);
|
formData.append("group_id", self.activeType);
|
FileApi.uploadFile(formData)
|
.then(response => {
|
loading.close();
|
self.returnImgsFunc(response.data)
|
})
|
},
|
},
|
}
|
</script>
|
|
<style>
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
|
.left {
|
background-color: #F0F0F0;
|
|
}
|
|
.right {
|
margin-left: 30px;
|
background-color: rgba(242, 242, 242, 0.5);
|
box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
|
margin: 5px;
|
}
|
|
.left_item {
|
padding: 8px 15px;
|
border-bottom: 1px solid #cccccc;
|
background: #F0F0F0;
|
}
|
|
.left_item_active {
|
padding: 8px 15px;
|
border-bottom: 1px solid #cccccc;
|
background: #FFFFFF;
|
}
|
|
.left_item_img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.left_item_name {
|
font-size: 14px;
|
margin-left: 10px;
|
}
|
|
.left_item_content {
|
color: rgb(153, 153, 153);
|
font-size: 12px;
|
margin-left: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
line-clamp: 1;
|
-webkit-box-orient: vertical;
|
}
|
|
.im_text {
|
/* width: 100%; */
|
display: flex;
|
margin-top: 30px;
|
flex-direction: row-reverse;
|
position: relative;
|
}
|
|
.im_text2 {
|
/* width: 100%; */
|
display: flex;
|
margin-top: 30px;
|
position: relative;
|
}
|
|
.im_text .avatar {
|
width: 40px;
|
height: 40px;
|
margin-left: 5px;
|
border-radius: 10px;
|
background-color: #000000;
|
align-items: flex-start;
|
}
|
|
.im_text2 .avatar {
|
width: 40px;
|
height: 40px;
|
margin-right: 5px;
|
border-radius: 10px;
|
background-color: #000000;
|
align-items: flex-start;
|
}
|
|
.you_content,
|
.my_content {
|
background-color: #FFFFFF;
|
margin-top: 15px;
|
}
|
|
.im_text .my_content {
|
max-width: 450px;
|
align-items: flex-start;
|
border-radius: 10px;
|
padding: 10px;
|
box-sizing: border-box;
|
word-break: break-all;
|
}
|
|
.im_text2 .my_content {
|
max-width: 450px;
|
align-items: flex-start;
|
border-radius: 10px;
|
padding: 10px;
|
box-sizing: border-box;
|
word-break: break-all;
|
}
|
|
.im_text .you_content {
|
max-width: 450px;
|
align-items: flex-start;
|
border-radius: 10px;
|
padding: 10px;
|
box-sizing: border-box;
|
word-break: break-all;
|
}
|
|
.im_text2 .you_content {
|
max-width: 450px;
|
align-items: flex-start;
|
border-radius: 10px;
|
padding: 10px;
|
box-sizing: border-box;
|
word-break: break-all;
|
}
|
|
.infinite-list {
|
height: 400px;
|
padding: 15px;
|
}
|
|
.el-main {
|
padding: 0;
|
|
}
|
|
.chat_header {
|
border-bottom: 1px solid #CACACA;
|
margin-bottom: 10px;
|
line-height: 60px;
|
background-color: #FFFFFF;
|
}
|
|
.content_title {
|
font-size: 16px;
|
}
|
|
.my_content {
|
box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
|
}
|
|
.you_content {
|
box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
|
}
|
|
.pro_img {
|
height: 100px;
|
width: 100px;
|
border-radius: 10px;
|
background-color: #FFFFFF;
|
}
|
|
.pro_txtname {
|
max-width: 100px;
|
font-size: 14px;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
.pro_price {
|
font-size: 12px;
|
color: #E2231A;
|
}
|
|
.chat_input {
|
border: none;
|
font-weight: 400;
|
font-style: normal;
|
font-size: 13px;
|
line-height: normal;
|
color: #000000;
|
text-align: left;
|
border-width: 0px;
|
outline: none;
|
margin-bottom: 10px;
|
width: 95%;
|
|
|
}
|
|
.chat_input textarea {
|
outline: none;
|
border: none;
|
}
|
|
.send_btn {
|
border-width: 0px;
|
width: 100px;
|
height: 40px;
|
background: inherit;
|
background-color: rgba(0, 110, 255, 0.898039215686275);
|
border: none;
|
border-radius: 2px;
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
font-weight: 400;
|
font-style: normal;
|
color: #FFFFFF;
|
line-height: 20px;
|
position: absolute;
|
outline: none;
|
right: 7px;
|
top: 5px;
|
}
|
|
.btnbox {
|
height: 50px;
|
background-color: #FFFFFF;
|
}
|
|
.bg-white {
|
background-color: #FFFFFF;
|
}
|
|
.cont_img {
|
width: 100px;
|
height: 100px;
|
border-radius: 10px;
|
}
|
|
.chat_bg {
|
background: rgba(242, 242, 242, 0.5);
|
margin: -16px;
|
height: calc(100vh - 90px);
|
}
|
|
.el_aside {
|
box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
|
margin: 5px;
|
}
|
|
.icon-tupian:hover {
|
color: #1296db;
|
}
|
|
.notable {
|
text-align: center;
|
background: #ffffff;
|
padding: 30px;
|
font-size: 17px;
|
}
|
|
.my_date {
|
color: #cccccc;
|
font-size: 12px;
|
position: absolute;
|
top: -10px;
|
}
|
|
.im_text .my_date {
|
right: 45px;
|
}
|
|
.user_info {
|
box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
|
margin: 5px;
|
background-color: #FFFFFF;
|
padding: 30px;
|
max-height: calc(100vh - 128px);
|
}
|
|
.item_top {
|
color: #CCCCCC;
|
margin-bottom: 8px;
|
}
|
|
.item_btm {
|
font-size: 13px;
|
color: #333333;
|
margin-bottom: 18px;
|
}
|
|
.order_img {
|
width: 50px;
|
height: 50px;
|
}
|
|
.order_item_top {
|
background-color: #f3f3f3;
|
padding: 5px 16px;
|
border-radius: 6px;
|
margin-top: 18px;
|
}
|
|
.danger_tip {
|
position: absolute;
|
top: 50px;
|
left: 0;
|
width: 100%;
|
text-align: center;
|
}
|
|
.avatar-uploader .icon-tupian.icon.iconfont {
|
font-size: 22px;
|
margin-left: 10px;
|
}
|
|
.left .icon-shanchu.icon.iconfont {
|
cursor: pointer;
|
color: #999999;
|
font-size: 14px;
|
margin-left: 5px;
|
}
|
</style>
|
