yunshengtai-uniapp/pages/life/index.vue

<template>
	<view class="productSort">
		<view class="page-top-box" :class="isFixed == true ? 'on' : ''">
			<!-- <view class="top-box acea-row row-between-wrapper">
        <view class="top-box-l acea-row row-middle">
          <image src="../../static/images/localtion.png"></image>
          <text>武汉</text>
        </view>
        <view class="cart-btn-box" @click="goShoppingCart()">
          <image src="../../static/images/cart.png"></image>
        </view>
      </view> -->
			<div class="index">
				<view class="header acea-row row-center-wrapper">
					<view @click="goGoodSearch()" class="search acea-row row-middle">
						<text class="iconfont icon-xiazai5"></text>搜索商品
					</view>
					<view class="cart-btn-box" @click="goShoppingCart()">
						<image src="../../static/images/cart.png"></image>
					</view>
				</view>
			</div>
		</view>
		<view class="category-tab-box">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view v-for="item in categoryList" :key="item.id" @click="tabClick(item)" :class="fid == item.id ? 'category-item category-item-active' : 'category-item'">
					{{item.cateName}}
				</view>
			</scroll-view>
		</view>

		<view class="warter-box">
			<!-- <view class="headline">
				<image src="../../static/images/rec-title.png" mode=""></image>
			</view> -->
			<view class="second-cate-box acea-row" v-if="secondCateList.length> 0">
				<view class="second-cate-item" v-for="item in secondCateList" :key="item.id" @click="secondCateClick(item.id)" :class="sid == item.id ? 'second-cate-item-active' : ''">
					<view class="img-box">
						<image :src="item.pic"></image>
					</view>
					<view class="name">{{item.cateName}}</view>
				</view>
			</view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="warter" v-for="(item, index) in leftList" :key="index" @tap="toGoodsDetail(item.id)">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>
						<view class="goodsinfo-box">
							<view class="title line2"> {{ item.storeName }} </view>
							<view class="price-box acea-row row-between-wrapper">
								<text class="price">￥{{ item.price }}</text>
								<text class="old-price">￥{{ item.price }}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="warter" style="margin-left: 30rpx;" v-for="(item, index) in rightList" :key="index" @tap="toGoodsDetail(item.id)">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>
						<view class="goodsinfo-box">
							<view class="title line2"> {{ item.storeName }} </view>
							<view class="price-box acea-row row-between-wrapper">
								<text class="price">￥{{ item.price }}</text>
								<text class="old-price">￥{{ item.otPrice }}</text>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" margin-top="40" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<!-- <tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar> -->
	</view>
