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="true" scroll-y="true" class="sort-left-box">
			<view class="sort-left-row" :class="sortFirstCode == item.cateCode ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList"
			 @click="checkFirstSort(item)" :key="index">
				<text>{{item.cateValue}}</text>
			</view>
		</scroll-view>
		<view class="sort-right-box">
			<scroll-view show-scrollbar="true" scroll-x="true" class="sort-right-row">
				<view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
				 :key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
			</scroll-view>
			<k-scroll-view @onPullDown="handlePullDown" @onPullUp="handleLoadMore" class="goods-box">
				<view class="goods-row" v-for="item in goodsList" @click="">
					<cover-image class="goods-img" :src="item.imgPath"></cover-image>
					<view class="goods-info">
						<view class="goods-name">{{item.productName}}</view>
						<view class="goods-details">{{item.details}}</view>
						<view class="goods-number">
							<text class="goods-icon">￥</text>
							<text class="goods-spec">{{item.bizPrice}}/{{item.spec}}</text>
							<text class="goods-sales">{{item.sellCount}}人付款</text>
						</view>
					</view>
					<view class="goods-cart">
						<view class="cart-button">
							<view class="iconfont icongouwuche"></view>
						</view>
					</view>
				</view>
			</k-scroll-view>
		</view>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue'
	export default {
		components: {
			kScrollView
		},
		data() {
			return {
				pageIndex: 1,
				isOver: false,
				goodName: '',
				sortFirstCode: '',
				sortFirstList: [],
				sortSecondCode: '',
				sortSecondList: [],
				goodsList: [],
			}
		},
		onLoad() {
			NET.request(API.getSortList, {}, 'POST').then(res => {
				if (res.code == 0) {
					this.sortFirstList = res.data
					if (res.data.length) {
						this.checkFirstSort(res.data[0])
					}
				}
			}).catch(res => {})
		},
		methods: {
			//  切换一级分类
			checkFirstSort(item) {
				this.sortFirstCode = item.cateCode
				this.sortSecondList = []
				if (item.oneCategory.length) {
					this.sortSecondList = item.oneCategory
					this.checkSecondSort(item.oneCategory[0])
				}
			},
			//  切换二级分类
			checkSecondSort(item) {
				this.sortSecondCode = item.cateCode
				this.goodsList = []
				if (this.triggered = 'restore') {
					this.getGoodsList()
				}
			},
			//  搜索商品
			search(data) {
				this.goodName = data.value
				this.goodsList = []
				this.getGoodsList()
			},
			//  下拉刷新
			handlePullDown(stopLoad) {
				this.goodsList = []
				this.getGoodsList(stopLoad)
				stopLoad ? stopLoad() : '';
			},
			//  懒加载
			handleLoadMore(stopLoad) {
				if (!this.isOver) {
					this.getGoodsList()
				} else{
					stopLoad ? stopLoad({ isEnd: true }) : '';
				}
			},
			//  获取商品
			getGoodsList(stopLoad) {
				NET.request(API.getGoodsBySort, {
					name: this.goodName,
					oneId: this.sortFirstCode,
					twoId: this.sortSecondCode,
					pageIndex: this.pageIndex,
					pageSize: 10,
				}, 'POST').then(res => {
					if (res.code == 0) {
						for (let i = 0; i < 8; i++) {
							res.data.list.push({
								...res.data.list[0],
								productName: res.data.list[i].productName + 1
							})
						}
						this.isOver = res.data.list.length != 10
						this.goodsList = this.goodsList.concat(res.data.list)
					}
				}).catch(res => {})
			}
		}
	}
</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)!important;
				padding: 6px 0 0px 0;
				box-sizing: border-box;
				overflow-y: auto;

				.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% - 108px);
						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: 24px;
						height: 84px;
						float: left;
						.cart-button{
							width: 24px;
							height: 24px;
							margin-top: 30px;
							background-color: #52A63A;
							border-radius: 50%;
							text-align: center;
							.iconfont{
								color: #FFFFFF;
								font-size: 18px;
								line-height: 24px;
							}
						}
					}
				}
			}
		}
	}
</style>