wxThird/pages/integral/integral.vue

<template>
	<view class="box">
		<view class="topBox">
			<view class="topCont">
				<view class="jfgz" @click="gorule">
					<view class="jfgzTxt">积分规则</view>
					<img src="../../static/timg/jthei.png" alt="" class="jfjt">
				</view>
				<view class="kyjf">
					<view class="kyjfTitle">可用积分</view>
					<view class="kyjfCont">
						<view class="kyjfNum">{{avaIntegral?avaIntegral:0}}</view>
						<!-- <view class="kyjfDq">333积分即将过期</view> -->
					</view>
				</view>
				
			</view>
			<view class="topBottom">
				<view class="topBottomLine" @click="goscoreRecord">
					<view><img src="../../static/timg/jfjl.png" alt="" class="topBottomLineImg"></view>
					<view class="topBottomLineTxt">积分记录</view>
				</view>
				<view class="topBottomSx"></view>
				<view class="topBottomLine" @click="goexchangeRecord">
					<view><img src="../../static/timg/dhjl.png" alt="" class="topBottomLineImg"></view>
					<view class="topBottomLineTxt">兑换记录</view>
				</view>
			</view>
		</view>
		<!-- 热门兑换 -->
		<view class="exchangeBox" v-if="hotlist.length>0">
			<view class="exchangeTitleBox">
				<view class="exchangeTitle">热门兑换</view>
				<img src="../../static/timg/renhuo.png" alt="" class="rehuoimg">
			</view>
			<view class="exchangeCont">
				<scroll-view scroll-x="true" class="scroll-viewX">
					<!-- <view class="exchange"> -->
						<view class="exchangeLine" v-for="(item,index) in hotlist" @click="goDetail(item.id)">
							<img class="exchangeLineImg" v-if="item.img" :src="item.img" alt="">
						    <image v-else src="../../static/timg/noimg.png" mode="" class="exchangeLineImg"></image>
							<view class="exchangeName">{{item.name}}</view>
							<view> <span class="jfspan1">{{item.integral}}</span> <span class="jfspan2">积分</span></view>
						</view>
					<!-- </view> -->
					
				</scroll-view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goodsBox">
			<scroll-view scroll-x="true" class="scroll-X" >
				<view class="classificationBox">
					<view  class="classification" v-for="(item,index) in categoryList" @click="topClick(index,item)">
						<view class="classificationName" :class="{classificationNameActive:topIndex==index}">{{item.Name}}</view>
						<view class="classificationHx" v-if="topIndex==index"></view>
					</view>
				</view>
			</scroll-view>
			<view class="goodsLineBOx">
				<view class="exchangeLine2" v-for="(item,index) in list" @click="goDetail(item.ID)">
					<img class="exchangeLineImg2" :src="item.url" alt="" v-if="item.url">
					<image v-else src="../../static/timg/noimg.png" mode="" class="exchangeLineImg2"></image>
				    <view class="exchangeName2">{{item.Name}}</view>
					<view> <span class="jfspan1">{{item.Integral}}</span> <span class="jfspan2">积分</span></view>
				</view>
			</view>
			
			<nodata v-if="list.length==0"></nodata>
			
		</view>
		<img src="../../static/timg/btn_top@2x.png" alt="" class="btn_top" @click="btnTop">
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		data() {
			return {
				page:1,
				topIndex:0,
				totalIntegral:'',
				hotlist:'',
				categoryList:'',
				list:[],
				categoryID:'',
				avaIntegral:'',
			}
		},
		onLoad(opt) {
			this.totalIntegral=opt.totalIntegral;
			this.getintegralInfo()
			this.gethotExchange();
			this.getcategoryList();
			this.getintegralGoodsPage();
		},
		methods: {
			btnTop(){
			//滚动回到顶部
			uni.pageScrollTo({
			    scrollTop: 0, 
			}); 
			},
			gorule(){
				uni.navigateTo({
					url:'rule'
				})
			},
			getintegralInfo(){
				
				this.$http('openIntegralMall/integralInfo', {
				}, 'GET').then(res => {
					this.avaIntegral=res.data.avaIntegral
					
				})
			},
			gethotExchange(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openIntegralMall/hotExchange', {
				}, 'GET').then(res => {
					uni.hideLoading();
					this.hotlist=res.data;
				})
			},
			getcategoryList(){
				
				this.$http('openIntegralMall/categoryList', {
				}, 'GET').then(res => {
					this.categoryList=res.data;
					var obj={
						Id:'',
						Name:'全部'
					}
					this.categoryList.unshift(obj);
					
				})
			},
			getintegralGoodsPage(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openIntegralMall/integralGoodsPage', {
					categoryID:this.categoryID,
					page:this.page,
					limit:10
				}, 'GET').then(res => {
					uni.hideLoading();
					var list=res.data.Items;
					this.list=this.list.concat(list)
				})
			},
			topClick(index,item){
				this.topIndex=index;
				this.categoryID=item.ID;
				if(item.ID==undefined){
					this.categoryID=''
				}
				this.list=[];
				this.page=1;
				this.getintegralGoodsPage();
			},
			goDetail(id){
				uni.navigateTo({
					url:'integralgoodsDetail?id='+id+'&avaIntegral='+this.avaIntegral
				})
			},
			goscoreRecord(){
				uni.navigateTo({
					url:'scoreRecord?avaIntegral='+this.avaIntegral
				})
			},
			goexchangeRecord(){
				uni.navigateTo({
					url:'exchangeRecord'
				})
			}
		},
		onReachBottom(){
			this.page++;
			this.getintegralGoodsPage();
		},
		onPullDownRefresh(){
			this.list=[];
			this.page=1;
			this.getintegralInfo();
			this.gethotExchange();
			this.getcategoryList();
			this.getintegralGoodsPage();
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 2000);
		}
	}
