jiuyiUniapp/jiuyi2/pages/news/news.vue

<script setup>
	/**
	 * 消息
	 */

	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		useStore,
	} from 'vuex'
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	// 头部导航栏
	import apex from '@/components/header/apex'
	// 未登录
	import noLogin from '@/components/login/noLogin.vue'
	// 通讯录
	import book from '@/components/news/book'
	// 群聊列表
	import groupList from '@/components/news/groupList'
	// 消息列表
	import msgList from '@/components/news/msgList'
	// 底部菜单
	import footerMneu from '@/components/footerMenu/footerMenu'
	import videoApi from '@/api/video.js';
  // 工具库
  import util from '@/common/js/util.js'
  // api
  import newsApi from '@/api/news.js'
  // vuex
	const store = useStore()
	// 菜单列表
	const menuList = reactive([{
			key: 'friend',
			name: '通讯录',
			load: false,
		},
		{
			key: 'group',
			name: '即时消息',
			load: false,
		},
		{
			key: 'video',
			name: '视讯消息',
			load: false,
		},
		{
			key: 'video',
			name: '商城消息',
			load: false,
		},
	])
	// 菜单下标
	const menuIndex = ref('')
	// 是否显示搜索菜单
	const showSearch = ref(false)
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 当前选中的菜单
	const menuCurrent = computed(() => {
		let result = menuList[menuIndex.value]
		return result
	})

	onLoad(() => {
		// 初始化菜单
		handleMenuIndex(2)
	})

  /**
   * 切换下标
   * @param {Number} index
   */
  function handleMenuIndex(index) {
      if (menuIndex.value === index) return
      menuIndex.value = index
      if (!menuList[index].load) menuList[index].load = true
      // 点击通讯录时调用获取好友列表的函数
      if (index === 0) {
        getFriends();
      }
  }
  const viewData = ref([])
  // 获取好友列表
  function getFriends() {
    newsApi.getFriendList().then(response => {
      if (response.success) {
        viewData.value = response.data;
        // 这里可以将好友列表传递给book组件进行展示
        console.log('好友列表:', viewData.value);
        return
      }
      util.alert({
        content: rs.msg,
        showCancel: false,
      })
    })
  }
	// 打开菜单
	function showActionSheet() {
		uni.showActionSheet({
			itemList: ['扫一扫', '添加好友', '发起群聊', '我的二维码'],
			success: rs => {
				switch (rs.tapIndex) {
					case 0:
						util.scan()
						break;
					case 1:
						uni.navigateTo({
							// url: '/pages/news/addFriend'
							url: '/pages/news/newFriend'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/news/group-chat/index'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/news/myQr'
						});
						break;
					default:
						break;
				}
			}
		})
	}

	function getUserInfos(userRecommend) {
		videoApi.getUserInfo({
			query: {
				userRecommend: userRecommend,
			}
		}).then(rs => {
			if (rs.data !== null) {
				uni.navigateTo({
					url: '/pages/index/beInvited?header=' + rs.data.userPortrait + '&userId=' + rs.data
						.userId + '&userNickname=' +
						rs.data.userNickname
				});
			}
		})
	}
</script>

<template>
	<view class="page" v-if="!userinfo.id && 0">
		<noLogin class="f1" />
	</view>

	<view class="page" v-else>
		<apex>
			<template #left>
				<view></view>
			</template>
			<template #content>
				<!-- <view class="ver">
					<image class="wh30" src="/static/read.png" mode="aspectFit" />
					<text class="f20">一键已读</text>
				</view> -->
			</template>
			<template #right>
				<uni-icons type="bars" size="40rpx" @click="showActionSheet" />
			</template>
		</apex>

		<view class="searchBox" :class="{ 'active': showSearch }">
			<view class="search rows mt20 mlr20 ptb10 plr30 bfff bar">
				<uni-icons type="search" />
				<input type="text" placeholder="搜索" class="f1 ml10" confirm-type="search" />
			</view>
		</view>

		<!-- 顶部菜单 -->
		<view class="headMenu f24">
			<view class="option oh df" v-for="(item, index) in menuList" :key="item.key"
				:class="[item.key, { 'active': index === menuIndex }]" @click="handleMenuIndex(index)">
				<view class="f1 fmid">{{ item.name }}</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" :current="menuIndex" disable-touch="true">
			<!-- 通讯录 -->
			<swiper-item>
				<book v-if="menuList[0].load" />
				<view class="loading" v-else>正在加载</view>
			</swiper-item>

			<!-- 群组 -->
			<swiper-item>
				<groupList v-if="menuList[1].load" />
				<view class="loading" v-else>正在加载</view>
			</swiper-item>

			<!-- 视频消息 -->
			<swiper-item>
				<msgList v-if="menuList[2].load" />
				<view class="loading" v-else>正在加载</view>
			</swiper-item>

			<!-- 商城消息 -->
			<swiper-item>
				<msgList />
			</swiper-item>
		</swiper>
	</view>

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="news" />
</template>

<style lang="scss" scoped>
	//
	.headMenu {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 25rpx;
		margin: 20rpx;

		// 单项
		.option {
			height: 120rpx;
			background-color: #E2E2E2;
			border-radius: 15rpx;
			transition: .3s;

			// 激活的
			&.active {
				color: #fff;

				// 朋友
				&.friend,
				&.group,
				&.video {
					background-image: linear-gradient(126deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
				}

				// 商城消息
				&.store {
					background-image: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
				}
			}
		}

		// 卡通
		.cartoon {
			margin-top: -15rpx;
			margin-right: -25rpx;
			width: 194rpx;
			height: 175rpx;
			transform: rotate(-5deg);
		}
	}

	// 搜索条
	.searchBox {
		overflow: hidden;
		height: 0;
		transition: .3s;

		&.active {
			height: 80rpx;
		}
	}

	//
	.swiper {
		flex: 1;
	}

	// 正在加载
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
</style>