|
|
@@ -11,7 +11,7 @@
|
|
|
<span>留言列表</span>
|
|
|
</div>
|
|
|
<div class="row center allAlignment">
|
|
|
- <el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择">
|
|
|
+ <el-select v-model="value" size="mini" @change="getStartEndAjaxTime(value)" style="width: 28%;" placeholder="请选择">
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.value"
|
|
|
@@ -33,29 +33,38 @@
|
|
|
</div>
|
|
|
<div style="margin:0 20px;">
|
|
|
<el-table
|
|
|
- :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
|
|
- :row-style="{background:'#ffffff',color:'#606266'}"
|
|
|
- :data="tableData"
|
|
|
- stripe
|
|
|
- @row-dblclick="click_row"
|
|
|
- style="width: 100%;"
|
|
|
+ :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
|
|
+ :row-style="{background:'#ffffff',color:'#606266'}"
|
|
|
+ :data="tableData"
|
|
|
+ stripe
|
|
|
+ @row-dblclick="click_row"
|
|
|
+ :size="size"
|
|
|
+ style="width: 100%;"
|
|
|
>
|
|
|
- <el-table-column prop="name" width="140" label="用户名"></el-table-column>
|
|
|
- <el-table-column prop="add_time" label="留言时间" ></el-table-column>
|
|
|
- <el-table-column prop="content" label="留言内容"></el-table-column>
|
|
|
- <el-table-column prop="phone" label="手机"></el-table-column>
|
|
|
- <el-table-column prop="email" label="邮箱"></el-table-column>
|
|
|
- <el-table-column prop="message_status" label="当前状态">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span style="color:#FF6600" v-if="scope.row.message_status == '0'"> 未回复</span>
|
|
|
- <!-- {{scope.row.currentState}} -->
|
|
|
- <span v-if="scope.row.message_status == '1'">已回复</span>
|
|
|
+ <el-table-column prop="nick_name" width="120" label="用户名"></el-table-column>
|
|
|
+ <el-table-column prop="add_time" width="160" label="留言时间" ></el-table-column>
|
|
|
+ <el-table-column prop="content" label="留言内容">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover trigger="hover" placement="top">
|
|
|
+ <p>{{ scope.row.content }}</p>
|
|
|
+ <div slot="reference" class="name-wrapper">
|
|
|
+ <el-tag size="medium">{{ scope.row.content }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="phone" width="160" label="手机"></el-table-column>
|
|
|
+ <el-table-column prop="email" width="240" label="邮箱"></el-table-column>
|
|
|
+ <el-table-column prop="message_status" width="120" label="当前状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="color:#FF6600" v-if="scope.row.message_status == '0'"> 未回复</span>
|
|
|
+ <span v-if="scope.row.message_status == '1'">已处理</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="user_name" label="处理人"></el-table-column>
|
|
|
+ <el-table-column prop="user_name" width="160"label="处理人"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
- <div v-show="pages >9" style=" padding: 10px;">
|
|
|
+ <div v-show="pages >9" style=" padding: 10px;">
|
|
|
<el-pagination background layout="prev, pager, next" prev-text='上一页' next-text='下一页' :total="pages" @prev-click='upData'
|
|
|
@next-click="downData" @current-change="current_page"></el-pagination>
|
|
|
</div>
|
|
|
@@ -71,9 +80,8 @@
|
|
|
id="leaveMessage"
|
|
|
:close-on-press-escape="true"
|
|
|
:show-close="false"
|
|
|
- style="margin-top:50px"
|
|
|
:visible.sync="drawer"
|
|
|
- size="780px">
|
|
|
+ size="1000px">
|
|
|
<el-row class="content_box">
|
|
|
<el-row class="headers">
|
|
|
<el-col :span="12">留言信息</el-col>
|
|
|
@@ -82,13 +90,13 @@
|
|
|
<!-- </el-col>-->
|
|
|
</el-row>
|
|
|
<el-row class="chat_user">
|
|
|
- <el-col :span="17">
|
|
|
+ <el-col style=" height: 88vh;background:#e6d0d033;overflow-y:auto; padding-bottom: 30px;" :span="16">
|
|
|
<div class="chat_box">
|
|
|
<!-- 内容展示 -->
|
|
|
<el-row id="main">
|
|
|
<el-col class="user">
|
|
|
<span style="color: #999999;">用户<span style="color:#666;">{{userInfo.account_name}}</span>留言</span>
|
|
|
- <div class="text">{{getUserItem.content}}</div>
|
|
|
+ <div class="user_text">{{getUserItem.content}}</div>
|
|
|
<div class="img block " v-for="item in getUserItem.image">
|
|
|
<el-image
|
|
|
style="width: 100px; height: 100px"
|
|
|
@@ -102,7 +110,7 @@
|
|
|
|
|
|
<div v-if="getUserItem.message_status == 0">
|
|
|
<el-col class="serive">
|
|
|
- <el-input class="text" resize="none" type="textarea"
|
|
|
+ <el-input class="serive_text" resize="none" type="textarea"
|
|
|
@blur="widthCheck($event.target, 100)" placeholder="请回复用户留言"
|
|
|
v-model="leaveInfor"></el-input>
|
|
|
</el-col>
|
|
|
@@ -117,6 +125,7 @@
|
|
|
:auto-upload="false"
|
|
|
list-type="picture-card"
|
|
|
ref="upload"
|
|
|
+ :file-list="fileList"
|
|
|
:limit="4"
|
|
|
:on-exceed="handleExceed"
|
|
|
>
|
|
|
@@ -131,7 +140,7 @@
|
|
|
<div v-else>
|
|
|
<el-col class="serive">
|
|
|
<span style="color: #999999;">客服<span style="color: #5399f5">{{getUserItem.user_name}}</span>回复用户<span style="color:#666;">{{userInfo.account_name}}</span>留言</span>
|
|
|
- <div class="text">{{getUserItem.reply_content}}</div>
|
|
|
+ <div class="serive_text">{{getUserItem.reply_content}}</div>
|
|
|
<div style="padding: 10px 15px;">
|
|
|
<div class="img block" v-for="item in getUserItem.images">
|
|
|
<el-image
|
|
|
@@ -143,17 +152,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</el-row>
|
|
|
|
|
|
- <el-row v-if="getUserItem.message_status == 0" class="chatting">
|
|
|
+ <div v-if="getUserItem.message_status == 0" class="chatting">
|
|
|
<el-button class="send" type="primary" @click="sendMessage">提交</el-button>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col :span="7">
|
|
|
+ <el-col :span="8">
|
|
|
<div class="user_box">
|
|
|
<ul>
|
|
|
<li class="title">用户信息</li>
|
|
|
@@ -231,11 +238,13 @@
|
|
|
getUserItem: [],
|
|
|
img_http: 'http://kfadmin.bocai186.com',//图片路径域
|
|
|
// img_http: 'http://192.168.2.187:8090',//图片路径域
|
|
|
- uploadImg:[],
|
|
|
+ fileList:[],
|
|
|
imgUrl:'',
|
|
|
users:[],
|
|
|
fit:'contain',
|
|
|
isSendMessage:false,//是否提交
|
|
|
+ size:'small',//表单大小
|
|
|
+ isUpImg:false,//是否提交图片片
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
@@ -247,20 +256,14 @@
|
|
|
mounted() {
|
|
|
this.frceArr = frce.frce;
|
|
|
this.value = this.options[2].value;
|
|
|
- // this.getSessionList(1)
|
|
|
- this.get_vuex_info();
|
|
|
+ this.users = this.$store.getters.get_user_info
|
|
|
+ this.getStartEndAjaxTime(this.value)
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
- // 获取客服查询时间
|
|
|
- getValueChange() {
|
|
|
- return this.value;
|
|
|
- }
|
|
|
},
|
|
|
watch: {
|
|
|
- getValueChange(val) {
|
|
|
- this.getStartEndAjaxTime(val);
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
@@ -283,15 +286,15 @@
|
|
|
// 上传之前
|
|
|
beforeAvatarUpload(file) {
|
|
|
// console.log(file, '上传之前')
|
|
|
- const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
- const isLt1M = file.size / 1024 / 1024 < 2;
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传只能是图片格式!');
|
|
|
- }
|
|
|
- if (!isLt1M) {
|
|
|
- this.$message.error('上传文件大小不能超过 2MB!');
|
|
|
- }
|
|
|
- return isJPG && isLt1M;
|
|
|
+ // const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
+ // const isLt1M = file.size / 1024 / 1024 < 0.5;
|
|
|
+ // if (!isJPG) {
|
|
|
+ // this.$message.error('上传只能是图片格式!');
|
|
|
+ // }
|
|
|
+ // if (!isLt1M) {
|
|
|
+ // this.$message.error('上传图片大小单张不能超过0.5MB!');
|
|
|
+ // }
|
|
|
+ //return isJPG && isLt1M;
|
|
|
},
|
|
|
// 上传成功时的回调
|
|
|
uploadSuccess(res, file, fileList) {
|
|
|
@@ -307,20 +310,44 @@
|
|
|
},
|
|
|
//删除回掉
|
|
|
handleRemove(file, fileList,) {
|
|
|
- this.uploadImg = fileList;
|
|
|
+ this.fileList = fileList;
|
|
|
+ // this.uploadImg = fileList;
|
|
|
},
|
|
|
// 每次改变图片状态返回的回调
|
|
|
uploadChange(file, fileList) {
|
|
|
- // console.log(file, fileList)
|
|
|
- // this.uploadImg.push(file);
|
|
|
+
|
|
|
+ console.log(file)
|
|
|
+ const isJPG = file.raw.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
+ const isLt1M = file.size / 1024 / 1024 < 0.5;
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传只能是图片格式!');
|
|
|
+ fileList.pop();
|
|
|
+ this.fileList = fileList;
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!isLt1M) {
|
|
|
+ this.$message.error('上传图片大小单张不能超过0.5MB!');
|
|
|
+ fileList.pop()
|
|
|
+ this.fileList = fileList;
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ if(!this.isUpImg){
|
|
|
+
|
|
|
+ this.fileList.push(file)
|
|
|
+ }else{
|
|
|
+ this.fileList = fileList
|
|
|
+ }
|
|
|
},
|
|
|
handleExceed(files, fileList) {
|
|
|
this.$message.error(`图片上传数量最多4张`);
|
|
|
},
|
|
|
//提交留言
|
|
|
sendMessage() {
|
|
|
- if(!this.isSendMessage) return false;
|
|
|
+ // if(!this.isSendMessage) return false;
|
|
|
+ this.isUpImg = true;
|
|
|
this.$refs.upload.submit();
|
|
|
+
|
|
|
this.isSendMessage = false;
|
|
|
setTimeout(()=>{
|
|
|
let parmas = {
|
|
|
@@ -330,10 +357,12 @@
|
|
|
"images":this.imgUrl,
|
|
|
}
|
|
|
this.post('/api/service/Message/dealmessage', parmas).then(res => {
|
|
|
-
|
|
|
this.$message.success(res.data.msg);
|
|
|
+ this.leaveInfor = '';
|
|
|
this.drawer = false;
|
|
|
- this.getStartEndAjaxTime(this.value)
|
|
|
+ this.getSessionList(1)
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ this.fileList =[];
|
|
|
})
|
|
|
},1500)
|
|
|
},
|
|
|
@@ -342,7 +371,7 @@
|
|
|
get_user(id) {
|
|
|
let obj = {
|
|
|
headers: {
|
|
|
- "apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + this.time + 'service'),
|
|
|
+ "apiToken": this.$md5('accountInfo' + "customer-service" + 'service' + 'service'),
|
|
|
'userToken': this.token
|
|
|
},
|
|
|
account_id: id
|
|
|
@@ -355,10 +384,6 @@
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- get_vuex_info(){
|
|
|
- this.users = this.$store.getters.get_user_info
|
|
|
- },
|
|
|
-
|
|
|
widthCheck(str, len) {
|
|
|
var temp = 0
|
|
|
for (var i = 0; i < str.value.length; i++) {
|
|
|
@@ -370,13 +395,13 @@
|
|
|
|
|
|
// 获取请求参数开始和结束时间
|
|
|
getStartEndAjaxTime(e) {
|
|
|
+ console.log(e);
|
|
|
let time = new Date();
|
|
|
let time2 = new Date(time)
|
|
|
|
|
|
function getDate(year, month, date) {
|
|
|
return year + '-' + ((month + 1) < 10 ? '0' + (month + 1) : month + 1) + '-' + (date < 10 ? '0' + date : date)
|
|
|
}
|
|
|
-
|
|
|
if (e == "今日") {
|
|
|
time2.setDate(time.getDate())
|
|
|
} else if (e == "最近3天") {
|
|
|
@@ -395,23 +420,19 @@
|
|
|
|
|
|
|
|
|
// 获取列表数据
|
|
|
- getSessionList(page, size = 10 ) {
|
|
|
+ getSessionList(page, size=10) {
|
|
|
let searchText =this.input3
|
|
|
- let str = "index" + "customer-service" + "Message" + this.time + "service";
|
|
|
- let obj = {
|
|
|
- headers: {
|
|
|
- apiToken: this.$md5(str),
|
|
|
- userToken: this.token
|
|
|
- }
|
|
|
- };
|
|
|
- this.post("api/service/Message/index", {
|
|
|
+ let str = "index" + "customer-service" + "Message" + "service";
|
|
|
+ this.get("api/service/Message/index", {params:{
|
|
|
start_time: this.startTime,
|
|
|
end_time: this.endTime,
|
|
|
pageSize: size,
|
|
|
- pageNumber: page,
|
|
|
+ pageNumber:page,
|
|
|
searchText:searchText,
|
|
|
- },
|
|
|
- obj
|
|
|
+ },headers: {
|
|
|
+ apiToken: this.$md5(str),
|
|
|
+ userToken: this.token
|
|
|
+ }}
|
|
|
).then(res => {
|
|
|
if (res.data.status == 1) {
|
|
|
this.tableData = res.data.data.list;
|
|
|
@@ -424,23 +445,34 @@
|
|
|
|
|
|
//获取留言列表数据（行）
|
|
|
click_row(row, column, event) {
|
|
|
- // console.log(this.value);
|
|
|
- console.log(row)
|
|
|
this.uid = row.message_id;
|
|
|
this.drawer = true;
|
|
|
this.isSendMessage = true;
|
|
|
this.getUserItem = row;
|
|
|
- if(this.getUserItem.image.includes(',')){
|
|
|
- this.getUserItem.image = this.getUserItem.image.split(',');
|
|
|
- }else{
|
|
|
- this.getUserItem.image =[this.getUserItem.image]
|
|
|
+ if(this.getUserItem.image){
|
|
|
+ if(this.getUserItem.image.includes(',') && typeof this.getUserItem.image == 'string'){
|
|
|
+ this.getUserItem.image = this.getUserItem.image.split(',');
|
|
|
+ }else{
|
|
|
+ if(typeof this.getUserItem.image == 'string'){
|
|
|
+ this.getUserItem.image =[this.getUserItem.image]
|
|
|
+ }else{
|
|
|
+ this.getUserItem.image =this.getUserItem.image
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- if(this.getUserItem.images.includes(',')){
|
|
|
- this.getUserItem.images = this.getUserItem.images.split(',');
|
|
|
- }else{
|
|
|
- this.getUserItem.images = [this.getUserItem.images]
|
|
|
+ if(this.getUserItem.images){
|
|
|
+ if(this.getUserItem.images.includes(',') && typeof this.getUserItem.images == 'string'){
|
|
|
+ this.getUserItem.images = this.getUserItem.images.split(',');
|
|
|
+ }else{
|
|
|
+ if(typeof this.getUserItem.images == 'string'){
|
|
|
+ this.getUserItem.images = [this.getUserItem.images]
|
|
|
+ }else{
|
|
|
+ this.getUserItem.images = this.getUserItem.images
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- this.get_user(row.message_id)
|
|
|
+ console.log(this.getUserItem.images);
|
|
|
+ this.get_user(row.account_id)
|
|
|
},
|
|
|
childValue(e) {
|
|
|
//console.log(e);
|
|
|
@@ -456,18 +488,24 @@
|
|
|
</script>
|
|
|
<style>
|
|
|
.el-upload--picture-card {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- line-height: 100px;
|
|
|
+ width: 100px !important;
|
|
|
+ height: 100px !important;
|
|
|
+ line-height: 100px !important;
|
|
|
}
|
|
|
|
|
|
.el-upload-list--picture-card .el-upload-list__item {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- line-height: 100px;
|
|
|
+ width: 100px !important;
|
|
|
+ height: 100px !important;
|
|
|
+ line-height: 100px !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
+ .name-wrapper{
|
|
|
+ width: 240px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
.chatting {
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -476,15 +514,14 @@
|
|
|
padding: 0 10px;
|
|
|
text-align: right;
|
|
|
|
|
|
- .text {
|
|
|
+ .serive_text {
|
|
|
+ width: 100%;
|
|
|
margin-top: 20px;
|
|
|
background: #F5F5F5;
|
|
|
border: 1px solid #EEEEEE;
|
|
|
padding: 20px;
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
- line-height: 1.8;
|
|
|
-
|
|
|
.el-textarea__inner {
|
|
|
border: none;
|
|
|
resize: none;
|
|
|
@@ -494,14 +531,15 @@
|
|
|
}
|
|
|
|
|
|
.user {
|
|
|
- .text {
|
|
|
+ .user_text {
|
|
|
+ width: 100%;
|
|
|
margin-top: 20px;
|
|
|
background: #F5F5F5;
|
|
|
border: 1px solid #EEEEEE;
|
|
|
padding: 20px;
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
- line-height: 1.8;
|
|
|
+ // line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.img {
|
