uni-app 群聊发送消息相关(84-92)

npx sequelize migration:generate --name=group

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    const { INTEGER, STRING, DATE, ENUM, TEXT } = Sequelize;
    // 创建表
    await queryInterface.createTable('group', {
      id: {
        type: INTEGER(20).UNSIGNED,
        primaryKey: true,
        autoIncrement: true
      },
      name: {
        type: STRING(30),
        allowNull: false,
        defaultValue: '',
        comment: '群组名称',
      },
      avatar: {
        type: STRING(200),
        allowNull: true,
        defaultValue: ''
      },
      user_id: {
        type: INTEGER(20).UNSIGNED,
        allowNull: false,
        comment: '群主id',
        //  定义外键（重要）
        references: {
          model: 'user', // 对应表名称（数据表名称）
          key: 'id' // 对应表的主键
        },
        onUpdate: 'restrict', // 更新时操作
        onDelete: 'cascade'  // 删除时操作
      },
      remark: {
        type: TEXT,
        allowNull: true,
        defaultValue: '',
        comment: '群公告'
      },
      invite_confirm: {
        type: INTEGER(1),
        allowNull: false,
        defaultValue: 1,
        comment: '邀请确认'
      },
      status: {
        type: INTEGER(1),
        allowNull: false,
        defaultValue: 1,
        comment: '状态'
      },
      created_at: DATE,
      updated_at: DATE
    });
  },
  down: async queryInterface => {
    await queryInterface.dropTable('group');
  }
};

npx sequelize migration:generate --name=group_user

'use strict';
module.exports = {
  up: async (queryInterface, Sequelize) => {
    const { INTEGER, DATE, STRING } = Sequelize;
    // 创建表
    await queryInterface.createTable('group_user', {
      id: {
        type: INTEGER(20).UNSIGNED,
        primaryKey: true,
        autoIncrement: true
      },
      user_id: {
        type: INTEGER(20).UNSIGNED,
        allowNull: false,
        comment: '用户id',
        //  定义外键（重要）
        references: {
          model: 'user', // 对应表名称（数据表名称）
          key: 'id' // 对应表的主键
        },
        onUpdate: 'restrict', // 更新时操作
        onDelete: 'cascade'  // 删除时操作
      },
      group_id: {
        type: INTEGER(20).UNSIGNED,
        allowNull: false,
        comment: '群组id',
        //  定义外键（重要）
        references: {
          model: 'group', // 对应表名称（数据表名称）
          key: 'id' // 对应表的主键
        },
        onUpdate: 'restrict', // 更新时操作
        onDelete: 'cascade'  // 删除时操作
      },
      nickname: {
        type: STRING(30),
        allowNull: false,
        defaultValue: '',
        comment: '在群里的昵称',
      },
      created_at: DATE,
      updated_at: DATE
    });
  },
  down: async queryInterface => {
    await queryInterface.dropTable('group_user');
  }
};

npx sequelize db:migrate

// app/model/group.js
'use strict';
const crypto = require('crypto');
module.exports = app => {
    const { STRING, INTEGER, DATE, ENUM, TEXT } = app.Sequelize;
    // 配置（重要：一定要配置详细，一定要！！！）
    const Group = app.model.define('group', {
        id: {
            type: INTEGER(20).UNSIGNED,
            primaryKey: true,
            autoIncrement: true
        },
        name: {
            type: STRING(30),
            allowNull: false,
            defaultValue: '',
            comment: '群组名称',
        },
        avatar: {
            type: STRING(200),
            allowNull: true,
            defaultValue: ''
        },
        user_id: {
            type: INTEGER(20).UNSIGNED,
            allowNull: false,
            comment: '群主id',
            //  定义外键（重要）
            references: {
                model: 'user', // 对应表名称（数据表名称）
                key: 'id' // 对应表的主键
            },
            onUpdate: 'restrict', // 更新时操作
            onDelete: 'cascade'  // 删除时操作
        },
        remark: {
            type: TEXT,
            allowNull: true,
            defaultValue: '',
            comment: '群公告'
        },
        invite_confirm: {
            type: INTEGER(1),
            allowNull: false,
            defaultValue: 1,
            comment: '邀请确认'
        },
        status: {
            type: INTEGER(1),
            allowNull: false,
            defaultValue: 1,
            comment: '状态'
        },
        created_at: DATE,
        updated_at: DATE
    });
    // 定义关联关系
    Group.associate = function (model) {
        // 一对多
        Group.hasMany(app.model.GroupUser);
    }
    return Group;
};
// app/model/group_user.js
'use strict';
const crypto = require('crypto');
module.exports = app => {
    const { STRING, INTEGER, DATE, ENUM, TEXT } = app.Sequelize;
    // 配置（重要：一定要配置详细，一定要！！！）
    const GroupUser = app.model.define('group_user', {
        id: {
            type: INTEGER(20).UNSIGNED,
            primaryKey: true,
            autoIncrement: true
        },
        user_id: {
            type: INTEGER(20).UNSIGNED,
            allowNull: false,
            comment: '用户id',
            //  定义外键（重要）
            references: {
                model: 'user', // 对应表名称（数据表名称）
                key: 'id' // 对应表的主键
            },
            onUpdate: 'restrict', // 更新时操作
            onDelete: 'cascade'  // 删除时操作
        },
        group_id: {
            type: INTEGER(20).UNSIGNED,
            allowNull: false,
            comment: '群组id',
            //  定义外键（重要）
            references: {
                model: 'group', // 对应表名称（数据表名称）
                key: 'id' // 对应表的主键
            },
            onUpdate: 'restrict', // 更新时操作
            onDelete: 'cascade'  // 删除时操作
        },
        nickname: {
            type: STRING(30),
            allowNull: false,
            defaultValue: '',
            comment: '在群里的昵称',
        },
        created_at: DATE,
        updated_at: DATE
    });
    return GroupUser;
};

'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
  }
}
module.exports = GroupController;

<template>
  <view>
    
    <!-- 导航栏 -->
    <free-nav-bar title="选择" showBack :showRight="true">
      <free-main-button :name="buttonText" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
    
    <!-- 通讯录列表 -->
    <scroll-view scroll-y="true" 
    :style="'height:'+scrollHeight+'px;'"
    :scroll-into-view="scrollInto">
      
      <template v-if="type === 'see'">
        <free-list-item v-for="(item,index) in typeList"
        :key="item.key" :title="item.name" 
        :showRightIcon="false" showRight
        @click="typeIndex = index">
          <view slot="right"
          style="width: 40rpx;height: 40rpx;"
          class="border rounded-circle flex align-center justify-center mr-4">
            <view v-if="typeIndex === index" 
            style="width: 30rpx;height: 30rpx;"
            class="main-bg-color rounded-circle"></view>
          </view>
        </free-list-item>
      </template>
    
    
      <template v-if="type !== 'see' || (type === 'see' && (typeIndex === 1 || typeIndex === 2)) ">
        <view v-for="(item,index) in list" :key="index"
        :id="'item-'+item.title">
          <view v-if="item.list.length" 
          class="py-2 px-3 border-bottom bg-light">
            <text class="font-md text-dark">{{item.title}}</text>
          </view>
          <free-list-item v-for="(item2,index2) in item.list" 
          :key="index2" :title="item2.name" 
          :cover="item2.avatar || '/static/images/userpic.png'"
          :showRightIcon="false" showRight
          @click="selectItem(item2)">
            <view slot="right"
            style="width: 40rpx;height: 40rpx;"
            class="border rounded-circle flex align-center justify-center mr-4">
              <view v-if="item2.checked" 
              style="width: 30rpx;height: 30rpx;"
              class="main-bg-color rounded-circle"></view>
            </view>
          </free-list-item>
        </view>
      </template>
      
    </scroll-view>
    
    <!-- 侧边导航条 -->
    <view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:'+top+'px;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <view class="flex-1 flex align-center justify-center"
      v-for="(item,index) in list" :key="index">
        <text class="font-sm text-muted">{{item.title}}</text>
      </view>
    </view>
    <view class="position-fixed rounded-circle bg-light border flex align-center justify-center" v-if="current"
    style="width: 150rpx;height: 150rpx;left: 300rpx;"
    :style="'top:'+modalTop+'px;'">
      <text class="font-lg">{{current}}</text>
    </view>
  </view>
