wxThird/pages/shop/shop.vue

<template>
<view class="box">
	<view class="topbox">
		<view class="sstop">
			<image src="../../static/timg/icon_search@2x.png" mode="" class="sstopimg"></image>
			<input type="text" v-model="name" placeholder="请输入商品名称" class="sstopInput" @confirm="ssList">
			<image src="../../static/img/icon_close.png" mode="" @click="empty" v-if="inputChShow" class="inputCh"></image>
		</view>
		<scroll-view scroll-x="true" class="scroll-Y" >
			<view class="classificationBox">
				<view  class="classification" v-for="(item,index) in categoryList" @click="topClick(index,item)">
					<view class="classificationName classificationNameActive"  v-if="topIndex==index" :style="{color:'#'+themeColor}">{{item.name}}</view>
					<view class="classificationName" v-else >{{item.name}}</view>
					<view class="classificationHx" :style="{background:'#'+themeColor}" v-if="topIndex==index"></view>
				</view>
			</view>
	   </scroll-view>
	</view>
	<view style="height: 180rpx;"></view>
	   <view class="paixuBox">
			<view class="paixuLine" @click="defaultpx" :class="{pxActive:defaultpxActive}">
				默认排序
			</view>
			<view class="paixuLine" @click="xlPx(1)">
				<view :class="{pxActive:salessort}">销量</view>
				<view class="paixuLineTbBox">
					<view class="paixuLineTbtop" >
						<image  v-if="salessorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
						<image  v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
					</view>
					<view class="paixuLineTbtop">
						<image v-if="salessortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
						<image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
					</view>
				</view>
			</view>
			<view class="paixuLine" @click="jgpx(1)">
				<view :class="{pxActive:pricesort}">价格</view>
				<view class="paixuLineTbBox">
					<view class="paixuLineTbtop" >
						<image v-if="pricesorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
						<image v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
					</view>
					<view class="paixuLineTbtop">
						<image v-if="pricesortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
						<image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
					</view>
				</view>
			</view>
	   </view>
	   <scroll-view scroll-y="true" class="scroll-Y goodsSw goodsBox" :scroll-top="scrollTop" @scroll="onscroll" >
	   		<view style="padding-bottom: 30rpx;"><!--  class="goodsBox" -->
	   			<view class="hotGoodsLine" v-for="(item,index) in list" @click="goDetail(item)">
	   				<view>
	   					<image :src="item.url" v-if="item.url" mode="" @error="defImg()" class="hotGoodsLineImg"></image>
						<image v-else src="../../static/timg/noimg.png" mode="" class="hotGoodsLineImg"></image>
	   				</view>
	   				<view class="hotGoodsLineRIght">
	   					<view class="goodsName">{{item.name}}</view>
						<view class="timeTbox" v-if="item.goodsDownTime">
						  <view class="timeK" style="margin-left: 0;">{{item.shengyuD}}</view>
						  <view class="timeviewTxt" > 天</view>
						  <view class="timeK">{{item.shengyuH}}</view>
						  <view class="timeviewTxt"> 时</view>
						  <view class="timeK">{{item.shengyuM}}</view>
						  <view class="timeviewTxt" > 分 &nbsp;后结束抢购</view>
						</view>
	   				   <view class="hotGoodsLineRIghtBottom">
	   				   	<view class="goodsPrice">
	   				   		<view class="goodsPrice1" >{{item.saleLabel}}</view><!-- :style="{color:'#'+themeColor}" -->
	   				   		<view class="goodsPrice2" >￥</view><!-- :style="{color:'#'+themeColor}" -->
	   				   		<view class="goodsPrice3" >{{item.salePrice?item.salePrice:item.scribingPrice}}
	   				   		 <span v-if="item.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
	   				   		</view>
	   				   		<view class="goodsPrice4" v-if="item.showLabel&&item.scribingPrice">
	   				   			<span v-if="item.showLabel.indexOf('1')!=-1">￥{{item.scribingPrice}}</span>
	   				   		</view>
	   				   	</view>
	   				   	<view class="Sold" >
	   				   		<view v-if="item.showLabel&&item.showLabel.indexOf('3')!=-1">
	   				   			已售 {{item.saleQty>0?item.saleQty:0}}
	   				   		</view>
	   				   	</view>
	   				   </view>
	   					
	   				</view>
	   			</view>
				<nodata v-if="list.length==0"></nodata>
	   		</view>
	   </scroll-view>
	
	
	<!-- 手机号授权 -->
	<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>
	
	<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 {
				userInfo:'',
				salessort:false,
				salessorts:false,
				salessortx:false,
				pricesort:false,
				pricesorts:false,
				pricesortx:false,
				topIndex:0,
				categoryList:'',
				page:1,
				limit:10,
				name:'',
				categoryID:'',
				order:'',
				orderBy:'',
				list:[],
				defaultImg: require("../../static/timg/noimg.png"),
				defaultpxActive:false,
				authorizShow:false,
				code:'',
				wxOpenData:'',
				shopcategoryID:'',
				inputChShow:false,
				ext:'',
				scrollTop:0,
				themeColor:'',
			}
		},
		  watch:{
				name(val){
					console.log(val)
					if(val){
						this.inputChShow=true
					}
				},
				
		},
		onLoad(opt) {	
			console.log(getApp().globalData.shopcategoryID)
			//this.userInfo = uni.getStorageSync("userInfo");
			/* this.shopcategoryID=getApp().globalData.shopcategoryID;
			if(this.shopcategoryID){
				this.categoryID=this.shopcategoryID
			} */
			this.userInfo=this.$store.state.userInfo;
			this.wxOpenData=this.$store.state.wxOpenData;
			this.themeColor = uni.getStorageSync("themeColor");
			if(this.themeColor){
				if(this.themeColor=='6F2BE8'){
					var backgroundImage='/static/tabimg/shop6F2BE8.png'
				}
				if(this.themeColor=='1677FF'){
					var backgroundImage='/static/tabimg/shop1677FF.png'
				}
				if(this.themeColor=='FF4F00'){
					var backgroundImage='/static/tabimg/shopFF4F00.png'
				}
				if(this.themeColor=='D53533'){
					var backgroundImage='/static/tabimg/shop1.png'
				}
				uni.setTabBarStyle({
				  // color: '#FF0000',
				  selectedColor: '#'+this.themeColor,
				})
				uni.setTabBarItem({
				  index: 1,
				  text: '商城',
				   selectedIconPath: backgroundImage
				})
			}
			this.ext=this.$common.getExtStoreId();
			this.getcategoryList();
			this.getlistOpenGoodsPage();
			/* uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res)
			
				},
				fail(err) {
			     console.log(err)
				}
			}); */
			
		},
		onShow() {
			var shopcategoryID  = uni.getStorageSync("shopcategoryID")
			if(shopcategoryID){
				uni.removeStorageSync('shopcategoryID');
				if(this.categoryList){
					this.categoryList.forEach((item,index)=>{
						//console.log(item.id)
						if(item.id==shopcategoryID){
						  this.topIndex=index	
						}
					})
					console.log("this.categoryID"+this.categoryID)
					if(this.topIndex){
						this.categoryID=shopcategoryID;
					}else{
						this.categoryID=''
					}
					
					this.list=[];
					this.page=1;
					this.getlistOpenGoodsPage()
				}
			}
		},
		methods: {
			onPageScroll(e){
				//console.log(e)
				//this.scrollTop=e.scrollTop
			},
			btnTop(){
				uni.pageScrollTo({
				    scrollTop: 0, 
				}); 
				// console.log(this.scrollTop)
				// this.$nextTick(function() {
						
				// 		this.scrollTop = 0
				// });
			},
			onscroll(e){
				//console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
			empty(){
				console.log("情况")
				this.name='';
				this.inputChShow=false;
				this.list=[];
				this.page=1;
				this.getlistOpenGoodsPage()
			},
			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:'wx33053a645546ec31',
					   unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
					   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.topIndex=1;
						    this.list=[];
						    this.page=1;
						    this.getlistOpenGoodsPage()
						}	
					  })
			},
			xlPx(num){
				this.salessort=true;
				this.defaultpxActive=false;
				this.pricesort=false;
				this.pricesort=false;
				this.pricesorts=false;
				this.pricesortx=false;
				if(this.salessorts){
					num=2
				}
				if(num==1){
					this.salessorts=true;
					this.salessortx=false;
					this.orderBy='asc';
				}else{
					this.salessorts=false;
					this.salessortx=true;
					this.orderBy='desc';
				}
				this.order='SaleQty';
				this.list=[];
				this.page=1;
				this.getlistOpenGoodsPage()
			},
			jgpx(type){
				this.salessort=false;
				this.defaultpxActive=false;
				this.pricesort=true;
				this.salessort=false;
				this.salessorts=false;
				this.salessortx=false;
				if(this.pricesorts){
					type=2
				}
				if(type==1){
					this.pricesorts=true;
					this.pricesortx=false;
					this.orderBy='asc';
				}else{
					this.pricesorts=false;
					this.pricesortx=true;
					this.orderBy='desc';
				}
				this.order='SalePrice';
				this.list=[];
				this.page=1;
				this.getlistOpenGoodsPage()
			},
			defaultpx(){
				this.defaultpxActive=true;
				this.order='';
				this.orderBy='';
				this.salessort=false;
				this.salessorts=false;
				this.salessortx=false;
				this.pricesort=false;
				this.pricesorts=false;
				this.pricesortx=false;
				//this.topIndex=0;
				this.list=[];
				this.page=1;
				this.getlistOpenGoodsPage()
			},
			defImg(event){
				// console.log(event)
				/* let img = event.srcElement;
				 img.src = this.defaultImg;
				 img.onerror = null; //防止闪图 */
			 },
			topClick(index,item){
				//console.log(item)
				this.topIndex=index;
				this.list=[];
				this.page=1;
				this.categoryID=item.id;
				this.getlistOpenGoodsPage()
			},
			ssList(){
				this.topIndex=0;
				this.list=[];
				this.page=1;
				this.getlistOpenGoodsPage()
			},
			goDetail(item){
				// if(!this.userInfo){
				// 	this.authorizShow=true;
				// }else{
					
				// }
				uni.navigateTo({
					url:'goodsDetail?id='+item.id
				})
				
			},
			getcategoryList(){
				this.$http('openMall/categoryList', {
				    unionId:this.ext.unionId
				 },'GET').then(res => {
						this.categoryList=res.data;
						var obj={
							id:'',
							name:'全部'
						}
						this.categoryList.unshift(obj);
						var shopcategoryID  = uni.getStorageSync("shopcategoryID")
						if(shopcategoryID){
							//console.log(this.shopcategoryID)
							this.categoryList.forEach((item,index)=>{
								//console.log(item.id)
								if(item.id==this.shopcategoryID){
								  this.topIndex=index	
								}
							})
							if(this.topIndex){
								this.categoryID=shopcategoryID;
							}else{
								this.categoryID=''
							}
						}
				 })
			},
			
			getlistOpenGoodsPage(){
				uni.showLoading({ title: '加载中'});
				console.log(this.categoryID)
				var that=this;
				this.$http('openMall/listOpenGoodsPage', {
				   page:this.page,
				   limit:this.limit,
				   name:this.name,
				   categoryID:this.categoryID,
				   orderBy:this.order,
				   order:this.orderBy,
				    unionId:this.ext.unionId
				 },'GET').then(res => {
					 uni.hideLoading();
						
						res.data.Items.forEach(item=>{
							if(item.goodsDownTime){
								item.shengyuM=''
								item.shengyuD=''
								item.shengyuH=''
								//console.log(item)
								//that.clock(item)
								let _this = this
								let today = new Date() // 当前时间
								let h = today.getHours()
								let m = today.getMinutes()
								let s = today.getSeconds()
								let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
								if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
								  this.activityEnd = true
								  return
								}
											
								let stopH = stopTime.getHours()
								let stopM = stopTime.getMinutes()
								let stopS = stopTime.getSeconds()
								let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
								let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
								let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
								let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
								let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
								let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
								let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
								let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
								item.shengyuM=shengyuM;
								item.shengyuD=shengyuD;
								item.shengyuH=shengyuH;
							}
						})
						var data=res.data.Items;
						this.list=this.list.concat(data);
						console.log(this.list)
				 })
			},
			clock(item){
				console.log(item)
				if(!item){
					return false;
				}
				let _this = this
				let today = new Date() // 当前时间
				let h = today.getHours()
				let m = today.getMinutes()
				let s = today.getSeconds()
				let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
				if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
				  this.activityEnd = true
				  return
				}
							
				let stopH = stopTime.getHours()
				let stopM = stopTime.getMinutes()
				let stopS = stopTime.getSeconds()
				let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
				let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
				let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
				let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
				let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
				let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
				let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
				let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
				this.shengyuM=shengyuM;
				this.shengyuD=shengyuD;
				this.shengyuH=shengyuH;
				setTimeout(_this.clock, 500)
			},
			
		},
		
		onReachBottom(){
			this.page++;
			this.getlistOpenGoodsPage()
			//console.log("shanglas")
		},
		onPullDownRefresh(){
			this.list=[];
			this.page=1;
			this.getlistOpenGoodsPage();
			setTimeout(() => {
					uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 2000);
		}
	}
