flavorOfTimeSz/subPackages/pointsMall/index.vue

<template>
	<view class="bg">
		<view class="top-box">
			<view>积分余额</view>
			<view class="points-num" style="margin: 24rpx 0 30rpx;">
				<text style="padding-right: 6rpx;">300</text>
				<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
			</view>
			<view>
				<view>已连签0天</view>
				<view class="sub-text">注：连续签到可获得更多积分，断签后重新累积</view>
			</view>
			
			<view class="day-sign-box">
				<view class="day-sign-item" v-for="(item,i) in daySign" :key="i">
					<view class="day-sign-points">+{{item.num}}</view>
					<view :class="['line','line'+i,i==lastSign?'last-line':'',i<lastSign?'active':'']">
						<view class="dot"></view>
						<view class="last-sign" v-if="i==lastSign"></view>
					</view>
				</view>
			</view>
			
			<view class="rule-area">
				<view class="rule-btn">积分规则</view>
				<view class="rule-btn" style="margin-top: 26rpx;">积分明细</view>
			</view>
			
			<view class="sign-btn" v-if="isSign">已签到</view>
			<view class="sign-btn active" v-else @click="signUp()">点击签到</view>
		
		</view>
		
		<view class="product-box">
			<view class="flex-between">
				<view style="font-weight: bold;font-size: 35rpx;color: #000000;">每日精选</view>
				<view style="font-weight: 500;font-size: 27rpx;color: #999999;">1300人已兑换</view>
			</view>
			
			<view class="jx-box no-scrollbar">
				<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 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 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" @click="$refs.signPop.close()">
				<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>

<script>
	export default {
		data() {
			return {
				isSign: false,
				// 7日连续签到日期 0-6
				lastSign: 3,
				daySign: [
					{num:1, active:true},
					{num:2, active:true},
					{num:3, active:true}, 
					{num:4, active:false},
					{num:5, active:false},
					{num:6, active:false},
					{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 () {
			this.getJXList()
		},
		methods: {
			// 签到
			signUp () {
				this.Post({method:"POST"},"/api/user_sign/sign").then(res => {
					this.$refs.signPop.open()
				})
			},
			
			
			getJXList(){
				this.Post({
					tag_id: 95,
					offset: 0,
				    limit: 999,
				},'/api/product/get_product_by_tag_subject').then(res => {
					if (res.data.length < this.viewNum) {
						this.viewNum = 999
					}
					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;
		background: #FFFFFF;
	}
	.point-image{
		width: 26rpx;
		height: 26rpx;
	}
	.top-box{
		width: 100%;
		height: 600rpx;
		padding: 26rpx;
		background: linear-gradient(-26deg, #FCE2C1, #F0BD90);
		font-weight: 500;
		font-size: 27rpx;
		color: #6E3D1D;
		position: relative;
		.points-num{
			font-weight: 500;
			font-size: 53rpx;
			color: #000000;
			display: flex;
			align-items: center;
		}
		
		.sub-text{
			font-weight: 500;
			font-size: 24rpx;
			color: rgba(110, 61, 29, 0.8);
		}
	
		.day-sign-box{
			width: 100%;
			margin: 21rpx 0 42rpx;
			display: flex;
			
			.day-sign-item{
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				.line{
					width: 100%;
					height: 8rpx;
					background: #FFF0B3;
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: visible;
					position: relative;
					.dot{
						width: 20rpx;
						height: 20rpx;
						background: #FFF0B3;
						border-radius: 50%;
					}
					&.line0{
						width: 55%;
						margin-left: auto;
						justify-content: flex-start;
					}
					&.line6{
						width: 55%;
						margin-right: auto;
						justify-content: flex-end;
					}
					&.active{
						background: #FB2A54;
						.dot{
							background: #FB2A54;
						}
					}
					&.last-line{
						.dot{
							background: #FB2A54;
						}
						.last-sign{
							width: 100%;
							background: #FB2A54;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							height: 100%;
							border-radius: 0 10rpx 10rpx 0;
							
						}
					}
				}
			}
			
			.day-sign-points{
				width: 93.33rpx;
				height: 113.33rpx;
				background-image: url("https://static.ticket.sz-trip.com/uploads/20250917/7f2c2ab38a4a6e97e876bc370786f6b7.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-weight: bold;
				font-size: 24rpx;
				color: #FB2A54;
				text-align: center;
				padding-top: 54rpx;
				position: relative;
			}
			
		}
	
		.rule-area{
			position: absolute;
			width: 134rpx;
			top: 26rpx;
			right: 0;
			.rule-btn{
				width: 134rpx;
				height: 40rpx;
				background: #F0BD90;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}
		
		.sign-btn{
			width: 100%;
			height: 67rpx;
			background: #FFFFFF;
			border-radius: 33rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #FB2A54;
			text-align: center;
			line-height: 67rpx;
			&.active{
				color: #FFFFFF;
				background: linear-gradient(-90deg, #FB2A54, #FF773D);
			}
		}
	}

	.product-box{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 32rpx 26rpx 100rpx;
		margin-top: -20rpx;
		position: relative;
	}
	.jx-box{
		padding: 22rpx 0 80rpx;
		display: flex;
		flex-wrap: nowrap;
		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: 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;
			flex-shrink: 0;
			height: 46rpx;
			&.active{
				font-weight: bold;
				font-size: 35rpx;
				color: #6E3D1D;
			}
			&.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{
		box-sizing: border-box;
		width: 750rpx;
		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;
			padding: 160rpx 0 0 230rpx;
		}
		.close-pop{
			width: 34rpx;
			height: 34rpx;
			top: 0;
			right: 38rpx;
			position: absolute;
		}
	}
</style>