完善首页-课程预告部分

components/lgSwiper.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="container">
+		<swiper class="swiper" :circular="true" :autoplay="false" :duration="500" :previous-margin="'200rpx'"
+			:next-margin="'200rpx'" :style="{ height: '400rpx' }" :current="currentIndex" 
+			:easing-function="easeInOutCubic"
+			@change="changeCurrent">
+			<swiper-item v-for="(slide, index) in processedSildeItems" :key="index" style="overflow: initial;"
+				:class="index==currentIndex? 'swiper-item-active':'swiper-item-normal'">
+				<view :class="index==currentIndex? 'swiper-item active':'swiper-item'">
+					<image style="width: 100%;height: 70%;" mode="aspectFill" :src="slide.tupian"></image>
+					<text class="swiper-text">{{ slide.biaoti }}</text>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0
+			};
+		},
+		methods: {
+			changeCurrent(e) {
+				this.currentIndex = e.detail.current
+			}
+		},
+		props: {
+			sildeItems: {
+				type: Array,
+				required: true
+			}
+		},
+		computed: {
+			processedSildeItems() {
+				return [...this.sildeItems, ...this.sildeItems];
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.swiper {
+		width: 100%;
+		overflow: visible;
+		/* 确保部分滑块可见 */
+		height: 100%;
+		padding: 0 25rpx;
+	}
+
+	.swiper-item-active {
+		z-index: 10;
+	}
+
+	.swiper-item-normal {
+		z-index: 1;
+	}
+
+	.swiper-item {
+		display: flex;
+		height: 80%;
+		width: 85%;
+		margin: 0 auto;
+		justify-content: flex-end;
+		align-items: center;
+		font-size: 14rpx;
+		border-radius: 10px;
+		flex-direction: column;
+		color: #000;
+		.swiper-text {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			margin-top: 10rpx;
+		}
+		
+	}
+
+	.active {
+		// display: flex;
+		height: 100%;
+		width: 93%;
+		margin: auto;
+		justify-content: center;
+		// align-items: center;
+		font-size: 24rpx;
+		// border-radius: 10px;
+		// flex-direction: column;
+		.swiper-text {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+</style>

pages/index/index.vue

@@ -24,31 +24,15 @@
 					</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)">
+			<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>
-					<view>
-						<!-- <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> -->
-						<swiper class="course-swiper" indicator-dots :autoplay="false" circular :current="current"
-							@change="onSwiperChange">
-							<swiper-item v-for="(item, index) in swiperList" :key="index"
-								:class="['swiper-item', {'active': current === index}]">
-								<image :src="item.tupian" mode="aspectFill" style="height: 200px;"></image>
-								<text>{{ item.id }}</text>
-							</swiper-item>
-						</swiper>
-					</view>
+					<lg-swiper :sildeItems="courseList"></lg-swiper>
 				</template>
 			</u-card>
-			<u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
+			<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>
@@ -64,11 +48,12 @@
 									<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-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">
 										会员免费
-										<!-- <image class="item-button-huiyuan-bg" src="/static/images/bg-label.png" mode="aspectFit"></image> -->
 									</view>
 								</view>
 							</view>
@@ -76,13 +61,14 @@
 					</view>
 				</template>
 			</u-card>
-			<button @click="toPage">是否登录</button>
 		</view>
 	</view>
 </template>
 
 <script setup>
+	import lgSwiper from '@/components/lgSwiper.vue'
 	import {
+		onMounted,
 		ref
 	} from 'vue'
 	import {
@@ -102,7 +88,10 @@
 	// 是否为会员，从缓存里拿取用户信息
 	// const userInfo = uni.getStorageSync("userinfo") || {}
 	// const isMember = userInfo?.isMember || false
-
+    const items= ref(['内容1', '内容2', '内容3', '内容4'])
+	const onChange = (e) => {
+      console.log('当前索引:', e.detail.current);
+    }
 	// 首页-轮播图
 	const swiperList = ref([{
 			tupian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
@@ -117,6 +106,23 @@
 			id: '03'
 		},
 	])
+	
+	const courseList = ref([{
+			tupian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
+			id: '01',
+			biaoti: '挑剔1111111111'
+		},
+		{
+			tupian: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
+			id: '02',
+			biaoti: '挑剔22231331231'
+		},
+		{
+			tupian: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
+			id: '03',
+			biaoti: '挑剔42341255243'
+		},
+	])
 	const current = ref(0)
 	// 首页-导航栏
 	const navList = ref([{
@@ -218,6 +224,12 @@
 			console.log("跳转至其他小程序", data.otherAppId)
 			return
 		}
+		if (!authStore.isAuthenticated) {
+			uni.navigateTo({
+				url: "/pages/login/login"
+			})
+			return
+		}
 		uni.navigateTo({
 			url: data.url
 		})
@@ -233,6 +245,12 @@
 	const onSwiperChange = (event) => {
 		this.current = event.detail.current; // 更新当前项
 	}
+	const onSwiper = (swiper) => {
+		console.log(swiper);
+	};
+	const onSlideChange = () => {
+		console.log('slide change');
+	}
 	onReady(() => {
 		uni.getSystemInfo({
 			success(e) {
@@ -304,6 +322,7 @@
 				right: 0;
 				bottom: 0;
 				font-size: 22rpx;
+
 				.item-button-huiyuan {
 					padding: 15rpx 0 5rpx;
 					text-align: center;
@@ -313,6 +332,7 @@
 					background-repeat: no-repeat;
 					// background-position: center;
 				}
+
 				.item-button-goumai {
 					padding: 5rpx 0;
 					text-align: center;
@@ -321,6 +341,7 @@
 					border-radius: 30rpx;
 					color: #fff;
 				}
+
 				.item-button-yigoumai {
 					text-align: center;
 					width: 150rpx;
@@ -380,4 +401,25 @@
 		/* 禁止换行 */
 		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); /* 示例背景 */
+	}
 </style>

pages/login/login.vue

@@ -179,13 +179,17 @@
 				// 1.登录 发送请求
 				// 2.保存 token
 				// 3.获取个人信息，保存个人新
-				this.useAuthStore.setAuthToken("test")
-				uni.setStorageSync("userinfo", {
-					userId: "2121"
-				})
-				uni.switchTab({
-					url: "/pages/index/index"
-				})
+				msg("登录成功");
+				setTimeout(() => {
+					this.useAuthStore.setAuthToken("test")
+					uni.setStorageSync("userinfo", {
+						userId: "2121"
+					})
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				}, 1000)
+
 			},
 			// 账号登录
 			async usenameLoginHandle() {
@@ -207,14 +211,17 @@
 				// 1.登录 发送请求
 				// 2.保存 token
 				// 3.获取个人信息，保存个人新
-				this.useAuthStore.setAuthToken("test")
-				uni.setStorageSync("userinfo", {
-					userId: "2121",
-					isMember: true
-				})
-				uni.switchTab({
-					url: "/pages/index/index"
-				})
+				msg("登录成功");
+				setTimeout(() => {
+					this.useAuthStore.setAuthToken("test")
+					uni.setStorageSync("userinfo", {
+						userId: "2121",
+						isMember: true
+					})
+					uni.switchTab({
+						url: "/pages/index/index"
+					})
+				}, 1000)
 			},
 			toPage(url) {
 				uni.navigateTo({