admin/jurong_circle_front_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025-09-29

Browse Source 
聊天记录上拉获取记录
This commit is contained in:
Sun_sun
2025-10-09 15:13:48 +08:00
parent 22c4b5d4d5
commit 039111ed27
14 changed files with 445 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
pages/message/message.vue
View File

@@ -3,22 +3,52 @@
<!-- 可滚动的内容区域 -->
<view class="content-container">
<view style="padding: 32rpx;">
<view id="fixedHeadId">
<view class="message-title">
容讯聊天室
<view>
<view id="fixedHeadId" style="padding: 32rpx 32rpx 0;">
<view class="head-box1">
<view class="title">
容讯聊天室
</view>
<view class="icon">
<image class="icon-img" src="/static/icon/search.png" mode=""></image>
<image class="icon-img2" src="/static/icon/Bookmark.png" mode=""></image>
</view>
</view>
<u-row class="message-search">
<u-col span="9">
<u-search placeholder="点击查询项目" v-model="keyword" :show-action="false"></u-search>
</u-col>
<u-col class="collection" span="3">
<image class="collection-icon" src="/static/icon/Bookmark.png" mode=""></image>
<view class="collection-text">
我的收藏
<view class="head-box2">
<view class="item">
<view class="box-img">
<image class="img" src="/static/message/system.png" mode=""></image>
</view>
</u-col>
</u-row>
<view class="title">
系统消息
</view>
</view>
<view class="item">
<view class="box-img">
<image class="img" src="/static/message/customer.png" mode=""></image>
</view>
<view class="title">
客户消息
</view>
</view>
<view class="item">
<view class="box-img">
<image class="img" src="/static/message/order.png" mode=""></image>
</view>
<view class="title">
订单通知
</view>
</view>
<view class="item">
<view class="box-img">
<image class="img" src="/static/message/process.png" mode=""></image>
</view>
<view class="title">
项目进度
</view>
</view>
</view>
<view class="menu-list">
<view class="menu-item" v-for="(item,index) in menuList" @click="handleMenuChange(index)">
<view class="menu-title">{{item.name + '(' + item.count +')'}}
@@ -29,9 +59,35 @@
</view>
</view>
</view>
<scroll-view scroll-y="true" class="message-list" :style="'height:'+height+'px'">
<view class="message-item" v-for="item in messageList" @click="handleChat(item)">
{{item.program.name}}
<view class="message-item" v-for="item in messageList">
<u-swipe-action bgColor="#F8FBFF" :index="item.groupId" class="other-program" @content-click="handleChat(item)" v-if="item.program.linkmanId !== params.userId"
:options="options">
<view class="item-name title-wrap">
{{ item.program.name}}
</view>
<view class="item-company">
{{'负责公司：' + item.program.company }}
</view>
<!-- <view class="item-date">
{{ item.program.startDate + "至" + item.program.endDate }}
</view> -->
<view class="item-unread" v-if="item.userUnread.length!=0">
未读： {{item.userUnread.length}}
</view>
</u-swipe-action>
<u-swipe-action bgColor="#F8FBFF" class="my-program" @content-click="handleChat(item)" v-else :options="options">
<view class="item-name title-wrap">
{{ item.program.name}}
</view>
<view class="item-company">
{{'咨询人：' + maskPhoneNumber(item.user.username) }}
</view>
<view class="item-unread" v-if="item.chargeUnread.length!=0">
未读： {{item.chargeUnread.length}}
</view>
</u-swipe-action>
</view>
</scroll-view>
</view>
@@ -48,7 +104,7 @@
} from '@dcloudio/uni-app';
import { onReady as onUniReady } from '@dcloudio/uni-app';
import { groupAPI } from '../../api/group';
import { getUserInfo } from '../../util/common';
import { getUserInfo, maskPhoneNumber } from '../../util/common';
const instance = getCurrentInstance();
const height = ref(0)
@@ -91,7 +147,7 @@
currentMenu.value = val
}
// 项目
// 消息
const messageList = ref([])
const user = ref()
const size = 10
@@ -101,6 +157,20 @@
userId: '',
customerId: '',
})
const options = [
{
text: '收藏',
style: {
backgroundColor: '#007aff'
}
},
{
text: '删除',
style: {
backgroundColor: '#dd524d'
}
}
]
const handleChat = (item) => {
uni.navigateTo({
@@ -111,6 +181,7 @@
const loadData = () => {
groupAPI.getList(params.value).then((res) => {
messageList.value = res.data.list
console.log(messageList.value);
})
}
@@ -138,50 +209,76 @@
/* 内容滚动区域 */
.content-container {
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
// background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
background: linear-gradient(270deg, #659CFF 0%, #2D75FB 50%, #659CFF 100%);
width: 100%;
height: 100%;
.message-title {
margin-top: 40rpx;
text-align: center;
font-family: SF Pro;
font-weight: 700;
font-style: Bold;
font-size: 40rpx;
leading-trim: NONE;
line-height: 48rpx;
letter-spacing: 0%;
color: #FFFFFF;
.head-box1 {
padding-top: 60rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-family: SF Pro;
font-weight: 700;
font-style: Bold;
font-size: 40rpx;
leading-trim: NONE;
line-height: 48rpx;
letter-spacing: 0%;
color: #FFFFFF;
}
.message-search {
margin-top: 20rpx;
.collection {
width: 100%;
.icon {
display: flex;
justify-content: flex-end;
align-items: center;
.collection-icon {
.icon-img {
width: 34rpx;
height: 34rpx;
margin-right: 20rpx;
}
.icon-img2 {
width: 48rpx;
height: 48rpx;
}
}
}
.head-box2 {
display: flex;
justify-content: space-around;
margin-top: 20rpx;
.collection-text {
font-family: SF Pro;
font-weight: 30;
font-style: Expanded Ultralight;
font-size: 24rpx;
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.box-img {
.img {
width: 68rpx;
height: 68rpx;
}
}
.title {
margin-top: 10rpx;
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 26rpx;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0%;
color: #FFFFFF;
line-height: 100%;
letter-spacing: -2%;
text-align: center;
color: #fff;
}
}
}
.menu-list {
@@ -207,7 +304,6 @@
.menu-icon {
width: 22rpx;
height: 22rpx;
}
}
}
@@ -216,11 +312,20 @@
margin-top: 10rpx;
.message-item {
// border: 1px solid #000;
padding: 20rpx 10px;
background-color: #FFFFFF;
border-radius: 10rpx;
margin-bottom: 10rpx;
.other-message {
padding: 20rpx 0rpx 20rpx 20rpx;
background-color: #F8FBFF;
;
}
.my-program {
padding: 20rpx 0rpx 20rpx 20rpx;
background-color: #F8FBFF;
border-bottom: 2rpx solid #f1f4ff;
}
}
}
}