qjd-user-uniapp/pages/shop/index.vue

<template>
	<view class="container">
		<view class="search-box">
			<uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search" class="search-bar"/>
		</view>
		<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="sort-left-box">
			<view class="sort-left-row" :class="sortFirstCode == item.code ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList" @click="checkFirstSort(item)" :key="index">
				<text>{{item.label}}</text>
			</view>
		</scroll-view>
		<view class="sort-right-box">
			<scroll-view :scroll-left="0" show-scrollbar="true" scroll-x="true" class="sort-right-row">
				<view class="sort-right-col" :class="sortSecondCode == item.code ? 'sort-right-col-active' : ''" 
				v-for="(item,index) in sortSecondList" :key="index" @click="checkSecondSort(item)">{{item.label}}</view>
			</scroll-view>
			<scroll-view :show-scrollbar="0" show-scrollbar="true" scroll-y="true" class="goods-box">
				<view class="goods-row" v-for="item in goodsList" @click="">
					<cover-image class="goods-img" @click="" :src="item.url"></cover-image>
					<view class="goods-info">
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-details">{{item.details}}</view>
						<view class="goods-number">
							<!-- <text class="goods-icon">￥</text> -->
							<text class="goods-spec">{{item.spec}}</text>
							<text class="goods-sales">{{item.sales}}人付款</text>
						</view>
					</view>
					<view class="goods-cart"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortFirstCode: '1',
				sortFirstList: [
					{label: '有机蔬菜有蔬菜', code: 1},
					{label: '有机蔬菜', code: 2},
					{label: '有机蔬菜', code: 3}
				],
				sortSecondCode: '1',
				sortSecondList: [
					{label: '叶菜类', code: 1},
					{label: '叶菜类', code: 2},
					{label: '叶菜类', code: 3}
				],
				goodsList: [
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10},
					{name: '优质白菜', details: '优质白菜优质白菜优质白菜', spec: '￥80.00/kg', sales: 10}
				],
			}
		},
		onLoad(){
			
		},
		methods: {
			//  切换一级分类
			checkFirstSort(item) {
				this.sortFirstCode = item.code
				this.sortSecondList = this.sortSecondList
				this.sortSecondCode = this.sortSecondList.length ? this.sortSecondList[0].code : ''
				this.goodsList = this.goodsList
			},
			//  切换二级分类
			checkSecondSort(item) {
				this.sortSecondCode = item.code
				this.goodsList = this.goodsList
			},
			search(data) {
				
			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		.search-box{
			width: 100%;
			height: 58px;
			box-sizing: border-box;
			padding: 2px 12px 1px 12px;
			border-bottom: 1px solid #DDDDDD;
			/deep/.search-bar{
				.uni-searchbar__box{
					border-color: #F8F8F8;
				}
			}
		}
		.sort-left-box{
			width: 80px;
			height: calc(100% - 58px);
			border-right: 1px solid #DDDDDD;
			float: left;
			.sort-left-row{
				width: 100%;
				height: 45px;
				box-sizing: border-box;
				padding-left: 9px;
				border-left: 3px solid #FFFFFF;
				font-size: 15px;
				font-family: PingFang SC;
				color: #333333;
				line-height: 16px;
				align-items: center;
				display: flex;
			}
			.sort-left-row-active{
				color: #51A539;
				border-left: 3px solid #51A539;
			}
		}
		.sort-right-box{
			width: calc(100% - 81px);
			height: calc(100% - 58px);
			float: left;
			.sort-right-row{
				width: 100%;
				height: 44px;
				padding: 9px 2px 0px 7px;
				box-sizing: border-box;
				white-space: nowrap;
				.sort-right-col{
					height: 26px;
					margin-right: 10px;
					display: inline-block;
					border: 1px solid #DCDCDC;
					border-radius: 13px;
					padding: 0 25px;
					box-sizing: border-box;
					font-size: 12px;
					font-family: PingFang SC;
					color: #666666;
					line-height: 24px;
				}
				.sort-right-col-active{
					color: #FFFFFF;
					background: #52A63A;
					border: 1px solid #51A539;
				}
			}
			.goods-box{
				width: 100%;
				height: calc(100% - 44px);
				padding: 6px 0 0px 0;
				box-sizing: border-box;
				.goods-row{
					width: calc(100% - 24px);
					height: 104px;
					padding: 11px 11px 11px 7px;
					box-sizing: border-box;
					margin: 4px 0 12px 12px;
					background: #FFFFFF;
					box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
					border-radius: 15px;
					.goods-img{
						width: 84px;
						height: 84px;
						float: left;
					}
					.goods-info{
						width: calc(100% - 104px);
						height: 84px;
						float: left;
						.goods-name{
							height: 18px;
							font-size: 15px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 18px;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.goods-details{
							height: 28px;
							font-size: 12px;
							font-family: PingFang SC;
							color: #999999;
							line-height: 14px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
							margin: 4px 0 12px 0;
						}
						.goods-number{
							height: 16px;
							font-family: PingFang SC;
							line-height: 16px;
							.goods-icon{
								font-size: 12px;
								color: #52A63A;
							}
							.goods-spec{
								font-size: 15px;
								color: #52A63A;
								margin-right: 15px;
							}
							.goods-sales{
								font-size: 12px;					
								color: #999999;
							}
						}
					}
					.goods-cart{
						width: 20px;
						height: 84px;
						float: left;
					}
				}
			}
		}
	}
</style>