</template>
<script>
  import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
  import freeListItem from "@/components/free-ui/free-list-item.vue"
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import { mapState } from 'vuex'
  import $H from '@/common/free-lib/request.js';
  export default {
    components: {
      freeNavBar,
      freeListItem,
      freeMainButton
    },
    data() {
      return {
        typeIndex:0,
        typeList:[{
          name:"公开",
          key:"all"
        },{
          name:"谁可以看",
          key:"only"
        },{
          name:"不给谁看",
          key:"except"
        },{
          name:"私密",
          key:"none"
        }],
        
        top:0,
        scrollHeight:0,
        scrollInto:'',
        current:'',
        
        selectList:[],
        
        type:"",
        
        limit:9,
        
        id:0
      }
    },
    onLoad(e) {
      let res = uni.getSystemInfoSync()
      this.top = res.statusBarHeight + uni.upx2px(90)
      this.scrollHeight = res.windowHeight - this.top
      
      if(e.type){
        this.type = e.type
      }
      if(e.limit){
        this.limit = parseInt(e.limit)
      }
      if(e.id){
        this.id = e.id
        if(e.type === 'inviteGroup'){
          this.limit = 1
        }
      }
      this.$store.dispatch('getMailList')
    },
    computed: {
      ...mapState({
        list:state=>state.user.mailList
      }),
      buttonText(){
        let text = '发送'
        if(this.type === 'createGroup'){
          text = '创建群组'
        }
        return text + ' ('+this.selectCount+')'
      },
      modalTop(){
        return (this.scrollHeight - uni.upx2px(150)) / 2
      },
      // 每个索引的高度
      itemHeight() {
        let count = this.list.length
        if(count < 1){
          return 0
        }
        return this.scrollHeight /  count
      },
      // 选中数量
      selectCount(){
        return this.selectList.length
      }
    },
    methods: {
      touchstart(e){
        this.changeScrollInto(e)
      },
      touchmove(e){
        this.changeScrollInto(e)
      },
      touchend(e){
        this.current = ''
      },
      // 联动
      changeScrollInto(e){
        let Y = e.touches[0].pageY
        // #ifdef MP
        Y = Y - this.top
        // #endif
        let index = Math.floor(Y / this.itemHeight)
        let item = this.list[index]
        if(item){
          this.scrollInto = 'item-'+item.title
          this.current = item.title
        }
      },
      // 选中/取消选中
      selectItem(item){
        if(!item.checked && this.selectCount === this.limit){
          // 选中|限制选中数量
          return uni.showToast({
            title: '最多选中 '+this.limit+' 个',
            icon: 'none'
          });
        }
        item.checked = !item.checked
        if(item.checked){ // 选中
          this.selectList.push(item)
        } else { // 取消选中
          let index = this.selectList.findIndex(v=> v === item)
          if(index > -1){
            this.selectList.splice(index,1)
          }
        }
      },
      submit(){
        if(this.type !== 'see' && this.selectCount === 0){
          return uni.showToast({
            title: '请先选择',
            icon: 'none'
          });
        }
        switch (this.type){
          case 'createGroup': // 创建群组
          $H.post('/group/create',{
            ids:this.selectList.map(item=>item.user_id)
          }).then(res=>{
            uni.showToast({
              title: '创建群聊成功',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 1
            });
          })
            break;
          case 'sendCard':
          let item = this.selectList[0]
          uni.$emit('sendItem',{
            sendType:"card",
            data:item.name,
            type:"card",
            options:{
              avatar:item.avatar,
              id:item.user_id
            }
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'remind':
          uni.$emit('sendResult',{
            type:"remind",
            data:this.selectList
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'see':
          let k = this.typeList[this.typeIndex].key
          if(k !== 'all' && k!== 'none' && !this.selectCount){
            return uni.showToast({
              title: '请先选择',
              icon: 'none'
            });
          }
          uni.$emit('sendResult',{
            type:"see",
            data:{
              k,
              v:this.selectList
            }
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'inviteGroup':
          console.log(this.selectList);
          $H.post('/group/invite',{
            id:this.id,
            user_id:this.selectList[0].user_id
          }).then(res=>{
            uni.showToast({
              title: '邀请成功',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 1
            });
          })
            break;
        }
      }
    }
  }
</script>
<style>
</style>

'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
    // 验证参数
    ctx.validate({
        ids:{
            require:true,
            type:'array'
        }
    })
  }
}
module.exports = GroupController;

'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
    // 验证参数
    ctx.validate({
        ids:{
            require:true,
            type:'array'
        }
    });
    let { ids } = ctx.request.body;
    // 验证是否是我的好友
    let friends = await app.model.Friend.findAll({
        where:{
            user_id:current_user_id,
            friend_id:ids
        },
        include:[{
            model:app.model.User,
            as:'friendInfo',
            attributes:['nickname','username']
        }]
    });
    if (!friends.length) {
        return ctx.apiFail('请选择需要加入群聊的好友');
    }
    // 创建群聊
    let name = friends.map(item=>item.friendInfo.nickname || item.friendInfo.username);
    name.push(ctx.authUser.nickname || ctx.authUser.username); // 将自己的数据加入
    await app.model.Group.create({
        name:name.join(','),
        avatar:'',
        user_id:current_user_id
    });
    // 加入群聊用户
    let data = friends.map(item=>{
         return {user_id:item.user_id,group_id:group.id}
     });
     data.unshift({
         user_id:current_user_id,
         group_id:group_id
     });
     await app.model.GroupUser.bulkCreate(data);
    // 消息推送
    
    ctx.apiSuccess('ok');
  }
}
module.exports = GroupController;

'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
    // 验证参数
    ctx.validate({
        ids:{
            require:true,
            type:'array'
        }
    });
    let { ids } = ctx.request.body;
    // 验证是否是我的好友
    let friends = await app.model.Friend.findAll({
        where:{
            user_id:current_user_id,
            friend_id:ids
        },
        include:[{
            model:app.model.User,
            as:'friendInfo',
            attributes:['nickname','username']
        }]
    });
    if (!friends.length) {
        return ctx.apiFail('请选择需要加入群聊的好友');
    }
    // 创建群聊
    let name = friends.map(item=>item.friendInfo.nickname || item.friendInfo.username);
    name.push(ctx.authUser.nickname || ctx.authUser.username); // 将自己的数据加入
    await app.model.Group.create({
        name:name.join(','),
        avatar:'',
        user_id:current_user_id
    });
    // 加入群聊用户
    let data = friends.map(item=>{
         return {user_id:item.user_id,group_id:group.id}
     });
     data.unshift({
         user_id:current_user_id,
         group_id:group_id
     });
     await app.model.GroupUser.bulkCreate(data);
    // 消息推送
    
    ctx.apiSuccess('ok');
  }
}
module.exports = GroupController;

