zsw-farm-bxg/pages/shop/GoodsClass/index.vue

<template>
  <view class="productSort">
		<view class="header acea-row row-center-wrapper">
			<cu-custom :isBack="true">
			  <block slot="content">
					<view @click="goGoodSearch()" class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 54rpx);'">
						<text class="iconfont icon-xiazai5"></text>
						
						<!-- <image src="../../../static/images/scan.png" /> -->
					</view>
			  </block>
			</cu-custom>
		</view>
		<view :style="[{height:CustomBar + 'px'}]"></view>
		
		<view class="category-box">
			<swiper class="category" @change="swiperChange" :style="categoryList[0].length <= 5?'height: 190rpx;':''">
				<swiper-item v-for="(category, index) in categoryList" :key="index" class="category-item ">
					<view class="acea-row">
						<view class="min-item" v-for="item in category" :key="item.id" @click="goGoodsList(item)">
							<view class="img-box">
								<image class="img" :src="item.pic" mode="aspectFill"></image>
							</view>
							<view class="title">{{item.cateName}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="swiper-dots acea-row row-center">
				<view :class="'dot ' + (swiperCurrent === index ? 'dot-active' : '')" v-for="(dot, index) in categoryList.length" :key="index"></view>
			</view>
		</view>
		
		<view class="list-box" :style="categoryList[0].length <= 5?addBottom?heightList[0]:heightList[1]:addBottom?heightList[2]:heightList[3]">
			<view class="nav-box acea-row row-around">
				<view class="item" @click="changeNav(0)">
					<view :class="'title ' + (stock === 0 && price === 0? 'active' : '')">综合</view>
				</view>
				<view class="item" @click="changeNav(2)">
					<view :class="'title ' + (stock === 2 ? 'active' : '')">销量</view>
				</view>
				<view class="item" @click="changeNav(1)">
					<view :class="'title acea-row row-middle ' + (stock === 0 && price ? 'active' : '')">
						<view class="">价格</view>
						<view :class="'jiantou ' + (price?price === 1?'up':'down':'')"></view>
					</view>
				</view>
			</view>
			
			<PromotionGood :benefit="goodsList" />
		</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> -->
		<Tabbar :pagePath="pagePath"></Tabbar>
  </view>
</template>
<script>
import { 
	getCategory,
	getProducts,
} from "@/api/store";
// import { trim } from "@/utils";
import Tabbar from '@/components/Tabbar';
import PromotionGood from '@/components/PromotionGood'

export default {
  name: "GoodsClass",
  components: {
		Tabbar,
		PromotionGood
	},
  props: {},
  data: function() {
    return {
			CustomBar: this.CustomBar,
			CustomBarLeft: this.CustomBarLeft,
			addBottom: this.addBottom,
			pagePath: '',
			swiperCurrent: 0,
			categoryList: [],
      // category: [],
			heightList: [
				'min-height: calc(100vh - 492rpx);',
				'min-height: calc(100vh - 452rpx);',
				'min-height: calc(100vh - 682rpx);',
				'min-height: calc(100vh - 642rpx);'
			],
      price: 0,
			stock: 0,
			where: {
				page: 1,
				limit: 10,
				keyword: '',
				// sid: 0,
				news: 0,
				priceOrder: '',
				salesOrder: '',
				isIntegral: 0
			},
			goodsList: [],
			loaded: false,
      // search: "",
      // lock: false,
		};
  },
  watch: {
    // "$yroute.query.id": function(n) {
    //   if (n) {
    //     this.activeCateId(n);
    //   }
    // }
  },
	onLoad() {
		uni.hideTabBar();
		let pages = getCurrentPages();
		this.pagePath = '/' + pages[pages.length - 1].route;
	},
	onShow() {
		
	},
  mounted: function() {
    this.loadCategoryData();
  },
	onReachBottom() {
	  if(this.loaded) return
	  this.getGoodsList();
	},
  methods: {
    goGoodSearch() {
      this.$yrouter.push("/pages/shop/GoodSearch/index");
    },
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
    goGoodsList(child) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsList/index",
        query: { id: child.id, title: child.cateName }
      });
    },
    // 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;
				let arr = [],
						minArr = [];
				res.data.forEach(val => {
					if (minArr.length === 10) {
						minArr = [];
					}
					if (minArr.length === 0) {
						arr.push(minArr);
					}
					minArr.push(val);
				})
				this.categoryList = arr;
        // this.$nextTick(() => {
        //   if (this.$yroute.query.id) {
        //     this.activeCateId(this.$yroute.query.id);
        //   }
        // });
      });
			this.getGoodsList();
    },
		changeNav(i) {
			switch (i) {
			  case 0:
					if(this.stock !== 0 || this.price !== 0) {
						this.price = 0;
						this.stock = 0;
					}
			    break
			  case 1:
			    if (this.price === 0) this.price = 1
			    else if (this.price === 1) this.price = 2
			    else if (this.price === 2) this.price = 1
			    this.stock = 0
			    break
			  case 2:
			    if (this.stock === 0) this.stock = 2
			    this.price = 0
			    break
			  default:
			    break
			}
			this.goodsList = [];
			this.where.page = 1;
			this.loaded = false;
			this.getGoodsList();
		},
		getGoodsList() {
			this.setWhere();
			getProducts(this.where).then(res => {
				this.goodsList.push.apply(this.goodsList, res.data);
				this.loaded = res.data.length < this.where.limit;
				this.where.page++;
			})
		},
		//设置where条件
		setWhere() {
		  if (this.price === 0) {
		    this.where.priceOrder = ''
		  } else if (this.price === 1) {
		    this.where.priceOrder = 'asc'
		  } else if (this.price === 2) {
		    this.where.priceOrder = 'desc'
		  }
		  if (this.stock === 0) {
		    this.where.salesOrder = ''
		  } else if (this.stock === 1) {
		    this.where.salesOrder = 'asc'
		  } else if (this.stock === 2) {
		    this.where.salesOrder = 'desc'
		  }
		},
    // 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;
    // }
  }
}
</script>
<style lang="less" scoped>
/* .productSort {
  height: 100%;
} */

	.header {
		padding-bottom: 12rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background: #F1F1F1;
		width: 750rpx;
		.search {
			height: 62rpx;
			background: #E3E3E3;
			border-radius: 16rpx;
			padding: 0rpx 16rpx;
			margin-left: 26rpx;
			margin-right: 22rpx;
			.iconfont {
				font-size: 30rpx;
				color: #3A3A3C;
				font-weight: 600;
			}
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.category-box {
		padding: 20rpx 20rpx 32rpx;
		swiper {
			width: 710rpx;
			height: 380rpx;
			swiper-item {
				padding: 0rpx 12rpx;
				.min-item {
					margin-bottom: 20rpx;
					margin-right: 18rpx;
					.img-box {
						background: #FFFFFF;
						width: 124rpx;
						height: 124rpx;
						box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
						border-radius: 16rpx;
						.img {
							width: 124rpx;
							height: 124rpx;
							border-radius: 16rpx;
						}
					}
					.title {
						padding-top: 16rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #3A3A3C;
						line-height: 30rpx;
						text-align: center;
					}
				}
				.min-item:nth-child(5n) {
					margin-right: 0rpx;
				}
			}
		}
		
		.swiper-dots {
			.dot {
				width: 92rpx;
				height: 6rpx;
				background: #2DB5AE;
				margin: 0rpx 4rpx;
				opacity: 0.24;
			}
			.dot-active {
				opacity: 1;
				transition: opacity 2s cubic-bezier(.18,.89,.17,.88);
			}
		}
	}
	
	.list-box {
		width: 100vw;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		.nav-box {
			width: 100vw;
			height: 104rpx;
			padding: 32rpx 32rpx 26rpx;
			.item {
				min-width: 66rpx;
				text-align: center;
				position: relative;
				.title {
					font-size: 26rpx;
					font-family: SourceHanSansSCVF;
					font-weight: 400;
					color: #999999;
					line-height: 38rpx;
					.jiantou {
						width: 0rpx;
						height: 0rpx;
						border-top: 0rpx solid transparent;
						border-left: 6rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 6rpx solid transparent;
						margin-left: 4rpx;
					}
					.up {
						border-top: 0rpx solid transparent;
						border-bottom: 10rpx solid #999999;
					}
					.down {
						border-top: 10rpx solid #999999;
						border-bottom: 0rpx solid transparent;
					}
				}
				.active {
					color: #3A3A3C;
					font-weight: 500;
				}
				.title::after {
					display: block;
					content: '';
					width: 100%;
					height: 4rpx;
					background: #2DB5AE;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0;
					transform:scaleX(0);
					transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease;
				}
				.active::after {
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}
	}
</style>