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

题外话：想通过集成腾讯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><text class="button-text">发起图文</text></view></view><view class="list" ><uni-list v-for="(item ,index) in lists" :key="index" ><uni-list-item showArrow :title="item.title" :note="item.memo" :rightText="item.createTime" thumb="https://prdservice.com/minio/edwin/chatHospitor/doctorImg.png"clickable  @click="onClick()"></uni-list-item></uni-list><uni-load-more :status="status" :icon-size="14" :content-text="contentText"  /></view></view></template><script>import {loginRequest} from '@/api/request.js'export default {data() {return {status: 'more',totalCount: 1,params: {doctorId: 0,pageNo: 1,pageSize: 20,keyword: '',total: 0,status: 0},contentText: {contentdown: '加载更多~',contentrefresh: '加载中',contentnomore: '我是有底线的~'},lists: [],extraIcon: '/check.png'}},methods: {//获取列表// async getList(){// 	let paramJson = {// 		page:this.params.pageNo,// 		limit:this.params.pageSize,// 	};// 	let { code,data,total } = await app.getReferrerListByPage(paramJson);// 	// console.info(data)// 	if(200 == code){// 		// //请求接口成功之后，判断加载状态，处理数据// 		this.totalCount = total;// 		if(this.params.pageNo == 1){// 			this.lists= data// 		}else{// 			this.lists= this.lists.concat(data);						// 		}// 		if (this.params.pageNo * this.params.pageSize >= total) {// 			this.status = 'noMore';// 		}// 		this.params.pageNo++;// 	}		// },async getList() {this.params.doctorId = wx.getStorageSync('userInfo').id// this.isloading = true// uni.showLoading({// 	title: '加载中'// });try{uni.request({url: loginRequest.baseURL + 'getChatGroups',method: 'POST',header: {'auth-token': wx.getStorageSync("token")},data: {...this.params},success: res => {console.log('res: ', res)if (res.data.code === 200) {// //请求接口成功之后，判断加载状态，处理数据this.totalCount = res.data.data.total;if(this.params.pageNo == 1){this.lists=res.data.data.chatGroups}else{this.lists= this.lists.concat(res.data.data.chatGroups);						}if (this.params.pageNo * this.params.pageSize >= this.totalCount) {this.status = 'noMore';}this.params.pageNo++;} else {uni.showToast({title: res.data.msg,icon: "error"})}}}) } catch (error) {console.error('请求失败：', error);uni.showToast({title: '请求失败，请稍后再试',icon: "error"});this.status = 'more'; // 恢复为可加载更多状态} finally {this.status = 'more'; // 确保最终状态为可加载更多（除非已经没有更多数据）}// uni.hideLoading()// this.isloading = false},//触底加载onReachBottom() {if (this.status != 'noMore') {this.status = 'loading';this.getList()} else {this.status ="noMore"}},onClick(item) {// 处理点击事件，例如跳转到详情页console.log('点击了项目：', item);// 例如：uni.navigateTo({ url: `/pages/detail/detail?id=${item.id}` });}},mounted() {this.getList(); // 页面加载时获取第一页数据}}
</script><style>
/* 页面或组件的样式表 *//* 设置页面的高度、背景色和滚动行为 */
page {height: 100vh;
/*    background-color: #F5F6FA; */overflow-y: auto;
}.list{margin-left: 20rpx; /* 设置外边距 */margin-right: 20rpx;
}
/* 为列表容器设置高度和可能的滚动行为（注意：这里通常不需要overflow-y，因为父元素已经设置了） */
.list-container {height: calc(100vh - 130rpx); /* 使用calc函数计算高度，注意rpx是小程序>微信小程序的响应式单位 */
}/* 为推荐项设置样式 */
.tuijian {width: 710rpx;height: 94rpx;line-height: 94rpx; /* 设置行高与高度相同，使文本垂直居中 */margin: 20rpx; /* 设置外边距 */background-color: rgba(14, 196, 153, 1); /* 设置背景色 */box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */display: flex; /* 使用flex布局 */align-items: center; /* 垂直居中 */
}/* 为推荐项中的图片设置样式 */
.tuijian image {/* 注意：在小程序>微信小程序中，应该使用<image>标签，并且它是自闭合的，不需要结束标签 */width: 30rpx;height: 30rpx;margin-left: 40rpx;margin-right: 20rpx;
}/* 但是，由于<image>是一个原生组件，并且小程序>微信小程序不支持直接使用标签名选择器在组件样式中，因此上面的选择器应该被重写为类选择器，如果图片有特定的类名的话。例如： */
.tuijian .image-class {width: 30rpx;height: 30rpx;margin-left: 40rpx;margin-right: 20rpx;
}/* 为推荐项中的文本设置样式 */
/* 注意：在小程序>微信小程序中，通常使用<text>标签包裹文本，但<text>并不是一个真正的DOM元素，它更像是一个文本容器，用于应用样式。然而，在.wxss文件中，您仍然可以使用类选择器来定义它的样式。 */
.tuijian .text-class {font-size: 36rpx;color: #fff;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.647058823529412); /* 设置文本阴影 */
}.button_container {display: flex;justify-content: center;align-items: center;border: none; /* 无边框 */
}.custom-button {display: flex;align-items: center;padding: 10px 20px;border: none; /* 无边框 */}.button-icon {width: 24px; /* 图标宽度 */height: 24px; /* 图标高度 */margin-right: 8px; /* 图标与文字之间的间距 */
}.button-text {font-size: 12px; /* 文字大小 */color: #333; /* 文字颜色 */
}
</style>

实际效果如图：

。

二、页面结构

顶部推荐区域：包含一个文本“会诊列表”，用于标识页面功能。
列表区域：展示会诊列表项，每个列表项包含标题、备注和创建时间。
加载更多区域：用于在用户滚动到页面底部时触发加载更多数据的操作。

三、代码说明

1. 模板部分（template）

<view class="tuijian">：包含推荐区域的文本“会诊列表”。
<uni-list>：用于包裹列表项，支持循环渲染。
- <uni-list-item>：列表项，包含标题（title）、备注（note）和创建时间（rightText）。
<uni-load-more>：加载更多组件，根据status状态显示不同的文本内容。

2. 脚本部分（script）

数据（data）：
- status：加载更多状态，支持'more'（可加载更多）、'loading'（正在加载）和'noMore'（没有更多数据）。
- totalCount：总数据量。
- params：请求参数，包括医生ID、页码、每页数量、关键词等。
- contentText：加载更多组件的文本内容。
- lists：会诊列表数据。
方法（methods）：
- getList：获取会诊列表数据的方法，通过uni.request发送请求到后端接口，并处理返回的数据。
- onReachBottom：触底加载方法，当用户滚动到页面底部时触发，调用getList方法加载更多数据。
- onClick：点击列表项的方法，当前仅输出点击的项信息，可根据需求跳转到详情页面。
生命周期钩子（mounted）：
- 在页面加载时调用getList方法获取第一页数据。

3. 样式部分（style）

页面样式：设置页面高度、背景色和滚动行为。
列表容器样式：为列表容器设置高度和可能的滚动行为（注意：这里通常不需要overflow-y，因为父元素已经设置了）。
推荐项样式：为推荐项设置宽度、高度、背景色、文本样式等。
文本样式：为推荐项中的文本设置字体大小、颜色、文本阴影等。

四、开发步骤

创建页面文件：在uni-app项目中创建新的页面文件，包括.vue、.js、.json和.wxss文件（或直接在.vue文件中编写模板、脚本和样式）。
编写模板：根据页面结构编写模板代码，包括推荐区域、列表区域和加载更多区域。
编写脚本：
- 在data中定义页面所需的数据和状态。
- 编写获取会诊列表数据的方法getList，并处理返回的数据。
- 编写触底加载方法onReachBottom，调用getList方法加载更多数据。
- 编写点击列表项的方法onClick，根据需求处理点击事件。
- 在mounted生命周期钩子中调用getList方法获取第一页数据。
编写样式：根据页面设计编写样式代码，包括页面高度、背景色、列表容器样式、推荐项样式和文本样式等。
测试页面：在开发环境中测试页面功能，确保数据能够正确加载和显示，点击事件能够正常触发和处理。

五、注意事项

请求接口：确保后端提供的接口地址和参数格式正确，且接口能够返回正确的数据格式。
数据处理：在获取到数据后，需要根据需求对数据进行处理，如分页、排序等。
样式调整：根据页面设计调整样式代码，确保页面美观和用户体验良好。
错误处理：在请求数据时，需要处理可能出现的错误情况，如网络异常、接口返回错误码等，并给出相应的提示信息。

六、其他调整

项目item前加个小图标吧，如下图加上img src 属性，给uni-list-item 加上thumb属性即可

<template><view><view class="tuijian"><image src="https://prdservice.com/minio/edwin/msg.png"></image><text >会诊列表</text></view><view class="list" ><uni-list v-for="(item ,index) in lists" :key="index" ><uni-list-item showArrow :title="item.title" :note="item.memo" :rightText="item.createTime" thumb="https://prdservice.com/minio/edwin/chatHospitor/doctorImg.png"clickable  @click="onClick()"></uni-list-item></uni-list><uni-load-more :status="status" :icon-size="14" :content-text="contentText"  /></view></view></template>

本想用图标，不知道为啥不成功后面有空再调整。现在效果如下：

ps:uni-app官网

还差一点，左右没有留白啊，这个好办，应用其他页面写得样式即可。

.list{margin-left: 20rpx; /* 设置外边距 */margin-right: 20rpx;
}

还有背景颜色去掉style 当中page{} 设置的背景色，即可，整个项目本身就设置好了全局背景颜色了。

最后，加上一个“发起图文”按钮

        <view class="button_container">        <view class="custom-button"><image class="button-icon" src="https://prdservice.com/minio/edwin/add_active.png" mode="aspectFit"></image><text class="button-text">发起图文</text></view></view>

效果如图：

3、服务端代码开发

项目背景

本项目的目标是开发一个用于医生与聊天群组关系管理的后端服务。医生可以通过这个服务查询自己所参与的聊天群组列表。这些群组信息将从小程序端发送到后端，后端根据医生ID分页返回相关的群组信息。

项目结构

Controller层：处理HTTP请求，调用Service层的方法，并返回响应结果。
Service层：包含业务逻辑，调用Mapper层的方法与数据库进行交互。
Mapper层：定义与数据库交互的SQL语句。
数据模型：定义数据传输对象（DTO）和实体类。

编码步骤

1. 创建数据模型

首先，我们需要定义数据传输对象（DTO）和实体类。

// ChatGroup.java
@Data
public class ChatGroup {private Integer pageNo;private Integer pageSize;private Integer doctorId;private Integer total;private Integer status; // 注意：原代码中有一个拼写错误，将'tatus'改为'status'private List<ChatGroupDto> chatGroups;
}// ChatGroupDto.java
@Data
public class ChatGroupDto {private Integer chatGroupId;private String title;private LocalDateTime createTime;private String creator;private String memo;
}// DoctorChatGroupRelation.java
@Data
public class DoctorChatGroupRelation {private Integer id;private Integer doctorId;private Integer chatGroupId;private LocalDateTime datetime;
}

2. 创建Mapper接口

Mapper接口定义与数据库交互的SQL语句。

// DoctorChatGroupRelationMapper.java
@Mapper
public interface DoctorChatGroupRelationMapper {@Select("SELECT COUNT(*) FROM doctor_chat_group_relation WHERE doctor_id = #{doctorId}")int countByDoctorId(@Param("doctorId") Integer doctorId);@Select("SELECT dcgr.chat_group_id, cg.title, cg.create_time, cg.creator, cg.memo " +"FROM doctor_chat_group_relation dcgr " +"JOIN chat_group cg ON dcgr.chat_group_id = cg.id " +"WHERE dcgr.doctor_id = #{doctorId} " +"LIMIT #{offset}, #{limit}")List<ChatGroupDto> findByDoctorIdWithPagination(@Param("doctorId") Integer doctorId,@Param("offset") int offset,@Param("limit") int limit);
}

3. 创建Service接口和实现类

Service层包含业务逻辑，调用Mapper层的方法。

// DoctorChatGroupRelationServiceInterface.java
public interface DoctorChatGroupRelationServiceInterface {int countByDoctorId(Integer doctorId);List<ChatGroupDto> findByDoctorIdWithPagination(Integer doctorId, int pageNo, int pageSize);
}// DoctorChatGroupRelationServiceImpl.java
@Service
public class DoctorChatGroupRelationServiceImpl implements DoctorChatGroupRelationServiceInterface {@Autowiredprivate DoctorChatGroupRelationMapper doctorChatGroupRelationMapper;@Overridepublic int countByDoctorId(Integer doctorId) {return doctorChatGroupRelationMapper.countByDoctorId(doctorId);}@Overridepublic List<ChatGroupDto> findByDoctorIdWithPagination(Integer doctorId, int pageNo, int pageSize) {int offset = (pageNo - 1) * pageSize;return doctorChatGroupRelationMapper.findByDoctorIdWithPagination(doctorId, offset, pageSize);}
}

4. 创建Controller

Controller层处理HTTP请求，调用Service层的方法，并返回响应结果。

// DoctorChatGroupRelationController.java
@RestController
@RequestMapping("/wechat/client")
@Api(value = "会议")
public class DoctorChatGroupRelationController {@Autowiredprivate DoctorChatGroupRelationServiceInterface doctorChatGroupRelationService;@PostMapping("/getChatGroups")public ResponseResult<ChatGroup> getChatGroups(@RequestBody ChatGroup chatGroup) {try {Integer doctorId = chatGroup.getDoctorId();Integer pageNo = chatGroup.getPageNo();Integer pageSize = chatGroup.getPageSize();int totalCount = doctorChatGroupRelationService.countByDoctorId(doctorId);List<ChatGroupDto> chatGroups = doctorChatGroupRelationService.findByDoctorIdWithPagination(doctorId, pageNo, pageSize);chatGroup.setTotal(totalCount);chatGroup.setChatGroups(chatGroups);chatGroup.setStatus(1); // 可以根据需要设置状态码，例如1表示成功return ResponseResult.ok(chatGroup);} catch (Exception e) {return ResponseResult.failed("获取会议列表失败" + e.getMessage());}}
}

5. 创建通用的响应结果类

通常，我们会创建一个通用的响应结果类来封装返回给客户端的数据。

// ResponseResult.java
@Data
public class ResponseResult<T> {private int code;private String message;private T data;public static <T> ResponseResult<T> ok(T data) {ResponseResult<T> result = new ResponseResult<>();result.setCode(200);result.setMessage("成功");result.setData(data);return result;}public static <T> ResponseResult<T> failed(String message) {ResponseResult<T> result = new ResponseResult<>();result.setCode(500);result.setMessage(message);return result;}
}

注意事项

异常处理：在Controller中，我们使用try-catch块捕获异常，并返回失败的响应结果。这样可以确保即使发生异常，客户端也能接收到明确的错误信息。
分页处理：在Service层，我们通过计算偏移量（offset）来实现分页查询。
数据验证：在实际项目中，需要对接收到的数据进行验证，确保数据的有效性和安全性。可以使用Spring的@Valid注解和自定义验证器来实现。
日志记录：在关键业务逻辑处添加日志记录，以便在出现问题时进行故障排查。

通过以上步骤，我们完成了一个简单的医生聊天群组关系管理后端服务。该服务可以接收小程序端的请求，根据医生ID分页返回相关的群组信息。

返回类型也要封装一下

{code: 200, msg: "操作成功！", data: {pageNo: 1, pageSize: 20, doctorId: 350, total: 2, tatus: null,…}}
code: 200
data: {pageNo: 1, pageSize: 20, doctorId: 350, total: 2, tatus: null,…}
chatGroups: [{chatGroupId: 1, title: "Group 1", createTime: "2024-11-22 20:57:46", creator: "Creator 1",…},…]
0: {chatGroupId: 1, title: "Group 1", createTime: "2024-11-22 20:57:46", creator: "Creator 1",…}
1: {chatGroupId: 2, title: "Group 2", createTime: "2024-11-22 20:57:46", creator: "Creator 2",…}
doctorId: 350
pageNo: 1
pageSize: 20
tatus: null
total: 2
msg: "操作成功！"