import $U from "./util.js";
import $H from './request.js';
class chat {
  constructor(arg) {
    this.url = arg.url
    this.isOnline = false
    this.socket = null
    // 获取当前用户相关信息
    let user = $U.getStorage('user');
    this.user = user ? JSON.parse(user) : {},
      // 初始化聊天对象
      this.TO = false;
    // 连接和监听
    if (this.user.token) {
      this.connectSocket()
    }
  }
  // 连接socket
  connectSocket() {
    console.log(this.user);
    this.socket = uni.connectSocket({
      url: this.url + '?token=' + this.user.token,
      complete: () => {}
    })
    // 监听连接成功
    this.socket.onOpen(() => this.onOpen())
    // 监听接收信息
    this.socket.onMessage((res) => this.onMessage(res))
    // 监听断开
    this.socket.onClose(() => this.onClose())
    // 监听错误
    this.socket.onError(() => this.onError())
  }
  // 监听打开
  onOpen() {
    // 用户状态上线
    this.isOnline = true;
    console.log('socket连接成功');
    // 获取用户离线消息
  }
  // 监听关闭
  onClose() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接关闭');
  }
  // 监听消息
  onMessage(data) {
    console.log('监听消息', data);
    let res = JSON.parse(data.data)
    // console.log('监听接收消息',res)
    // 错误
    switch (res.msg) {
      case 'fail':
        return uni.showToast({
          title: res.data,
          icon: 'none'
        });
        break;
      case 'recall': // 撤回消息
        this.handleOnRecall(res.data)
        break;
      case 'updateApplyList': // 新的好友申请
        $store.dispatch('getApply');
        break;
      case 'moment': // 朋友圈更新
        this.handleMoment(res.data)
        break;
      default:
        // 处理消息
        this.handleOnMessage(res.data)
        break;
    }
  }
  // 处理消息
  async handleOnMessage(message) {
    // 添加消息记录到本地存储中
    let { data } = this.addChatDetail(message, false)
    // 更新会话列表
    this.updateChatList(data, false)
    // 全局通知
    uni.$emit('onMessage', data)
    // 消息提示
    // this.messageNotice()
  }
  // 监听连接错误
  onError() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接错误');
  }
  // 关闭连接
  close() {
    this.socket.close()
  }
  // 创建聊天对象
  createChatObject(detail) {
    this.TO = detail;
    console.log('创建聊天对象', this.TO)
  }
  // 销毁聊天对象
  destoryChatObject() {
    this.TO = false
  }
  // 组织发送信息格式
  formatSendData(params) {
    return {
      id: 0, // 唯一id，后端生成，用于撤回指定消息
      from_avatar: this.user.avatar, // 发送者头像
      from_name: this.user.nickname || this.user.username, // 发送者昵称
      from_id: this.user.id, // 发送者id
      to_id: params.to_id || this.TO.id, // 接收人/群 id
      to_name: params.to_name || this.TO.name, // 接收人/群 名称
      to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
      chat_type: params.chat_type || this.TO.chat_type, // 接收类型
      type: params.type, // 消息类型
      data: params.data, // 消息内容
      options: params.options ? params.options : {}, // 其他参数
      create_time: (new Date()).getTime(), // 创建时间
      isremove: 0, // 是否撤回
      sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态，success发送成功,fail发送失败,pending发送中
    }
  }
  // 发送信息
  send(message, onProgress = false) {
    return new Promise((result, reject) => {
      // 添加消息历史记录
      // this.addChatDetail();
      let { k } = this.addChatDetail(message);
      // 更新会话列表 
      this.updateChatList(message);
      // 验证是否上线
      if (!this.checkOnLine()) return reject('未上线');
      // 上传文件
      let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
        'card' && !message.data.startsWith('http://tangzhe123-com'))
      let uploadResult = ''
      if (isUpload) {
        uploadResult = $H.upload('/upload', {
          filePath: message.data
        }, onProgress)
        if (!uploadResult) {
          // 发送失败
          message.sendStatus = 'fail'
          // 更新指定历史记录
          this.updateChatDetail(message, k)
          // 断线重连提示
          return reject(err)
        }
      }
      $H.post('/chat/send', {
        to_id: this.TO.id,
        type: message.type,
        chat_type: this.TO.chat_type,
        data: message.data,
      }).then(res => {
        // 发送成功
        console.log('chat.js发送成功');
        message.id = res.id
        message.sendStatus = 'success';
        // 更新指定历史记录
        this.updateChatDetail(message, k);
        result(res);
      }).catch(err => {
        // 发送失败
        console.log('chat.js发送失败');
        message.sendStatus = 'fail';
        // 更新指定历史记录
        this.updateChatDetail(message, k);
        // 断线重连提示
        result(err);
      });
    })
  }
  // 验证是否上线
  checkOnLine() {
    if (!this.isOnline) {
      // 断线重连提示
      this.reconnectConfirm();
      return false;
    }
    return true;
  }
  // 断线重连提示
  reconnectConfirm() {
    uni.showModal({
      title: '你已经断线，是否重新连接？',
      content: '重新连接',
      success: res => {
        if (res.confirm) {
          this.connectSocket();
        }
      },
    });
  }
  // 添加聊天记录
  addChatDetail(message, isSend = true) {
    console.log('添加到聊天记录');
    // 获取对方id
    // let id = isSend ? message.to_id : message.from_id;
    let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
    if (!id) {
      return {
        data: {},
        k: 0
      }
    }
    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    console.log(key);
    // 获取原来的聊天记录
    let list = this.getChatdetail(key)
    console.log('获取原来的聊天记录', list);
    // 标识
    message.k = 'k' + list.length
    list.push(message)
    // 加入存储
    console.log('加入存储', message);
    this.setStorage(key, list);
    // 返回
    return {
      data: message,
      k: message.k
    }
  }
  // 更新指定历史记录
  async updateChatDetail(message, k, isSend = true) {
    // 获取对方id
    let id = isSend ? message.to_id : message.from_id
    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    // 获取原来的聊天记录
    let list = this.getChatdetail(key);
    // 根据k查找对应聊天记录
    let index = list.findIndex(item => item.k === k);
    if (index === -1) return;
    
    list[index] = message;
    // 存储
    this.setStorage(key, list);
  }
  // 获取聊天记录
  getChatdetail(key = false) {
    key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
    return this.getStorage(key);
  }
  // 格式化会话最后一条消息显示
  formatChatItemData(message, isSend) {
    let data = message.data
    switch (message.type) {
      case 'emoticon':
        data = '[表情]'
        break;
      case 'image':
        data = '[图片]'
        break;
      case 'audio':
        data = '[语音]'
        break;
      case 'video':
        data = '[视频]'
        break;
      case 'card':
        data = '[名片]'
        break;
    }
    data = isSend ? data : `${message.from_name}: ${data}`
    return data
  }
  // 更新会话列表
  updateChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList()
    // 是否处于当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0
    let avatar = ''
    let name = ''
    // 判断私聊还是群聊
    if (message.chat_type === 'user') { // 私聊
      // 聊天对象是否存在
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
        false
      id = isSend ? message.to_id : message.from_id
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else { // 群聊
      isCurrentChat = this.TO && (this.TO.id === message.to_id)
      id = message.to_id
      avatar = message.to_avatar
      name = message.to_name
    }
    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id
    })
    // 最后一条消息展现形式
    // let data = isSend ? message.data : `${message.from_name}: ${message.data}`
    let data = this.formatChatItemData(message, isSend)
    // 会话不存在，创建会话
    // 未读数是否 + 1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user单聊 group群聊
        avatar, // 接收人/群 头像
        name, // 接收人/群 昵称
        update_time: (new Date()).getTime(), // 最后一条消息的时间戳
        data, // 最后一条消息内容
        type: message.type, // 最后一条消息类型
        noreadnum, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 消息免打扰
        strongwarn: false, // 是否开启强提醒
      }
      // 群聊
      if (message.chat_type === 'group' && message.group) {
        chatItem.shownickname = true
        chatItem.name = message.to_name
        chatItem = {
          ...chatItem,
          user_id: message.group.user_id, // 群管理员id
          remark: "", // 群公告
          invite_confirm: 1, // 邀请确认
        }
      }
      list.unshift(chatItem)
    } else { // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新该会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime()
      item.name = message.to_name
      item.data = data
      item.type = message.type
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index)
    }
    // 存储
    let key = `chatlist_${this.user.id}`
    this.setStorage(key, list)
    // 更新未读数
    this.updateBadge(list)
    // 通知更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list)
    return list
  }
  // 获取聊天记录
  getChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList();
    // 是否处在当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0;
    let avatar = '';
    let name = '';
    // 判断私聊还是群聊
    if (message.chat_type === 'user') {
      // 私聊
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
      id = isSend ? message.to_id : message.from_id;
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else {
      // 群聊
    }
    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id;
    })
    // 最后一条消息展现形式
    let data = isSend ? message.data : `${message.from_name}:${message.data}`;
    // 未读数是否 +1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
    // 会话不存在 创建会话
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user 单聊 group群聊
        name, // 接收人/群 昵称
        avatar, // 接收人/群 头像
        update_time: (new Date()).getTime(), // 最后发送的时间
        data, // 最后一条消息的内容
        type: message.type,
        noreadnum: 1, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 是否免打扰
        strongwarn: false, //  是否强提醒
      }
      if (message.chat_type === 'group') {
        chatItem = {
          ...chatItem,
          user_id: 0, // 管理员id
          remark: '', // 群公告
          invite_confirm: 0 // 邀请确认
        }
      }
      list.unshift(chatItem)
    
    } else {
      // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新改会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime();
      item.data = data;
      item.type = message.type;
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index);
    }
    // 存储
    let key = `chatlist_${this.user.id}`;
    this.setStorage(key, list);
    // 更新未读数
        this.updateBadge(list);
    // 更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list);
    console.log('获取到的会话列表：',list)
    return list;
    /**
     * {
      id:1,  // 接收人/群 id
      chat_type:'user', // 接收类型 user 单聊 group群聊
      name:'昵称', // 接收人/群 昵称
      avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
      type:'',// 最后一条消息类型
      update_time:1628069958, // 最后发送的时间
      data:"你好啊，哈哈哈", // 最后一条消息的内容
      noreadnum:1, // 未读数
      istop:false, // 是否置顶
      shownickname:0, // 是否显示昵称
      nowarn:0, // 是否免打扰
      strongwarn:0, //  是否强提醒
      user_id://管理员id，
      remark:'公告', // 群公告
      invite_confirm:0, // 邀请确认
     },
     **/
  }
  // 获取本地存储会话列表
  getChatList() {
    let key = `chatlist_${this.user.id}`;
    return this.getStorage(key);
  }
  // 读取会话
  async readChatItem(id,chat_type){
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type);
    if(index !== -1){
      list[index].noreadnum = 0;
      let key = `chatlist_${this.user.id}`;
      this.setStorage(key,list);
      // 重新获取未读数
      this.updateBadge();
      // 更新会话列表状态
      uni.$emit('onUpdateChatList',list);
    }
  }
  // 获取指定会话
  getChatListItem(id,chat_type){
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type);
    if(index !== -1){
      return list[index];
    }
    return false;
  }
  // 更新未读数
  async updateBadge(list = false) {
    // 获取所有会话列表
    list = list ? list : this.getChatList()
    // 统计所有未读数
    let total = 0
    
    list.forEach(item => {
      total += item.noreadnum
    })
    // 设置底部导航栏角标 
    if (total > 0) {
      uni.setTabBarBadge({
        index: 0,
        text: total <= 99 ? total.toString() : '99+'
      })
    } else {
      uni.removeTabBarBadge({
        index: 0
      })
    }
    
    uni.$emit('totalNoreadnum', total)
  }
  // 获取存储
  getStorage(key) {
    let list = $U.getStorage(key);
    return list ? JSON.parse(list) : [];
  }
  // 设置存储
  setStorage(key, value) {
    return $U.setStorage(key, JSON.stringify(value));
  }
  // 数组置顶
  listToFirst(arr, index) {
    if (index != 0) {
      arr.unshift(arr.splice(index, 1)[0]);
    }
    return arr;
  }
}
export default chat

