wxamp-ymtxMerchant/pagesA/pages/expertChat/expertChat.js

// 专家端聊天页面 - 纯模拟数据，无真实接口
Page({
  data: {
    // 专家信息
    expertInfo: {
      id: 'expert_001',
      name: '张医生',
      avatar: '/pages/images/tx.png'
    },
    expertAvatar: '/pages/images/tx.png',
    
    // 对话信息
    conversation: {
      userId: 'user_001',
      userName: '李华',
      userAvatar: '/pages/images/tx.png'
    },
    
    // 在线状态
    onlineStatus: true,
    
    // 消息列表
    messageList: [],
    scrollTop: 0,
    scrollAnimate: true,
    
    // 输入相关
    inputValue: '',
    inputFocus: false,
    
    // 多媒体面板
    showMediaSheet: false,

    
    // 页面状态
    loadingMore: false,
    hasMore: true,
    page: 1,
    
    // 模拟数据
    mockMessages: [
      {
        id: 'msg_1',
        isMe: false,
        type: 'text',
        content: '医生您好，我想咨询一下皮肤问题',
        timestamp: Date.now() - 3600000,
        status: 'success',
        avatar: '/pages/images/tx.png'
      },
      {
        id: 'msg_2',
        isMe: true,
        type: 'text',
        content: '您好，请描述一下您的具体症状',
        timestamp: Date.now() - 3500000,
        status: 'success',
        avatar: '/pages/images/tx.png'
      },
      {
        id: 'msg_3',
        isMe: false,
        type: 'text',
        content: '脸上起了很多小红点，有点痒',
        timestamp: Date.now() - 3400000,
        status: 'success',
        avatar: '/pages/images/tx.png'
      },
      {
        id: 'msg_4',
        isMe: false,
        type: 'image',
        content: 'https://picsum.photos/200/200?random=1',
        timestamp: Date.now() - 3300000,
        status: 'success',
        avatar: '/pages/images/tx.png'
      },
      {
        id: 'msg_5',
        isMe: true,
        type: 'text',
        content: '看起来像是过敏反应，最近有接触什么新的东西吗？',
        timestamp: Date.now() - 3200000,
        status: 'success',
        avatar: '/pages/images/tx.png'
      }
    ],
    
    // 定时器
    typingTimer: null,
    mockUserTimer: null
  },

  onLoad: function(options) {
    console.log('专家端聊天页面加载', options);
    
    // 获取传递的参数
    if (options.userId) {
      this.setData({
        'conversation.userId': options.userId,
        'conversation.userName': options.userName || '用户'
      });
    }
    
    // 加载模拟消息
    this.loadMockMessages();
    
    // 模拟用户在线状态变化
    this.simulateOnlineStatus();
    
    // 模拟用户发送消息
    this.startMockUserTyping();
  },

  onShow: function() {
    // 滚动到底部
    setTimeout(() => {
      this.scrollToBottom(false);
    }, 200);
  },

  onUnload: function() {
    // 清理定时器
    if (this.data.mockUserTimer) {
      clearInterval(this.data.mockUserTimer);
    }
    if (this.data.typingTimer) {
      clearTimeout(this.data.typingTimer);
    }
  },

  // 返回上一页
  goBack: function() {
    wx.navigateBack({
      delta: 1
    });
  },



  // 加载模拟消息
  loadMockMessages: function() {
    // 处理消息时间显示
    const messages = this.processMessageTimes(this.data.mockMessages);
    
    this.setData({
      messageList: messages,
      hasMore: false
    });
  },

  // 加载更多消息（模拟）
  loadMoreMessages: function() {
    if (this.data.loadingMore || !this.data.hasMore) return;
    
    this.setData({ loadingMore: true });
    
    // 模拟网络延迟
    setTimeout(() => {
      // 模拟更早的消息
      const olderMessages = [
        {
          id: 'old_' + Date.now(),
          isMe: false,
          type: 'text',
          content: '之前也出现过类似情况',
          timestamp: Date.now() - 86400000,
          status: 'success',
          avatar: '/pages/images/tx.png'
        },
        {
          id: 'old_' + (Date.now() + 1),
          isMe: true,
          type: 'text',
          content: '那当时是怎么处理的呢？',
          timestamp: Date.now() - 86000000,
          status: 'success',
          avatar: '/pages/images/tx.png'
        }
      ];
      
      const processedOld = this.processMessageTimes(olderMessages);
      const newList = [...processedOld, ...this.data.messageList];
      
      this.setData({
        messageList: newList,
        loadingMore: false,
        hasMore: false // 模拟没有更多了
      });
      
      // 调整滚动位置
      setTimeout(() => {
        this.setData({
          scrollAnimate: false,
          scrollTop: 300
        }, () => {
          setTimeout(() => {
            this.setData({ scrollAnimate: true });
          }, 100);
        });
      }, 50);
    }, 800);
  },

  // 模拟用户在线状态变化
  simulateOnlineStatus: function() {
    setInterval(() => {
      // 随机改变在线状态（模拟）
      const random = Math.random();
      this.setData({
        onlineStatus: random > 0.3 // 70%时间在线
      });
    }, 30000);
  },

  // 模拟用户正在输入并发送消息
  startMockUserTyping: function() {
    // 每45-90秒模拟用户发送一条消息
    const timer = setInterval(() => {
      // 只有在线时才发送
      if (this.data.onlineStatus) {
        this.simulateUserMessage();
      }
    }, Math.random() * 45000 + 45000); // 45-90秒
    
    this.setData({ mockUserTimer: timer });
  },

  // 模拟用户发送消息
  simulateUserMessage: function() {
    const messages = [
      '好的，我明白了',
      '谢谢医生！',
      '需要用什么药吗？',
      '大概多久能好？',
      '有没有什么需要注意的？',
      '好的，我试试看',
      '明白了，非常感谢！'
    ];
    
    const randomMsg = messages[Math.floor(Math.random() * messages.length)];
    
    const newMsg = {
      id: 'user_' + Date.now() + Math.random(),
      isMe: false,
      type: 'text',
      content: randomMsg,
      timestamp: Date.now(),
      status: 'success',
      avatar: this.data.conversation.userAvatar || '/pages/images/tx.png'
    };
    
    this.addMessageToList(newMsg);
    
    // 震动提示（可选）
    wx.vibrateShort({ type: 'light' });
  },

  // 发送文本消息
  sendTextMessage: function() {
    const content = this.data.inputValue.trim();
    if (!content) return;
    
    const messageId = 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    
    // 创建本地消息
    const newMessage = {
      id: messageId,
      isMe: true,
      type: 'text',
      content: content,
      timestamp: Date.now(),
      status: 'sending',
      avatar: this.data.expertAvatar
    };
    
    // 添加到列表
    this.addMessageToList(newMessage);
    
    // 清空输入框
    this.setData({ inputValue: '' });
    
    // 模拟发送延迟
    setTimeout(() => {
      this.updateMessageStatus(messageId, 'success');
    }, 500);
  },

  // 添加消息到列表
  addMessageToList: function(message) {
    const { messageList } = this.data;
    
    // 新消息添加到末尾
    messageList.push(message);
    
    // 重新处理时间显示
    const processedMessages = this.processMessageTimes(messageList);
    
    this.setData({ 
      messageList: processedMessages
    }, () => {
      this.scrollToBottom(true);
    });
  },

  // 更新消息状态
  updateMessageStatus: function(messageId, status) {
    const { messageList } = this.data;
    const index = messageList.findIndex(msg => msg.id === messageId);
    
    if (index !== -1) {
      messageList[index].status = status;
      this.setData({ messageList });
    }
  },

  // 重试发送
  retrySend: function(e) {
    const messageId = e.currentTarget.dataset.id;
    const { messageList } = this.data;
    const msg = messageList.find(m => m.id === messageId);
    
    if (msg) {
      msg.status = 'sending';
      this.setData({ messageList });
      
      setTimeout(() => {
        msg.status = 'success';
        this.setData({ messageList });
      }, 500);
    }
  },

  // 处理消息时间显示
  processMessageTimes: function(messages) {
    if (!messages || messages.length === 0) return [];
    
    const timeInterval = 5; // 5分钟间隔显示时间
    
    return messages.map((msg, index) => {
      const showTime = index === 0 || 
        (msg.timestamp - messages[index - 1].timestamp) > timeInterval * 60 * 1000;
      
      return {
        ...msg,
        showTime
      };
    });
  },

  // 格式化时间
  formatTime: function(timestamp) {
    if (!timestamp) return '';
    
    const date = new Date(Number(timestamp));
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
  },

  // 格式化文件大小
  formatFileSize: function(bytes) {
    if (!bytes || bytes === 0) return '0B';
    
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;
    
    while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024;
      unitIndex++;
    }
    
    return size.toFixed(1) + units[unitIndex];
  },

  // 输入处理
  onInput: function(e) {
    this.setData({ inputValue: e.detail.value });
  },

  // 输入框获得焦点
  onInputFocus: function() {
    this.setData({ inputFocus: true }, () => {
      setTimeout(() => {
        this.scrollToBottom(true);
      }, 200);
    });
  },

  // 输入框失去焦点
  onInputBlur: function() {
    this.setData({ inputFocus: false });
  },

  // 清除输入
  clearInput: function() {
    this.setData({
      inputValue: '',
      inputFocus: true
    });
  },

  // 滚动事件
  onScroll: function(e) {
    const scrollTop = e.detail.scrollTop;
    this.setData({ lastScrollTop: scrollTop });
    
    // 滚动到顶部加载更多
    if (scrollTop <= 30 && !this.data.loadingMore && this.data.hasMore) {
      this.loadMoreMessages();
    }
  },

  // 滚动到底部
  scrollToBottom: function(animate = true) {
    this.setData({ 
      scrollAnimate: animate
    }, () => {
      setTimeout(() => {
        this.setData({ scrollTop: 999999 });
      }, 50);
    });
  },

  // 显示多媒体选择面板
  showMediaActionSheet: function() {
    this.setData({
      showMediaSheet: true,
      inputFocus: false
    });
  },

  // 隐藏多媒体选择面板
  hideMediaActionSheet: function() {
    this.setData({ showMediaSheet: false });
  },

  // 选择图片（模拟）
  chooseImage: function() {
    this.hideMediaActionSheet();
    
    // 模拟选择图片
    const mockImages = [
      'https://picsum.photos/200/200?random=2',
      'https://picsum.photos/200/200?random=3',
      'https://picsum.photos/200/200?random=4'
    ];
    
    const randomImage = mockImages[Math.floor(Math.random() * mockImages.length)];
    
    const messageId = 'img_' + Date.now();
    
    const newMessage = {
      id: messageId,
      isMe: true,
      type: 'image',
      content: randomImage,
      timestamp: Date.now(),
      status: 'uploading',
      progress: 0,
      avatar: this.data.expertAvatar
    };
    
    this.addMessageToList(newMessage);
    
    // 模拟上传进度
    let progress = 0;
    const interval = setInterval(() => {
      progress += 20;
      
      if (progress >= 100) {
        clearInterval(interval);
        this.updateMessageStatus(messageId, 'success');
      } else {
        const msgIndex = this.data.messageList.findIndex(m => m.id === messageId);
        if (msgIndex !== -1) {
          this.data.messageList[msgIndex].progress = progress;
          this.setData({ messageList: this.data.messageList });
        }
      }
    }, 200);
  },

  // 选择视频（模拟）
  chooseVideo: function() {
    this.hideMediaActionSheet();
    
    const messageId = 'video_' + Date.now();
    
    const newMessage = {
      id: messageId,
      isMe: true,
      type: 'video',
      content: 'https://example.com/video.mp4',
      thumb: 'https://picsum.photos/200/200?random=5',
      timestamp: Date.now(),
      status: 'uploading',
      progress: 0,
      avatar: this.data.expertAvatar
    };
    
    this.addMessageToList(newMessage);
    
    // 模拟上传进度
    let progress = 0;
    const interval = setInterval(() => {
      progress += 25;
      
      if (progress >= 100) {
        clearInterval(interval);
        this.updateMessageStatus(messageId, 'success');
      } else {
        const msgIndex = this.data.messageList.findIndex(m => m.id === messageId);
        if (msgIndex !== -1) {
          this.data.messageList[msgIndex].progress = progress;
          this.setData({ messageList: this.data.messageList });
        }
      }
    }, 300);
  },

  // 预览图片
  previewImage: function(e) {
    const url = e.currentTarget.dataset.url;
    wx.previewImage({
      current: url,
      urls: [url]
    });
  },

  // 阻止事件冒泡
  stopPropagation: function() {}
});