179crm_user_app/pages_user/user/pointsMall.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<!-- <image class="bg" src="../../static/images/user/jifen_bg.png" mode=""></image> -->
			<view class="top-inner" style="background-image: url('https://user.test.ylrztop.com/images/jifen_bg.png')">			
				<!-- 这里是状态栏 -->
				<view class="fixed-top-box" :style="{ background: bg }">
					<view class="status_bar" :style="{height: statusBarHeight}"></view>
					<view class="back-box" @click="back">
						<image src="../../static/images/back.png" mode=""></image>
						<text class="title">积分商城</text>
						<text></text>
					</view>
				</view>
				<!-- 顶部固定后站位元素 -->
				<view style="padding-bottom: 88upx;">
					<view :style="{height: statusBarHeight}"></view>
				</view>
				<!-- 可用积分 -->
				<!-- <view class="available-points">
					<text class="label">可用积分</text>
					<text class="num">{{integral}}</text>
				</view> -->
				<!-- 签到 -->
				<view class="singn-content">
					<view class="sign-in-box">
						<view class="inner">
							<view class="top-box">
								<view class="left">
									<view class="align-center">
										<image class="w32 h32" src="../../static/images/user/jifen_icon.png" mode=""></image>
										<text>我的积分</text>
									</view>
									<view class="num">{{integral}}</view>
								</view>
								<view class="guize">积分规则</view>
							</view>
				            <view class="bottom-box">
								<view class="ttbg"></view>
								<view class="align-center justify-between h100">
									<view class="t-left">
										<image  src="../../static/images/user/points_details_icon.png" mode=""></image>
										<view>积分明细</view>
									</view>
									<view class="t-right">
										<image  src="../../static/images/user/exchange_records_icon16.png" mode=""></image>
										<view>兑换记录</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 积分列表 -->
					<view class="points-cont">
						<!-- tab切换 -->
						<view class="pub-tab-box">
							<view class="tab-inner">
								<view 
									v-for="(item,index) in tags" 
									:key="index"
									:class="tabIndex == item.value?'item active':'item'"
									@click="tabChange(item)"
								>
									{{ item.lable }}
								</view>
							</view>
						</view>
						<!-- 列表 -->
						<view class="point-list">
							<view class="item" v-for="(item,index) in list" :key="index" >
								<view class="img-box">
									<image src="https://zkzh-2025.oss-cn-beijing.aliyuncs.com/fs/20250724/09f377c4b9c34d60bbc7fd55fe3c0b65.png" mode=""></image>
								</view>
								<view class="info-box">
									<view class="title ellipsis2">{{ item.title }}</view>
									<view class="old">¥{{item.price.toFixed(2)}}</view>
									<view class="price-box">
										<view class="now">
											<view class="num">{{item.number}}</view>
											<text>积分</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<Loading :loaded="loaded" :loading="loading"></Loading>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getUserSign,getIntegral,doSign} from '@/api/userSign'
	import Loading from "@/components/Loading";
	export default {
		components: {
		  Loading,
		},
		data() {
			return {
				isDaySign:false,
				top:0,
				signNum:0,
				integral:0,
				sign:[],
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// tab切换
				tags: [{lable:'全部',value:-1},{lable:'生活用品',value:1},{lable:'养生保健',value:0}],
				// 选中的tab
				tabIndex: -1,
	
				current: 0,
				page: {
				  billType:-1,
				  page: 1,
				  pageSize: 10
				},
				list: [
					{title:'电子血压计',number:5990,price:23.23},
					{title:'一次性无菌采血针',number:6990,price:23.23},
					{title:'电子血压计',number:4990,price:23.23},
				],
				loaded: false,
				loading: false
			};
		},
		onLoad(option) {
			// this.getUserSign()
			// this.getIntegral()
		},
		onReachBottom() {
		  !this.loading && this.getIntegral();
		},
		onPageScroll(e) {
			if(e.scrollTop > 30) {
				this.topFixed = true
			} else {
				this.topFixed = false
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			bg: function() {
				return 'rgba(245, 221, 193, ' + this.top / 30 + ')';
			},
		},
		methods: {
			doSign(){
				var data={};
				uni.showLoading({
					title:"正在加载中..."
				})
				doSign(data).then(
					res => {
						uni.hideLoading()
						if(res.code==200){
							uni.showToast({
								icon:'success',
								title: res.msg,
							});
							this.list=[];
							this.page.page=1;
							this.list=[];
							this.loaded=false;
							this.loading=false;
							this.getIntegral();
							this.getUserSign();
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getUserSign(){
				getUserSign().then(
					res => {
						if(res.code==200){
							this.data=res.member;
							this.signNum=res.signNum;
							this.isDaySign=res.isDaySign;
							this.integral=res.integral;
							this.sign=JSON.parse(res.sign);
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getIntegral() {
			  let that = this;
			  if (that.loaded == true || that.loading == true) return;
			  that.loading = true;
			  uni.showLoading({
			  	title:"加载中..."
			  })
			  getIntegral(that.page).then(
			    res => {
			      that.loading = false;
			      that.loaded = res.data.list.length < that.page.pageSize;
			      that.page.page = that.page.page + 1;
			      that.list.push.apply(that.list, res.data.list);
				  uni.hideLoading()
			    },
			    err => {
					uni.hideLoading()
					uni.showToast({
							title: err.msg ,
							icon: 'none',
							duration: 2000
						});
			    }
			  );
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// tab选择
			tabChange(item) {
				console.log(item)
				this.tabIndex = item.value
				this.page.billType=this.tabIndex;
				this.page.page=1;
				this.list=[];
				this.loaded=false;
				this.loading=false;
				this.getIntegral();
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #EFF3F7 ;
	}
	.fixed-top-box{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: all 0.5s;
		 
	}
	.top-cont{
		width: 100%;
		height: 654upx;
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			background-repeat: no-repeat;
			    background-size: cover;
			// background: linear-gradient(  rgba(238,209,179,0.5) 0%, #F5DDC1 49%, #EFF3F7 100%);
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					// color: #FFFFFF;
				}
			}
			.available-points{
				margin-top: 40upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.label{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 1;
				}
				.num{
					font-size: 80upx;
					font-family: Gilroy;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 1;
					margin-top: 28upx;
				}
			}
			.singn-content{
				padding: 0 20upx;
				margin-top: 50upx;
			}
			.sign-in-box{
				margin-bottom: 40rpx;
				.inner{
					// padding: 40upx 30upx;
					.top-box{
						padding: 30rpx;
						margin: 0 30rpx;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						background: #FFFFFF;
						border-radius: 24rpx 24rpx 0rpx 0rpx;
						.left{
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							text{
								margin-left: 12rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #626468;
								text-align: left;
							}
							.num{
								font-family: Roboto, Roboto;
								font-weight: 500;
								font-size: 64rpx;
								color: #222426;
								text-align: left;
							}
						}
						.guize{
							position: absolute;
							right: 50rpx;
							width: 148rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #222426;
							background: #F9E6C5;
							border-radius: 28rpx 0rpx 0rpx 28rpx;
						}
					}
					.bottom-box{
						background: #FCF8F5;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						height: 150rpx;
						    z-index: -1;
						    position: relative;
						    margin-top: -50rpx;
							.ttbg{
								width: 100%;
								height: 50rpx;
								background: #D4A178;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
							}
						.t-left{
							flex:1;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #AF6020;
							border-right: 2rpx solid rgba(175,96,32,0.4);
							image{
								width: 40rpx;
								height: 40rpx;
								margin-right: 12rpx;
							}
						}
						.t-right{
							flex:1;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #AF6020;
							image{
								width: 32rpx;
								height: 32rpx;
								margin-right: 12rpx;
							}
						}
					}
				
				}
				.sign-btn-box{
					padding: 0 14upx;
					.btn{
						width: 100%;
						height: 120upx;
						background-image: url(../../static/images/org_btn.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						image{
							width: 32upx;
							height: 32upx;
							margin-top: 32upx;
							margin-right: 16upx;
						}
						.text{
							font-size: 30upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 1;
							margin-top: 36upx;
						}
					}
				}
			}
			
		}
	}
	.content{
		margin-top: 20upx;
		padding: 0 20upx 40upx;
		.points-cont{
			
			// background-color: #FFFFFF;
			// border-radius: 16upx;
			.pub-tab-box{
				// padding: 0 80upx;
				.tab-inner{
					height: 72upx;
					line-height: 72upx;
					display: flex;
					align-items: center;
					position: relative;
					// justify-content: space-between;
				}
				.item{
					font-size: 28upx;
					white-space: nowrap;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					margin-right: 48rpx;
					color: #222426;
					display: flex;
					align-items: center;
					justify-content: center;
					&.active{
						font-weight: bold;
						font-size: 36rpx;
						&::after{
							content: "";
							    width: 72rpx;
							    height: 8rpx;
							    background: #C19760;
							    position: absolute;
							    bottom: 0;
							    border-radius: 4rpx;
						}
					}
					.text{
						position: relative;
						z-index: 1;
					}
					.tab-bg{
						width: 72upx;
						height: 28upx;
						position: absolute;
						top: 17upx;
						left: 50%;
						transform: translateX(-36upx);
						z-index: -1;
					}
				}
			}
			.point-list{
			display: flex;
			flex-wrap: wrap;
			margin-top: 40rpx;
			.item{
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				width: 345rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
				border-radius: 20rpx;
				overflow: hidden;
				&:nth-child(2n) {
					margin-right: 0;
				}
				.img-box{
					width: 100%;
					height: 334upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.info-box{
					box-sizing: border-box;
					height: 182upx;
					padding: 20upx 20upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 40upx;
					}
					.old{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 400;
						text-decoration: line-through;
						color: #898E91;
						// line-height: 1.1;
					}
					.price-box{
						display: flex;
						align-items: flex-end;
						.now{
							display: flex;
							align-items: flex-end;
							margin-right: 20upx;
							.num{
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 32rpx;
								color: #AF6020;
								text-align: left;
							}
							text{
								margin-left: 6rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #AF6020;
								text-align: left;
							}
						}
						
					}
				}
			}
			}
		}
	}
	
</style>