lilishop-uniapp/pages/mine/im/list.vue

238 lines
5.5 KiB
Vue
Raw Normal View History

2022-12-27 14:17:00 +08:00
<template>
<view class="content">
<u-navbar class="my-title" title-size="32" :title="'消息(' + talkList.length + ')'"></u-navbar>
2022-12-27 14:17:00 +08:00
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(tabIndex)">
2022-12-27 14:17:00 +08:00
<!-- 消息列表 -->
<div class="iconBox">
<view class="icon-list">
<view class="icon-item" @click="cleanUnread()">
<div class="bag bag1">
<u-icon name="trash" size="50" color="#fff"></u-icon>
</div>
<view>清除未读</view>
</view>
<view class="icon-item" @click="navigateTo('/pages/tabbar/home/title')">
<div class="bag bag2">
<u-icon name="bell" size="50" color="#fff"></u-icon>
</div>
<view>系统消息</view>
</view>
</view>
</div>
2022-12-28 18:23:49 +08:00
<u-search class="nav-search" v-model="userName" clearabled @change="userTalkList()" placeholder="搜索用户"
2022-12-27 14:17:00 +08:00
:show-action="false"></u-search>
<view class="talk-view" :key="index" v-for="(item, index) in talkList">
<view>
<view @click="onclickToTalkInfo(item)">
<view class="talk-item-view">
<view class="talk-img">
<u-avatar :src="item.face" :text="item.face ? '' : item.name" bg-color="#DDDDDD"></u-avatar>
</view>
<view class="talk-info">
<view class="talk-name u-line-2">{{ item.name }}
<u-tag class="talk-tag" size="mini" text="店铺" type="warning" v-if="item.storeFlag" />
</view>
<view class="talk-message">
2022-12-27 18:01:41 +08:00
<span v-if="item.lastMessageType == 'MESSAGE'">{{ item.lastTalkMessage }}</span>
<span v-if="item.lastMessageType == 'GOODS'">[]</span>
2022-12-29 18:19:17 +08:00
<span v-if="item.lastMessageType == 'ORDER'">[]</span>
2022-12-27 14:17:00 +08:00
</view>
</view>
<view class="talk-time">
<view>
{{ beautifyTime(item.lastTalkTime) }}
</view>
<view>
<u-badge type="error" absolute :offset="[45, 20]" :count="item.unread"></u-badge>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 空白页 -->
<u-empty text="暂无信息" mode="list" v-if="talkList.length === 0"></u-empty>
2022-12-27 14:17:00 +08:00
</scroll-view>
</view>
</template>
<script>
2022-12-29 18:19:17 +08:00
import { getTalkList, clearmeaager } from "@/api/im.js";
2022-12-27 14:17:00 +08:00
import storage from "@/utils/storage.js";
import { beautifyTime } from "@/utils/filters.js"
export default {
2022-12-27 18:01:41 +08:00
data () {
2022-12-27 14:17:00 +08:00
return {
storage,
2022-12-27 14:17:00 +08:00
count: {
loadStatus: "more",
},
talkList: [], //聊天列表
userName: '',
pointData: {}, //累计获取 未输入 集合
};
},
2022-12-27 18:01:41 +08:00
onShow () {
2022-12-28 18:23:49 +08:00
this.userTalkList();
2022-12-27 14:17:00 +08:00
},
2022-12-27 18:01:41 +08:00
onPullDownRefresh () {
2022-12-28 18:23:49 +08:00
this.userTalkList()
2022-12-27 14:17:00 +08:00
console.log('下拉事件');
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
/**
* 触底加载
*/
2022-12-27 18:01:41 +08:00
onReachBottom () {
2022-12-28 18:23:49 +08:00
this.userTalkList();
2022-12-27 14:17:00 +08:00
},
methods: {
beautifyTime,
2022-12-27 18:01:41 +08:00
onclickToTalkInfo (val) {
2022-12-27 14:17:00 +08:00
storage.setTalkToUser(val)
uni.navigateTo({
url:
"/pages/mine/im/index?talkId=" + val.id,
});
},
/**
* 获取聊天列表
*/
2022-12-28 18:23:49 +08:00
userTalkList () {
2022-12-27 14:17:00 +08:00
let params = {
userName: this.userName,
}
uni.showLoading({
title: "加载中",
});
getTalkList(params).then((res) => {
uni.hideLoading();
if (res.data.success) {
this.talkList = res.data.result;
2022-12-29 18:19:17 +08:00
console.log(this.talkList, 'this.talkListthis.talkList');
2022-12-27 14:17:00 +08:00
}
});
},
2022-12-27 18:01:41 +08:00
navigateTo (url) {
2022-12-27 14:17:00 +08:00
uni.navigateTo({
url,
});
},
2022-12-27 18:01:41 +08:00
cleanUnread () {
2022-12-29 18:19:17 +08:00
clearmeaager().then((res) => {
console.log(res);
if (res.data.code == 200) {
this.userTalkList();
uni.showToast({
icon: "none",
title: res.data.message,
});
}
})
2022-12-27 14:17:00 +08:00
},
},
};
</script>
<style lang="scss" scoped>
.talk-view {
border-radius: 20rpx;
background-color: #fff;
.talk-item-view {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 10rpx 20rpx;
.talk-img {
width: 100rpx;
height: 100rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.talk-info {
padding-left: 30rpx;
flex: 1;
.talk-name {
font-size: 28rpx;
margin-bottom: 10rpx;
font-weight: bold;
color: #333333;
}
.talk-message {
font-size: 28rpx;
margin-top: 10rpx;
color: #888787;
}
.talk-tag {
margin-left: 10rpx;
}
}
}
}
.talk-time {
position: relative;
}
2022-12-27 18:01:41 +08:00
2022-12-27 14:17:00 +08:00
.iconBox {
width: 94%;
margin: 0 3%;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
// transform: translateY(-30rpx);
}
.icon-list {
height: 140rpx;
text-align: center;
font-size: $font-sm;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 3%;
color: #999;
.icon-item {
position: relative;
line-height: 2em;
width: 96rpx;
:first-child {
font-size: 48rpx;
margin-bottom: 10rpx;
}
}
}
2022-12-27 18:01:41 +08:00
2022-12-27 14:17:00 +08:00
.bag {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
margin: 0 auto;
}
.bag1 {
background: #ff0015;
}
2022-12-27 18:01:41 +08:00
2022-12-27 14:17:00 +08:00
.bag2 {
background: #73AF7C;
}
</style>
<style lang="scss" scoped>
@import "./index-app.scss";
</style>