微信小程序中会议列表页面的前后端实现

题外话：想通过集成腾讯IM来解决即时聊天的问题，如果含语音视频，腾讯组件一年5万起步，贵了！后面我们改为自己实现这个功能，这里只是个总结而已。

图文会诊需求

 首先是个图文列表界面  同个界面可以查看具体的图文内容：

 发起图文的聊天的时候 首先选择患者-->再次选择医生团队-->最后选择需要参与的医生-->发起会话

原有的图文聊天 用了腾讯会议的组件，这里要改为我们自己的东西！

数据库设计

后面应该有个图文会议的列表

一个图文会议 应该关联患者、医生信息

现有设计是集成IM的，在一张表当反映了这些信息

如果重新设计 这个就不太合理了 ，应该重新设计会议列表、医生 会议关系表 、患者会议关系表三张表.

那我们就创建一张会议表与2张关系表：

CREATE TABLE chat_group (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    creator VARCHAR(255) NOT NULL,
    memo TEXT
);

CREATE TABLE doctor_chat_group_relation (
    id INT AUTO_INCREMENT PRIMARY KEY,
    doctor_id INT UNSIGNED NOT NULL,
    chat_group_id INT NOT NULL,
    datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '记录时间',
    FOREIGN KEY (doctor_id) REFERENCES sys_doctors(id) ,
    FOREIGN KEY (chat_group_id) REFERENCES chat_group(id) 
)



CREATE TABLE patient_chat_group_relation (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    chat_group_id INT NOT NULL,
    datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '记录时间',
    FOREIGN KEY (patient_id) REFERENCES sys_patient(id) ,
    FOREIGN KEY (chat_group_id) REFERENCES chat_group(id) 
) ENGINE=InnoDB;

插入10条测试数据：

INSERT INTO chat_group (title, creator, memo) VALUES
('Group 1', 'Creator 1', 'Memo for Group 1'),
('Group 2', 'Creator 2', 'Memo for Group 2'),
('Group 3', 'Creator 3', 'Memo for Group 3'),
('Group 4', 'Creator 4', 'Memo for Group 4'),
('Group 5', 'Creator 5', 'Memo for Group 5'),
('Group 6', 'Creator 6', 'Memo for Group 6'),
('Group 7', 'Creator 7', 'Memo for Group 7'),
('Group 8', 'Creator 8', 'Memo for Group 8'),
('Group 9', 'Creator 9', 'Memo for Group 9'),
('Group 10', 'Creator 10', 'Memo for Group 10');

 原来的代码是集成腾讯IM，调用它

会议列表页面

现在单独做个页面：

要求：首先是要显示第一页数据,下拉的时候加载下一页数据

第一步：pages.json当中   还需开启上拉加载事件。如下图

"enablePullDownRefresh" : true,
"onReachBottomDistance":100,

第二步：先下载导入要用到uni-load-more：它用于列表中，做滚动加载使用，展示 loading 的各种状态。

ps:uni-app官网 

3第三步编写前端代码：

基于Vue和uni-app框架的会诊列表页面开发

一、项目背景

本页面是一个基于Vue和uni-app框架开发的会诊列表页面，用于展示医生参与的会诊信息。用户可以通过该页面查看会诊的标题、备注、创建时间等详细信息，并支持点击会诊项进入详情页面。

完整代码：

<template>
	<view>
		<view class="tuijian">
 			<image src="https://prdservice.com/minio/edwin/msg.png"></image>
			<text >会诊列表</text>
			
		</view>
		<view class="button_container">		
		<view class="custom-button">
		  <image class="button-icon" src="https://prdservice.com/minio/edwin/add_active.png" mode="aspectFit"></image