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>
			</div>
		</view>
		<!-- <view class="banner-img-box acea-row row-between-wrapper">
			<view class="img-box-l">
				<image src="https://download.cyjyyjy.com/life1.png" @click="alertMessage('功能开发中...')"></image>
			</view>
			<view class="img-box-r">
				<image src="https://download.cyjyyjy.com/life2.png" @click="alertMessage('功能开发中...')"></image>
				<image src="https://download.cyjyyjy.com/life3.png" @click="alertMessage('功能开发中...')"></image>
			</view>
		</view> -->
		<view class="category-tab-box">
			<scroll-view class="scroll-view_H" scroll-x="true" >
				<view class="category-item category-item-active">全部商品</view>
				<!-- <view class="category-item">至尊保驾</view>
				<view class="category-item">优选好房</view>
				<view class="category-item">商城福利</view>
				<view class="category-item">回头率</view> -->
			</scroll-view>
		</view>
		<view class="warter-box">
			<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" 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)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<tabbar :current="currentTabIndex" @click="tabBarClick"></tabbar>
  </view>
</template>
<script>
import { getCategory , getProducts, } from "@/api/store";
import { trim } from "@/utils";
import { mapGetters } from 'vuex'
import tabbar from "../../tabbarComponent/tabbar";
export default {
	components: {
	  tabbar
	},
  name: "GoodsClass",
  computed: mapGetters(['userInfo']),
  props: {},
  data: function() {
    return {
      category: [],
      navActive: 0,
      search: "",
      lock: false,
			currentTabIndex:3,
			flowList:[],
			isFixed: false,
			loadStatus: 'loadmore',
			page: 1,
			limit: 10,
			isLoad: true,  //是否还有更多
    };
  },
  watch: {
    "$yroute.query.id": function(n) {
      if (n) {
        this.activeCateId(n);
      }
    }
  },
	// onShow: function (options) {
		
	// },
  mounted: function() {
		this.getProducts();
  },
	onReachBottom() {
		if(this.isLoad){
			this.page = this.page+1
			this.getProducts();
		}
	},
	onPullDownRefresh(){
		wx.showNavigationBarLoading();
		this.isLoad= true
		this.page= 1
		this.clear().then(()=>{
			console.log('清除')
			this.getProducts();
		})
	},
	
  methods: {
		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);
          }
        });
      });
    },
		getProducts(){
			this.loadStatus = 'loading';
			getProducts({page:this.page,limit:this.limit}).then((res)=>{
				// console.log(res)
				if(this.page > 1){
					this.flowList = this.flowList.concat(res.data)
				} else{
					this.flowList = res.data
				}
				this.isLoad = this.limit <= res.data.length
				if(this.limit <= res.data.length){ //分页数等于返回值的length说明还有
					this.isLoad = true
				} else{
					console.log('没有了')
					this.isLoad = false
					this.loadStatus = 'nomore';
				}
				wx.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			})
			
		},
    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 {
  height: 100%;
	padding-bottom: 200rpx;
	background: #fff !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;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.index{
		height: 96rpx;
		.header{
			height: 68rpx;
			position: static;
			padding: 0;
			margin-top: 34rpx;
			.search{
				background-color: #EEEEEE;
				border-radius: 8rpx;
			}
		}
	}
}
.category-tab-box{
	width: 100%;
	height: 108rpx;
	line-height: 108rpx;
	padding-left: 30rpx;
	margin-bottom: 30rpx;
	padding-top: 190rpx;
	.scroll-view_H{
		white-space: nowrap;
		width: 100%;
		.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: 70rpx;
					height: 8rpx;
					border-radius: 6rpx;
					display: block;
					position: absolute;
					bottom: -24rpx;
					left: 0;
					background: #FF7942;
				}
			}
		}
	}
}

.warter-box{
	width: 100%;
	padding: 92rpx 0 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>