yunshengtai-uniapp/pages/life/index.vue

<template>
  <view class="productSort">
		<!-- <view class="cart-btn-box" @click="goShoppingCart()">
			<text class="iconfont icon-gouwuche1"></text>
		</view> -->
		<view class="page-top-box">
			<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"></image>
			</view>
			<view class="img-box-r">
				<image src="https://download.cyjyyjy.com/life2.png"></image>
				<image src="https://download.cyjyyjy.com/life3.png"></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">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>
						<view class="goodsinfo-box">
							<view class="title line2"> {{item.title}} </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">
						<image class="warter-img" :src="item.image" :index="index" mode="widthFix"></image>			<view class="goodsinfo-box">
							<view class="title line2"> {{item.title}} </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>
			</u-waterfall>
					<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
		</view>
		<!-- <view class="goods-list-box">
			<view class="goods-list-item" v-for="item in category" :key="item.id" v-if="item.children[0].products.length>0">
				<view class="goods-type-box acea-row row-center row-middle">
					<view class="icon-l"><image src="../../../static/titleL-icon.png"></image></view>
					<view class="t-word">{{item.children[0].cateName}}</view>
					<view class="icon-l"><image src="../../../static/titleR-icon.png"></image></view>
				</view>
				<view class="goods-list acea-row">
					<view class="goods-item" v-for="goods in item.children[0].products" :key="goods.id" @click="toGoodsDetail(goods.id)">
						<image :src="goods.image"></image>
						<view class="goods-desc-box">
							<view class="goods-name line1">{{goods.storeName}}</view>
							<view class="price">{{goods.price}}元<text v-if="goods.giveIntegral > 0">+{{goods.giveIntegral}}积分</text></view>
							<view class="buy-count">已出售{{goods.sales}}{{goods.unitName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
    <!-- <view style="height:100rpx;"></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:[
					{
						price: 35,
						title: 'Porsche Panamera 4S E-Hybrid 行政加长版',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '神仙阁 龙虾海鲜自助',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
				]
    };
  },
  watch: {
    "$yroute.query.id": function(n) {
      if (n) {
        this.activeCateId(n);
      }
    }
  },
	onLoad: function (options) {
	  let pages = getCurrentPages();
	  this.pagePath = '/' + pages[pages.length - 1].route;
	},
  mounted: function() {
    this.loadCategoryData();
  },
  methods: {
		tabBarClick(index){
			this.currentTabIndex = index
		},
		getTime() {
			let hour = new Date().getHours();
			if(0<hour&&hour<12) {
				return '早上好';
			} else if(12<=hour&&hour<13) {
				return '中午好';
			} else if(13<=hour&&hour<18) {
				return '下午好';
			} else {
				return '晚上好'
			}
		},
    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);
          }
        });
      });
    },
    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;
    }
  },
  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{
	background: #fff;
	padding: 0 30rpx 40rpx;
	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;
	.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: 0 40rpx 190rpx;
	.u-waterfall {
		width: 100%;
		justify-content: space-between;
		.u-column {
			width: 330rpx !important;
			.warter {
				width: 330rpx;
				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: 330rpx;
					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;
					}
				}
				
			}
		}
	}
}
.banner-img-box{
	width: 100%;
	padding: 32rpx 40rpx;
	.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>