</template>
<script>
	import {
		getCategory,
		getProducts,
		getArticle,
		getActivity,
		getSecondCategory
	} from "@/api/store";
	import {
		trim
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import tabbar from "../../tabbarComponent/tabbar";
	import vSwiper from "@/components/vSwiper.vue";
	const app = getApp();
	export default {
		components: {
			tabbar,
			vSwiper,
		},
		name: "GoodsClass",
		computed: mapGetters(["userInfo"]),
		props: {},
		data: function() {
			return {
				category: [],
				navActive: 0,
				search: "",
				lock: false,
				menuHeight: app.globalData.menuHeight,
				navHeight: app.globalData.navHeight,
				menuTop: app.globalData.menuTop,
				currentTabIndex: 3,
				flowList: [],
				isFixed: false,
				loadStatus: "loadmore",
				page: 1,
				limit: 10,
				isLoad: true, //是否还有更多
				categoryList: [{
					id: 0,
					cateName: '全部'
				}], //分类列表
				fid: 0, //一级分类id
				secondCateList: [], //二级分类
				sid: 0, //二级分类id
				articleList: [],
				active: 0,
				show: false,
				activity: [],
			};
		},
		watch: {
			"$yroute.query.id": function(n) {
				if (n) {
					this.activeCateId(n);
				}
			},
		},
		onShareAppMessage() {
			return {
				title: '禅易云生态',
				path: '/pages/life/index',
				success(res) {
					uni.showToast({
						title: '分享成功',
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
					})
				},
			}
		},
		mounted: function() {
			this.getSecondCategory().then(() => {
				this.getProducts();
			})
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page = this.page + 1;
				this.getProducts();
			}
		},
		onPullDownRefresh() {
			wx.showNavigationBarLoading();
			this.isLoad = true;
			this.page = 1;
			this.fid = this.categoryList[0].id;
			// this.getActivity();
			this.clear().then(() => {
				this.getProducts();
			});
		},

		methods: {
			toAritcleList() {
				this.$yrouter.push("/pages/life/articleList/index");
			},
			async clear() {
				this.$refs.uWaterfall.clear();
			},
			tabBarClick(index) {
				this.currentTabIndex = index;
			},
			goShoppingCart() {
				this.$yrouter.push("/pages/shop/ShoppingCart/index");
			},
			goGoodSearch() {
				this.$yrouter.push("/pages/shop/GoodSearch/index");
			},
			goGoodsList(child) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsList/index",
					query: {
						id: child.id,
						title: child.cateName
					},
				});
			},
			toGoodsDetail(id) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsCon/index",
					query: {
						id: id
					},
				});
			},
			activeCateId(n) {
				let index = 0;
				n = parseInt(n);
				if (!n) return;
				this.category.forEach((cate, i) => {
					if (cate.id === n) index = i;
				});
				if (index !== this.navActive) {
					this.asideTap(index);
				}
			},
			loadCategoryData() {
				getCategory().then((res) => {
					this.category = res.data;
					this.$nextTick(() => {
						if (this.$yroute.query.id) {
							this.activeCateId(this.$yroute.query.id);
						}
					});
				});
			},
			getActivity() {
				getActivity().then((res) => {
					this.articleList = res.data.articleList;
					this.activity = res.data.activityList;
				});
			},
			toActiveDetail(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/activity/detail/index?id=" + id,
				});
			},
			tabClick(i) {
				this.fid = i.id;
				this.page = 1;
				this.isLoad = true;
				this.flowList = [];
				this.getSecondCate(i.id)
			},
			getSecondCate(id) {
				if (id == 0) { //全部商品
					this.secondCateList = []
					this.sid = 0
					this.clear().then(() => {
						this.getProducts();
					});
				} else {
					this.categoryList.forEach((item) => {
						if (item.id == id) {
							this.secondCateList = item.children
							this.sid = this.secondCateList[0].id || 0
						}
					})
					this.clear().then(() => {
						this.getProducts();
					});
				}
			},
			secondCateClick(id) {
				this.sid = id;
				this.clear().then(() => {
					this.getProducts();
				});
			},
			async getProducts() {
				this.loadStatus = "loading";
				getProducts({
					page: this.page,
					limit: this.limit,
					sid: this.sid
				}).then((res) => {
					// console.log(res)
					if (this.page > 1) {
						this.flowList = this.flowList.concat(res.data);
					} else {
						this.flowList = res.data;
					}
					if (this.limit <= res.data.length) {
						//分页数等于返回值的length说明还有
						this.isLoad = true;
					} else {
						this.isLoad = false;
						this.loadStatus = "nomore";
					}
					wx.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					// console.log(this.flowList, 'flowList')
				});
			},
			async getSecondCategory() {
				let res = await getSecondCategory();
				this.categoryList = [...this.categoryList, ...res.data]
				// console.log(this.categoryList,'categoryList')
			},

			submitForm: function() {
				var val = trim(this.search);
				if (val) {
					this.$yrouter.push({
						path: "/pages/shop/GoodsList/index",
						query: {
							s: val
						},
					});
					setTimeout(() => (this.search = ""), 500);
				}
			},
			asideTap(index) {
				this.navActive = index;
			},
			alertMessage(msg) {
				uni.showToast({
					title: msg,
					icon: "none",
				});
			},
		},
		beforeDestroy: function() {
			// document.removeEventListener("scroll", this.onScroll, false);
		},
	};
</script>
<style lang="scss" scoped>
</style>

