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 style="width: 20rpx;"></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 class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
				<view class="authorizCont" @click.stop="">
					<view class="authorizName">{{wxOpenData.miniAppName}}</view>
					<view class="authorizMs">未注册的手机号登录后将自动创建会员账号，如果您不同意授权获取手机号，会影响您使用我们的产品和服务。</view>
					<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
				</view>
				<view style="text-align: center;padding-top: 56rpx;">
					<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
				</view>
			</view>
	</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:'',
				authorizShow:false,
				userInfo:'',
				ext:'',
				wxOpenData:'',
			}
		},
		onLoad(opt) {
			
			this.totalIntegral=opt.totalIntegral;
			this.userInfo=this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			if(this.userInfo){
				this.getintegralInfo()
				this.gethotExchange();
				this.getcategoryList();
				this.getintegralGoodsPage();
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					
					if(!this.userInfo){
						this.authorizShow=true
					}
					this.getintegralInfo()
					this.gethotExchange();
					this.getcategoryList();
					this.getintegralGoodsPage();
				})
			}
			
		},
		methods: {
			authorizShowno(){
				this.authorizShow=false
			},
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.myOrderCoupon()
						}	
					  })
			},
			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){
				this.$store.commit('mutationsckshopInfo', '')
				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: #EC0F0A ;
}
.classificationHx{
	width: 40rpx;
	height: 4rpx;
	background: #EC0F0A;
	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: #EC0F0A;
	font-size:32rpx;
	line-height: 45rpx;
	padding-left: 20rpx;
}
.jfspan2{
	font-weight: 400;
	color: #EC0F0A;
	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: 270rpx;
	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;
}
.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
		}
		.authorizCont{
			margin-top: 30vh;
			width: 564rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-left: 93rpx;
			position: relative;
		}
		.authorizCloseImg{
			width: 62rpx;
			height: 62rpx;
		}
		.sqLogoBox{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			text-align: center;
			position: absolute;
			top: -50rpx;
			left: 192rpx;
		}
		.authorizName{
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 58rpx;
		}
		.authorizMs{
			color: #999999;
			line-height: 36rpx;
			font-size: 26rpx;
			width: 452rpx;
			padding-top: 24rpx;
			text-align: center;
			margin-left: 56rpx;
		}
		.authorizContbutton{
			width: 422rpx;
			height: 88rpx;
			background: #EC0F0A;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size:30rpx;
			color: #FFFFFF;
			margin-top: 62rpx;
			margin-left:71rpx;
		}
</style>