You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
8.9 KiB
396 lines
8.9 KiB
3 weeks ago
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
|
||
|
|
<view class="page-header" :style="{ paddingTop: geStatusBarHeight()+ 8 + 'px'}">
|
||
|
|
<view class="text-center">消息</view>
|
||
|
|
<uni-icons type="staff-filled" size="30" color="#ffffff" @click="$u.throttle(gotoContacts(), 2000)"></uni-icons>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view class="wrapcon">
|
||
|
|
<!-- 列表 -->
|
||
|
|
<view v-if="grouplist.length==0 && loadStatus=='nomore'" class="nodata">暂无消息~</view>
|
||
|
|
|
||
|
|
<view class="listcell">
|
||
|
|
<view class="lcon" v-for="(info, index) in grouplist" :key="index" @click="gotoGroup(info)">
|
||
|
|
<view class="limg">
|
||
|
|
<image class="img" :src="info.img" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="lright">
|
||
|
|
<view class="lrow">
|
||
|
|
<view class="pname">{{info.name}}</view>
|
||
|
|
<view class="ptime"> {{ changeTime(info.datetime)}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="lrow">
|
||
|
|
<view class="pnr">
|
||
|
|
{{info.content}}
|
||
|
|
</view>
|
||
|
|
<!-- <view class="lnum">
|
||
|
|
{{ getgroupsnums(info.minId)}}
|
||
|
|
</view> -->
|
||
|
|
<view class="lnum" v-if="info.sl>0">
|
||
|
|
{{ info.sl}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-loadmore v-if="grouplist.length==0 && loadStatus=='loading'" :status="loadStatus" :marginTop="20"></u-loadmore>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 提示信息弹窗 -->
|
||
|
|
<uni-popup ref="message" type="message">
|
||
|
|
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
||
|
|
</uni-popup>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { myCache } from '../../utils/utils.js';
|
||
|
|
import dateTime from '@/common/dateTime.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
messageText:'', //错误提示框
|
||
|
|
msgType :'error',
|
||
|
|
loadStatus:'loadmore',
|
||
|
|
imgurl:uni.$http.baseUrl,
|
||
|
|
grouplist:[
|
||
|
|
// {
|
||
|
|
// id:1,
|
||
|
|
// sl:25,
|
||
|
|
// name:"商城客服-伽伽",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息1",
|
||
|
|
// datetime:"2025-07-10 12:18",
|
||
|
|
// type:1, // 客服
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:2,
|
||
|
|
// sl:8,
|
||
|
|
// name:"教练A",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息2",
|
||
|
|
// datetime:"2025-07-05 12:18",
|
||
|
|
// type:2, // 老师
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:1,
|
||
|
|
// sl:25,
|
||
|
|
// name:"商城客服-伽伽",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息1",
|
||
|
|
// datetime:"2025-07-10 12:18",
|
||
|
|
// type:1, // 客服
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:2,
|
||
|
|
// sl:8,
|
||
|
|
// name:"教练A",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息2",
|
||
|
|
// datetime:"2025-07-05 12:18",
|
||
|
|
// type:2, // 老师
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:1,
|
||
|
|
// sl:25,
|
||
|
|
// name:"商城客服-伽伽",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息1",
|
||
|
|
// datetime:"2025-07-10 12:18",
|
||
|
|
// type:1, // 客服
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:2,
|
||
|
|
// sl:8,
|
||
|
|
// name:"教练A",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息2",
|
||
|
|
// datetime:"2025-07-05 12:18",
|
||
|
|
// type:2, // 老师
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:1,
|
||
|
|
// sl:25,
|
||
|
|
// name:"商城客服-伽伽",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息1",
|
||
|
|
// datetime:"2025-07-10 12:18",
|
||
|
|
// type:1, // 客服
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id:2,
|
||
|
|
// sl:8,
|
||
|
|
// name:"教练A",
|
||
|
|
// img:"../../static/image/girl.jpg",
|
||
|
|
// content:"测试信息2",
|
||
|
|
// datetime:"2025-07-05 12:18",
|
||
|
|
// type:2, // 老师
|
||
|
|
// }
|
||
|
|
],
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
// this.getgroupsmembers();
|
||
|
|
},
|
||
|
|
onShow(){
|
||
|
|
this.loadStatus='loadmore';
|
||
|
|
this.loadData();
|
||
|
|
},
|
||
|
|
onPullDownRefresh() {
|
||
|
|
console.log('onPullDownRefresh');
|
||
|
|
setTimeout(()=>{
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
},500);
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
console.log('onReachBottom');
|
||
|
|
// 暂不分页
|
||
|
|
// this.loadData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
gotoContacts(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/message/contact`
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeTime(date) {
|
||
|
|
return dateTime.dateTime(date);
|
||
|
|
},
|
||
|
|
gotoGroup(info){
|
||
|
|
// 去聊天室
|
||
|
|
if(info.type==1){
|
||
|
|
// 客服
|
||
|
|
var data=encodeURIComponent(JSON.stringify(info));
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/product/service?data=${data}`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if(info.type==2){
|
||
|
|
// 老师
|
||
|
|
var data=encodeURIComponent(JSON.stringify(info));
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/teacher/chat?data=${data}`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
loadData(){
|
||
|
|
// 底部数据加载
|
||
|
|
if(this.loadStatus=="loadmore") {
|
||
|
|
this.loadStatus="loading";
|
||
|
|
setTimeout(() => {
|
||
|
|
this.getgroupsmembers();
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取群聊
|
||
|
|
async getgroupsmembers(){
|
||
|
|
if(this.loadStatus!=="nomore")
|
||
|
|
{
|
||
|
|
this.loadStatus="nomore";
|
||
|
|
var chatlist=myCache("chatlist");
|
||
|
|
this.grouplist=chatlist?chatlist:[];
|
||
|
|
this.grouplist.forEach((cell,i)=>{
|
||
|
|
this.grouplist[i]["sl"]=this.getgroupsnums(cell.minId)
|
||
|
|
});
|
||
|
|
this.loadStatus="nomore";
|
||
|
|
this.$forceUpdate();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取群聊
|
||
|
|
async getgroupsnums(id){
|
||
|
|
var nums=0
|
||
|
|
const {data: res} = await uni.$http.get("/api/message/private/pullOfflineMessage",{"minId":id});
|
||
|
|
if(res.data&&res.data.length>0){
|
||
|
|
nums=res.data.length;
|
||
|
|
return nums;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
console.log("nums",nums)
|
||
|
|
return nums;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取状态栏高度
|
||
|
|
geStatusBarHeight(){
|
||
|
|
return uni.getSystemInfoSync()['statusBarHeight'];
|
||
|
|
},
|
||
|
|
// 获取导航栏高度
|
||
|
|
getNavBarHeight(){
|
||
|
|
return 45+uni.getSystemInfoSync()['statusBarHeight'];
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page{
|
||
|
|
padding: 0;
|
||
|
|
position: relative;
|
||
|
|
background-image: url('@/static/image/bg.jpg');
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center center;
|
||
|
|
min-height: calc(100vh - var(--window-top) - var(--window-bottom));
|
||
|
|
}
|
||
|
|
.page-header {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 999;
|
||
|
|
padding: 40rpx 30rpx 30rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 36rpx;
|
||
|
|
background-color: #89965f;
|
||
|
|
.text-center {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.edit {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
right: 30rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.wrapcon{
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
margin: 180rpx 0 0 0;
|
||
|
|
min-height: calc(100vh - 100rpx);
|
||
|
|
/* #ifdef H5 */
|
||
|
|
margin: calc( 110rpx + var(--window-top)) 0 0 0;
|
||
|
|
min-height: calc(100vh - var(--window-top) - var(--window-bottom) - 100rpx);
|
||
|
|
/* #endif */
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.listcell{
|
||
|
|
background: #fff;
|
||
|
|
margin: 0;
|
||
|
|
.lcon{
|
||
|
|
border-bottom: 1rpx solid #eee;
|
||
|
|
padding-top: 28rpx;
|
||
|
|
padding-bottom: 28rpx;
|
||
|
|
opacity: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
.limg{
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
margin-right: 24rpx;
|
||
|
|
margin-left: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
.img{
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.lright{
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.lrow{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
.pname{
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
line-height: 50rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
.ptime{
|
||
|
|
line-height: 50rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #595959;
|
||
|
|
}
|
||
|
|
.pnr{
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #595959;
|
||
|
|
}
|
||
|
|
.lnum{
|
||
|
|
background-color: #de0000;
|
||
|
|
padding: 0 10rpx;
|
||
|
|
min-width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
line-height: 32rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border-radius: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tips{
|
||
|
|
margin-top: 20rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
width: 100%;
|
||
|
|
line-height: 44rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #595959;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.submitcon{
|
||
|
|
margin-top: 200rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.bbtn{
|
||
|
|
margin: 20rpx 30rpx 54rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FCFCFD;
|
||
|
|
width: 560rpx;
|
||
|
|
height: 96rpx;
|
||
|
|
line-height: 96rpx;
|
||
|
|
background: #367FFA;
|
||
|
|
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(67,110,255,0.4);
|
||
|
|
border-radius: 254rpx 254rpx 254rpx 254rpx;
|
||
|
|
opacity: 1;
|
||
|
|
&::after{
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.nodata{
|
||
|
|
background-image: url('../../static/image/nomsg.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center center;
|
||
|
|
height: 376rpx;
|
||
|
|
width: 256rpx;
|
||
|
|
color: #89965f;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
flex-direction: column;
|
||
|
|
padding-bottom: 40rpx;
|
||
|
|
margin: 100rpx auto;
|
||
|
|
}
|
||
|
|
</style>
|