peiwan-uniapp/pages/tabbar/components/home/friend/rankBox.vue

<template>
	<view class="rank-box">
		<view class="tab-box">
			<tui-tabs width="200" unlined :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="current" @change="change"></tui-tabs>
		</view>
		<view class="user-box">
			<view class="avatar-box two" @click="detail(1)">
				<view class="img-box">
					<img v-if="list[1]" class="img" :src="list[1].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/03072abb5a8c90a4f457549b8394d3c3db2a652410692d732b5c25f2478e3a85.png"></img>
				</view>
				<view class="nickname" v-if="list[1]">{{list[1].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
			<view class="avatar-box one" @click="detail(0)">
				<view class="img-box">
					<img v-if="list[0]" class="img" :src="list[0].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d191aec3b3d6e95c1dcb3bace7bffe28834f4fb062a9675aeaa1ae42a9bbc366.png"></img>
				</view>
				<view class="nickname" v-if="list[0]">{{list[0].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
			<view class="avatar-box three" @click="detail(2)">
				<view class="img-box">
					<img v-if="list[2]" class="img" :src="list[2].avatar"></img>
					<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
					<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/27209281e1b0e00dcc112bae4d06c14b089ec2f74db14b62eca4cbc0cf741cff.png"></img>
				</view>
				<view class="nickname" v-if="list[2]">{{list[2].nickname}}</view>
				<view class="nickname" v-else>???</view>
			</view>
		</view>
		<view class="time-box">更新时间: {{updateTime}}</view>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import sheep from '@/sheep'; 
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import ImConversationApi from '@/sheep/api/im/memberConversation';
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import dayjs from 'dayjs';
	export default {
		components: {
			tuiTabs
		},
		props: {
			maleWeekTopList: {
				type: Array,
				default: [],
			},
			femaleWeekTopList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				list: [],
				current: 0,
			}
		},
		computed: {
			updateTime() {
				this.list = this.femaleWeekTopList;
				
				// 获取当前日期和时间
				const now = dayjs();
				const nowDays = now.format('MM/DD');
				const sevenDaysAgo = now.subtract(7, 'day').format('MM/DD');
				return sevenDaysAgo + '-' + nowDays
			},
			tabList() {
				return [{
					name: '女神榜',
					list: this.femaleWeekTopList,
				},{
					name: '男神榜',
					list: this.maleWeekTopList,
				}];
			},
		},
		methods: {
			change(e) {
				this.current = e.index;
				this.list = this.tabList[e.index].list;
			},
			detail(e) {
				var user = this.list[e];
				sheep.$router.go('/pages/user/detail/index',{id: user.id});
			},
			chat(e) {
				var user = this.list[e];
				if(!user){
					return;
				}
				
				const isLogin = sheep.$store('user').isLogin;
				if(!isLogin) {
					showAuthModal();
					return;
				}
				
				const userInfo = sheep.$store('user').userInfo;
				// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
				if(userInfo.visible) {
					// #ifdef MP-WEIXIN
					this.subscribeMessage();
					// #endif
					ImConversationApi.createMemberConversation({
						userId: user.id,
						groupType: 1,
						lastMessageContentType: 1,
					}).then(res => {
						if(res.data){
							sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: user.id});
						}
					});
					return;
				}
				// 触发小程序授权信息弹框
				// #ifdef MP-WEIXIN
				showAuthModal('mpAuthorization');
				// #endif
				
				// #ifndef MP-WEIXIN
				showAuthModal('h5Authorization');
				// #endif
			},
			subscribeMessage() {
			  const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
			    // 订阅后记录一下订阅状态
			    uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
			    uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rank-box {
		background-color: #fff;
		display: flex;
		justify-content: center;
		margin: 15px;
		border-radius: 10px;
		padding: 15px;
		flex-direction: column;
		align-items: center;
		padding-top: 5px;
		
		.tab-box {
			width: 200px;
		}
		
		.user-box {
			display: flex;
			width: 100%;
		}
		
		.avatar-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			
			.nickname {
				margin-top: 10px;
				font-size: 28rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				max-width: 160rpx;
				text-align: center;
				line-height: 28rpx;
			}
			
			.point {
				font-size: 24rpx;
			}
			
			.img-box {
				height: 200rpx;
				position: relative;
				display: flex;
				justify-content: center;
				
				.two-icon {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					bottom: -8px;
				}
			}
			
			.img {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				bottom: 0;
				border-radius: 100%;
			}
			
		}
		
		.one{
			color: #fed530;
			
			.img {
				width: 160rpx;
				height: 160rpx;
				border: 2px solid #fed530;
				object-fit: cover;
			}
		} 
		
		.two {
			color: #d8d8d8;
			
			.img {
				border: 2px solid #d8d8d8;
				object-fit: cover;
			}
		} 
		
		.three {
			color: #ef9e3f;
			
			.img {
				border: 2px solid #ef9e3f;
				object-fit: cover;
			}
		} 
		
		.time-box {
			padding-top: 15px;
			font-size: 24rpx;
			color: #666;
		}
	}
</style>