dl/pages/category/category.vue

<template>
	<view class="container">
		<!-- <view class="vheigh"></view> -->
		<!-- 小程序头部兼容 -->
		<!-- 顶部logo and 搜索 start-->
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font"><input type="text" placeholder="输入关键词搜索" v-model="productname" /></view>
			</view>
		</view>
		<view class="tabbar"><image src="../../static/img/banner.png" mode=""></image></view>
		<!-- 精品 商品 -->
		<view class="scroll-view flex-tpl" :style="{ height: pageHeight }">
			<scroll-view scroll-y class="left-aside">
				<view v-for="item in flist" class="f-item" :class="{ active_top: item.id == erjiid }" @click="changeSlist(item.id)">{{ item.cate_name }}</view>
			</scroll-view>
			<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" @scroll="loadData()">
				<view class="tlist-box" v-for="ls in bastList" :id="'main-' + ls.id">
					<view class="tlist-list flex_item" @click="navToDetailPage(ls)">
						<view class="tlist-img">
							<view class="img"><image :src="ls.image" :lazy-load="true" mode="scaleToFill"></image></view>
						</view>
						<view class="sell-out" v-if="ls.stock == 0"><text>已售罄</text></view>
						<view class="tlist-info">
							<view class="tlist-tip">
								<view class="ywyw">以物易物</view>
								<view class="bmhw">必买好物</view>
							</view>
							<view class="name ellipsis">{{ ls.store_name }}</view>
							<view class="tlist-price flex">
								<view class="price-box">
									<view class="price">
										¥
										<text class="blod">{{ ls.price }}</text>
										<text class="fen" v-if="ls.unit_name">/{{ ls.unit_name }}</text>
									</view>
								</view>
								<view class="btn">立即购买</view>
							</view>
							<view class="bottom_border"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { loadIndexs } from '@/api/index.js';
import { getUserInfo } from '@/api/user.js';
import { getProducts, getCategoryList } from '@/api/product.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState } from 'vuex';

export default {
	data() {
		return {
			scrollAnimation: true, //是否开启动画
			bastList: [], //精品推荐列表
			pageHeight: 0, //保存滚轮页面高度
			flist: [], //一级分类列表
			erjiid: '', //二级选择id
			page: 1,
			limit: 10,
			productname: '',
			loadingType: 'more' //加载更多状态
		};
	},
	computed: {
		...mapState(['loginInterceptor']),
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onReady(res) {
		// 初始化获取页面宽度
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.scroll-view').boundingClientRect();
				query.exec(function(res) {
					_this.pageHeight = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.pageHeight);
				});
			},
			fail: res => {}
		});
	},
	onLoad: function(option) {},
	onShow: function() {
		this.productname = '';
		this.loadingType = 'more';
		this.page = 1;
		this.bastList = []; //精品推荐列表
		this.flist = [];
		// this.loadData();
		this.categoryList();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		categoryList() {
			getCategoryList({}).then(({ data }) => {
				data.forEach(e => {
					if (e.id == 9) {
						this.flist = e.children;
						this.erjiid = this.flist[0].id;
						console.log(this.flist, this.erjiid, 'shuj');
					}
				});
				this.loadData();
			});
		},
		changeSlist(id) {
			this.bastList = [];
			this.page = 1;
			this.limit = 10;
			this.loadingType = 'more';
			this.erjiid = id;
			this.loadData();
		},
		// 點擊搜索框
		clickSearch() {
			this.bastList = [];
			this.page = 1;
			this.limit = 10;
			this.loadingType = 'more';
			this.loadData();
		},
		// 请求载入数据
		async loadData() {
			let obj = this;
			if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			let data = {
				page: obj.page,
				limit: obj.limit,
				keyword: obj.productname,
				sid: obj.erjiid
			};
			getProducts(data).then(function(e) {
				obj.bastList = obj.bastList.concat(e.data);
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit == e.data.length) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'nomore';
				}
			});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.carouselList[index].background;
		},
		//详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id + '&isyw=1'
			});
		},

		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			if (item.wap_url.indexOf('http') > 0) {
				window.location.href = item.wap_url;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.wap_url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.cate-section {
		position: relative;
		z-index: 5;
		border-radius: 16rpx 16rpx 0 0;
		margin-top: -20rpx;
	}
}

page {
	background: #f7f8f7;
}
.top-search {
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #fff;
	.search-box {
		justify-content: center;
		width: 698rpx;
		height: 60rpx;
		background: #eeeeee;
		// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
		border-radius: 30rpx;

		.search {
			width: 34rpx;
			height: 34rpx;
		}

		.search-font {
			width: 500rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
}
// 顶部轮播图
.top-swiper {
	width: 750rpx;
	height: 360rpx;
	// margin: 20rpx 0 0;
	image {
		width: 750rpx;
		height: 360rpx;
	}
}
.swiper-btm {
	height: 60rpx;
	width: 750rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	font-size: 21rpx;
	font-weight: 500;
	color: #333333;
	.btm-item {
		flex-grow: 1;
		justify-content: center;
		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 14rpx;
		}
	}
}
.tabbar {
	margin: 18rpx auto 0;
	width: 720rpx;
	height: 272rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30rpx 22rpx;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 14rpx;
		border-radius: 50%;
		opacity: 0.7;
	}
}
/*公用边框样式*/
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	font-size: $font-base;
	border-radius: 10rpx;
}
.vheigh {
	height: var(--status-bar-height);
}

