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" placeholder="请输入商品名称" class="sstopInput">
		</view>
		<scroll-view scroll-x="true" class="scroll-Y" >
			<view class="classificationBox">
				<view  class="classification" v-for="(item,index) in 8" @click="topClick(index)">
					<view class="classificationName">分类名称一</view>
					<view class="classificationHx" v-if="topIndex==index"></view>
				</view>
			</view>
	   </scroll-view>
	   <view class="paixuBox">
			<view class="paixuLine">
				默认排序
			</view>
			<view class="paixuLine">
				<view>销量</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">
				<view>价格</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" >
	   		<view class="goodsBox">
	   			<view class="hotGoodsLine" v-for="(item,index) in 5" @click="goDetail(item)">
	   				<view>
	   					<image src="../../static/timg/nocar.png" mode="" class="hotGoodsLineImg"></image>
	   				</view>
	   				<view class="hotGoodsLineRIght">
	   					<view class="goodsName">德国马牌 Continental 全新升级6代 TechContct德国马牌 Continental 全新升级6代 TechContct</view>
	   				    <view class="Sold">已售 999</view>
	   					<view class="goodsPrice">
	   						<view class="goodsPrice1">店庆价</view>
	   						<view class="goodsPrice2">￥</view>
	   						<view class="goodsPrice3">999</view>
	   						<view class="goodsPrice3">￥893</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,
			}
		},
		onLoad() {
			
			this.userInfo = uni.getStorageSync("userInfo");
			//this.getOrderTimes()
		},
		
		methods: {
			topClick(index){
				this.topIndex=index
			},
			goDetail(){
				uni.navigateTo({
					url:'goodsDetail'
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
.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;
	}
	.goodsPrice2{
		font-size: 22rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice3{
		font-size: 32rpx;
		font-weight: 400;
		color: #F03B3B;
	}
	.goodsPrice3{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 8rpx;
	}
</style>