</script>

<style scoped lang="less">
	.btn_top{
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		right: 24rpx;
		bottom: 40rpx;
	}
	.timeTbox{
			
			height: 60rpx;
			display: flex;
			padding-top: 15rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #764D49;
		
		}
		.timeviewTxt{
				line-height: 41rpx;
				padding-top: 10rpx;
		}
		.timeDivTxt{
			line-height: 60rpx;
			padding: 0 10rpx;
		}
		.timeK{
			height: 41rpx;
			line-height: 41rpx;
			color: #FFFFFF;
			width: 41rpx;
			text-align: center;
			background: #F03B3B;
			border-radius: 6rpx;
			margin-top: 9rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
.hotGoodsLineRIghtBottom{
	display: flex;
	justify-content: space-between;
	    width: 470rpx;
}
.topbox{
	position: fixed;
	width: 750rpx;
	top: -1rpx;
	left: 0;
	z-index: 11;
}
.inputCh{
width:40rpx;
height: 40rpx;
position: absolute;
right: 60rpx;
top: 40rpx;
z-index: 11;
}
.pxActive{
	color: #FF0000 !important;
}
.paixuLineTbtopIcon{
	width: 16rpx;
	height: 8rpx;
	display: block;
	padding-left: 10rpx;
}
.paixuLineTbtopIconx{
	padding-bottom:24rpx;
}
.paixuLineTbtopIcons{
	padding-top: 8rpx;
}
.paixuLineTbBox{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.sstopInput{
	width: 626rpx;
	height: 72rpx;
	background: #F4F5F7;
	border-radius: 36rpx;
	line-height: 72rpx;
	font-size: 28rpx;
	padding-left: 76rpx;
}
.sstop{
	position: relative;
	padding-top: 24rpx;
	padding-left: 24rpx;
	background: #ffffff;
}
.sstopimg{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 44rpx;
	top: 40rpx;
}
.scroll-Y{
	background: #ffffff;
	width: 750rpx;
	
}
.goodsBox{
	// height: calc(100vh - 280rpx);
	// padding-bottom: 120rpx;
}
.classificationBox{
	display: flex;
	padding-bottom: 12rpx;
}
.classificationName{
	white-space: nowrap;
	font-size: 28rpx;
	color: #3C3C3C;
	line-height: 40rpx;
	padding:24rpx 24rpx 8rpx 24rpx;
	font-weight: 400;
}
.classificationNameActive{
	font-weight: 500 !important;
	/* color: #FF0000 ; */
}
.classificationHx{
	width: 40rpx;
	height: 4rpx;
	// background: #FF0000;
	margin: 0 auto;
}
.paixuBox{
	width: 750rpx;
	height: 72rpx;
	background: #FFFFFF;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #EEEEEE;
	}
	.paixuLine{
		line-height: 37rpx;font-size: 26rpx;color: #666666;padding-top: 18rpx;
		display: flex;
	}
	.hotGoodsLine{
		margin-top: 30rpx;
		padding:0rpx 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
	}
	.hotGoodsLineImg{
		width: 208rpx;
		height: 194rpx;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
		display: block;
	}
	.goodsName{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;				
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;		
		line-clamp: 2;					
		-webkit-box-orient: vertical;
	}
	.hotGoodsLineRIght{
		padding-left: 24rpx;
	}
	.goodsPrice{
		display: flex;
		padding-top: 10rpx;
	}
	.goodsPrice1{
		font-size: 24rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 8rpx;
	}
	.goodsPrice2{
		font-size: 22rpx;
		font-weight: 400;
		color: #FF0000;
		padding-top: 10rpx;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 500;
		color: #FF0000;
	}
	.goodsPrice4{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-top: 8rpx;
		text-decoration:line-through;
		padding-left: 10rpx;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 20rpx;
		line-height: 30rpx;
		height: 30rpx;
	}
	.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: #D53533;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-size:30rpx;
		color: #FFFFFF;
		margin-top: 62rpx;
		margin-left:71rpx;
	}
</style>