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>
    </div>
		<view class="banner-box">
			<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">2</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="../../../static/img1.png"></image>
				<view class="userInfo">
					<view>亲爱的，下午好</view>
					<view class="name">慵懒的猫</view>
				</view>
			</view>
			<view class="userInfo-r">
				<view>
					<text>2000</text>积分
				</view>
				<view class="tips">您还有积分未使用</view>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="goods-list-item">
				<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">禅意能量</view>
					<view class="icon-l"><image src="../../../static/titleR-icon.png"></image></view>
				</view>
				<view class="goods-list acea-row">
					<view class="goods-item" @click="toGoodsDetail(1)">
						<image src="../../../static/img1.png"></image>
						<view class="goods-desc-box">
							<view class="goods-name">禅易香囊 纯手工制作提神…</view>
							<view class="price">199元+100积分</view>
							<view class="buy-count">51人购买</view>
						</view>
					</view>
					<view class="goods-item">
						<image src="../../../static/img1.png"></image>
						<view class="goods-desc-box">
							<view class="goods-name">禅易香囊 纯手工制作提神…</view>
							<view class="price">199元+100积分</view>
							<view class="buy-count">51人购买</view>
						</view>
					</view>
					<view class="goods-item">
						<image src="../../../static/img1.png"></image>
						<view class="goods-desc-box">
							<view class="goods-name">禅易香囊 纯手工制作提神…</view>
							<view class="price">199元+100积分</view>
							<view class="buy-count">51人购买</view>
						</view>
					</view>
					<view class="goods-item">
						<image src="../../../static/img1.png"></image>
						<view class="goods-desc-box">
							<view class="goods-name">禅易香囊 纯手工制作提神…</view>
							<view class="price">199元+100积分</view>
							<view class="buy-count">51人购买</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 } from "@/api/store";
import { trim } from "@/utils";

export default {
  name: "GoodsClass",
  components: {},
  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();
  },
  methods: {
    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="less" scoped>
.productSort {
  height: 100%;
	background: #F5F6F7 !important;
}
.index{
	height: 96rpx;
}
.banner-box{
	width: 100%;
	height: 386rpx;
	margin: 20rpx 0;
	background: #fff;
	.swiper-box{
		width: 100%;
		height: 100%;
	}
}
.header .search{
	border: 2rpx solid #EA533E;
	background-color: #fff;
}
.userInfo-box{
	width: 100%;
	padding: 30rpx;
	font-size: 28rpx;
	color: #222;
	background: #fff;
	.userInfo-l{
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 25px;
		}
		.userInfo{
			line-height: 40rpx;
			margin-left: 20rpx;
			.name{
				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 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: 18rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 336rpx;
				}
			}
			.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>