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">
			<view id="top"></view>
			<!-- 背景图 -->
			<view class="goods-img">
				<image v-if="bannerImg" style="width: 100%; height: 450rpx;" :src="bannerImg" mode=""></image>
			</view>
			<!-- 内容 -->
			<view class="main">
				<view class="search">
					<u-input placeholder="搜索" border='none'  v-model="search" @input="searchText">
						<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="content">

				<view class="home-hotel-img-content">

					<view @click="goGoodsDetail(item.id)" class="home-hotel-img-content-item" v-for="(item,index) in goodsList" :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>
						</view>
					</view>

				</view>
				<!-- 触底 -->
				<view class="home-bottom">
					<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
				</view>
				<!-- <text @click="goGoodsDetail">商品</text>
			<text @click="goGoodsDetailImg">转盘</text> -->
			</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>
</template>

<script>
	import util from '@/utils/util.js'
	export default {

		data() {
			return {
				//搜索
				search:'',
				//背景图
				bannerImg:'',
				// 返回的按钮是否显示
				isShow: false,
				topItem: '', //返回顶部的标记点
				goodsList: [{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					}],
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//分段器
				items: [],
				//激活指定table菜单
				isActive: 0,
				//第三方产品分类categoryId
				categoryId:'',
			};
		},
		onLoad() {
			this.shortLong()
			this.getCategoryList()
			
			//获取产品活动列表背景图
			this.bannerImg = this.$store.getters.allset.activity_page.value.cover
			
		},
		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.isActive = index
				this.getGoodsList(id)
			},
			
			//产品列表type:1,第三方购买产品
			getGoodsList(category_id) {
				this.$api.product.getProducts({
					type: 1,
					page: 0,
					keyword:'',
					category_id:`${category_id}`
				}).then(res => {
					this.goodsList = res.data.data
					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'
			},
			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);
			},
			// //去大转盘
			// 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(){
				if(this.search !=''){
					this.goSearch()
				}else{
					this.getGoodsList(this.categoryId)
				}
			},1000),
			//搜索
			goSearch(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.product.getProducts({
					type: 1,
					page: 0,
					name:this.search,
					category_id:''
				}).then(res=>{
					if(res.code==0){
						uni.hideLoading()
						this.goodsList=res.data.data
					}
				})
			},
			
		}

	}
</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;

	}


	.scroll-y {
		height: 100vh;
	}



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

		.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;

				.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: -32rpx;
			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: 450rpx;
	}

	.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>