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">
		</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">{{item.name}}</view>
					<view class="classificationHx" v-if="topIndex==index"></view>
				</view>
			</view>
	   </scroll-view>
	   <view class="paixuBox">
			<view class="paixuLine" @click="defaultpx" :class="{pxActive:defaultpxActive}">
				默认排序
			</view>
			<view class="paixuLine">
				<view :class="{pxActive:salessort}">销量</view>
				<view class="paixuLineTbBox">
					<view class="paixuLineTbtop" @click="xlPx(1)">
						<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" @click="xlPx(2)">
						<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">
				<view :class="{pxActive:pricesort}">价格</view>
				<view class="paixuLineTbBox">
					<view class="paixuLineTbtop" @click="jgpx(1)">
						<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" @click="jgpx(2)">
						<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" >
	   		<view class="goodsBox">
	   			<view class="hotGoodsLine" v-for="(item,index) in list" @click="goDetail(item)">
	   				<view>
	   					<image :src="item.url" mode="" @error="defImg()" class="hotGoodsLineImg"></image>
	   				</view>
	   				<view class="hotGoodsLineRIght">
	   					<view class="goodsName">{{item.name}}</view>
	   				    <view class="Sold">已售 {{item.saleQty}}</view>
	   					<view class="goodsPrice">
	   						<view class="goodsPrice1">店庆价</view>
	   						<view class="goodsPrice2">￥</view>
	   						<view class="goodsPrice3">{{item.salePrice?item.salePrice:item.scribingPrice}}</view>
	   						<view class="goodsPrice4" v-if="item.salePrice">￥{{item.scribingPrice}}</view>
	   					</view>
	   				</view>
	   			</view>
	   		</view>
	   </scroll-view>
	</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>
	
	
</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		
		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:true,
				authorizShow:false,
				code:'',
				wxOpenData:'',
			}
		},
		onLoad() {	 
			//this.userInfo = uni.getStorageSync("userInfo");
			this.userInfo=this.$store.state.userInfo;
			this.wxOpenData=this.$store.state.wxOpenData
			this.getcategoryList();
			this.getlistOpenGoodsPage();
			/* uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res)
			
				},
				fail(err) {
			     console.log(err)
				}
			}); */
		},
		
		methods: {
			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.loginInfo)
							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(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(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.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){
				this.topIndex=index;
				this.list=[];
				this.page=1;
				this.categoryID=item.id;
				this.getlistOpenGoodsPage()
			},
			ssList(){
				this.topIndex=1;
				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', {
				
				 },'GET').then(res => {
						this.categoryList=res.data;
						var obj={
							id:'',
							name:'全部'
						}
						this.categoryList.unshift(obj)
				 })
			},
			
			getlistOpenGoodsPage(){
				uni.showLoading({ title: '加载中'});
				this.$http('openMall/listOpenGoodsPage', {
				   page:this.page,
				   limit:this.limit,
				   name:this.name,
				   categoryID:this.categoryID,
				   order:this.order,
				   orderBy:this.orderBy,
				 },'GET').then(res => {
					 uni.hideLoading();
						var data=res.data.Items;
						this.list=this.list.concat(data)
				 })
			}
			
		},
		onReachBottom(){
			this.page++;
			this.getlistOpenGoodsPage()
			//console.log("shanglas")
		}
	}
</script>

<style scoped lang="less">
.pxActive{
	color: #FF0000 !important;
}
.paixuLineTbtopIcon{
	width: 16rpx;
	height: 8rpx;
	display: block;
	padding-left: 10rpx;
}
.paixuLineTbtopIconx{
	padding-bottom:20rpx;
}
.paixuLineTbtopIcons{
	padding-top: 6rpx;
}
.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;
}
.classificationBox{
	display: flex;
	padding-bottom: 12rpx;
}
.classificationName{
	white-space: nowrap;
	font-size: 28rpx;
	color: #3C3C3C;
	line-height: 40rpx;
	padding:24rpx 24rpx 8rpx 24rpx;
}
.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;
	}
	.paixuLine{
		line-height: 37rpx;font-size: 26rpx;color: #666666;padding-top: 18rpx;
		display: flex;
	}
	.hotGoodsLine{
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
	}
	.hotGoodsLineImg{
		width: 208rpx;
		height: 194rpx;
		border-radius: 16rpx;
		border: 1px solid #EEEEEE;
	}
	.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: 8rpx;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 400;
		color: #FF0000;
	}
	.goodsPrice4{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-top: 8rpx;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
	.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>