From 3298713b8e16bd14c9bdc2d46844c96a65d3d224 Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Thu, 18 Sep 2025 10:51:51 +0800
Subject: [PATCH] 1

---
 subPackages/pointsMall/index.vue | 241 ++++++++++++++++++++++++++-----
 1 file changed, 207 insertions(+), 34 deletions(-)

diff --git a/subPackages/pointsMall/index.vue b/subPackages/pointsMall/index.vue
index 23891fe..05d1726 100644
--- a/subPackages/pointsMall/index.vue
+++ b/subPackages/pointsMall/index.vue
@@ -29,10 +29,7 @@
 			<view :class="['sign-btn', !isSign?'active':'']">
 				点击签到
 			</view>
-			
-			<view>
-			<image src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
-			</view>
+		
 		</view>
 		
 		<view class="product-box">
@@ -56,7 +53,46 @@
 					</view>
 				</view>
 			</view>
+		
+			<view class="flex">
+				<scroll-view class="type-box no-scrollbar" :scroll-into-view="scrollView"
+				enable-flex scroll-x scroll-with-animation :show-scrollbar="false">
+					<view :id="`scroll${i}`" :class="['type-item',typeIndex==i?'active':'']" v-for="(type,i) in typeList" 
+					:key="i" @click="changeType(item,i)">
+						{{type.title}}
+					</view>
+				</scroll-view>
+				
+				<view class="search-box flex-between">
+					<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
+					<text style="height: 100%;">搜索</text>
+				</view>
+			</view>
+
+			<view class="prod-box2">
+				<view class="jx-item" v-for="(item,i) in JXList" :key="i">
+					<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image>
+					<view class="jx-content" >
+						<view class="title text-overflowRows">{{item.title}}</view>
+						<view style="font-weight: 500;font-size: 24rpx;color: #999999;">已兑14100件</view>
+						<view class="flex-between">
+							<view class="flex-between">
+								<text class="price" style="padding-right: 6rpx;">{{item.price}}</text>
+								<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
+							</view>
+							<view class="btn">兑换</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
+		
+		<uni-popup ref="signPop" type="center">
+			<view class="signPop">
+				<image class="close-pop" src="https://static.ticket.sz-trip.com/uploads/20250918/730cffbd6032bad9e6f87d4a5f20724b.png"></image>
+				<view class="sign-content">+5</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -77,6 +113,19 @@
 					{num:7, active:false},
 				],
 				JXList: [],
+				
+				typeIndex:0,
+				scrollView: "scroll0",
+				typeList: [
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+					{title:"分类",value:"",},
+				],
 			}
 		},
 		onReady () {
@@ -95,11 +144,25 @@
 					this.JXList = res.data.list
 				})
 			},
+			changeType (item,index) {
+				if (index == this.typeIndex) {
+					return
+				}
+				this.typeIndex = index;
+				let i = (index-1)>0?(index-1):0;
+				this.scrollView = "scroll"+i;
+				
+			},
 		},
 	}
 </script>
 
 <style lang="scss" scoped>
+	::-webkit-scrollbar {
+	  display: none;
+	  width: 0;
+	  height: 0;
+	}
 	.bg{
 		width: 750rpx;
 		min-height: 100vh;
@@ -253,43 +316,153 @@
 		padding: 22rpx 0 80rpx;
 		display: flex;
 		flex-wrap: nowrap;
-		overflow-y: auto;
-		
-		.jx-item{
+		overflow-x: auto;
+	}
+	.jx-item{
+		width: 253rpx;
+		font-weight: bold;
+		font-size: 31rpx;
+		color: #000000;
+		margin-right: 25rpx;
+		flex-shrink: 0;
+		.jx-content{
+			width: 100%;
+			height: 150rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+		.jx-head-image{
 			width: 253rpx;
+			height: 253rpx;
+			border-radius: 13rpx;
+		}
+		.price{
 			font-weight: bold;
-			font-size: 31rpx;
+			font-size: 32rpx;
+			color: #FB2A54;
+		}
+		.btn{
+			width: 93rpx;
+			height: 47rpx;
+			background: #FB2A54;
+			border-radius: 23rpx;
+			font-weight: bold;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			text-align: center;
+			line-height: 47rpx;
+		}
+	}
+
+	.type-box{
+		display: flex;
+		flex-wrap: nowrap;
+		width: 1px;
+		flex: 1;
+		padding-right: 43rpx;
+		
+		.type-item{
+			margin: 0 26rpx;
+			position: relative;
+			font-weight: 500;
+			font-size: 35rpx;
 			color: #000000;
-			margin-right: 25rpx;
 			flex-shrink: 0;
-			.jx-content{
-				width: 100%;
-				height: 150rpx;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-			}
-			.jx-head-image{
-				width: 253rpx;
-				height: 253rpx;
-				border-radius: 13rpx;
-			}
-			.price{
+			height: 46rpx;
+			&.active{
 				font-weight: bold;
-				font-size: 32rpx;
-				color: #FB2A54;
+				font-size: 35rpx;
+				color: #6E3D1D;
 			}
-			.btn{
-				width: 93rpx;
-				height: 47rpx;
-				background: #FB2A54;
-				border-radius: 23rpx;
-				font-weight: bold;
-				font-size: 28rpx;
-				color: #FFFFFF;
-				text-align: center;
-				line-height: 47rpx;
+			&.active:after {
+			    display: block;
+			    width: 60%;
+			    font-size: 0;
+			    content: '1';
+			    margin: auto;
+			    position: absolute;
+			    left: 0;
+			    right: 0;
+			    bottom: -6rpx;
+			    height: 5rpx;
+			    background: #6E3D1D;
 			}
 		}
+		.type-item:first-of-type{
+			margin-left: 0;
+		}
+	}
+
+	.search-box{
+		width: 110rpx;
+		flex-shrink: 0;
+		font-weight: 500;
+		font-size: 32rpx;
+		color: #6E3D1D;
+		height: 46rpx;
+	}
+
+	.prod-box2{
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		.jx-item{
+			width: 333rpx;
+			margin-right: 0;
+			margin-bottom: 40rpx;
+		}
+		.jx-content{
+			width: 100%;
+			height: 180rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+		}
+		.jx-head-image{
+			width: 100%;
+			height: 333.33rpx;
+			border-radius: 13rpx;
+		}
+		.price{
+			font-weight: bold;
+			font-size: 32rpx;
+			color: #FB2A54;
+		}
+		.btn{
+			width: 93rpx;
+			height: 47rpx;
+			background: #FB2A54;
+			border-radius: 23rpx;
+			font-weight: bold;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			text-align: center;
+			line-height: 47rpx;
+		}
+	}
+
+	.signPop{
+		width: 100%;
+		height: 809.33rpx;
+		background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/07ba19980d9fe9b934097ce01a14a085.png");
+		background-size: 100% 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		.sign-content{
+			width: 400.67rpx;
+			height: 400.67rpx;
+			background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/6832749da7b1aa0795f8389539ed7ecd.png");
+			background-size: 100% 100%;
+			font-weight: bold;
+			font-size: 64rpx;
+			color: #FB2A54;
+		}
+		.close-pop{
+			width: 34rpx;
+			height: 34rpx;
+		}
 	}
 </style>
\ No newline at end of file