menber-center/pages/index/index.vue

<template>
	<view class="container">
		<!-- <view :style="{height: statusBarHeight + 'px'}"></view> -->
		<!-- <view :style="{height: navBarHeight + 'px'}"></view> -->
		<u-navbar :is-back="false" title="" :background="{ background: '#f7f7f7' }" :border-bottom="false">
			<view class="slot-wrap">
				<image src="/static/images/login-icon.png" mode="aspectFit" style="width: 200rpx;"></image>
			</view>
		</u-navbar>
		<view class="page-content">
			<swiper class="swiper" circular indicator-dots style="border-radius: 20rpx;overflow: hidden;height: 200px">
				<swiper-item v-for="(data, index) in swiperList" style="width: 100%;height: 100%;" :key="index">
					<view class="swiper-item" style="width: 100%;height: 100%;">
						<image :src="data.tupian" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
			<u-grid :col="4" :border="false" style="margin: 10rpx 0 ;">
				<template v-for="(item,index) in navList" :key="index">
					<u-grid-item bg-color="none" @click="jumpToPage(item)">
						<image :src="`/static/index-icon/${item.image}.png`" style="height: 70rpx;width: 70rpx;">
						</image>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</template>
			</u-grid>
			<u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
				<template v-slot:head>
					<u-section title="今日热门" sub-title="查看更多" sub-color="#000000"></u-section>
				</template>
				<template v-slot:body>
					<view>
						123456
					</view>
				</template>
			</u-card>
			<u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
				<template v-slot:head>
					<u-section title="今日热门" sub-title="查看更多" sub-color="#000000"></u-section>
				</template>
				<template v-slot:body>
					<view>
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
							<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
							<image
								src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
								mode="aspectFill"></image>
						</view>
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
							<image
								src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
								mode="aspectFill"></image>
						</view>
					</view>
				</template>
			</u-card>
			<button @click="toPage">是否登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useAuthStore
	} from '@/store/authStore'
	const authStore = useAuthStore()
	// 屏幕状态栏高度
	const statusBarHeight = ref(0)
	// 顶部导航栏高度
	const navBarHeight = ref(0)
	// 是否登录
	const isLogin = ref(true)
	// 是否为会员，从缓存里拿取用户信息
	// const userInfo = uni.getStorageSync("userinfo") || {}
	// const isMember = userInfo?.isMember || false

	// 首页-轮播图
	const swiperList = ref([{
			tupian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
			id: '01'
		},
		{
			tupian: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
			id: '02'
		}
	])
	// 首页-导航栏
	const navList = ref([{
			id: 'notice',
			title: '通知公告',
			image: 'notice',
			url: '/pages/notice/notice/notice',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'dynamic',
			title: '协会动态',
			image: 'dynamic',
			url: '/pages/dynamic/dynamic/dynamic',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'guide',
			title: '办事指引',
			image: 'guide',
			url: '/pages/guide/guide/guide',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'edu',
			title: '继续教育',
			image: 'edu',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'level',
			title: '水平认证',
			image: 'level',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'report',
			title: '研究报告',
			image: 'report',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'index',
			title: '经理人指数',
			image: 'pay',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'pay',
			title: '会费缴交',
			image: 'pay',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		}
	])

	const jumpToPage = (data) => {
		if(data.toOtherApp){
			// 跳转其他小程序
			console.log("跳转至其他小程序", data.otherAppId)
			return
		}
		uni.navigateTo({
			url: data.url
		})
	}
	const toPage = () => {
		if (!authStore.isAuthenticated) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
			return
		}
	}
	onReady(() => {
		uni.getSystemInfo({
			success(e) {
				statusBarHeight.value = e.statusBarHeight;
				let custom = uni.getMenuButtonBoundingClientRect();
				navBarHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2;
			}
		})
	})
	onLoad(() => {
		uni.setTabBarBadge({ //显示数字  
			index: 1, //tabbar下标
			text: '999' //数字
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 0 20rpx;
	}

	.slot-wrap {
		padding-left: 20rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $uni-text-color;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		// padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>