IHG/pages/goods/goods.vue

<template>
	<view class="goods">
		<scroll-view class="scroll-y" @scroll="handleScroll" :scroll-into-view="topItem" scroll-with-animation
			scroll-y="true">
			<navbarTransparent title="产品" />
			<view id="top"></view>
			<!-- 背景图 -->
			<view class="goods-img">
				<image v-if="bannerImg" style="width: 100vw; height: 82vw;" :src="bannerImg" mode="scaleToFill"></image>
			</view>
			<!-- 内容 -->
			<view class="main">
				<view class="search">
					<u-input placeholderStyle='color:#999' id="search-input" placeholder="搜索" border='none'
						v-model="search" @input="searchText(isActive,items[isActive].id)">
						<template slot="suffix" style='margin-right:40rpx;'>
							<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
								height="32rpx"></u-image>
						</template>
					</u-input>
				</view>
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in items" :key="index">
						<view class="navTitle-item">
							<view :class="{'active':isActive === index}" @click="checked(index,item.id)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="msg-null" v-if="goodsList.length == 0 ">
				<image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode="">
				</image>
				<view class="msg-null-text">
					<text>暂无数据</text>
				</view>
			</view>

			<view class="content" v-if="goodsList.length > 0 ">
				<view class="home-hotel-img-content">
					<template v-for="(item,index) in goodsList">
						<view v-if="item.status==1" @click="goGoodsDetail(item.id)" class="home-hotel-img-content-item"
							:key="index" :style="{marginTop:item.marginTop || 0 }">
							<image class="home-hotel-img-content-item-img"
								:class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
								:src="item.cover_img" mode=""></image>
							<view class="text">
								<text class="text-top">{{item.name}}</text>
								<!-- <text class="text-main">{{item.hotel.name}}</text> -->
								<text class="text-main"></text>
							</view>
						</view>
					</template>
				</view>
				<!-- 触底 -->
				<view class="home-bottom" v-if="goodsList.length > 0 ">
					<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
				</view>
			</view>
		</scroll-view>
		<!-- <view class="return-btn" v-if="isShow" @click="handleBackTop">
			<image style="width: 128rpx;height: 128rpx;" src="/static/icon/returntop.png" mode=""></image>
		</view> -->
		<view class="return-btn" @click="handleBackTop">
			<image style="width: 128rpx;height: 128rpx;" src="/static/icon/returntop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	import navbarTransparent from "@/components/extra/navbarTransparent.vue"
	export default {
		components: {
			navbarTransparent
		},
		data() {
			return {
				//搜索
				search: '',
				//背景图
				bannerImg: '',
				// 返回的按钮是否显示
				isShow: false,
				topItem: '', //返回顶部的标记点
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//分段器
				items: [],
				//激活指定table菜单
				isActive: 0,
				//第三方产品分类categoryId
				categoryId: '',
				goodsList: [],
				// 分页
				page: 1,
				pagesize: 15,
				totalElements: '',
				allListItem: '',
				// 组件uni-load-more
				status: 'noMore',
			};
		},
		onLoad() {
			this.shortLong()
			this.getCategoryList()
			//获取产品活动列表背景图
			this.bannerImg = this.$store.getters.allset.activity_page.value.bg_img
		},

		// 触底加载
		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			var allTotal = this.page * this.pagesize
			console.log(allTotal, '----allTotal');
			//this.page为加载次数，this.pagesize为每一次加载的数据条数
			if (allTotal < this.totalElements) {
				//this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
				this.allListItem = false;
				this.page++;
				//加载次数递加
				this.status = "loading"
				this.$api.product.getProducts({ //请求更多数据列表
					page: this.page,
					category_id: this.categoryId,
					keyword: this.search
				}).then(res => {
					let ret = [...this.goodsList, ...res.data.data]
					this.goodsList = ret
					console.log(ret)
				})
			} else {
				this.allListItem = true;
				console.log('已加载全部数据')
				this.status = "noMore"
			}
		},

		methods: {
			// 获取分类列表
			getCategoryList() {
				this.$api.category.getCategoryList({
					page: 1,
					type: 2
				}).then(res => {
					if (res.code == 0) {
						this.items = res.data.data
						this.categoryId = this.items[0].id
						console.log(this.categoryId, '--->this.categoryId');
						this.getGoodsList(this.categoryId)
					}
				})
			},
			//菜单index切换
			checked(index, id) {
				this.page = 1
				this.categoryId = id
				this.isActive = index
				this.getGoodsList(id)
			},

			//产品列表type:1,第三方购买产品
			getGoodsList(category_id) {
				this.$api.product.getProducts({
					type: 1,
					page: 0,
					keyword: this.search || '',
					category_id: `${category_id}`
				}).then(res => {
					this.goodsList = res.data.data.filter(item=>{
						return item.status == 1
					})
					this.totalElements = res.data.total
					this.pagesize = res.data.per_page
					this.shortLong()
					console.log(this.goodsList, '------>产品图');
				})
			},

			handleScroll(e) {
				//只有scrollTop有用，先拿scrollTop
				let {
					scrollTop
				} = e.detail
				//滑动大于500让按钮显示
				this.isShow = scrollTop > 500
				//因为点第二次不行，这里记得重置清空一下
				this.topItem = ''
			},
			handleBackTop() {
				// this.topItem = 'top'
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			shortLong() {
				this.goodsList.forEach((item, index, arr) => {
					if (index % 4 === 0) {
						item.short = true
					}
					if (index % 4 === 1) {
						item.long = true
					}
					if (index % 4 === 2) {
						item.long = true
						item.marginTop = -68 + "rpx"
					}
					if (index % 4 === 3) {
						item.short = true
					}
				})
				console.log(this.goodsList, '1111111111111');
			},
			// //去大转盘
			// goGoodsDetailImg() {
			// 	uni.navigateTo({
			// 		url: '/pages/goods/goods-lucky/index'
			// 	})
			// },

			//去产品详情
			goGoodsDetail(id) {
				uni.navigateTo({
					url: `/pages/goods/goods-detail/index?id=${id}&type=1`
				})
			},
			// 搜索防抖
			searchText: util.debounce(function(index, id) {
				this.goSearch(index, id)
			}, 1000),
			//搜索
			goSearch(index, id) {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.product.getProducts({
					type: 1,
					page: 0,
					name: this.search,
					category_id: id
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						this.isActive = index
						this.goodsList = res.data.data
						this.totalElements = res.data.total
						this.pagesize = res.data.per_page
					}
				})
			},

		}

	}
