chanyishenghuo-uniapp/pages/shop/GoodsClass/index.vue

<template>
  <view class="productSort">
    <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 class="cart-btn-box" @click="goShoppingCart()">
					<image src="../../../static/car-icon.png"></image>
				</view>
      </view>
    </div>
		<view class="banner-box">
			<swiper class="swiper-box" :indicator-dots="true" indicator-color="#868884" indicator-active-color="#fff"  :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in category" :key="item.id">
					<view class="swiper-item">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="userInfo-box acea-row row-between row-middle">
			<view class="userInfo-l acea-row row-center-wrapper">
				<image :src="userInfo.avatar || '../../../static/default-headerimg.png'"></image>
				<view class="userInfo">
					<view>亲爱的，{{getTime()}}</view>
					<view class="name line1">{{userInfo.nickname || '禅易家人'}}</view>
				</view>
			</view>
			<view class="userInfo-r">
				<view>
					<text>{{userInfo.integral || 0}}</text>积分
				</view>
				<view class="tips">您还有{{userInfo.integral || 0}}积分未使用</view>
			</view>
		</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="category-img"><image :src="item.pic" mode="aspectFill"></image></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 class="aside">
      <view
        class="item acea-row row-center-wrapper"
        :class="categoryDivindex === navActive ? 'on' : ''"
        v-for="(item, categoryDivindex) in category"
        :key="categoryDivindex"
        @click="asideTap(categoryDivindex)"
      >
        <text>{{ item.cateName }}</text>
      </view>
    </view>
    <view class="conter">
      <view v-for="(item, eq) in category" :key="eq">
        <view class="listw" v-if="eq === navActive">
          <view class="title acea-row row-center-wrapper" ref="title">
            <view class="line"></view>
            <view class="name">{{ item.cateName }}</view>
            <view class="line"></view>
          </view>
          <view class="list acea-row">
            <view
              class="item acea-row row-column row-middle"
              v-for="(child, categoryIndex) in item.children"
              :key="categoryIndex"
              @click="goGoodsList(child)"
            >
              <view class="picture">
                <image :src="child.pic" />
              </view>
              <view class="name line1">{{ child.cateName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <!-- <view style="height:100rpx;"></view> -->
  </view>
</template>
<script>
import { getCategory , getProducts } from "@/api/store";
import { trim } from "@/utils";
import { mapGetters } from 'vuex'
export default {
  name: "GoodsClass",
  computed: mapGetters(['userInfo']),
  props: {},
  data: function() {
    return {
      category: [],
      navActive: 0,
      search: "",
      lock: false
    };
  },
  watch: {
    "$yroute.query.id": function(n) {
      if (n) {
        this.activeCateId(n);
      }
    }
  },
  mounted: function() {
    // document.addEventListener("scroll", this.onScroll, false);
    this.loadCategoryData();
  },
	onPullDownRefresh() {
		this.loadCategoryData();
	},
  methods: {
		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;
				uni.stopPullDownRefresh()
        // 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="less" scoped>
.productSort {
  height: 100%;
	background: #fff !important;
	position: relative;
	.cart-btn-box{
		width: 40rpx;
		height: 40rpx;
		margin-left: 12rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}

.index{
	height: 96rpx;
}
.banner-box{
	width: 100%;
	height: 272rpx;
	margin: 40rpx 0;
	background: #fff;
	padding: 0 40rpx;
	.swiper-box{
		width: 100%;
		height: 100%;
		.swiper-item{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
		
	}
}
.header .search{
	border: none;
	background: #FAFAFC;
}
.userInfo-box{
	width: 100%;
	padding: 30rpx;
	font-size: 28rpx;
	color: #222;
	background: #fff;
	margin: 20rpx 0;
	.userInfo-l{
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 25px;
		}
		.userInfo{
			line-height: 40rpx;
			margin-left: 20rpx;
			.name{
				width: 340rpx;
				font-size: 24rpx;
				color: #999;
				line-height: 34rpx;
			}
		}
	}
	.userInfo-r{
		font-size: 36rpx;
		text{
			color: #F99C10;
			font-size: 36rpx;
			display: inline-block;
			margin-right: 12rpx;
		}
		.tips{
			font-size: 24rpx;
			color: #999;
			line-height: 34rpx;
		}
	}
}
.goods-list-box{
	width: 100%;
	padding: 0 40rpx;
	.goods-list-item{
		width: 100%;
		.category-img{
			width: 100%;
			height: 182rpx;
			margin: 36rpx 0;
			image{
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
		.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: 206rpx;
				padding: 10rpx 12rpx 0rpx 12rpx;
				background: #F9F9FB;
				margin-bottom: 30rpx;
				margin-right: 26rpx;
				border-radius: 12rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 172rpx;
					border-radius: 8rpx;
				}
				&:nth-child(3n){
					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: 16rpx;
				}
			}
		}
	}
}
</style>