371 lines
8.4 KiB
Vue
371 lines
8.4 KiB
Vue
<template>
|
||
<view class="message-container">
|
||
|
||
<!-- 可滚动的内容区域 -->
|
||
<view class="content-container">
|
||
<view>
|
||
<view id="fixedHeadId" style="padding: 32rpx 32rpx 0;" class="u-m-b-20">
|
||
<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>
|
||
<view class="head-box2">
|
||
<view class="item" @click="handleNavigateTo">
|
||
<view class="box-img">
|
||
<image class="img" src="/static/message/system.png" mode=""></image>
|
||
</view>
|
||
<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 +')'}}
|
||
</view>
|
||
<image class="menu-icon"
|
||
:src="currentMenu==index?'/static/icon/Chevron down.png':'/static/icon/Chevron right Menu.png'"
|
||
mode=""></image>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<scroll-view scroll-y="true" class="message-list" :style="'height:'+height+'px'"
|
||
@scrolltolower="loadData">
|
||
<view class="message-item" v-for="(item, index) 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>
|
||
<u-loadmore :status="status" color="#fff" />
|
||
<view class="placeholder-box"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<Tabbar id="tabbarId"></Tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, getCurrentInstance } from 'vue';
|
||
import {
|
||
onReady, onPullDownRefresh
|
||
} from '@dcloudio/uni-app';
|
||
import { onReady as onUniReady } from '@dcloudio/uni-app';
|
||
import { groupAPI } from '../../api/group';
|
||
import { getUserInfo, maskPhoneNumber } from '../../util/common';
|
||
const instance = getCurrentInstance();
|
||
|
||
const height = ref(0)
|
||
|
||
const loadHeight = () => {
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
let screenHeight = res.screenHeight
|
||
uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
|
||
height.value = screenHeight - data.height
|
||
}).exec()
|
||
uni.createSelectorQuery().in(instance.proxy).select("#fixedHeadId").boundingClientRect((data : any) => {
|
||
height.value = height.value - data.height
|
||
}).exec()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 搜索
|
||
const keyword = ref('')
|
||
|
||
// 系统消息
|
||
const handleNavigateTo = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/message/systemMessage'
|
||
})
|
||
}
|
||
|
||
// 小菜单切换
|
||
const menuList = ref([{
|
||
name: '全部',
|
||
count: 5
|
||
}, {
|
||
name: '已投资',
|
||
count: 5
|
||
}, {
|
||
name: '未读',
|
||
count: 0
|
||
}, {
|
||
name: '不感兴趣',
|
||
count: 5
|
||
}])
|
||
// 当前小菜单
|
||
const currentMenu = ref(0)
|
||
// 切换小菜单
|
||
const handleMenuChange = (val) => {
|
||
currentMenu.value = val
|
||
}
|
||
|
||
// 进入聊天
|
||
const handleChat = (item) => {
|
||
uni.navigateTo({
|
||
url: '/pages/message/chat?groupId=' + item.groupId
|
||
})
|
||
}
|
||
|
||
// 消息
|
||
const messageList = ref([])
|
||
const user = ref()
|
||
const size = 10
|
||
const params = ref({
|
||
page: 1,
|
||
size: size,
|
||
userId: '',
|
||
customerId: '',
|
||
})
|
||
const pages = ref(0)
|
||
const status = ref('loadmore')
|
||
const options = [
|
||
{
|
||
text: '收藏',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
}
|
||
]
|
||
|
||
const loadData = () => {
|
||
if (status.value == 'nomore') return
|
||
groupAPI.getList(params.value).then((res) => {
|
||
pages.value = res.data.pages
|
||
messageList.value = messageList.value.concat(res.data.list)
|
||
params.value.page++
|
||
if (params.value.page > pages.value) {
|
||
status.value = 'nomore'
|
||
}
|
||
})
|
||
}
|
||
|
||
onPullDownRefresh(async () => {
|
||
// 重新刷新，将参数初始化
|
||
params.value.page = 1
|
||
messageList.value = []
|
||
status.value = 'loadmore'
|
||
loadData()
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
|
||
onUniReady(() => {
|
||
loadHeight()
|
||
user.value = getUserInfo()
|
||
params.value.userId = user.value.id
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.message-container {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
/* 内容滚动区域 */
|
||
.content-container {
|
||
// background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||
background: linear-gradient(270deg, #659CFF 0%, #2D75FB 50%, #659CFF 100%);
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.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;
|
||
}
|
||
|
||
.icon {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.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;
|
||
|
||
.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: 100%;
|
||
letter-spacing: -2%;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-list {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.menu-title {
|
||
font-family: SF Pro;
|
||
font-weight: 30;
|
||
font-style: Expanded Ultralight;
|
||
font-size: 24rpx;
|
||
leading-trim: NONE;
|
||
line-height: 42rpx;
|
||
letter-spacing: 0%;
|
||
color: #000;
|
||
}
|
||
|
||
.menu-icon {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.message-list {
|
||
margin-top: 20rpx;
|
||
|
||
.message-item {
|
||
|
||
// border: 1px solid #000;
|
||
.other-program {
|
||
padding: 20rpx 0rpx 20rpx 20rpx;
|
||
background-color: #F8FBFF;
|
||
border-bottom: 2rpx solid #f1f4ff;
|
||
|
||
.item-unread{
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.my-program {
|
||
padding: 20rpx 0rpx 20rpx 20rpx;
|
||
background-color: #F8FBFF;
|
||
border-bottom: 2rpx solid #f1f4ff;
|
||
|
||
.item-unread{
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.placeholder-box {
|
||
width: 100%;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |