<template>
	<view class="content">
		<view class="bg"></view>
		<view class="menutop">
			
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
		
		
		<view class="jfsc" v-if="!loading">
			<view class="tops">
				<image  mode="widthFix" src="../../static/jf/pic_title_big@2x.png"></image>
				<image class="money"  mode="widthFix" src="../../static/jf/pic_points_right@2x.png" ></image>
			</view>
			
			<view>
				<view class="kyjf">
					<image class="icon" mode="widthFix" src="../../static/jf/icon_points_small_16@2x.png"></image>
					<text class="title">可用积分</text>
					<image class="icon" mode="widthFix" src="../../static/jf/btn_notice_16@2x.png"></image>
				</view>
				
				<view class="jfmx">
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
							<uni-col :span="14">
								<view class="smtitle">
									<u-count-to :duration="2000" :startVal="0" :endVal="userInfo.detail.jf" separator="," color="#111111"></u-count-to></view>
							</uni-col>
							<uni-col :offset="2" :span="8" style="text-align: right">
								<view @click="$u.func.route('/pages/jfsc/jfmx')" class="mxname">积分明细<image class="icon" mode="widthFix" src="../../static/jf/btn_chevron_right_16@2x.png"></image></view>
							</uni-col>
					</uni-row>
				</view>
			</view>
			
			
			<view class="shopList">
				<view class="bigtitle">
					<text  class="bigtitle">全部商品</text> <text class="smtitle">免费兑好礼</text>
				</view>
				
				
				<view class="lists">
					<view class="items" v-for="item in shopList">
						<view class="pbox">
							<image @click="$u.func.route('/product/product/detail?id='+item.id)" class="spimg" mode="widthFix" :src="getimg(item.spzp)"></image>
							<view class="titlebox">
								<view class="title" @click="$u.func.route('/product/product/detail?id='+item.id)">{{item.spmc}}</view>	
								<uni-row justify="space-between" customStyle="margin-bottom: 10px">
									<uni-col :span="14">
										<image class="icon" mode="widthFix" src="../../static/jf/icon_points_small_16@2x.png"></image>
										<text class="count">{{item.dhsxjf}}</text>
									</uni-col>
									<uni-col :offset="2" :span="8" style="text-align: right">
										<view @click="duihuan(item)" class="mxname">兑换</view>
									</uni-col>
								</uni-row>	
							</view>		
						</view>																			
					</view>	
				</view>
			</view>
			
		</view>
		
		<view class="floattab">
			<view @click="$u.func.route('/product/product/card')"><image class="icon" src="../../static/jf/btn_buy@2x.png" mode="widthFix"></image></view>
			<view @click="scrollToTop">
				<image class="icon" src="../../static/jf/btn_top@2x.png" mode="widthFix"></image>
				</view>
		</view>
		
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import { getjwtdSpgl ,jwtdSpglDhjl,getJf} from '@/api/jfsc.js'
	export default {
		data(){
			return{
				showMore:true,
				status: 'loadmore',
				loading:false,
				scrollTop: 0,
				shopList:[],
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
			}
		},
		onShow() {
			this.$u.func.checkUpdate()
		},
		onLoad() {
			getJf().then(res=>{
				this.$u.vuex('userInfo.detail.jf', res.data)
			})
			getjwtdSpgl(this.pages.current).then(res=>{
				this.pages.current++
				this.shopList = res.data.records
				if(res.data.records.length<10 ) this.status = 'nomore';
				this.loading=false
			}).finally(()=>{
				uni.hideLoading()
			})
		},
		onReachBottom() {
			this.status = 'loading';
			var _this = this;
			getjwtdSpgl(_this.pages.current).then(res=>{
				_this.pages.current++
				_this.shopList=_this.shopList.concat(res.data.records)
				if(res.data.records.length<10 ) _this.status = 'nomore'; _this.showMore=false;
			})
		},
		onPullDownRefresh() {
		    this.pages.current =1
			this.shopList=[]
		    uni.showLoading({
		    	title: '加载中'
		    });
		    getjwtdSpgl(this.pages.current).then(res=>{
		    	this.pages.current++
		    	this.shopList = res.data.records
		    	if(res.data.records.length<10 ) this.status = 'nomore';
		    }).finally(()=>{
		    	uni.hideLoading()
		    })
			uni.stopPullDownRefresh(); // 停止下拉刷新
		  },	
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		methods:{
			duihuan(v){
				let buyList =[]
				buyList.push({spId:v.id,spsl:1,xhjf:v.dhsxjf})
				jwtdSpglDhjl(buyList).then(res=>{
					uni.showToast({
						title:'兑换成功',
						icon:'success'
					})	
				})
			},
			getimg(imgs){
				return imgs.split(',')[0]
			},
			scrollToTop() {
			     // 回到顶部
				uni.createSelectorQuery().select(".bg")
					.boundingClientRect(data => { //目标节点
					  uni.createSelectorQuery().select(".content")
						  .boundingClientRect((res) => { //最外层盒子节点
							uni.pageScrollTo({
							  duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
							  scrollTop: res.top - data
								  .top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
							})
						  }).exec()
					}).exec();
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
		
	}
</script>

<style lang="scss">
	/deep/ .u-count-num{
		font-weight: bold !important;
		font-family: DINPro, DINPro;
	}
	.floattab{
		position: fixed;
		right: 36rpx;
		bottom: 80rpx;
		z-index: 99;
		.icon{
			width: 128rpx;
		}
	}
	.content{
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #F8F8F8;
		position: relative;
		min-height: 100vh;
		.bg{
			position: absolute;
			background: url('data:image/png;base64,[encoded data, 61464 characters]') 0 0 no-repeat;
			width: 100%;
			background-size: 100%;
			height: calc((100vw / 375) * 480);
			left:0;
			top: 0;
			z-index: 0;
		}
		.menutop{
			width: 100%;
			margin: auto;
			padding-bottom:10px;
			padding-top:25px;
			height: 100rpx;
			position: relative;
			z-index: 1;
			.search{
				text-align: left;width: 70%;
			}
		}
		.cell_item{
			width: 100%;
			padding: 24rpx;
			margin: auto;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 15px;
			position: relative;
			}
			.jfsc{
				padding-top: 24rpx;
				position: relative;
				z-index: 1;
				.tops{
					.money{
						width: 320rpx;
						position: absolute;
						right: 24rpx
					}
					
				}
				.kyjf{
					width: 100%;
					height: 80rpx;
					//background: #D7EEFB;
					margin-top:48rpx;
					backdrop-filter: blur(10px);
					border-radius: 0rpx 0rpx 24rpx 24rpx;
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					.icon{
						width: 32rpx;
						vertical-align: bottom;
						margin-right: 12rpx;
					}
					.title{
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
						margin-right: 12rpx;
					}
				}
				.jfmx{
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					height: 108rpx;
					background: #FFF;
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 24rpx 24rpx;
					.smtitle{
						height: 84rpx;
						font-family: DINPro, DINPro;
						font-weight: bold;
						color: #111111;
						line-height: 84rpx;
						text-align: left;
						font-style: normal;
					}
					.icon{
						width: 32rpx;
						vertical-align: bottom;
					}
					.mxname{
						padding-top: 27rpx;text-align: right;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						line-height: 32rpx;
						font-style: normal;
					}
				}
			
			}
			.shopList{
				padding:48rpx 0 24rpx 0;
				box-sizing: border-box;
				view.bigtitle{
					.bigtitle{
						width: 144rpx;
						height: 50rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #111111;
						line-height: 50rpx;
						text-align: left;
						font-style: normal;
						margin-right: 24rpx;
					}
					.smtitle{
						width: 140rpx;
						height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.lists{
					display: grid;
					grid-template-columns: 50% 50%;
					padding:24rpx 0;
					.items{
						.pbox{
							padding-bottom: 24rpx;
							box-sizing: border-box;
							width: calc(100% - 12rpx);
							background: #FFFFFF;
							box-shadow: 0rpx 2rpx 0rpx 0rpx #F4F4F4;
							border-radius: 24rpx;
							margin:0 auto 24rpx;
		
							.spimg{
								width: 100%;
								border-radius: 24rpx 24rpx 0 0;
							}
							.icon{
								width: 32rpx;
							}
							.titlebox{
								padding:0 24rpx;
								.title{
									height: 84rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 30rpx;                                                       
									color: #000000;
									line-height: 42rpx;
									text-align: justify;
									font-style: normal;
									margin-bottom: 12rpx;
									overflow: hidden;
									  text-overflow: ellipsis;
									  display: -webkit-box;
									  -webkit-line-clamp: 2;
									  -webkit-box-orient: vertical;
								}
								.icon{
									vertical-align: bottom;
									margin-right: 5rpx;
									position: relative;
									top: -2px;
								}
								.count{
									height: 44rpx;
									font-family: DIN, DIN;
									font-weight: 500;
									font-size: 36rpx;
									color: #FF1D1D;
									line-height: 44rpx;
									text-align: left;
									font-style: normal;
								}
								.mxname{
									height: 44rpx;
									background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
									border-radius: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #FFFFFF;
									line-height: 44rpx;
									text-align: center;
									font-style: normal;
								}
							}
						}
					}
				}
				
			}
	}
</style>