zhongwin/pages/category/category.vue

<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item,ind) in flist" :key="item.id" class="f-item b-b" :class="{ active:ind === index }"
				@click="tabtap(item,ind)">{{ item.cate_name }}</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
			:scroll-top="tabScrollTop">
			<view class="list-box-h">
				<view v-if="flist[index]" v-for="(item, index) in flist[index].list" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<image class="itemImg" :src="item.image"></image>
					<view class="guess-box">
						<view class="title clamp2">{{ item.store_name }}</view>
						<!-- <view class="price-box flex">
							<view class="yuanprice">{{ item.ot_price }}</view>
							<image src="../../static/img/jiantou.png" mode=""></image>
							<view class="jiang">直降{{ (item.ot_price - item.price).toFixed(2) }}元</view>
						</view> -->
						<view class="price">￥{{ item.price }}</view>
						<view class="btn">立即购买</view>
					</view>
				</view>
				<view class="noData" v-if="flist[index]?flist[index].list.length==0:true">
					<view v-if="flist[index].loading">
					暂无数据
					</view>
					<view v-else>
					数据加载中...
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCategoryList,
		getProducts
	} from '@/api/product.js';
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 9,
				index: 0, //当前选中的对象
				flist: [],
			};
		},
		onLoad() {
			this.loadData();
		},
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		methods: {
			// 载入数据
			async loadData() {
				let obj = this;
				getCategoryList({
						sid: 10
					})
					.then(({
						data
					}) => {
						obj.flist = data[0].children.map((e) => {
							let data = {
								id: e.id,
								pic: e.pic,
								cate_name: e.cate_name,
								loading: false,
								list: [],
							}
							return data
						});
						obj.currentId = obj.flist[0].id;
						obj.loadProducts(obj.flist[0])
					})
					.catch(err => {
						console.log(err);
					});
			},
			//一级分类点击
			tabtap(item, ind) {
				this.index = ind;
				if (!item.loading) {
					this.loadProducts(item)
				}
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadProducts(item) {
				let obj = this;
				let data = {
					page: 1,
					limit: 1000,
					sid: item.id //分类id
				};
				getProducts(data).then(function(e) {
					console.log(e.data);
					item.list = e.data;
					item.loading = true;
				}).catch((e) => {
					item.loading = false;
				});
			},
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id
				});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200rpx;
		height: 100%;
		background-color: #fff;

		.f-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: $font-color-base;
			position: relative;

			&.active {
				color: $base-color;
				background: #f8f8f8;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 36rpx;
					width: 8rpx;
					background-color: $base-color;
					border-radius: 0 4px 4px 0;
					opacity: 0.8;
				}
			}
		}

	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		.noData{
			color: #a3a3a3;
			text-align: center;
		}
	}

	.guess-item {
		padding: 10rpx;
		display: flex;
		min-width: 100%;
		width: 0;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.guess-box {
			width: 100%;
			padding: 5px;
			.title {
				font-size: 30rpx;
				color: #333333;
				height: 2.5em;
				line-height: 1.25em;
			}
			.price-box {
				margin-top: 80rpx;
				justify-content: flex-start;
			}
	
			.price {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6F0F;
			}
	
			.btn {
				background: #16cc9f;
				border-radius: 28rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				float: right;
				padding: 5rpx 20rpx;
				margin-top: 20rpx;
				
			}
		}
	}
</style>