huangjingfen/pro_v3.5.1/view/uniapp/pages/discover/discoverMessage/index.vue

<template>
	<view :style="colorStyle">
		<view class="h-full h-90 bb-f5 px-120 flex-between-center fs-32 fw-500">
			<view class="h-90 tab flex-y-center" :class="{'active-tab': current == 0,}" @tap="changeTab(0)">点赞</view>
			<view class="h-90 tab flex-y-center" :class="{'active-tab': current == 1,'show-dot':isViewed.comment && current != 1}" @tap="changeTab(1)">评论</view>
			<view class="h-90 tab flex-y-center" :class="{'active-tab': current == 2,'show-dot':isViewed.follow && current != 2}" @tap="changeTab(2)">关注</view>
		</view>
		<view v-show="current == 0">
			<view class="h-180 p-30 flex-between-center" v-for="(item, index) in messageList" :key="index"
				@tap="toPage(item)">
				<view class="flex-y-center">
					<image class="w-120 h-120 rd-50-p111-" :src="item.relation_author_image"></image>
					<view class="ml-20 w-398">
						<view class="fs-28 lh-40rpx">{{item.relation_author || '用户已注销'}}</view>
						<view class="flex-y-center fs-26 lh-36rpx text--w111-666 pt-8">
							赞了你的内容 <text class="text--w111-999 fs-22 pl-8">{{item.time_text}}</text>
						</view>
					</view>
				</view>
				<image :src="item.image" class="w-108 h-108 rd-8rpx" mode="aspectFill"></image>
			</view>
		</view>
		<view v-show="current == 1">
			<view class="h-180 p-30 flex-between-center" v-for="(item, index) in messageList" :key="index"
				@tap="toPage(item)">
				<view class="flex-y-center">
					<image class="w-120 h-120 rd-50-p111-" :src="item.relation_author_image"></image>
					<view class="ml-20 w-398">
						<view class="fs-28 lh-40rpx">{{item.relation_author || '用户已注销'}}</view>
						<view class="fs-26 lh-36rpx text--w111-666 mt-8 w-400 line1">
							评论了你：{{item.content}}
						</view>
						<view class="text--w111-999 fs-22 mt-8">{{item.time_text}}</view>
					</view>
				</view>
				<image :src="item.image" class="w-108 h-108 rd-8rpx" mode="aspectFill"></image>
			</view>
		</view>
		<view v-show="current == 2">
			<view class="h-180 p-30 flex-between-center" v-for="(item, index) in messageList" :key="index"
				@tap="toAuthor(item)">
				<view class="flex-y-center">
					<image class="w-120 h-120 rd-50-p111-"  :src="item.relation_author_image"></image>
					<view class="ml-20 w-398">
						<view class="fs-28 lh-40rpx">{{item.relation_author || '用户已注销'}}</view>
						<view class="flex-y-center fs-26 lh-36rpx text--w111-666 pt-8">
							关注了你 <text class="text--w111-999 fs-22 pl-8">{{item.time_text}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="w-124 h-52 rd-30rpx flex-center bg-color text--w111-fff fs-24"
					@tap="followChange(item)">回关</view> -->
				<!-- <view class="w-124 h-52 rd-30rpx flex-center bg--w111-fff text--w111-999 b-d fs-24" v-show="item.is_follow == 1 && item.is_fans == 1" 
					@tap="openModal(item,index)">互相关注</view> -->
			</view>
		</view>
		<view v-show="!messageList.length">
			<emptyPage title="暂无内容～" src="/statics/images/video/no_friend.png"></emptyPage>
		</view>
	</view>
</template>

<script>
	import colors from "@/mixins/color";
	import { mapState, mapGetters } from 'vuex';
	import { communityMessageApi } from "@/api/community.js";
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		data() {
			return {
				current: 0,
				params:{
					page:1,
					limit:20,
					type:1
				},
				loading: false,
				messageList: [],
				isViewed:{
					comment: 0,
					follow: 0,
					like: 0
				}
			};
		},
		mixins: [colors],
		components:{ emptyPage },
		computed: {
			...mapGetters(['isLogin','uid']),
		},
		onLoad(options) {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods:{
			changeTab(val){
				this.current = val;
				this.loading = false;
				this.params.page = 1;
				this.params.type = val + 1;
				this.messageList = [];
				this.getList();
			},
			getList(){
				if (this.loading) return;
				this.loading = true;
				communityMessageApi(this.params).then(res=>{
					let list = res.data.list;
					this.isViewed = res.data.isViewed;
					let loading = list.length < this.params.limit;
					this.messageList = this.messageList.concat(list);
					this.params.page++;
					this.loading = loading;
				}).catch(err=>{
					return this.$util.Tips({
						title: err
					});
				})
			},
			toPage(item){
				if(item.content_type == 1){
					uni.navigateTo({
						url: `/pages/discover/discoverDetails/index?id=${item.link_id}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/discover/discoverVideo/index?id=${item.link_id}`
					})
				}
				
			},
			toAuthor(item){
				uni.navigateTo({
					url: `/pages/discover/discoverUser/index?id=${item.relation_id}`
				})
			}
		}
	}
</script>
<style>
page{
	background-color: #ffffff;
}
</style>
<style lang="scss">
.bb-f5{
	border-bottom: 1px solid #f5f5f5;
}
.px-120{
	padding: 0 120rpx;
}
.tab{
	border-bottom: 4rpx solid transparent;
}
.active-tab{
	position: relative;
	&:after{
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 0;
		width: 64rpx;
		height: 4rpx;
		background: #E93323;
	}
}
.show-dot{
	position: relative;
	&:after{
		content: '';
		position: absolute;
		top: 18rpx;
		right: -6rpx;
		width: 12rpx;
		height: 12rpx;
		background: #E93323;
		border-radius: 8rpx;
	}
}
</style>