menber-center/pages/index/index.vue

<template>
	<view class="container" :style="{backgroundColor: `${backgroundColor}`}">
		<u-navbar :is-back="false" title="" :style="{backgroundColor: `${backgroundColor}`}" :border-bottom="false">
			<view class="slot-wrap">
				<image :src="`${FILE_URL}/login-icon.png`"
					mode="aspectFit" style="width: 300rpx;"></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%;" @click="itemClick(data)">
						<image :src="data.imgUrl" 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)" class="menu-item">
						<i :class="['iconfont', `${item.icon}`]" :style="{ color: `${tabbarActiveColor}` }"></i>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</template>
			</u-grid>
			<u-card padding="20" margin="0rpx 0rpx 30rpx" 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" @click="toPage('/pages/goOnEdu/index')"></u-section>
				</template>
				<template v-slot:body>
					<lg-swiper v-if="courseList.length!=0" 
					:sildeItems="courseList" 
					@swiperClick="swiperClick"
					image="courseImg" title="courseName"></lg-swiper>
					<u-empty text="暂无内容" mode="data" v-else></u-empty>
				</template>
			</u-card>
			<u-card padding="30" margin="0rpx 0rpx 30rpx" 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" @click="toPage('/pages/researchReport/reportHome/reportHome')"></u-section>
				</template>
				<template v-slot:body>
					<view v-if="reportList.length!=0">
						<view v-for="(data,index) in reportList" :key="index" class="u-body-item u-flex u-p-t-0 "
							style="align-items: inherit;" @click="toReport(data.id, data.title)">
							<image :src="data.imgUrl" mode="aspectFill"></image>
							<view class="u-body-item-content">
								<view class="item-content">
									<text class="item-content-title text-ellipsis">{{data.title}}</text>
									<text class="item-content-type">{{data.type}}</text>
								</view>
								<view class="item-button">
									<view v-if="data.viewMode==='1'" class="func-box" style="justify-content: flex-end;">
										<view class="button free" >免费</view>
									</view>
									<view v-else-if="data.viewMode==='2' && isMember" class="func-box">
										<view class="price">￥{{ data.price }}元</view>
										<view class="button member-free">会员免费</view>
									</view>
									<view v-else-if="data.viewMode==='2' && !isMember" class="func-box">
										<view style="flex: 0 0 auto;display: flex;align-items: center;">
											<view class="member-free">
												会员免费
											</view>
											<view class="not-member-price">
												非会员：￥{{data.price}}元
											</view>
										</view>
										<view :class="['button', data.hasBuy ? 'free' : 'buy']">
											{{data.hasBuy ? '已购买' : '立即购买'}}
										</view>
									</view>
									<view v-else-if="data.viewMode==='3' && data.price===data.priceMember" class="func-box">
										<view class="price">￥{{ data.price }}元</view>
										<view :class="['button', data.hasBuy ? 'free' : 'buy']">
											{{data.hasBuy ? '已购买' : '立即购买'}}
										</view>
									</view>
									<view v-else-if="data.viewMode==='3' && data.price!==data.priceMember" class="func-box">
										<view style="flex: 0 0 auto;display: flex;align-items: center;">
											<view class="member-free">
												{{`会员：${data.priceMember}元`}}
											</view>
											<view class="not-member-price">
												非会员：￥{{data.price}}元
											</view>
										</view>
										<view :class="['button', data.hasBuy ? 'free' : 'buy']">
											{{data.hasBuy ? '已购买' : '立即购买'}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty text="暂无内容" mode="data" v-else></u-empty>
				</template>
			</u-card>
		</view>
		<u-modal v-model="loginModal" mask-close-able class="modal" show-cancel-button
			:title-style="{fontWeight: 'bold'}" @confirm="confirmModal">
			<view class="modal-content">
				<text>请登录后使用该功能</text>
			</view>
		</u-modal>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="tabbarCurrentIndex" 
		:list="tabbarList" icon-size="50" 
		:active-color="tabbarActiveColor" 
		:inactive-color="tabbarInactiveColor"></u-tabbar>
	</view>
</template>

<script setup>
	import lgSwiper from '@/components/lgSwiper.vue'
	import {
		onMounted,
		ref,
		computed
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useAuthStore
	} from '@/store/authStore'
	import {
		count
	} from '@/api/chat.js'
	import {
		homeCourseList,
		homeReportList,
		homeSetting,
		homeSwiperList
	} from '@/api/home.js'
	import {
		me
	} from '@/api/user.js'
	import configService from '@/utils/baseurl.js'
	const FILE_URL = configService.FILE_URL;
	import { useTabbarStore } from '@/store/tabbarStore.js'
	const tabbarStore = useTabbarStore()
	// 底部导航栏数据
	const tabbarList = computed(() => {
		return tabbarStore.list
	})
	// 底部导航栏选中颜色
	const tabbarActiveColor = computed(() => {
		return tabbarStore.activeColor
	})
	
	const backgroundColor = computed(() => {
		return tabbarStore.backgroundColor
	})
	// 底部导航栏未选中颜色
	const tabbarInactiveColor = computed(() => {
		return tabbarStore.inactiveColor
	})
	const tabbarCurrentIndex = 0
	
	const authStore = useAuthStore()
	// 屏幕状态栏高度
	const statusBarHeight = ref(0)
	// 顶部导航栏高度
	const navBarHeight = ref(0)
	// 是否登录

	const loginModal = ref(false)
	// 是否为会员，从缓存里拿取用户信息
	// const userInfo = uni.getStorageSync("userinfo") || {}
	const isMemberMap = {
		0: true,
		1: false
	}
	const isMember = ref(false)

	// 首页-轮播图
	const swiperList = ref([{
			imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
			id: 1
		},
		{
			imgUrl: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
			id: 2
		},
		{
			imgUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
			id: 3
		},
	])

	const courseList = ref([{
			courseImg: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
			id: 1,
			courseName: '【8月8日】房地产经纪进阶培训班'
		},
		{
			courseImg: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
			id: 2,
			courseName: '【8月9日】《房地产中介服务规范》培训'
		},
		{
			courseImg: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
			id: 3,
			courseName: '【已结束】《广州市房屋租赁管理规定》'
		},
	])
	// 首页-导航栏
	const navList = ref([{
			id: 'notice',
			title: '通知公告',
			icon: 'icon-xiaoxitongzhi',
			url: '/pages/notice/notice/notice',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'dynamic',
			title: '协会动态',
			icon: 'icon-xinxisousuo-01',
			url: '/pages/dynamic/dynamic/dynamic',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'guide',
			title: '办事指引',
			icon: 'icon-caidanguanli',
			url: '/pages/guide/guide/guide',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'edu',
			title: '继续教育',
			icon: 'icon-xueshimao1',
			url: '/pages/goOnEdu/index',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'level',
			title: '水平认证',
			icon: 'icon-zhengshu-copy',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'report',
			title: '研究报告',
			icon: 'icon-circular',
			url: '/pages/researchReport/reportHome/reportHome',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'index',
			title: '经理人指数',
			icon: 'icon-zhishu',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'pay',
			title: '会费缴交',
			icon: 'icon-jinqian-jiage',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		}
	])

	const reportList = ref(
		[])
	// 跳转页面
	const jumpToPage = (data) => {
		if (data.toOtherApp) {
			// 跳转其他小程序
			console.log("跳转至其他小程序", data.otherAppId)
			return
		}
		if (!authStore.isAuthenticated) {
			loginModal.value = true
			return
		}
		uni.navigateTo({
			url: data.url
		})
	}
	// 确认跳转至登录
	const confirmModal = () => {
		uni.navigateTo({
			url: "/pages/initial/initial"
		})
	}
	const toPage = (url) => {
		if (!authStore.isAuthenticated) {
			loginModal.value = true
			return
		}
		uni.navigateTo({
			url: url
		})
	}
	const itemClick = (data) =>{
		// console.log("轮播图swiper", data)
		if (!authStore.isAuthenticated) {
			loginModal.value = true
			return
		}
		uni.navigateTo({
			url: "/pages/swiperDetail/swiperDetail?id=" + data.id 
		})
	}
	const swiperClick = (data) => {
		// console.log(data, "课程预告数据")
		if (!authStore.isAuthenticated) {
			loginModal.value = true
			return
		}
		uni.navigateTo({
			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${data.id}&name=${data.courseName}`
		});
	}

	function initUser() {
		me().then(res => {
			if (res?.data) {
				authStore.setUserInfo(res.data);
				isMember.value = res.data.isMember;
			}
		})
	}

	function init() {
		homeSwiperList().then(res => {
			if (res?.data) {
				swiperList.value = res.data
			}
		})
		homeCourseList().then(res => {
			// console.log(1000, res.data)
			if (res?.data) {
				courseList.value = res.data
				console.log(courseList.value)
			}
		})
		homeReportList().then(res => {
			if (res?.data) {
				reportList.value = res.data
			}
		})
		// homeSetting().then(res=>{
		// 	console.log(res)
		// })
	}

	function getCharCount() {
		count().then(res => {
			if (res && res.message === 'success') {
				tabbarStore.setMessageCount(res.data.amount)
				uni.setTabBarBadge({ //显示数字
					index: 1, //tabbar下标
					text: `${res.data.amount}` ?? '0' //数字
				})
			}
		})
	}
	
	function toReport(id, title){
		if (!authStore.isAuthenticated) {
			loginModal.value = true
			return
		}
		uni.navigateTo({
			url:"/pages/reportDetail/reportDetail?id="+id+"&title="+title
		})
	}
	
	onReady(() => {
		uni.getSystemInfo({
			success(e) {
				statusBarHeight.value = e.statusBarHeight;
				let custom = uni.getMenuButtonBoundingClientRect();
				navBarHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2;
			}
		})
	})
	onLoad(() => {
		init()
		// uni.setBackgroundColor({
		//     backgroundColor: '#ffff7f',
		// });
		// initUser()
	})
	onShow(() => {
		const isLogin = authStore.isAuthenticated;
		const isUserInfo = authStore.isUserInfo;
		if (isLogin) {
			// 登录后才请求消息数量
			getCharCount()
			// 没有用户信息就加载一边
			if (!isUserInfo) {
				initUser();
			} else {
				isMember.value = authStore.userInfo.isMember==='0'?false:true;
			}
		}
		
	})
</script>

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

	.slot-wrap {
		padding-left: 20rpx;
	}
	.menu-item{
		.iconfont{
			font-size: 60rpx;
		}
	}
	.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;
		margin-bottom: 30rpx;
		height: 140rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.u-body-item-content {
			position: relative;
			flex: 1;
			/* 剩余空间占用 Flex 规则 */
			min-width: 0;
			// width: 100%;
			height: inherit;

			.item-content text {
				width: inherit;
				font-size: $uni-font-size-2;
				display: block;
				margin: 10rpx;
				color: $uni-text-color;
			}

			.item-content .item-content-title {
				font-size: $uni-title-font-size-2;
			}

			.item-content .item-content-price {
				color: $uni-color-error;
				// font-weight: bold;
			}

			.item-button {
				width: 100%;

				.item-button-huiyuan {
					padding: 15rpx 0 5rpx;
					text-align: center;
					width: 150rpx;
					background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
					background-size: cover;
					background-repeat: no-repeat;
					// background-position: center;
				}

				.item-button-goumai {
					padding: 5rpx 0;
					text-align: center;
					width: 150rpx;
					background-color: #fe0000;
					border-radius: 30rpx;
					color: #fff;
				}

				.item-button-yiGouMai {
					text-align: center;
					width: 150rpx;
					padding: 5rpx 0;
					background-color: #006af4;
					border-radius: 30rpx;
					color: #fff;
				}
			}
		}

		image {
			width: 200rpx;
			flex: 0 0 200rpx;
			height: 100%;
			border-radius: 20rpx;
			margin-right: 12rpx;
		}
	}


	.course-swiper {
		height: 200px;

		.swiper-item {
			width: 33.33%;
			height: 200px;
			/* 三个一排，宽度为三分之一 */
			transition: transform 0.3s ease;
			/* 加入过渡效果 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.swiper-item.active {
			transform: scale(2);
			/* 主项放大 */
		}

		image {
			width: 80%;
			/* 图片宽度 */
			height: auto;
		}

		text {
			margin-top: 10px;
		}
	}

	.text-ellipsis {
		overflow: hidden;
		/* 隐藏超出内容 */
		white-space: nowrap;
		/* 禁止换行 */
		text-overflow: ellipsis;
	}

	.swiper-container {
		perspective: 1000px;
	}

	.swiper-item {
		transition: transform 0.5s;
		transform-style: preserve-3d;
		/* 其他样式 */
	}

	.content {
		backface-visibility: hidden;
		/* 确保背面不可见 */
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		/* 设置高度 */
		font-size: 24px;
		color: white;
		background: linear-gradient(45deg, #ff5858, #f09819);
		/* 示例背景 */
	}

	// 登录模拟态
	.modal {
		.modal-content {
			padding: 50rpx;

			.content-a {
				color: #2979ff;
			}
		}
	}
	
	.item-button {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		font-size: $uni-font-size-2;
		font-weight: bold;
		margin-top: 10rpx;
	
		.func-box {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
		}
	
		.button {
			text-align: center;
			width: 130rpx;
		}
	
		.price {
			color: $uni-color-error;
			font-size: $uni-title-font-size-3;
		}
	
		.not-member-price {
			font-size: $uni-font-size-4;
			color: $uni-text-color-grey;
			text-align: end;
		}
	
		.buy {
			padding: 6rpx 25rpx;
			background-color: $uni-color-error;
			border-radius: $uni-card-border-radius;
			color: $uni-text-color-inverse;
		}
	
		.free {
			padding: 6rpx 25rpx;
			background-color: $uni-color-primary;
			border-radius: $uni-card-border-radius;
			color: $uni-text-color-inverse;
		}
	
		.member-free {
			padding: 10rpx 20rpx;
			@include backgroundImg('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
			color: $uni-text-color;
		}
	}
</style>