Sprinkler-app/pages/nearbystores/xiaoxi.vue

<template>
	<view class="page">
		<u-navbar :is-back="false" title="消息" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar>
		<scroll-view class="feed" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="xxtop">
				<view class="top" @click="btnpage(1)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugTnGAbYTLngmX7OhIYD" mode=""></image>
					<view class="" >
						点赞
					</view>
					<text v-if="hasLikeMessag"></text>
				</view>
				<view class="top" @click="btnpage(2)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uDyGQNSdLstlUhHhsEaK" mode=""></image>
					<view class="" >
						新增关注
					</view>
					<text v-if="hasFocusMessage"></text>
				</view>
				<view class="top" @click="btnpage(3)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u3PkizDMSL6sCgGGYRBw" mode=""></image>
					<view class="" >
						评论
					</view>
					<text v-if="hasCommentMessage"></text>
				</view>
			</view>
			<view class="xxlist">
				<view class="xxitem" v-for="(item,index) in liaotianlist" :key="index" @click="btnjian(item)">
					<view class="lt">
						<image v-if="item.sessionAvatar" @click.stop="btngr(item)" :src="item.sessionAvatar" mode="aspectFill"></image>
						<view v-else class="" @click.stop="btngr(item)" style="width: 106rpx;height: 106rpx;border-radius: 50%;background-color: #ccc;margin-right: 30rpx;"></view>
						<view class="cen">
							<view class="name">
								{{item.sessionName == undefined ? '--' : item.sessionName}}
							</view>
							<view class="cont" v-if="item.lastContentType == 2">
								图片
							</view>
							<view class="cont" v-if="item.lastContentType == 3">
								视频
							</view>
							<view class="cont" v-else>
								{{item.lastChatContent && item.lastChatContent.length > 10 ? item.lastChatContent.slice(0,10) + '...' : item.lastChatContent}}
							</view>
						</view>
					</view>
					<view class="rt">
						{{item.lastChatTime == undefined ? '--' : item.lastChatTime}}
						<text v-if="item.unReadNum > 0">{{item.unReadNum}}</text>
					</view>
				</view>
				<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
					当前没有更多消息了...
				</view>
			</view>
		</scroll-view>
	    <tab-bar :indexs='22'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				hasCommentMessage:false,
				hasFocusMessage:false,
				hasLikeMessage:false,
				liaotianlist:[],
				isRefreshing:false,
				isLoading: false,
				total:0,
				pageNum:1,
			}
		},
		onLoad() {

		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '绿小能',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '绿小能',
				query: '',
				path: '/pages/index/index'
			}
		},
		onShow() {
			this.getxxstatus()
			this.getliaotian()
		},
		methods: {
			// 点击进行跳转
			btnjian(item){
				uni.navigateTo({
					url:'/page_user/xiaoxi/siliao?id=' + item.id
				})
			},
			// 获取聊天列表
			getliaotian(){
				this.$u.get(`/app/session/list`).then(res => {
					if(res.code == 200){
						this.liaotianlist = res.rows
					}
				})
			},
			// 获取消息状态
			getxxstatus(){
				this.$u.get(`/app/message/messageStatus`).then(res => {
					if(res.code == 200){
						this.hasCommentMessage = res.data.hasCommentMessage //评论
						this.hasFocusMessage = res.data.hasFocusMessage //关注
						this.hasLikeMessag = res.data.hasLikeMessag //点赞
					}
				})
			},
			// 上拉加载更多数据
			handqixing() {
				if(this.liaotianlist.length < this.total){
					this.getliaotian()
				}
			},
			// 下拉刷新最新的数据
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.pageNum = 1
					this.isRefreshing = false
					this.getliaotian()
				}, 300)
			},
			// 点击跳转到别人主页
			btngr(item){
				if(item.type == 2){
					uni.navigateTo({
						url:'/page_newyemian/gereninfo/tareninfo?id=' + item.privateSessionUserId
					})
				}
			},
			// 点击进行跳转页面
			btnpage(num){ //点赞
				if(num == 1){
					uni.navigateTo({
						url:'/page_user/xiaoxi/index'
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_user/xiaoxi/newguanzhu'
					})
				}else if(num == 3){
					uni.navigateTo({
						url:'/page_user/xiaoxi/pinglun'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.feed{
		width: 750rpx;
		margin: auto;
		height: 73vh;
		overflow: scroll;
		padding-bottom: 100rpx;
	}
	.xxlist{
		margin-top: 58rpx;
		padding: 0 30rpx;
		padding-bottom: 200rpx;
		.xxitem{
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.lt{
				display: flex;
				image{
					width: 106rpx;
					height: 106rpx;
					margin-right: 34rpx;
					border-radius: 50%;
				}
				.cen{
					.name{
						font-weight: 600;
						font-size: 30rpx;
						color: #3D3D3D;
					}
					.cont{
						font-size: 26rpx;
						color: rgba(61,61,61,0.8);
						margin-top: 34rpx;
					}
				}
			}
			.rt{
				font-size: 24rpx;
				color: rgba(61,61,61,0.8);
				position: relative;
				text{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 30rpx;
					background-color: red;
					color: #fff;
				}
			}
		}
	}
	.xxtop{
		display: flex;
		justify-content: space-between;
		margin-top: 46rpx;
		padding: 0 60rpx;
		.top{
			width: 150rpx;
			text-align: center;
			position: relative;
			text{
				display: block;
				width: 20rpx;
				height: 20rpx;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				top: 0;
				right: 16rpx;
			}
			image{
				width: 106rpx;
				height: 106rpx;
			}
			view{
				font-weight: 600;
				font-size: 30rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
			}
		}
	}
	::v-deep .map{
		width: 100%;
		height: 100%;
	}
	page {
		background:#fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
</style>