// app/controller/chat.js
const Controller = require('egg').Controller;
class ChatController extends Controller {
    // 连接socket
    async connect() {
        const { ctx, app, service } = this;
        if (!ctx.websocket) {
            ctx.throw(400, '非法访问');
        }
        // console.log(`clients: ${app.ws.clients.size}`);
        // 监听接收消息和关闭socket
        ctx.websocket
            .on('message', msg => {
                // console.log('接收消息', msg);
            })
            .on('close', (code, reason) => {
                // 用户下线
                console.log('用户下线', code, reason);
                let user_id = ctx.websocket.user_id;
                // 移除redis中的用户上线记录
                service.cache.remove('online_' + user_id);
                if (app.ws.user && app.ws.user[user_id]) {
                    delete app.ws.user[user_id];
                }
            });
    }
    // 发送消息
    async send(){
        const {ctx,app,service} = this;
        // 用户id
        let current_user_id = ctx.authUser.id;
        // 验证参数
        ctx.validate({
            to_id:{
                type:'int',
                require:true,
                desc:'接收人/群id'
            },
            chat_type:{
                type:'string',
                require:true,
                range:{in:['user','group']},
                desc:'接收类型'
            },
            type:{
                type:'string',
                require:true,
                range:{in:['text','image','video','audio']},
                desc:'消息类型'
            },
            data:{
                type:'string',
                require:true,
                desc:'消息内容'
            }
        });
        
        // 获取参数
        let {to_id,chat_type,type,data} = ctx.request.body;
      
        // 单聊
        if(chat_type=='user'){
            // 验证好友是否存在，并且对方没有把你拉黑
            let Friend = await app.model.Friend.findOne({
                where:{
                    user_id:to_id,
                    friend_id:current_user_id,
                    isblack:0
                },
                include:[{
                    model:app.model.User,
                    as:'userInfo'
                },{
                    model:app.model.User,
                    as:'friendInfo'
                }]
            });
             
            if(!Friend){
                return ctx.apiFail('对方不存在或者已把你拉黑');
            }
            // 验证好友是否被禁用
            if(!Friend.userInfo.status){
                return ctx.apiFail('对方已经被禁用');
            }
            // 构建消息格式
            let from_name = Friend.friendInfo.nickname ? Friend.friendInfo.nickname : Friend.friendInfo.username;
            if(Friend.nickname){
                from_name = Friend.nickname;
            }
           
            let message = {
                id:(new Date()).getTime(), // 唯一id，后端生成唯一id
                from_avatar:Friend.friendInfo.avatar,// 发送者头像
                from_name,// 发送者昵称
                from_id:current_user_id, // 发送者id
                to_id,// 接收人id
                to_name:Friend.userInfo.nickname ? Friend.userInfo.nickname : Friend.userInfo.username,// 接收人/群 名称
                to_avatar:Friend.userInfo.avatar,// 接收人/群 头像 
                chat_type:'user', // 接收类型
                type, // 消息类型
                data, // 消息内容
                options:{}, // 其他参数
                create_time:(new Date()).getTime(),// 创建时间
                isremove:0 // 是否撤回
            }
            
            // // 拿到当前的socket
            // let  socket = app.ws.user[to_id];
            // // 验证对方是否在线，不在线记录到待接收消息队列中 在线：消息推送 存储到对方的聊天记录中 chatlog_对方用户id_user_当前用户id
            
            // if(!socket){
            //     service.cache.setList('getmessage_'+to_id,message);
            // }else{
            //     // 消息推送
            //     socket.send(JSON.stringify({
            //         msg:'ok',
            //         data:message
            //     }))
            //     // 存到历史记录中
            //     service.cache.setList(`chatlog_${to_id}_${message.chat_type}_${current_user_id}`,message);
            // }
            ctx.sendAndSaveMessage(to_id,message);
            // 存储到自己的聊天记录中
            service.cache.setList(`chatlog_${current_user_id}_${message.chat_type}_${to_id}`,message);
            // 返回成功
            return ctx.apiSuccess(message);
        }
        // 验证
    }
}
module.exports = ChatController;

'use strict';
const Controller = require('egg').Controller;
class GroupController extends Controller {
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
    // 验证参数
    ctx.validate({
        ids:{
            require:true,
            type:'array'
        }
    });
    let { ids } = ctx.request.body;
    // 验证是否是我的好友
    let friends = await app.model.Friend.findAll({
        where:{
            user_id:current_user_id,
            friend_id:ids
        },
        include:[{
            model:app.model.User,
            as:'friendInfo',
            attributes:['nickname','username']
        }]
    });
    if (!friends.length) {
        return ctx.apiFail('请选择需要加入群聊的好友');
    }
    // 创建群聊
    let name = friends.map(item=>item.friendInfo.nickname || item.friendInfo.username);
    name.push(ctx.authUser.nickname || ctx.authUser.username); // 将自己的数据加入
    let group = await app.model.Group.create({
        name:name.join(','),
        avatar:'',
        user_id:current_user_id
    });
    // 加入群聊用户
    let data = friends.map(item=>{
         return {user_id:item.friend_id,group_id:group.id}
     });
     data.unshift({
         user_id:current_user_id,
         group_id:group.id
     });
     await app.model.GroupUser.bulkCreate(data);
    // 消息推送
     let message = {
        id:(new Date()).getTime(), // 唯一id，后端生成唯一id
        from_avatar:ctx.authUser.avatar,// 发送者头像
        from_name:ctx.authUser.nickname || ctx.authUser.username,// 发送者昵称
        from_id:current_user_id, // 发送者id
        to_id:group_id,// 接收人id
        to_name:group.name,// 接收人/群 名称
        to_avatar:group.avatar,// 接收人/群 头像 
        chat_type:'group', // 接收类型
        type:'system', // 消息类型
        data:'创建群聊成功，可以聊天了', // 消息内容
        options:{}, // 其他参数
        create_time:(new Date()).getTime(),// 创建时间
        isremove:0, // 是否撤回
        group:group
    }
    data.forEach(item=>{
        ctx.sendAndSaveMessage(item.user_id,message);
    });
    ctx.apiSuccess('ok');
  }
}
module.exports = GroupController;

// app/extend/context.js
module.exports = {
  // 成功提示
  apiSuccess(data = '', msg = 'ok', code = 200) {
    this.body = { msg, data };
    this.status = code;
  },
  // 失败提示
  apiFail(data = '', msg = 'fail', code = 400) {
    this.body = { msg, data };
    this.status = code;
  },
  // 生成token
  getToken(value) {
        return this.app.jwt.sign(value, this.app.config.jwt.secret);
  },
  // 验证token
  checkToken(token) {
        return this.app.jwt.verify(token, this.app.config.jwt.secret);
  },
  // 发送或者存到消息队列中
  sendAndSaveMessage(to_id,message){
      const { app,service } = this;
      let current_user_id = this.authUser.id;
       // 拿到当前的socket
       let  socket = app.ws.user[to_id];
       // 验证对方是否在线，不在线记录到待接收消息队列中 在线：消息推送 存储到对方的聊天记录中 chatlog_对方用户id_user_当前用户id
            
            if(!socket){
                service.cache.setList('getmessage_'+to_id,message);
            }else{
                // 消息推送
                socket.send(JSON.stringify({
                    msg:'ok',
                    data:message
                }))
                // 存到历史记录中
                service.cache.setList(`chatlog_${to_id}_${message.chat_type}_${current_user_id}`,message);
            }
  }
};

