menber-center/pages/index/index.vue

<template>
	<view class="container">
		<u-navbar :is-back="false" title="" :background="{ background: '#f7f7f7' }" :border-bottom="false">
			<view class="slot-wrap">
				<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/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%;">
						<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="`https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/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="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"></u-section>
				</template>
				<template v-slot:body>
					<lg-swiper :sildeItems="courseList" @swiperClick="swiperClick" image="keChengTuPian"  title="keChengMingCheng"></lg-swiper>
				</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"></u-section>
				</template>
				<template v-slot:body>
					<view>
						<view v-for="(data,index) in reportList" :key="index" class="u-body-item u-flex u-p-t-0 "
							style="align-items: inherit;">
							<image :src="data.tuPian" mode="aspectFill"></image>
							<view class="u-body-item-content">
								<view class="item-content">
									<text class="item-content-title text-ellipsis">{{data.biaoTi}}</text>
									<text class="item-content-type">{{data.leiXing}}</text>
									<text class="item-content-price" v-if="!data.huiYuanMianFei">￥{{data.jiaGe}}元</text>
								</view>
								<view class="item-button">
									<view v-if="!data.huiYuanMianFei && data.yiGouMai" class="item-button-yiGouMai">已购买
									</view>
									<view v-else-if="!data.huiYuanMianFei && !data.yiGouMai" class="item-button-goumai">
										点击购买</view>
									<view v-else-if="data.huiYuanMianFei" class="item-button-huiyuan">
										会员免费
									</view>
								</view>
							</view>
						</view>
					</view>
				</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>
	</view>
</template>

<script setup>
	import lgSwiper from '@/components/lgSwiper.vue'
	import {
		onMounted,
		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 loginModal = ref(false)
	// 是否为会员，从缓存里拿取用户信息
	// 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'
		},
		{
			tuPian: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
			id: '03'
		},
	])

	const courseList = ref([{
			keChengTuPian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
			id: '01',
			keChengMingCheng: '【8月8日】房地产经纪进阶培训班'
		},
		{
			keChengTuPian: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
			id: '02',
			keChengMingCheng: '【8月9日】《房地产中介服务规范》培训'
		},
		{
			keChengTuPian: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
			id: '03',
			keChengMingCheng: '【已结束】《广州市房屋租赁管理规定》'
		},
	])
	// 首页-导航栏
	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: '/pages/goOnEdu/index',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'level',
			title: '水平认证',
			image: 'level',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'report',
			title: '研究报告',
			image: 'report',
			url: '/pages/researchReport/reportHome/reportHome',
			toOtherApp: false,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'index',
			title: '经理人指数',
			image: 'index',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		},
		{
			id: 'pay',
			title: '会费缴交',
			image: 'pay',
			url: '跳转页面的路径',
			toOtherApp: true,
			otherAppId: '其他小程序的appid'
		}
	])

	const reportList = ref(
		[{
				"biaoTi": "2023年7月广州市中介促成二手住宅市场交易简报",
				"tuPian": "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
				"leiXing": "月度成交简报",
				"jiaGe": 150.80,
				"yiGouMai": true,
				"huiYuanMianFei": false
			},
			{
				"biaoTi": "成交有望稳中微升——2023年8月中介协会经理人指数报告经理人指数报告经理人指数报告",
				"tuPian": "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
				"leiXing": "经理人指数报告",
				"jiaGe": 200.88,
				"yiGouMai": false,
				"huiYuanMianFei": false
			},
			{
				"biaoTi": "2023年6月广州市住宅租金动态监测报告",
				"tuPian": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg",
				"leiXing": "月度租赁简报",
				"jiaGe": 300.00,
				"yiGouMai": true,
				"huiYuanMianFei": true
			}
		])
	// 跳转页面
	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/login/login"
		})
	}
	const toPage = () => {
		if (!authStore.isAuthenticated) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
			return
		}
	}
	const swiperClick = (data) => {
		console.log(data, "课程预告数据")
	}
	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 {
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 0 20rpx 5rpx;
	}

	.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;
		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 {
				position: absolute;
				right: 0;
				bottom: 0;
				font-size: 22rpx;

				.item-button-huiyuan {
					padding: 15rpx 0 5rpx;
					text-align: center;
					width: 150rpx;
					background-image: url('https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/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;
			}
		}
	}
</style>