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.scribingPrice?item.scribingPrice:item.salePrice}}</view>
	   						<view class="goodsPrice4" v-if="item.scribingPrice">￥{{item.salePrice}}</view>
	   					</view>
	   				</view>
	   			</view>
	   		</view>
	   </scroll-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,
			}
		},
		onLoad() {
			
			this.userInfo = uni.getStorageSync("userInfo");
			//this.getOrderTimes()
			this.getcategoryList();
			this.getlistOpenGoodsPage()
		},
		
		methods: {
			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.topIndex=0;
				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){
				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: #F03B3B !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: #F03B3B;
	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: #F03B3B;
		padding-top: 8rpx;
	}
	.goodsPrice2{
		font-size: 22rpx;
		font-weight: 400;
		color: #F03B3B;
		padding-top: 8rpx;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice4{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-top: 8rpx;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
</style>