import $U from "./util.js";
import $H from './request.js';
class chat {
  constructor(arg) {
    this.url = arg.url
    this.isOnline = false
    this.socket = null
    // 获取当前用户相关信息
    let user = $U.getStorage('user');
    this.user = user ? JSON.parse(user) : {},
      // 初始化聊天对象
      this.TO = false;
    // 连接和监听
    if (this.user.token) {
      this.connectSocket()
    }
  }
  // 连接socket
  connectSocket() {
    console.log(this.user);
    this.socket = uni.connectSocket({
      url: this.url + '?token=' + this.user.token,
      complete: () => {}
    })
    // 监听连接成功
    this.socket.onOpen(() => this.onOpen())
    // 监听接收信息
    this.socket.onMessage((res) => this.onMessage(res))
    // 监听断开
    this.socket.onClose(() => this.onClose())
    // 监听错误
    this.socket.onError(() => this.onError())
  }
  // 监听打开
  onOpen() {
    // 用户状态上线
    this.isOnline = true;
    console.log('socket连接成功');
    // 获取用户离线消息
  }
  // 监听关闭
  onClose() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接关闭');
  }
  // 监听消息
  onMessage(data) {
    console.log('监听消息', data);
    let res = JSON.parse(data.data)
    // console.log('监听接收消息',res)
    // 错误
    switch (res.msg) {
      case 'fail':
        return uni.showToast({
          title: res.data,
          icon: 'none'
        });
        break;
      case 'recall': // 撤回消息
        this.handleOnRecall(res.data)
        break;
      case 'updateApplyList': // 新的好友申请
        $store.dispatch('getApply');
        break;
      case 'moment': // 朋友圈更新
        this.handleMoment(res.data)
        break;
      default:
        // 处理消息
        this.handleOnMessage(res.data)
        break;
    }
  }
  // 处理消息
  async handleOnMessage(message) {
    // 添加消息记录到本地存储中
    let { data } = this.addChatDetail(message, false)
    // 更新会话列表
    this.updateChatList(data, false)
    // 全局通知
    uni.$emit('onMessage', data)
    // 消息提示
    // this.messageNotice()
  }
  // 监听连接错误
  onError() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接错误');
  }
  // 关闭连接
  close() {
    this.socket.close()
  }
  // 创建聊天对象
  createChatObject(detail) {
    this.TO = detail;
    console.log('创建聊天对象', this.TO)
  }
  // 销毁聊天对象
  destoryChatObject() {
    this.TO = false
  }
  // 组织发送信息格式
  formatSendData(params) {
    return {
      id: 0, // 唯一id，后端生成，用于撤回指定消息
      from_avatar: this.user.avatar, // 发送者头像
      from_name: this.user.nickname || this.user.username, // 发送者昵称
      from_id: this.user.id, // 发送者id
      to_id: params.to_id || this.TO.id, // 接收人/群 id
      to_name: params.to_name || this.TO.name, // 接收人/群 名称
      to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
      chat_type: params.chat_type || this.TO.chat_type, // 接收类型
      type: params.type, // 消息类型
      data: params.data, // 消息内容
      options: params.options ? params.options : {}, // 其他参数
      create_time: (new Date()).getTime(), // 创建时间
      isremove: 0, // 是否撤回
      sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态，success发送成功,fail发送失败,pending发送中
    }
  }
  // 发送信息
  send(message, onProgress = false) {
    return new Promise((result, reject) => {
      // 添加消息历史记录
      // this.addChatDetail();
      let { k } = this.addChatDetail(message);
      // 更新会话列表 
      this.updateChatList(message);
      // 验证是否上线
      if (!this.checkOnLine()) return reject('未上线');
      // 上传文件
      let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
        'card' && !message.data.startsWith('http://tangzhe123-com'))
      let uploadResult = ''
      if (isUpload) {
        uploadResult = $H.upload('/upload', {
          filePath: message.data
        }, onProgress)
        if (!uploadResult) {
          // 发送失败
          message.sendStatus = 'fail'
          // 更新指定历史记录
          this.updateChatDetail(message, k)
          // 断线重连提示
          return reject(err)
        }
      }
      $H.post('/chat/send', {
        to_id: this.TO.id,
        type: message.type,
        chat_type: this.TO.chat_type,
        data: message.data,
      }).then(res => {
        // 发送成功
        console.log('chat.js发送成功');
        message.id = res.id
        message.sendStatus = 'success';
        // 更新指定历史记录
        this.updateChatDetail(message, k);
        result(res);
      }).catch(err => {
        // 发送失败
        console.log('chat.js发送失败');
        message.sendStatus = 'fail';
        // 更新指定历史记录
        this.updateChatDetail(message, k);
        // 断线重连提示
        result(err);
      });
    })
  }
  // 验证是否上线
  checkOnLine() {
    if (!this.isOnline) {
      // 断线重连提示
      this.reconnectConfirm();
      return false;
    }
    return true;
  }
  // 断线重连提示
  reconnectConfirm() {
    uni.showModal({
      title: '你已经断线，是否重新连接？',
      content: '重新连接',
      success: res => {
        if (res.confirm) {
          this.connectSocket();
        }
      },
    });
  }
  // 添加聊天记录
  addChatDetail(message, isSend = true) {
    console.log('添加到聊天记录');
    // 获取对方id
    let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
    if (!id) {
      return {
        data: {},
        k: 0
      }
    }
    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    console.log(key);
    // 获取原来的聊天记录
    let list = this.getChatdetail(key)
    console.log('获取原来的聊天记录', list);
    // 标识
    message.k = 'k' + list.length
    list.push(message)
    // 加入存储
    console.log('加入存储', message);
    this.setStorage(key, list);
    // 返回
    return {
      data: message,
      k: message.k
    }
  }
  // 更新指定历史记录
  async updateChatDetail(message, k, isSend = true) {
    // 获取对方id
    let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    // 获取原来的聊天记录
    let list = this.getChatdetail(key);
    // 根据k查找对应聊天记录
    let index = list.findIndex(item => item.k === k);
    if (index === -1) return;
    
    list[index] = message;
    // 存储
    this.setStorage(key, list);
  }
  // 获取聊天记录
  getChatdetail(key = false) {
    key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
    return this.getStorage(key);
  }
  // 格式化会话最后一条消息显示
  formatChatItemData(message, isSend) {
    let data = message.data
    switch (message.type) {
      case 'emoticon':
        data = '[表情]'
        break;
      case 'image':
        data = '[图片]'
        break;
      case 'audio':
        data = '[语音]'
        break;
      case 'video':
        data = '[视频]'
        break;
      case 'card':
        data = '[名片]'
        break;
    }
    data = isSend ? data : `${message.from_name}: ${data}`
    return data
  }
  // 更新会话列表
  updateChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList()
    // 是否处于当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0
    let avatar = ''
    let name = ''
    // 判断私聊还是群聊
    if (message.chat_type === 'user') { // 私聊
      // 聊天对象是否存在
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
        false
      id = isSend ? message.to_id : message.from_id
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else { // 群聊
      isCurrentChat = this.TO && (this.TO.id === message.to_id)
      id = message.to_id
      avatar = message.to_avatar
      name = message.to_name
    }
    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id
    })
    // 最后一条消息展现形式
    // let data = isSend ? message.data : `${message.from_name}: ${message.data}`
    let data = this.formatChatItemData(message, isSend)
    // 会话不存在，创建会话
    // 未读数是否 + 1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user单聊 group群聊
        avatar, // 接收人/群 头像
        name, // 接收人/群 昵称
        update_time: (new Date()).getTime(), // 最后一条消息的时间戳
        data, // 最后一条消息内容
        type: message.type, // 最后一条消息类型
        noreadnum, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 消息免打扰
        strongwarn: false, // 是否开启强提醒
      }
      // 群聊
      if (message.chat_type === 'group' && message.group) {
        chatItem.shownickname = true
        chatItem.name = message.to_name
        chatItem = {
          ...chatItem,
          user_id: message.group.user_id, // 群管理员id
          remark: "", // 群公告
          invite_confirm: 1, // 邀请确认
        }
      }
      list.unshift(chatItem)
    } else { // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新该会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime()
      item.name = message.to_name
      item.data = data
      item.type = message.type
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index)
    }
    // 存储
    let key = `chatlist_${this.user.id}`
    this.setStorage(key, list)
    // 更新未读数
    this.updateBadge(list)
    // 通知更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list)
    return list
  }
  // 获取聊天记录
  getChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList();
    // 是否处在当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0;
    let avatar = '';
    let name = '';
    // 判断私聊还是群聊
    if (message.chat_type === 'user') {
      // 私聊
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
      id = isSend ? message.to_id : message.from_id;
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else {
      // 群聊
    }
    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id;
    })
    // 最后一条消息展现形式
    let data = isSend ? message.data : `${message.from_name}:${message.data}`;
    // 未读数是否 +1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
    // 会话不存在 创建会话
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user 单聊 group群聊
        name, // 接收人/群 昵称
        avatar, // 接收人/群 头像
        update_time: (new Date()).getTime(), // 最后发送的时间
        data, // 最后一条消息的内容
        type: message.type,
        noreadnum: 1, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 是否免打扰
        strongwarn: false, //  是否强提醒
      }
      if (message.chat_type === 'group') {
        chatItem = {
          ...chatItem,
          user_id: 0, // 管理员id
          remark: '', // 群公告
          invite_confirm: 0 // 邀请确认
        }
      }
      list.unshift(chatItem)
    
    } else {
      // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新改会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime();
      item.data = data;
      item.type = message.type;
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index);
    }
    // 存储
    let key = `chatlist_${this.user.id}`;
    this.setStorage(key, list);
    // 更新未读数
        this.updateBadge(list);
    // 更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list);
    console.log('获取到的会话列表：',list)
    return list;
    /**
     * {
      id:1,  // 接收人/群 id
      chat_type:'user', // 接收类型 user 单聊 group群聊
      name:'昵称', // 接收人/群 昵称
      avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
      type:'',// 最后一条消息类型
      update_time:1628069958, // 最后发送的时间
      data:"你好啊，哈哈哈", // 最后一条消息的内容
      noreadnum:1, // 未读数
      istop:false, // 是否置顶
      shownickname:0, // 是否显示昵称
      nowarn:0, // 是否免打扰
      strongwarn:0, //  是否强提醒
      user_id://管理员id，
      remark:'公告', // 群公告
      invite_confirm:0, // 邀请确认
     },
     **/
  }
  // 获取本地存储会话列表
  getChatList() {
    let key = `chatlist_${this.user.id}`;
    return this.getStorage(key);
  }
  // 读取会话
  async readChatItem(id,chat_type){
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type);
    if(index !== -1){
      list[index].noreadnum = 0;
      let key = `chatlist_${this.user.id}`;
      this.setStorage(key,list);
      // 重新获取未读数
      this.updateBadge();
      // 更新会话列表状态
      uni.$emit('onUpdateChatList',list);
    }
  }
  // 获取指定会话
  getChatListItem(id,chat_type){
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type);
    if(index !== -1){
      return list[index];
    }
    return false;
  }
  // 更新未读数
  async updateBadge(list = false) {
    // 获取所有会话列表
    list = list ? list : this.getChatList()
    // 统计所有未读数
    let total = 0
    
    list.forEach(item => {
      total += item.noreadnum
    })
    // 设置底部导航栏角标 
    if (total > 0) {
      uni.setTabBarBadge({
        index: 0,
        text: total <= 99 ? total.toString() : '99+'
      })
    } else {
      uni.removeTabBarBadge({
        index: 0
      })
    }
    
    uni.$emit('totalNoreadnum', total)
  }
  // 获取存储
  getStorage(key) {
    let list = $U.getStorage(key);
    return list ? JSON.parse(list) : [];
  }
  // 设置存储
  setStorage(key, value) {
    return $U.setStorage(key, JSON.stringify(value));
  }
  // 数组置顶
  listToFirst(arr, index) {
    if (index != 0) {
      arr.unshift(arr.splice(index, 1)[0]);
    }
    return arr;
  }
}
export default chat

