300 lines
7.8 KiB
JavaScript
300 lines
7.8 KiB
JavaScript
// pages/contact/index.js
|
|
const request = require('../../api/request.js');
|
|
|
|
|
|
Page({
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
messages: [],
|
|
inputText: '',
|
|
scrollToId: '',
|
|
// 使用本地头像
|
|
userAvatar: '/static/user.png',
|
|
serviceAvatar: '/static/contact.png',
|
|
showGetUser: false,
|
|
userInfo: {},
|
|
appid: '',
|
|
page: 1,
|
|
page_size: 100,
|
|
openid: '',
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
const accountInfo = wx.getAccountInfoSync();
|
|
console.log(accountInfo.miniProgram);
|
|
this.setData({
|
|
appid: accountInfo.miniProgram.appId,
|
|
});
|
|
console.log('contact page onLoad, options:', options);
|
|
|
|
// this.getMessages()
|
|
if (wx.getStorageSync('user_info')) {
|
|
this.setData({
|
|
showGetUser: false,
|
|
userInfo: wx.getStorageSync('user_info'),
|
|
});
|
|
this.getMessages()
|
|
} else {
|
|
this.setData({
|
|
showGetUser: true,
|
|
});
|
|
}
|
|
|
|
// this.setData({
|
|
// appid: accountInfo.miniProgram.appId,
|
|
// });
|
|
|
|
// console.log('appId',accountInfo.miniProgram);
|
|
},
|
|
// onShow() {
|
|
// this.getMessages()
|
|
// },
|
|
|
|
getMessages() {
|
|
const userInfo = wx.getStorageSync('user_info');
|
|
request('app/messages', 'get', {
|
|
app_id: this.data.appid,
|
|
user_id: userInfo.openid,
|
|
page: this.data.page,
|
|
page_size: this.data.page_size,
|
|
}).then(res => {
|
|
console.log('res', res);
|
|
const list = res.list.map(item => {
|
|
item.content = JSON.parse(item.content);
|
|
return item;
|
|
});
|
|
this.setData({
|
|
messages: list,
|
|
});
|
|
})
|
|
},
|
|
requestUserProfile(e) {
|
|
console.log('user', e.detail);
|
|
const user = e.detail;
|
|
const that = this;
|
|
// wx.setStorageSync('user_info', e.detail.userInfo);
|
|
const accountInfo = wx.getAccountInfoSync();
|
|
wx.login({
|
|
success: function (res) {
|
|
request('api/wechat/miniprogram/login', 'post', {
|
|
"app_id": accountInfo.miniProgram.appId,
|
|
"js_code": res.code,
|
|
"encrypted_data": user.encryptedData,
|
|
"iv": user.iv,
|
|
"raw_data": user.rawData,
|
|
"signature": user.signature
|
|
}).then(resp => {
|
|
wx.setStorageSync('user_info', resp);
|
|
// wx.setStorageSync('open_id', resp.openid);
|
|
this.setData({
|
|
showGetUser: false,
|
|
userInfo: resp
|
|
});
|
|
request('app/user/create', 'post', {
|
|
"app_id": accountInfo.miniProgram.appId,
|
|
"user_avatar": resp.user_avatar,
|
|
"user_id": resp.openid,
|
|
"user_name": resp.user_name
|
|
}).then(resp => {
|
|
that.getMessages()
|
|
|
|
});
|
|
});
|
|
},
|
|
});
|
|
|
|
},
|
|
|
|
dismissGetUser() {
|
|
this.setData({
|
|
showGetUser: false
|
|
});
|
|
},
|
|
|
|
onReady() {
|
|
// 初始化欢迎消息，带时间分割线
|
|
const now = new Date();
|
|
const timeStr = this.formatTime(now);
|
|
this.setData({
|
|
messages: [{
|
|
id: 'm1',
|
|
from: 'service',
|
|
type: 'text',
|
|
content: '您好！请问有什么可以帮您？',
|
|
showTime: true,
|
|
timeStr
|
|
}],
|
|
scrollToId: 'm1'
|
|
});
|
|
},
|
|
|
|
onInput(e) {
|
|
this.setData({
|
|
inputText: e.detail.value
|
|
});
|
|
},
|
|
|
|
sendText() {
|
|
const text = this.data.inputText && this.data.inputText.trim();
|
|
if (!text) return;
|
|
const now = new Date();
|
|
const id = 'u' + Date.now();
|
|
const timeStr = this.formatTime(now);
|
|
// 判断是否需要显示时间分割线
|
|
let showTime = false;
|
|
const lastMsg = this.data.messages.length ? this.data.messages[this.data.messages.length - 1] : null;
|
|
if (!lastMsg || now - (lastMsg._ts || now) > 5 * 60 * 1000) showTime = true;
|
|
const msg = {
|
|
id,
|
|
from: 'user',
|
|
type: 'text',
|
|
content: {
|
|
messages: text
|
|
},
|
|
showTime,
|
|
timeStr,
|
|
_ts: now,
|
|
"msg_type": 1,
|
|
receiver_id: '',
|
|
send_time: "刚刚",
|
|
sender_id: this.data.userInfo.openid,
|
|
sender_name: this.data.userInfo.user_name
|
|
};
|
|
const newMessages = this.data.messages.concat(msg);
|
|
this.setData({
|
|
messages: newMessages,
|
|
inputText: ''
|
|
});
|
|
const accountInfo = wx.getAccountInfoSync();
|
|
const userInfo = wx.getStorageSync('user_info')
|
|
request('app/send_message', 'POST', {
|
|
"app_id": accountInfo.miniProgram.appId,
|
|
"content": JSON.stringify({
|
|
messages: text
|
|
}),
|
|
"from_user_id": userInfo.openid,
|
|
"from_user_name": userInfo.user_name,
|
|
"msg_type": 1
|
|
})
|
|
// 等待渲染，确保 scroll-into-view 生效
|
|
setTimeout(() => {
|
|
this.setData({
|
|
scrollToId: id
|
|
});
|
|
}, 50);
|
|
|
|
// 模拟客服回复（延迟）
|
|
setTimeout(() => {
|
|
const replyNow = new Date();
|
|
const replyTimeStr = this.formatTime(replyNow);
|
|
const reply = {
|
|
id: 's' + Date.now(),
|
|
from: 'service',
|
|
type: 'text',
|
|
content: '收到，客服正在处理中...',
|
|
showTime: false,
|
|
timeStr: replyTimeStr,
|
|
_ts: replyNow
|
|
};
|
|
this.setData({
|
|
messages: this.data.messages.concat(reply),
|
|
scrollToId: reply.id
|
|
});
|
|
}, 800);
|
|
},
|
|
|
|
chooseImage() {
|
|
const that = this;
|
|
wx.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed', 'original'],
|
|
sourceType: ['album', 'camera'],
|
|
success(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
console.log('选择的图片路径:', res);
|
|
if (tempFilePaths && tempFilePaths.length) {
|
|
const now = new Date();
|
|
const id = 'u' + Date.now();
|
|
const timeStr = that.formatTime(now);
|
|
let showTime = false;
|
|
const lastMsg = that.data.messages.length ? that.data.messages[that.data.messages.length - 1] : null;
|
|
if (!lastMsg || now - (lastMsg._ts || now) > 5 * 60 * 1000) showTime = true;
|
|
const msg = {
|
|
id,
|
|
from: 'user',
|
|
msg_type: '2',
|
|
content: {
|
|
messages:tempFilePaths[0]
|
|
},
|
|
showTime,
|
|
timeStr,
|
|
_ts: now,
|
|
sender_id: that.data.userInfo.openid,
|
|
sender_name: that.data.userInfo.user_name
|
|
};
|
|
that.setData({
|
|
messages: that.data.messages.concat(msg)
|
|
});
|
|
setTimeout(() => {
|
|
that.setData({
|
|
scrollToId: id
|
|
});
|
|
}, 50);
|
|
|
|
// 模拟客服返回图片确认
|
|
// setTimeout(() => {
|
|
// const replyNow = new Date();
|
|
// const replyTimeStr = that.formatTime(replyNow);
|
|
// const reply = {
|
|
// id: 's' + Date.now(),
|
|
// from: 'service',
|
|
// type: 'text',
|
|
// content: '已收到图片，感谢！',
|
|
// showTime: false,
|
|
// timeStr: replyTimeStr,
|
|
// _ts: replyNow
|
|
// };
|
|
// that.setData({
|
|
// messages: that.data.messages.concat(reply)
|
|
// });
|
|
// setTimeout(() => {
|
|
// that.setData({
|
|
// scrollToId: reply.id
|
|
// });
|
|
// }, 50);
|
|
// }, 1200);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 时间格式化
|
|
formatTime(date) {
|
|
const y = date.getFullYear();
|
|
const m = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const d = date.getDate().toString().padStart(2, '0');
|
|
const h = date.getHours().toString().padStart(2, '0');
|
|
const min = date.getMinutes().toString().padStart(2, '0');
|
|
return `${y}年${m}月${d}日 ${h}:${min}`;
|
|
},
|
|
|
|
previewImage(e) {
|
|
const src = e.currentTarget.dataset.src;
|
|
if (!src) return;
|
|
wx.previewImage({
|
|
urls: [src],
|
|
current: src
|
|
});
|
|
},
|
|
|
|
onShow() {},
|
|
onHide() {},
|
|
onUnload() {},
|
|
onPullDownRefresh() {},
|
|
onReachBottom() {},
|
|
onShareAppMessage() {}
|
|
}); |