</script>

<style scoped>
	.btn_top{
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		right: 24rpx;
		bottom: 60rpx;
	}
.scroll-X{
	width: 750rpx;
}
.goodsLineBOx{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 24rpx;
	padding-bottom: env(safe-area-inset-bottom);
}
.exchangeLineImg2{
	width: 341rpx;
	height: 318rpx;
	border-bottom: 1px solid #eee;
	display: block;
}
.exchangeName2{
	font-weight: 400;
	color: #333333;
	font-size: 28rpx;
	padding-top: 16rpx;
	padding-left: 20rpx;
	width: 300rpx;
	  overflow: hidden; /*超出隐藏*/
	  text-overflow: ellipsis;/*隐藏后添加省略号*/
	  white-space: nowrap;/*强制不换行*/
	  padding-bottom:6rpx;
}
.exchangeLine2{
	/* margin-left: 24rpx; */
	margin-top: 30rpx;
	height: 439rpx;
	border-radius: 16rpx;
	border: 1px solid #EEEEEE;
	overflow: hidden;
	
}
.classificationBox{
	display: flex;
	padding-bottom: 12rpx;
	border-bottom: 1px solid #EEEEEE;
}
.classificationName{
	white-space: nowrap;
	font-size: 28rpx;
	color: #3C3C3C;
	line-height: 40rpx;
	padding:24rpx 24rpx 8rpx 24rpx;
	font-weight: 400;
	max-width:170rpx;
	overflow: hidden; /*超出隐藏*/
	text-overflow: ellipsis;/*隐藏后添加省略号*/
	white-space: nowrap;/*强制不换行*/
}
.classificationNameActive{
	font-weight: 500 !important;
	color: #FF0000 ;
}
.classificationHx{
	width: 40rpx;
	height: 4rpx;
	background: #FF0000;
	margin: 0 auto;
}
.exchangeBox{
	background: #FFFFFF;margin-top: 20rpx;
}
.goodsBox{
	background: #FFFFFF;margin-top: 20rpx;
}
.exchangeName{
	font-weight: 400;
	color: #333333;
	font-size: 28rpx;
	padding-top: 16rpx;
	padding-left: 20rpx;
	width: 240rpx;
	word-wrap: break-word; /*强制换行*/
	  overflow: hidden; /*超出隐藏*/
	  text-overflow: ellipsis;/*隐藏后添加省略号*/
	  white-space: nowrap;/*强制不换行*/
	  padding-bottom:6rpx;
}
.jfspan1{
	font-weight: 500;
	color: #FF0000;
	font-size:32rpx;
	line-height: 45rpx;
	padding-left: 20rpx;
}
.jfspan2{
	font-weight: 400;
	color: #FF0000;
	font-size:24rpx;
	line-height: 45rpx;
	padding-left: 10rpx;
}
.exchange{
	display: flex;
	flex-wrap: nowrap;
	background: #FFFFFF;
	padding-bottom: 30rpx;
	
}
.exchangeLine{
	margin-left: 24rpx;
	margin-top: 10rpx;
	height: 375rpx;
	border-radius: 16rpx;
	border: 1px solid #EEEEEE;
	overflow: hidden;
	width: 272rpx;
	display: inline-block;
}
.exchangeLineImg{
	width: 270rpx;
	height: 252rpx;
	border-bottom: 1px solid #eee;
	display: block;
}
.rehuoimg{
	width: 26rpx;
	height: 34rpx;
}
.exchangeTitle{
	font-weight: 500;
	color: #333333;
	font-size: 30rpx;
	line-height: 34rpx;
	padding-right: 16rpx;
}
.exchangeTitleBox{
	padding: 20rpx 24rpx;display: flex;
}
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.jfjt{
   width: 24rpx;height: 24rpx;margin-top: 12rpx;
}
.jfgz{
	display: flex;
	width: 150rpx;
	height: 48rpx;
	background: rgba(255,229,211,0.3);
	border-radius: 0px 2rpx 0px 26rpx;
	font-size: 24rpx;
	line-height: 48rpx;
	color: #573400;
	position: absolute;
	top: 0;
	right: 0;
}
.jfgzTxt{
	padding-left: 18rpx;
}
.topBox{
	width: 100%;
	height: 410rpx;
	background:#38394E;
	padding-top: 30rpx;
	position: relative;
}
.topCont{
	width: 702rpx;
	height: 200rpx;
	background: url('http://dmsphoto.66km.com.cn/thFiles/DCCDB197-4F64-4711-89C0-E5034B2F1788.png') no-repeat;
	background-size: 100% 100%;
	margin-left: 24rpx;
	position: relative;
	border-radius: 20rpx;
	overflow: hidden;
}
.topBottom{
	width: 750rpx;
	height: 180rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 0px 0px;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	
}
.kyjf{
	padding-top: 46rpx;
	padding-left: 40rpx;
}
.kyjfTitle{
	color: #523509;font-size: 28rpx;
}
.kyjfNum{
	font-size: 60rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #523509;
	line-height: 84rpx;
}
.kyjfDq{
	width: 224rpx;
	height: 44rpx;
	background: linear-gradient(135deg, #FFC81B 0%, #FFA800 100%);
	border-radius: 22rpx 22rpx 22rpx 0px;
	text-align: center;
	color: #573400;
	line-height: 44rpx;
	font-size: 24rpx;
	margin-left:10rpx ;
	margin-top: 22rpx;
}
.kyjfCont{
	display: flex;
}
.topBottomLineImg{
	width: 54rpx;height: 54rpx;
}
.topBottomLineTxt{
	color: #333333;font-size: 24rpx;ppadding-top: 14rpx;
}
.topBottomSx{
	width: 1px;
	height: 94rpx;
	background-color:#EEEEEE;
	margin-top:42rpx;
}
.topBottomLine{
	text-align: center;padding-top: 40rpx;
}
.scroll-viewX{
	    white-space: nowrap;
	    width: 100%;
		padding-bottom: 20rpx;
}
</style>