<style lang="less" scoped>
	.productSort {
		background: #eeeeee !important;
		position: relative;
	}

	.page-top-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		padding: 0 30rpx 20rpx;
		box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);

		.top-box {
			.top-box-l {
				font-size: 32rpx;
				color: #000;
				font-weight: 500;

				image {
					width: 26rpx;
					height: 30rpx;
					display: block;
					margin-right: 10rpx;
				}
			}
		}

		.cart-btn-box {
			width: 50rpx;
			height: 50rpx;
			margin-left: 12rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.index {
			.header {
				height: 68rpx;
				position: static;
				padding: 0;

				.search {
					background-color: #eeeeee;
					border-radius: 8rpx;
				}
			}
		}
	}

	.category-tab-box {
		width: 100%;
		height: 108rpx;
		line-height: 108rpx;
		// padding-top: 90rpx;
		position: fixed;
		top: 86rpx;
		left: 0;
		z-index: 999;

		.scroll-view_H {
			width: 100%;
			padding-left: 30rpx;
			background: #fff;
			white-space: nowrap;

			.category-item {
				display: inline-block;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #999;
				margin-right: 40rpx;

				&.category-item-active {
					color: #ff6d31;
					font-size: 32rpx;
					font-weight: 500;
					position: relative;

					&::after {
						content: "";
						width: 100%;
						height: 8rpx;
						border-radius: 6rpx;
						display: block;
						position: absolute;
						bottom: -24rpx;
						left: 0;
						background: #ff7942;
					}
				}
			}
		}
	}

	.second-cate-box {
		width: 100%;
		padding: 28rpx 28rpx 0;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;

		.second-cate-item {
			width: 100rpx;
			text-align: center;
			margin-right: 38rpx;
			margin-bottom: 28rpx;

			&:nth-child(5n) {
				margin-right: 0;
			}

			.img-box {
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				margin-bottom: 10rpx;

				image {
					width: 98%;
					height: 98%;
					display: inline-block;
				}
			}

			.name {
				color: #4B4B4B;
				font-size: 22rpx;
			}

		}
		
		.second-cate-item-active{
			.name{
				color: #ff7942;
			}
		}
	}

	.warter-box {
		width: 100%;
		min-height: 100vh;
		padding: 216rpx 24rpx 190rpx 24rpx;

		.u-waterfall {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.u-column {
				.warter {
					width: 336rpx !important;
					border-radius: 10rpx;
					background-color: #ffffff;
					position: relative;
					overflow: hidden;
					box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.06);
					margin-bottom: 20rpx;

					image {
						width: 100%;
						display: block;
					}

					.goodsinfo-box {
						width: 100%;
						padding: 12rpx 16rpx;

						.title {
							font-size: 28rpx;
							font-weight: 500;
							color: #1d1d1d;
							width: 100%;
							height: 80rpx;
						}

						.price {
							font-size: 28rpx;
							font-weight: bold;
							line-height: 40rpx;
							color: #ff7942;
						}

						.old-price {
							font-size: 20rpx;
							line-height: 28rpx;
							color: #bfbfbf;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.banner-img-box {
		width: 100%;
		padding: 220rpx 40rpx 32rpx;

		.img-box-l {
			width: 324rpx;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.img-box-r {
			width: 324rpx;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			// align-items: ;
			image {
				width: 324rpx;
				height: 190rpx;
			}
		}
	}

	.goods-list-box {
		width: 100%;
		padding: 0 30rpx;

		.goods-list-item {
			width: 100%;

			.goods-type-box {
				image {
					width: 94rpx;
					height: 94rpx;
				}

				.t-word {
					font-size: 36rpx;
					color: #222;
					font-weight: 600;
				}
			}

			.goods-list {
				width: 100%;

				.goods-item {
					width: 335rpx;
					background: #fff;
					margin-right: 10rpx;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
					overflow: hidden;
					box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);

					image {
						width: 100%;
						height: 278rpx;
					}
				}

				.goods-item:nth-child(2n) {
					margin-right: 0;
				}

				.goods-desc-box {
					width: 100%;
					padding: 16rpx;
					font-size: 24rpx;

					.goods-name {
						line-height: 34rpx;
					}

					.price {
						font-size: 28rpx;
						color: #e5270f;
						line-height: 40rpx;
						margin-bottom: 26rpx;
					}
				}
			}
		}
	}
</style>