uni-app 群聊发送消息相关(84-92)
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 群聊发送消息相关(84-92)相关的知识，希望对你有一定的参考价值。
84创建群聊功能（一）
数据库设计和迁移
创建数据迁移表
npx sequelize migration:generate --name=group
1.执行完命令后，会在database / migrations / 目录下生成数据表迁移文件，然后定义
'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
1.执行完命令后，会在database / migrations / 目录下生成数据表迁移文件，然后定义
'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');
}
};
执行 migrate 进行数据库变更
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;
};
app/controller/group.js
'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;
85创建群聊功能（二）
pages/mail/mail/mail.vue
<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
},
// 选中数量
selectCountuni-app 96获取群聊相关信息