Skip to content

im_page_mixin 通用混入

im_page_mixin 是 IM 所有页面的通用混入,提供认证、用户信息加载、响应处理等基础能力。

引入方式

javascript
import im_page_mixin from '@/libs/mixin/im_page_mixin.js'

export default {
  mixins: [template_page_mixin, im_page_mixin],
  // ...
}

提供的方法

getImHeader()

返回 IM API 请求所需的认证头。

javascript
getImHeader() {
  const token = uni.getStorageSync('im_token');
  return {
    'Authorization': 'Bearer ' + token
  };
}

使用示例

javascript
this.middle.get(
  config.imBaseURL + '/friends',
  {},
  { header: this.getImHeader() }
);

loadCurrentUser()

从本地存储加载当前用户信息到 this.currentUser

javascript
loadCurrentUser() {
  const userStr = uni.getStorageSync('currentUser');
  if (!userStr) {
    uni.reLaunch({ url: '/partnerPages/login' });
    return false;
  }
  this.currentUser = JSON.parse(userStr);
  return true;
}

使用示例:在 onShow 生命周期中调用,未登录时自动跳转:

javascript
onShow() {
  if (!this.loadCurrentUser()) return;
  this.fetchData();
}

返回值boolean — 用户是否已登录。


handleImResponse(res)

统一处理 IM API 响应,兼容不同格式的返回数据。

javascript
handleImResponse(res) {
  if (typeof res === 'string') {
    try { res = JSON.parse(res); } catch (e) { return { ok: false }; }
  }
  if (res.code === 200) {
    return { ok: true, data: res.data !== undefined ? res.data : res };
  }
  return { ok: false, msg: res.msg || res.message || '请求失败' };
}

使用示例

javascript
this.middle.get(config.imBaseURL + '/friends', {}, {
  header: this.getImHeader()
}).then(res => {
  const result = this.handleImResponse(res);
  if (result.ok) {
    this.friends = result.data;
  } else {
    uni.showToast({ title: result.msg, icon: 'none' });
  }
});

formatTime(timestamp)

格式化时间戳为友好的显示格式。

javascript
formatTime(timestamp) {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  const now = new Date();
  
  // 今天:显示 HH:mm
  if (date.toDateString() === now.toDateString()) {
    return date.getHours().toString().padStart(2, '0') + ':' +
           date.getMinutes().toString().padStart(2, '0');
  }
  
  // 今年:显示 M/D
  if (date.getFullYear() === now.getFullYear()) {
    return (date.getMonth() + 1) + '/' + date.getDate();
  }
  
  // 更早:显示 YYYY/M/D
  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
}

safeJsonParse(str)

安全解析 JSON 字符串,解析失败返回 null 而不是抛出异常。

javascript
safeJsonParse(str) {
  try { return JSON.parse(str); }
  catch (e) { return null; }
}

提供的数据

currentUser

当前登录用户对象,由 loadCurrentUser() 填充:

javascript
{
  id: "user_001",
  username: "alice",
  nickname: "Alice",
  avatar: "https://example.com/avatar.png",
  email: "alice@example.com",
  token: "jwt-token-string"
}

典型页用法

javascript
import im_page_mixin from '@/libs/mixin/im_page_mixin.js'
import config from '@/config/base.js'

export default {
  mixins: [im_page_mixin],
  data() {
    return {
      list: [],
      loading: false
    }
  },
  onShow() {
    // 1. 加载用户信息(未登录自动跳转)
    if (!this.loadCurrentUser()) return;
    // 2. 加载数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.middle.get(
        config.imBaseURL + '/some-endpoint',
        {},
        { header: this.getImHeader() }
      ).then(res => {
        const result = this.handleImResponse(res);
        if (result.ok) this.list = result.data;
      }).catch(() => {
        uni.showToast({ title: '网络请求失败', icon: 'none' });
      }).finally(() => {
        this.loading = false;
      });
    }
  }
}