完善首页-研究报告部分

pages/index/index.vue

@@ -26,31 +26,52 @@
 			</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>
+					<u-section title="课程预告" sub-title="查看更多" sub-color="#000000"></u-section>
 				</template>
 				<template v-slot:body>
 					<view>
-						123456
+						<!-- <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>
 				</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>
+					<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 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">
+										会员免费
+										<!-- <image class="item-button-huiyuan-bg" src="/static/images/bg-label.png" mode="aspectFit"></image> -->
+									</view>
+								</view>
+							</view>
 						</view>
 					</view>
 				</template>
@@ -90,8 +111,13 @@
 		{
 			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 current = ref(0)
 	// 首页-导航栏
 	const navList = ref([{
 			id: 'notice',
@@ -159,8 +185,35 @@
 		}
 	])
 
+	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){
+		if (data.toOtherApp) {
 			// 跳转其他小程序
 			console.log("跳转至其他小程序", data.otherAppId)
 			return
@@ -177,6 +230,9 @@
 			return
 		}
 	}
+	const onSwiperChange = (event) => {
+		this.current = event.detail.current; // 更新当前项
+	}
 	onReady(() => {
 		uni.getSystemInfo({
 			success(e) {
@@ -196,7 +252,6 @@
 
 <style lang="scss" scoped>
 	.container {
-		// height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
 		padding: 0 20rpx;
@@ -220,14 +275,109 @@
 	.u-body-item {
 		font-size: 32rpx;
 		color: #333;
-		// padding: 20rpx 10rpx;
+		margin: 30rpx 0;
+		height: 140rpx;
+
+		.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-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('~@/static/images/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(1.1);
+			/* 主项放大 */
+		}
+
+		image {
+			width: 80%;
+			/* 图片宽度 */
+			height: auto;
+		}
+
+		text {
+			margin-top: 10px;
+		}
 	}
 
-	.u-body-item image {
-		width: 120rpx;
-		flex: 0 0 120rpx;
-		height: 120rpx;
-		border-radius: 8rpx;
-		margin-left: 12rpx;
+	.text-ellipsis {
+		overflow: hidden;
+		/* 隐藏超出内容 */
+		white-space: nowrap;
+		/* 禁止换行 */
+		text-overflow: ellipsis;
 	}
 </style>

pages/login/login.vue

@@ -66,7 +66,7 @@
 					style="width: 40px;" plain :hair-line="false">
 					<image src="/static/images/weixin.png" mode="aspectFit" style="width: 40px;height: 40px;" />
 				</u-button>
-
+				<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
 				<!-- <image src="/static/images/weixin.png" mode="aspectFit" style="height: 40px;"></image> -->
 			</view>
 		</view>
@@ -181,7 +181,7 @@
 				// 3.获取个人信息，保存个人新
 				this.useAuthStore.setAuthToken("test")
 				uni.setStorageSync("userinfo", {
-					userId:"2121"
+					userId: "2121"
 				})
 				uni.switchTab({
 					url: "/pages/index/index"
@@ -209,7 +209,7 @@
 				// 3.获取个人信息，保存个人新
 				this.useAuthStore.setAuthToken("test")
 				uni.setStorageSync("userinfo", {
-					userId:"2121",
+					userId: "2121",
 					isMember: true
 				})
 				uni.switchTab({
@@ -314,7 +314,15 @@
 				console.log("weixindenglu")
 			},
 			decryptPhoneNumber(e) {
-				console.log(e, 123456)
+				if (e.detail.encryptedData) {
+					const {
+						encryptedData,
+						iv
+					} = e.detail;
+					// 将 encryptedData 和 iv 发送到后端进行解密
+				} else {
+					msg('取消授权手机号');
+				}
 			},
 			getUserProfile() {
 				this.toPage("/pages/wxLogin/wxLogin")
@@ -360,7 +368,6 @@
 			if (uni.getUserProfile) {
 				that.canIUseGetUserProfile = true
 			}
-			console.log(that.canIUseGetUserProfile, 456)
 		}
 	}
 </script>