ctxx-xcx/ctxx_xcx/pages/shop/index.vue

<template>
	<view class="content">
		<nav-bar :navIndex="1"></nav-bar>
		<view @click="navTaps">
			<wyb-noticeBar  :text=array bgColor="#fff" color="#666" icons="1"/>
		</view>
		<view class="shop-top">
			<view class="content-s">
				<scroll-view  class="uni-swiper-tab" scroll-x>
				<view class="shop-lists" v-for="(item,index) in navList" :key="index" @click="notMoreTap(index,item.id)">
					<view class="name" :class="index==indexs?'nameStyle':''">{{item.title}}</view>
					<view class="icons" v-if="index==indexs">
						<img src="/static/index/shopIcons.png" alt="">
					</view>

				</view>
				</scroll-view>
			</view>

		</view>
		<view class="goods-content">

			<view class="goods-lists" @click="goodsTap(item.id)" v-for="(item,index) in goodsList" :key="index">
				<view class="goods-img">
					<image :src="item.cover"></image>
				</view>
				<view class="goods-name overflow2">
					{{item.name}}
				</view>
				<view class="money">
					¥<span>{{item.low_price}}</span>
				</view>
			</view> 
			<view v-if="goodsList.length>=4" style="height: 200rpx;width: 100%;"></view>
		</view>




	</view>
</template>

<script>
	import api from 'utils/api'
	import wybNoticeBar from '@/components/wyb-noticeBar/wyb-noticeBar.vue'
	import navBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components:{wybNoticeBar,navBar},
		data() {
			return {
				clickName:false,
				loadmore:true,
				sortId:'',
				pages:{
					page:1,
					pageNum:10
				},
				array:['测试11'],
				navList:["回力","PRADA","耐克","耐克1","耐克2","耐克3","耐克4","耐克5"],
				indexs:0,
				goodsList:[

					],
			}
		},
		onLoad() {
			this.getShopSort()
			this.sysConfig()
			
		},
		onShow() {
			// this.goodsList=[]
			
		},
		onReachBottom() {
			if (this.loadmore) {
				this.pages.page = this.pages.page + 1;
				this.getGoodsList(this.sortId);
			}
		},
		notMoreTap(id) {
			this.loadmore=true;
		  // means是点击后需要执行的方法
		  // clickName是一个变量的名字控制是否是第一次点击
		  if (!this.clickName) {
		    // 第一次点击
		    // means()
			
		    this.getGoodsList()
		    this.clickName = true;
		    setTimeout(()=>{
		      this.clickName = false;
		    },1000)
		  } else {
		
		  }
		},
		methods: {
			notMoreTap(index,id) {
			  // means是点击后需要执行的方法
			  // clickName是一个变量的名字控制是否是第一次点击
			  if (!this.clickName) {
			    // 第一次点击
			    // means()
				this.pages.page=1;
				this.goodsList=[]
				this.indexs=index;
				this.getShopSort(id)
				uni.showLoading({
					title:"正在加载"
				})
			    this.clickName = true;
			    setTimeout(()=>{
			      this.clickName = false;
			    },1000)
			  }
			},				
			navTaps(){
				uni.navigateTo({
					url:"/pages/shopNotice/index"
				})
			},
			sysConfig(){
				api.getSysConfig({"search_name":"notice_title"}).then((res)=>{
						if(res.code==1){
							this.array[0]=res.data.notice_title
					}
				})
			},
			goodsTap(id){
				uni.navigateTo({
					url:"/pages/goodsDetail/index?id="+id
				})
			},			
			
			//获取商品分类 
			getShopSort(id){
				api.getGoodsCate().then((res)=>{
					if(res.code==1){					
						this.navList=res.data.list 
						this.getGoodsList(id?id:res.data.list[0].id)
						this.sortId=res.data.list[0].id
					}
				})
			},
			
			//根据分类ID获取商品列表
			getGoodsList(id){
				
				let data={
					page:this.pages.page,
					page_num:this.pages.pageNum,
					first_classify:id,
					sort_type: "1",
				} 
				api.getGoodsList(data).then((res)=>{
					if(res.code==1){	 
						uni.hideLoading() 
						let goodsList=res.data.list 
						this.goodsList = [...this.goodsList, ...goodsList];
						console.error(res.data.list)
						if (res.data.list=='') {
							this.loadmore = false;
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.class-s{
		padding-bottom: 200rpx;
	}
	.uni-swiper-tab{
		white-space: nowrap;
	}
	.content{
		.goods-content{
			background-color: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx;
			margin-bottom: 200rpx;
			.goods-lists:nth-child(even){
				margin-left: 25rpx;
			}
			.goods-lists{
				width: 332rpx;
				padding-bottom: 20rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 20rpx 0px rgba(142,142,142,0.13);
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.goods-name{
					width: 300rpx;
					color: #222;
					font-size: 24rpx;
					margin-left: 12rpx;
				}
				.money{
					color: #222;
					font-size: 20rpx;
					margin: 10rpx 0 0 10rpx;
					span{
						font-weight: 600;
						font-size: 32rpx;
					}
				}
				.goods-img{
					image{
						width: 330rpx;
						height: 330rpx;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
			}
		}
		.shop-top{
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(231,231,231,0.41);
			margin: 25rpx 0;
			line-height: 80rpx;
			display: flex;
			.content-s{
				display: flex;
				width: 750rpx;
				overflow-x: auto;
				margin-left: 30rpx;
				margin-right: 30rpx;
				.shop-lists{
					position: relative;
					margin-left: 25rpx;
					// width: 150rpx;
					display: inline-block;
					padding: 0;
					.name{
						color: #999;
						font-size: 28rpx;
					}

					.nameStyle{
						color: #222;
						font-size: 28rpx;
						font-weight: 600;
					}
					.icons{
						margin-top: 20rpx;
						text-align: center;
						position: absolute;
						top: 0rpx;
						left: 50%;
						margin-left:-15rpx;

						img{
							width: 20rpx;
							height: 8rpx;
						}
					}
				}
			}


		}
	}
</style>