<template>
  <view>
    
    <!-- 导航栏 -->
    <free-nav-bar title="选择" showBack :showRight="true">
      <free-main-button :name="buttonText" slot="right" @click="submit"></free-main-button>
    </free-nav-bar>
    
    <!-- 通讯录列表 -->
    <scroll-view scroll-y="true" 
    :style="'height:'+scrollHeight+'px;'"
    :scroll-into-view="scrollInto">
      
      <template v-if="type === 'see'">
        <free-list-item v-for="(item,index) in typeList"
        :key="item.key" :title="item.name" 
        :showRightIcon="false" showRight
        @click="typeIndex = index">
          <view slot="right"
          style="width: 40rpx;height: 40rpx;"
          class="border rounded-circle flex align-center justify-center mr-4">
            <view v-if="typeIndex === index" 
            style="width: 30rpx;height: 30rpx;"
            class="main-bg-color rounded-circle"></view>
          </view>
        </free-list-item>
      </template>
    
    
      <template v-if="type !== 'see' || (type === 'see' && (typeIndex === 1 || typeIndex === 2)) ">
        <view v-for="(item,index) in list" :key="index"
        :id="'item-'+item.title">
          <view v-if="item.list.length" 
          class="py-2 px-3 border-bottom bg-light">
            <text class="font-md text-dark">{{item.title}}</text>
          </view>
          <free-list-item v-for="(item2,index2) in item.list" 
          :key="index2" :title="item2.name" 
          :cover="item2.avatar || '/static/images/userpic.png'"
          :showRightIcon="false" showRight
          @click="selectItem(item2)">
            <view slot="right"
            style="width: 40rpx;height: 40rpx;"
            class="border rounded-circle flex align-center justify-center mr-4">
              <view v-if="item2.checked" 
              style="width: 30rpx;height: 30rpx;"
              class="main-bg-color rounded-circle"></view>
            </view>
          </free-list-item>
        </view>
      </template>
      
    </scroll-view>
    
    <!-- 侧边导航条 -->
    <view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:'+top+'px;'" style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <view class="flex-1 flex align-center justify-center"
      v-for="(item,index) in list" :key="index">
        <text class="font-sm text-muted">{{item.title}}</text>
      </view>
    </view>
    <view class="position-fixed rounded-circle bg-light border flex align-center justify-center" v-if="current"
    style="width: 150rpx;height: 150rpx;left: 300rpx;"
    :style="'top:'+modalTop+'px;'">
      <text class="font-lg">{{current}}</text>
    </view>
  </view>
