小程序客服功能进阶版，（非实时刷新）
因为公司原因，就没有做实时刷新的，只是可以获取患者发送的消息，和医生发消息给患者，存储在后端
import Toast from "../../../miniprogram_npm/@vant/weapp/toast/toast";
import {
find
} from "../../../api/log"
import {
saveDoctComment
} from "../../../api/log"
// pages/contact/contact.js
const app = getApp();
var msgList = [];
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
var msgLists = []
/**
* 初始化数据
*/
Page({
/**
* 页面的初始数据
*/
data: {
scrollHeight: '100vh',
inputBottom: 0,
value: '',
msgLists: '',
msgList: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let acquire = wx.getStorageSync("setStorageSync")//获取本地医生信息
let personal = acquire.data.data//医生数据
console.log(personal[0].code);
wx.pageScrollTo({
scrollTop: 608, //滚动的页面高度
duration: 300
})
console.log(options.groupid)//上一页带过来的数据
let groupiD = options.groupid.split(',')[0]//分割医生id
let userid = options.groupid.split(',')[1]//分割出患者id
let fin = {
orgid: "1379680092017393666",
groupId: groupiD,
doctorId: personal[0].code
}
console.log(fin);
find(fin).then(res => {
console.log(res);
let arr = res.data.data
arr.forEach(element => {
console.log(element);
if (element.publishFlag == "1") {
msgLists.push({//循环将拿到的数据储存
speaker: element.publishFlag,//身份编码
contentType: 'text',
content: element.suggest,//内容
})
} else if (element.publishFlag == "2"){//医生身份判断
msgLists.push({
speaker: element.publishFlag,
contentType: 'text',
content: element.suggest,
}
)
}
this.setData({判断完后将判断结果存储
msgLists,//最终的内容
groupid:groupiD,//等下请求需要的id
userid:userid,//等下请求需要的id
code: personal[0].code//等下请求需要的医生id
})
});
})
console.log(app.globalData.userInfo);
this.setData({
cusHeadIcon: app.globalData.userInfo,
});
},
//页面自动滚动到底部
pageScrollToBottom: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 获取聚焦
*/
focus: function (e) {
console.log(e);
keyHeight = e.detail.height;
this.setData({
scrollTop: (windowHeight - keyHeight) + 'px'
});
this.setData({
toView: 'msg-' + (msgList.length - 1),
inputBottom: keyHeight + 'px'
})
//计算msg高度
// calScrollHeight(this, keyHeight);
},
// 输入框的值
doInput: function (e) {
console.log(e);
this.setData({
value: e.detail.value.replace(/\s+/g, "")
})
},
//失去聚焦(软键盘消失)
blur: function (e) {
console.log(e);
this.setData({
scrollHeight: '100vh',
inputBottom: 0 + "px" //失去焦点后软键盘消失，输入框复位
})
this.setData({
toView: 'msg-' + (msgList.length - 1)
})
},
// 点击发送事件
sendClicks: function (e) {
// debugger
console.log(this.data.value);
console.log(e);
if (this.data.value == "" || this.data.value == undefined) {
Toast("输入不能为空")
} else {
msgLists.push({//发送内容
speaker: 1, //角色区分
contentType: 'text',
content: this.data.value //输入框的值
})
console.log(this.data.groupiD);
//将需要存储的内容带入传递给后端
let save = {orgid:"1379680092017393666",doctorId:this.data.code,groupId:this.data.groupid,userid:this.data.userid,suggest:this.data.value,publishFlag: 2}
console.log(save);
saveDoctComment(save).then(res =>{
console.log(res);
})
// 页面滚动的高度消息自动置低
// #scroll-view'最大页面的盒子
wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (rect) {
console.log(rect.height);
wx.pageScrollTo({
scrollTop: rect.height
});
}).exec()
this.setData({
msgLists,
inputVal: '', //发送清空输入框
value: ''
});
}
},
/**
* 发送点击监听
*/
})
html页面
{{item.content}}
{{item.content}}
css
/* pages/contact/contact.wxss */
page {
background-color: #f1f1f1;
}
.inputRoom {
width: 100vw;
height: 16vw;
border-top: 1px solid #cdcdcd;
background-color: #f1f1f1;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
z-index: 20;
}
input {
width: 76vw;
height: 9.33vw;
background-color: #fff;
border-radius: 40rpx;
margin-left: 2vw;
padding: 0 3vw;
font-size: 28rpx;
color: #444;
}
.leftMsg {
font-size: 35rpx;
color: #444;
line-height: 7vw;
padding: 2vw 2.5vw;
background-color: #fff;
margin-left: -1.6vw;
border-radius: 10rpx;
z-index: 10;
}
.rightMsg {
font-size: 35rpx;
color: #444;
line-height: 7vw;
padding: 2vw 2.5vw;
background-color: #96EB6A;
margin-right: -1.6vw;
border-radius: 10rpx;
z-index: 10;
}
.container {
width: 117rpx;
height: 30rpx;
line-height: 12rpx;
padding: 0;
-webkit-overflow-scrolling: touch;
position: absolute;
bottom: 33rpx;
right: -10rpx;
}
.iconfont {
font-size: 57rpx;
padding-right: 10rpx;
}