.flex-tpl {
	display: flex;
	justify-content: space-between;
}
.scroll-view {
	margin-top: 15rpx;
	.left-aside {
		flex-shrink: 0;
		width: 180rpx;
		height: 100%;
		background: #f2f2f2;
		overflow: hidden;
		display: block;
		overflow-y: scroll;
	}
}
.f-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180rpx;
	height: 100rpx;
	font-size: 24rpx;
	color: $font-color-base;
	position: relative;
	&.active_top {
		background: #ffffff;
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 100rpx;
			width: 8rpx;
			background-color: #fd377a;
			border-radius: 0 4px 4px 0;
			opacity: 0.8;
		}
	}
}
.right-aside {
	overflow: hidden;
	padding: 0rpx 20rpx;
	height: 100%;
	display: block;
	overflow-y: scroll;
	width: 100%;
	.image {
		width: 100%;
		padding-bottom: 15rpx;
		.imageLV {
			width: 100%;
			height: 200rpx;
		}
	}
	.tlist-box {
		.tlistname {
			font-size: 24rpx;
			padding: 25rpx 25rpx;
			border-top: 2rpx solid rgba(238, 238, 238, 1);
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
		}
		.tlist-list.flex_item {
			height: 0;
			min-height: 230rpx;
			align-items: stretch;
		}
		.tlist-list {
			padding: 25rpx 0rpx;
			position: relative;
			.tlist-img {
				width: 169rpx;
				position: relative;
				.img {
					width: 169rpx;
					height: 169rpx;
					image {
						width: 169rpx;
						height: 169rpx;
					}
				}
				.stock {
					margin-top: 13rpx;
					font-size: 26rpx;
					background: #fff1ee;
					width: 100%;
					color: #fb4912;
					padding: 6rpx 0;
					border-radius: 5rpx;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0;
					bottom: 0;
					.img {
						width: 20rpx;
						height: 20rpx;
						flex-shrink: 0;
					}
					.stock-num {
						padding-left: 7rpx;
						font-size: 22rpx;
						border-radius: 5rpx;
						height: 32rpx;
						line-height: 32rpx;
					}
				}
			}
			.sell-out {
				position: absolute;
				width: 169rpx;
				height: 190rpx;
				background: rgba(255, 255, 255, 0.4);
				text-align: center;
				text {
					line-height: 190rpx;
					background: rgba(0, 0, 0, 0.5);
					color: #ffffff;
					padding: 10rpx 25rpx;
					border-radius: 25rpx;
					font-size: 20rpx;
				}
			}
			.tlist-info {
				font-size: 24rpx;
				width: 61%;
				padding-left: 25rpx;
				padding-right: 25rpx;
				position: relative;
				.tlist-tip {
					display: flex;
					align-items: center;
					.ywyw {
						width: 86rpx;
						height: 31rpx;
						background: linear-gradient(90deg, #fa0100 0%, #fa4716 100%);
						border-radius: 5rpx;
						text-align: center;
						line-height: 31rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
					.bmhw {
						margin-left: 10rpx;
						width: 86rpx;
						height: 31rpx;
						background: linear-gradient(90deg, #1b4282 0%, #2b5da6 100%);
						border-radius: 5rpx;
						text-align: center;
						line-height: 31rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}
				.bottom_border {
					position: absolute;
					border-bottom: 1px solid #eeeeee;
					left: 25rpx;
					bottom: 0;
					height: 2rpx;
					width: 100%;
				}
				.name {
					margin-top: 10rpx;
					color: #141821;
					font-weight: 500;
					font-size: 26rpx;
					&.ellipsis {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.info {
					color: #979797;
					font-size: 24rpx;
					padding: 8rpx 0rpx;
				}
				.tipBox {
					height: 50rpx;
				}
				.tip {
					padding: 10rpx 0rpx;
					text {
						border: 2rpx solid #ff1a27;
						color: #ff1a27;
						border-radius: 5rpx;
						font-size: 18rpx;
						padding: 5rpx 10rpx;
						margin-right: 15rpx;
					}
				}
				.tlist-price {
					position: absolute;
					left: 25rpx;
					width: 100%;
					bottom: 25rpx;
					.price-box {
						.price {
							color: #ff1a27;
							.blod {
								font-size: 35rpx;
								font-weight: bold;
							}
							.fen {
								color: #838691;
							}
						}
					}
					.btn {
						width: 85rpx;
						height: 30rpx;
						background: linear-gradient(90deg, #fa0100 0%, #fa4716 100%);
						border-radius: 14rpx;
						text-align: center;
						line-height: 30rpx;
						font-size: 14rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}
		}
	}
	.tlist {
		.cate {
			padding: 25rpx 0rpx;
			color: #666666;
			font-size: 24rpx;
		}
	}
}
</style>