176 lines
3.4 KiB
JavaScript
176 lines
3.4 KiB
JavaScript
// pages/message/detail/index.js
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
// 客服信息
|
|
serviceAvatar: '/assets/images/contact.png',
|
|
serviceNickname: '在线客服',
|
|
inputContent: '',
|
|
// 消息列表
|
|
messageList: [{
|
|
id: 1,
|
|
type: 'text',
|
|
content: '您好,请问有什么可以帮您?',
|
|
time: '12:30',
|
|
avatar: '/assets/image/contact.png',
|
|
isSelf: false
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'text',
|
|
content: '我想咨询一下订单问题',
|
|
time: '12:31',
|
|
avatar: '/assets/image/default_avatar_big.png',
|
|
isSelf: true
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'text',
|
|
content: '好的,请问是哪个订单呢?',
|
|
time: '12:31',
|
|
avatar: '/assets/image/contact.png',
|
|
isSelf: false
|
|
}
|
|
],
|
|
scrollToMessage: '', // 用于消息定位
|
|
|
|
// 输入相关
|
|
inputContent: '',
|
|
showEmoji: false,
|
|
},
|
|
|
|
// 监听输入框内容变化
|
|
onInput(e) {
|
|
this.setData({
|
|
inputContent: e.detail.value
|
|
});
|
|
},
|
|
|
|
// 发送消息
|
|
sendMessage() {
|
|
if (!this.data.inputContent.trim()) return;
|
|
|
|
const newMessage = {
|
|
id: Date.now(), // 使用时间戳作为临时ID
|
|
type: 'text',
|
|
content: this.data.inputContent,
|
|
isSelf: true,
|
|
avatar: '你的默认头像URL',
|
|
time: this.formatTime(new Date())
|
|
};
|
|
|
|
this.setData({
|
|
messageList: [...this.data.messageList, newMessage],
|
|
inputContent: '', // 清空输入框
|
|
scrollToMessage: `msg-${newMessage.id}` // 滚动到最新消息
|
|
});
|
|
},
|
|
|
|
// 选择图片
|
|
chooseImage() {
|
|
wx.chooseMedia({
|
|
count: 1,
|
|
mediaType: ['image'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePath = res.tempFiles[0].tempFilePath;
|
|
const newMessage = {
|
|
id: Date.now(),
|
|
type: 'image',
|
|
content: tempFilePath,
|
|
isSelf: true,
|
|
avatar: '你的默认头像URL',
|
|
time: this.formatTime(new Date())
|
|
};
|
|
|
|
this.setData({
|
|
messageList: [...this.data.messageList, newMessage],
|
|
scrollToMessage: `msg-${newMessage.id}`
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(e) {
|
|
const current = e.currentTarget.dataset.src;
|
|
const urls = this.data.messageList
|
|
.filter(msg => msg.type === 'image')
|
|
.map(msg => msg.content);
|
|
|
|
wx.previewImage({
|
|
current,
|
|
urls
|
|
});
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(date) {
|
|
const hour = date.getHours().toString().padStart(2, '0');
|
|
const minute = date.getMinutes().toString().padStart(2, '0');
|
|
return `${hour}:${minute}`;
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
// 设置页面标题为客服名称
|
|
wx.setNavigationBarTitle({
|
|
title: this.serviceNickname
|
|
});
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() {
|
|
|
|
}
|
|
}) |