</script>

<style lang="scss" scoped>
	.goods {
		height: 100%;
	}

	.tab_nav {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		overflow-x: scroll;
	}

	.msg-null {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.msg-null-text {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.scroll-y {
		// height: 100vh;
	}



	.content {
		background-color: #FFF;
		padding: 10rpx 30rpx 0rpx;

		.home-hotel-img-content {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;

			.home-hotel-img-content-item {
				width: 332rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
				border-radius: 12rpx;
				margin-bottom: 26rpx;
				overflow: hidden;

				.home-hotel-img-content-item-img {
					width: 332rpx;
					height: 332rpx;
					object-fit: cover;
					object-position: center;
				}

				.home-hotel-img-content-item-img-long {
					width: 332rpx;
					height: 400rpx;
					object-fit: cover;
					object-position: center;
				}

				.text {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					padding: 18rpx 22rpx 32rpx;

					.text-top {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.text-main {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.return-btn {
		position: fixed;
		bottom: 140rpx;
		right: 14rpx;

	}



	.home-bottom {
		background-color: #FFF;
		padding-bottom: 84rpx;
	}

	.tab_nav .navTitle {
		width: 154rpx;
		flex: none;
		height: 28rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.navTitle-item {
		width: 154rpx;
		flex: none;
		height: 28rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		color: #D9A94D;
		font-weight: bold;

		&::after {
			display: inline-block;
			content: '';
			width: 48rpx;
			height: 12rpx;
			background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
			border-radius: 6px;
			position: absolute;
			bottom: -26rpx;
			left: 51rpx;
		}
	}

	.search {
		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			color: #999999 !important;
			font-size: 28rpx !important;
		}
	}


	.goods-img {
		width: 100%;
		height: 82vw;
	}

	.main {
		position: relative;
		top: -36rpx;
		padding: 48rpx 30rpx 0;
		border-radius: 16rpx 16rpx 0px 0px;
		height: 238rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
	}
</style>