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

<template>
	<view class="main-box">
		<view class="notice-box">
			<notice-bar></notice-bar>
		</view>
		
		<!-- <view class="blind-box">
			<view class="blind-card">
				<view class="icon">
					<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
				</view>
				<view class="avatar-box">
					<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
					<view @click="blindOrder" class="btn">快速匹配</view>
				</view>
			</view>
		</view> -->
		
		<!-- <view>
			<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
		</view> -->
		
		<view class="card-box">
			<user-card :newList="newList" :hotList="hotList"></user-card>
		</view>
		
		<view>
			<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
		</view>
		
		<view class="menu-btn">
			<view class="icon" @click="slashed">
				<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/097d1fd05a1176fe93df9de64e416e771ff8ccba72330d90d905783dff66c376.png"></image>
			</view>
			
			<!-- <view class="icon" @click="blindOrder">
				<image class="img" src="http://cos.duopei.feiniaowangluo.com/2065/shop/navbar/1727183771735mx5tNxqRg6.jpg"></image>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
	import StickyBox from '@/pages/tabbar/components/home/friend/stickyBox.vue';
	import RankBox from '@/pages/tabbar/components/home/friend/rankBox.vue';
	import UserCard from '@/pages/tabbar/components/home/friend/userCard.vue';
	import UserApi from '@/sheep/api/member/user';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import ImConversationApi from '@/sheep/api/im/memberConversation';
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import sheep from '@/sheep';
	export default {
		components: {
			NoticeBar,
			RankBox,
			StickyBox,
			UserCard,
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0,
			},
			stickyTop: {
				type: Number,
				default: uni.upx2px(80),
			},
		},
		data() {
			return {
				actionStyle: {
					backgroundColor: 'var(--ui-BG-Main)',
					borderRadius: '40px',
					padding: '7px',
					color: '#fff',
					fontSize: '28rpx',
					width: '80px',
				},
				keyword: '',
				categoryList: [],
				newList: [],
				hotList: [],
				maleWeekTopList: [],
				femaleWeekTopList: [],
			}
		},
		created() {
			this.getInitData();
		},
		methods: {
			tabClick(e) {
				this.$emit('tabClick', e);
			},
			getInitData() {
				this.getHomeData();
				
				UserApi.getWeekTopList().then(res => {
					this.maleWeekTopList = res.data.maleWeekTopList;
					this.femaleWeekTopList = res.data.femaleWeekTopList;
				});
				
			},
			search() {
				this.$emit('search', this.keyword);
			},
			blindOrder() {
				this.chat();
			},
			slashed() {
				var that = this;
				uni.showModal({
				  title: '首页置顶',
				  content: '每次置顶3小时，可以累计置顶时间。累计时间越多，排名越靠前',
				  success: function (res) {
				    if (res.confirm) {
						that.submitSlashed();
				    }
				  },
				});
			},
			getHomeData() {
				UserApi.getHomeData().then(res => {
					this.newList = res.data.memberNewList;
					this.hotList = res.data.memberHotList;
				});
			},
			submitSlashed() {
				UserApi.slashed().then(res => {
					if(res.data){
						this.getHomeData();
					}
				});
			},
			chat() {
				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.getRandomMemberConversation().then(res => {
						if(res.data){
							sheep.$router.go('/pages/im/index',{groupId: res.data.groupId, receiveUserId: res.data.userId});
						}
					});
					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>
	.main-box {
		
		.search-box {
			background-color: #fff;
			border-radius: 40px;
			padding: 3px;
			margin: 15px;
		}
		
		.notice-box {
			margin: 15px;
		}
		
	}
	
	.card-box {
		padding: 0 15px;
	}
	
	.category-box {
		padding: 15px;
		padding-bottom: 0;
	}
	
	.blind-box {
		padding: 0 15px;
		margin-bottom: 15px;
	}
	
	.blind-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		
		.icon {
			margin-right: 10px;
		}
		
		.avatar-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			
			.btn {
				color: #fff;
				font-size: 24rpx;
				border-radius: 40px;
				padding: 5px 10px;
				background-color: var(--ui-BG-Main);
			}
		}
	}
	
	
	.menu-btn {
		position: fixed;
		bottom: 220rpx;
		right: 25rpx;
		z-index: 1;
		
		.icon {
			background-color: #ffff;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 100%;
			box-shadow: 0 0 10px #cccccc;
			margin-top: 70rpx;
		}
			
		.img {
			height: 80rpx;
			width: 80rpx;
			border-radius: 100%;
		}
	}
	
</style>