</template>
<script>
  import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
  import freeListItem from "@/components/free-ui/free-list-item.vue"
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import { mapState } from 'vuex'
  import $H from '@/common/free-lib/request.js';
  export default {
    components: {
      freeNavBar,
      freeListItem,
      freeMainButton
    },
    data() {
      return {
        typeIndex:0,
        typeList:[{
          name:"公开",
          key:"all"
        },{
          name:"谁可以看",
          key:"only"
        },{
          name:"不给谁看",
          key:"except"
        },{
          name:"私密",
          key:"none"
        }],
        
        top:0,
        scrollHeight:0,
        scrollInto:'',
        current:'',
        
        selectList:[],
        
        type:"",
        
        limit:9,
        
        id:0
      }
    },
    onLoad(e) {
      let res = uni.getSystemInfoSync()
      this.top = res.statusBarHeight + uni.upx2px(90)
      this.scrollHeight = res.windowHeight - this.top
      
      if(e.type){
        this.type = e.type
      }
      if(e.limit){
        this.limit = parseInt(e.limit)
      }
      if(e.id){
        this.id = e.id
        if(e.type === 'inviteGroup'){
          this.limit = 1
        }
      }
      this.$store.dispatch('getMailList')
    },
    computed: {
      ...mapState({
        list:state=>state.user.mailList
      }),
      buttonText(){
        let text = '发送'
        if(this.type === 'createGroup'){
          text = '创建群组'
        }
        return text + ' ('+this.selectCount+')'
      },
      modalTop(){
        return (this.scrollHeight - uni.upx2px(150)) / 2
      },
      // 每个索引的高度
      itemHeight() {
        let count = this.list.length
        if(count < 1){
          return 0
        }
        return this.scrollHeight /  count
      },
      // 选中数量
      selectCount(){
        return this.selectList.length
      }
    },
    methods: {
      touchstart(e){
        this.changeScrollInto(e)
      },
      touchmove(e){
        this.changeScrollInto(e)
      },
      touchend(e){
        this.current = ''
      },
      // 联动
      changeScrollInto(e){
        let Y = e.touches[0].pageY
        // #ifdef MP
        Y = Y - this.top
        // #endif
        let index = Math.floor(Y / this.itemHeight)
        let item = this.list[index]
        if(item){
          this.scrollInto = 'item-'+item.title
          this.current = item.title
        }
      },
      // 选中/取消选中
      selectItem(item){
        if(!item.checked && this.selectCount === this.limit){
          // 选中|限制选中数量
          return uni.showToast({
            title: '最多选中 '+this.limit+' 个',
            icon: 'none'
          });
        }
        item.checked = !item.checked
        if(item.checked){ // 选中
          this.selectList.push(item)
        } else { // 取消选中
          let index = this.selectList.findIndex(v=> v === item)
          if(index > -1){
            this.selectList.splice(index,1)
          }
        }
      },
      submit(){
        if(this.type !== 'see' && this.selectCount === 0){
          return uni.showToast({
            title: '请先选择',
            icon: 'none'
          });
        }
        switch (this.type){
          case 'createGroup': // 创建群组
          $H.post('/group/create',{
            ids:this.selectList.map(item=>item.user_id)
          }).then(res=>{
            uni.showToast({
              title: '创建群聊成功',
              icon: 'none'
            });
            uni.redirectTo({
              url:'/pages/tabbar/index/index'
            })
          })
            break;
          case 'sendCard':
          let item = this.selectList[0]
          uni.$emit('sendItem',{
            sendType:"card",
            data:item.name,
            type:"card",
            options:{
              avatar:item.avatar,
              id:item.user_id
            }
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'remind':
          uni.$emit('sendResult',{
            type:"remind",
            data:this.selectList
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'see':
          let k = this.typeList[this.typeIndex].key
          if(k !== 'all' && k!== 'none' && !this.selectCount){
            return uni.showToast({
              title: '请先选择',
              icon: 'none'
            });
          }
          uni.$emit('sendResult',{
            type:"see",
            data:{
              k,
              v:this.selectList
            }
          })
          uni.navigateBack({
            delta: 1
          });
            break;
          case 'inviteGroup':
          console.log(this.selectList);
          $H.post('/group/invite',{
            id:this.id,
            user_id:this.selectList[0].user_id
          }).then(res=>{
            uni.showToast({
              title: '邀请成功',
              icon: 'none'
            });
            uni.navigateBack({
              delta: 1
            });
          })
            break;
        }
      }
    }
  }
</script>
<style>
</style>

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
      <free-icon-button slot="right"><text class="iconfont font-md" @click="openChat">&#xe6fd;</text>
      </free-icon-button>
    </free-nav-bar>
    <!-- 聊天内容区域 -->
    <scroll-view scroll-y="true" class="bg-light position-fixed left-0 right-0" style="bottom: 105rpx;"
      :style="chatBodyBottom" :show-scrollbar="false">
      <!-- <view v-for="(item,index) in list" :key="index" 
      :id="'chatItem_'+index">
        <free-chat-item :item="item" :index="index" ref="chatItem"
        :pretime=" index > 0 ? list[index-1].create_time : 0"
        @long="long" @preview="previewImage" 
        :shownickname="currentChatItem.shownickname"
        ></free-chat-item>
      </view> -->
      <!-- 聊天信息列表组件 -->
      <view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index">
        <free-chat-item :item="item" :index="index" ref="chatItem"
          :pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage">
        </free-chat-item>
      </view>
      <!-- 聊天信息列表组件 -->
      <!-- <view v-for="(item,index) in list" :key="index">
        <free-chat-item :item="item" :index="index" :pretime="index > 0 ? list[index-1].create_time : 0"
          @long="long" ref="chatItem" @preview="previewImage"></free-chat-item>
      </view> -->
      <!-- 右边 -->
      <!--  <view class="flex align-start justify-end position-relative">
        <div class="bg-chat-item p-2 rounded mr-3" style="max-width:500rpx;">
          <text class="font-md">你好你好你好你好你好你好你好你好你好你好你好</text>
        </div>
        <view class="iconfont font-md position-absolute chat-right-icon"><text class="text-chat-item iconfont font-md">&#xe640;</text></view>
        <free-avatar size="75" src="/static/images/demo/demo6.jpg"></free-avatar>
      </view> -->
    </scroll-view>
    <!-- 扩展菜单 -->
    <free-popup ref="action" bottom transformOrigin="center bottom" @hide="keyBoardHeight = 0" :mask="false">
      <view style="height: 580rpx;" class="border-top border-light-secondary">
        <swiper :indicator-dots="emoticonOrActionList.length>1" style="height:510rpx;">
          <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index">
            <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;"
              v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
              <image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
              <text class="font-sm text-muted mt-2">{{item2.name}}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </free-popup>
    <!-- 弹出层 -->
    <free-popup ref="extend" maskColor bottom :bodyWidth="240" :bodyHeight="geMenusHeight" :tabbarHeight="105">
      <view class="flex flex-column" style="width:240rpx;" :style="getMenusStyle">
        <view v-for="(item,index) in menusList" :key="index" class="flex-1 flex align-center"
          hover-class="bg-light" @click="clickEvent(item.event)">
          <text class="font-md pl-3">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
    <!-- #ifdef APP-PLUS-NVUE -->
    <div class="position-fixed top-0 right-0 left-0 bottom-0" v-if="mode==='action' || mode==='emoticon'"
      @click="clickPage" :style="'bottom:'+maskBottom+'px;'"></div>
    <!-- #endif -->
    <!-- 底部输入框 -->
    <view class="position-fixed left-0 right-0 border-top flex align-center"
      style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+keyBoardHeight+'px;'">
      <free-icon-button @click="changeVoiceOrText">
        <block v-if="mode === 'audio'">
          <text class="iconfont font-lg">&#xe607;</text>
        </block>
        <block v-else>
          <text class="iconfont font-lg">&#xe606;</text>
        </block>
      </free-icon-button>
      <view class="flex-1">
        <view v-if="mode==='audio'" class="rounded flex align-center justify-center" style="height: 80rpx;"
          :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart"
          @touchend="voiceTouchEnd" @touchmove="voiceTouchMove" @touchcancel="voiceTouchCancel">
          <text class="font">{{isRecording ? '松开 结束' : '按住 说话'}}</text>
        </view>
        <!-- 底部输入框 -->
        <textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;"
          :adjust-position="false" v-model="text" @focus="mode = 'text'" />
        <!-- @click="onInputClick" -->
        <!-- <textarea v-else class="bg-white rounded p-1 font-md" style="height: 50rpx;max-width: 500rpx;"
          :adjust-position="false" v-model="text" @focus="mode = 'text'"  /> -->
      </view>
      <template v-if="text.length === 0">
        <!-- 表情 -->
        <free-icon-button><text class="iconfont font-lg"
            @click="openActionOrEmoticon('emoticon')">&#xe605;</text></free-icon-button>
        <!-- 扩展菜单 -->
        <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</text>
        </free-icon-button>
      </template>
      <view v-else class="flex-shrink">
        <!-- 发送按钮 -->
        <!-- <view class="main-bg-color rounded flex align-center justify-center mr-2 px-2 pt-4" style="height: 70rpx;" @click="send('text')"> 发送
        </view> -->
        <free-main-button name="发送" @click="send('text')"></free-main-button>
      </view>
    </view>
    <!-- 录音提示 -->
    <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center"
      style="bottom: 105rpx;">
      <view class="rounded flex flex-column align-center justify-center"
        style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);">
        <image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
        <text class="font text-white mt-3">{{unRecord?'松开手指，取消发送':'手指上滑，取消发送'}}</text>
      </view>
    </view>
  </view>
</template>
<script>
  // #ifdef APP-NVUE
  const domModule = weex.requireModule('dom');
  // #endif
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeIconButton from '@/components/free-ui/free-icon-button.vue';
  import freeChatItem from '@/components/free-ui/free-chat-item.vue';
  import freePopup from '@/components/free-ui/free-popup.vue';
  import freeMainButton from '@/components/free-ui/free-main-button.vue';
  import {
    mapState,
    mapMutations
  } from 'vuex';
  import auth from '@/common/mixin/auth.js';
  export default {
    mixins: [auth],
    components: {
      freeNavBar,
      freeIconButton,
      freeChatItem,
      freePopup,
      freeMainButton
    },
    watch: {
      mode(newValue, oldValue) {
        if (newValue !== 'action' && newValue !== 'emoticon') {
          this.$refs.action.hide();
        }
        if (newValue !== 'text') {
          uni.hideKeyboard()
        }
      }
    },
    // 生命周期
    mounted() {
      this.statusBarHeight = 0;
      // 获取任务栏高度
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigator.getStatusbarHeight()
      // #endif
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
      // 监听键盘高度变化
      uni.onKeyboardHeightChange((res) => {
        if (this.mode !== 'action' && this.mode !== 'emoticon') {
          this.keyBoardHeight = res.height;
        }
        if (this.keyBoardHeight > 0) {
          this.pageToBottom()
        }
      })
      // 注册发送音频事件
      this.regSendVoiceEvent((url) => {
        if (!this.unRecord) {
          // 发送
          this.send('audio', url, {
            time: this.RecordTime
          })
        }
      });
    },
    onLoad(e) {
      if (!e.params) {
        return this.backToast();
      }
      // 初始化
      this.__init();
      this.detail = JSON.parse(e.params)
      // 创建聊天对象
      this.chat.createChatObject(this.detail)
      // 获取历史记录
      this.list = this.chat.getChatdetail()
      // 监听接收聊天信息
      uni.$on('onMessage', (message)=>{
        if((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type==='group' && this.detail.id)){
          this.list.push(message);
          // 置于顶部
        }
      })
      // uni.$on('updateHistory', this.updateHistory)
    },
    destroyed() {
      // 销毁聊天对象
      this.chat.destoryChatObject();
      // 销毁监听接收聊天消息
      uni.$off('onMessage',()=>{})
    },
    computed: {
      ...mapState({
        RECORD: state => state.audio.RECORD,
        RecordTime: state => state.audio.RecordTime,
        chat: state => state.user.chat,
        totalNoreadnum:state=>state.user.totalNoreadnum
      }),
      // 所有信息的图片地址
      imageList() {
        var arr = [];
        this.list.forEach((item) => {
          if (item.type === 'emoticon' || item.type === 'image') {
            arr.push(item.data)
          }
        })
        return arr;
      },
      // 获取蒙版的位置
      maskBottom() {
        return this.keyBoardHeight + uni.upx2px(105)
      },
      // 动态获取菜单高度
      geMenusHeight() {
        let H = 100;
        return this.menus.length * H;
      },
      // 获取菜单的样式
      getMenusStyle() {
        return `height:${this.geMenusHeight}rpx;`;
      },
      // 是否是本人
      isdoSelf() {
        // 获取本人id（假设拿到了）
        let id = 1
        let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
        return user_id === id
      },
      // 获取操作菜单
      menusList() {
        return this.menus.filter(v => {
          if (v.name === '撤回' && this.isDoSelf) {
            return false;
          } else {
            return true;
          }
        })
      },
      // 聊天区域bottom
      chatBodyBottom() {
        return `bottom:${uni.upx2px(105) + this.keyBoardHeight}px;top:${this.navBarHeight}px`;
      },
      // 获取操作或者表情列表
      emoticonOrActionList() {
        if (this.mode === 'emoticon' || this.mode === 'action') {
          return this[this.mode + 'List'];
        } else {
          return [];
        }
      }
    },
    data() {
      return {
        // 模式 text输入文字 emoticon表情 action操作 audio音频
        mode: 'text',
        // 扩展菜单列表
        actionList: [
          [{
              name: "相册",
              icon: "/static/images/extends/pic.png",
              event: "uploadImage"
            },
            {
              name: "拍摄",
              icon: "/static/images/extends/video.png",
              event: "uploadVideo"
            },
            {
              name: "收藏",
              icon: "/static/images/extends/shoucan.png",
              event: ""
            },
            {
              name: "名片",
              icon: "/static/images/extends/man.png",
              event: ""
            },
            {
              name: "语音通话",
              icon: "/static/images/extends/phone.png",
              event: ""
            },
            {
              name: "位置",
              icon: "/static/images/extends/path.png",
              event: ""
            }
          ]
        ],
        // 表情包
        emoticonList: [
          [{
              name: "沮丧",
              icon: "/static/images/emoticon/5497/0.gif",
              event: ""
            },
            {
              name: "沮丧",
              icon: "/static/images/emoticon/5497/0.gif",
              event: ""
            }
          ]
        ],
        // 输入文字
        text: "",
        // 音频录制中
        isRecording: false,
        // 取消录音
        unRecord: false,
        // 当前气泡索引
        keyBoardHeight: 0,
        propIndex: 1,
        navBarHeight: 0,
        list: [],
        RecordingStartY: 0,
        detail: {
          id: 0,
          name: '',
          avatar: '',
          chat_type: 'user'
        },
        menus: [{
            name: '复制',
            event: ""
          },
          {
            name: '发送给朋友',
            event: ""
          },
          {
            name: '收藏',
            event: ""
          },
          {
            name: '删除',
            event: ""
          },
          {
            name: '多选',
            event: ""
          },
          {
            name: '撤回',
            event: "removeChatItem"
          }
        ],
      }
    },
    methods: {
      ...mapMutations(['regSendVoiceEvent']),
      __init() {
        var total = 24;
        var page = Math.ceil(total / 8);
        var arr = [];
        for (var i = 0; i < page; i++) {
          var start = i * 8;
          arr[i] = [];
          for (var j = 0; j <= 8; j++) {
            arr[i].push({
              name: '表情' + (start + j),
              icon: '/static/images/emoticon/5497/' + (start + j) + '.gif',
              event: 'sendEmoticon'
            })
          }
        }
        this.emoticonList = arr;
      },
      // 点击区域
      clickPage() {
        // 隐藏操作菜单
        this.$refs.action.hide();
        this.mode = 'text';
      },
      // 输入框聚焦
      // onInputClick(event) {
      //  this.mode = 'text';
      // },
      // 事件分发
      actionEvent(e) {
        switch (e.event) {
          case 'uploadImage':
            uni.chooseImage({
              count: 9, //默认9
              success: (res) => {
                res.tempFilePaths.forEach((item) => {
                  // 发送到服务器
                  // 渲染到页面
                  this.send('image', item);
                })
              }
            });
            break;
          case 'sendEmoticon': // 发送表情包
            this.send('emoticon', e.icon);
            break;
          case 'uploadVideo': // 发送短视频
            uni.chooseVideo({
              maxDuration: 10,
              success: (res) => {
                // 渲染页面
                this.send('video', res.tempFilePath);
                // 发送到服务端（获取视频封面，返回url）
                // 修改本地发送状态
              }
            })
            break;
        }
      },
      // 打开扩展菜单或者表情包
      openActionOrEmoticon(model = 'action') {
        this.mode = model;
        this.$refs.action.show();
        uni.hideKeyboard();
        this.keyBoardHeight = uni.upx2px(580);
      },
      // 发送
      send(type, data = '', options = {}) {
        // 组织数据格式
        switch (type) {
          case 'text':
            data = data || this.text
            break;
        }
        let message = this.chat.formatSendData({
          type,
          data,
          options
        })
        // 渲染到页面
        console.log('this.list：', this.list)
        let index = this.list.length
        this.list.push(message)
        // 监听上传进度
        let onProgress = false
        if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data
          .startsWith('http')) {
          onProgress = (progress) => {
            console.log('上传进度：', progress);
          }
        }
        // 发送到服务端
        this.chat.send(message, onProgress).then(res => {
          console.log(res);
          // 发送成功
          this.list[index].id = res.id
          this.list[index].sendStatus = 'success'
        }).catch(err => {
          // 发送失败
          this.list[index].sendStatus = 'fail'
          console.log(err);
        })
        // 发送文字成功，清空输入框
        if (type === 'text') {
          this.text = ''
        }
        // 置于底部
        // this.pageToBottom()
      },
      // 长按消息气泡
      long(e) {
        this.propIndex = e.index;
        this.$refs.extend.show(e.x, e.y);
      },
      // 回到底部
      pageToBottom() {
        let chatItem = this.$refs.chatItem;
        let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0;
        let last = chatItem[lastIndex];
        // #ifdef APP-NVUE
        if (chatItem[lastIndex]) {
          domModule.scrollToElement(last, {});
        }
        // #endif
      },
      // 操作菜单方法分发
      clickEvent(event) {
        switch (event) {
          case 'removeChatItem': // 撤回消息
            // 拿到当前被操作的信息
            this.list[this.propIndex].isremove = true;
            break;
          default:
            break;
        }
        // 关闭菜单
        this.$refs.extend.hide();
      },
      // 预览图片
      previewImage(url) {
        // 预览图片
        uni.previewImage({
          current: url,
          urls: this.imageList,
          indicator: "default",
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
      // 切换音频录制喝文本输入
      changeVoiceOrText() {
        this.mode = this.mode !== 'audio' ? 'audio' : 'text';
      },
      // 录音相关 
      // 录音开始
      voiceTouchStart(e) {
        this.isRecording = true;
        this.RecordingStartY = e.changedTouches[0].screenY;
        this.unRecord = false;
        // 开始录音
        this.RECORD.start({
          format: 'mp3'
        })
      },
      // 录音结束
      voiceTouchEnd() {
        this.isRecording = false;
        // 停止录音
        this.RECORD.stop();
      },
      // 录音打断
      voiceTouchCancel() {
        this.isRecording = false;
        this.unRecord = true;
        // 停止录音
        this.RECORD.stop();
      },
      voiceTouchMove(e) {
        var Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY);
        this.unRecord = (Y >= 80);
      },
      // 打开聊天信息
      openChat() {
        uni.navigateTo({
          url: '/pages/chat/chat-set/chat-set?params='+JSON.stringify({
            id:this.detail.id,
            chat_type:this.detail.chat_type
          }),
        });
      }
    }
  }
</script>
<style>
</style>