1hjz-h5/src/view/goods-classify.vue

<template>
    <div class="container goods">
        <div class="top f-bb-gray">
	        <img src="../assets/images/icon/arrow-left.png" v-on:click="goBack"/>商品分类
	    </div>
        <div class="content">
        	<div class="left" ref="menuWrapper">
        		<ul>
        			<li v-if="goodsList.length != 0" :class="{'on': (currentIndex < 0 ? 0 : currentIndex) === index}" v-for="(item,index) in goodsList" :key="index" @click="selectMenu(index,$event)">
        				<a href="javascript:void(0)">
        					{{item.combinationName}}
        					<img src="../assets/images/icon/hot.png" class="i-hot" v-if="item.label == '2'"  />
        					<img src="../assets/images/icon/new.png" class="i-new" v-if="item.label == '1'" />
        				</a>
        			</li>
        		</ul>
	        </div>
	        <div class="right" ref="foodWrapper">
		        <div>
	        		<div v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" class="food-list-hook">
		        		<p class="title">{{item.combinationName}}</p>
		        		<div class="f-relative f-all-1px" v-for="(goods,k) in item.goodsList" :key="k">
			        		<div class="item f-flex">
			        			<a :href="'/mall/web/vgoods/detail/' + goods.goodsNo">
									<img :src=" imghost + goods.bannerImgs" class="thumb"/>
								</a>
			        			 <div class="info f-flex">
			        			 	<div>
				        			 	<p class="title f-ellipsis-1">{{goods.name}}</p>
				        			 	<p class="rule f-ellipsis-1">{{goods.shortDesc}}</p>
				        			 	<div class="full" v-if="toJSON(goods.smallLabel)"><i>{{toJSON(goods.smallLabel)}}</i></div>
				        			</div> 	
			        			 	<div class="f-flex">
			        			 		<p class="price">
			        			 			<span><span class="money">￥</span>{{goods.price/100}}</span>
			        			 		</p>
			        			 		<p class="cost" v-if="goods.originalPrice">￥{{goods.originalPrice/100}}</p>
			        			 	</div>
			        			 </div>
			        		</div>
		        		</div>
	        		</div>
		        </div>
	        </div>
        </div>
        <!-- Loading -->
        <loading :show="showLoading" text="loading"></loading>
    </div>
</template>
<script>
	import goodsApi from "../models/goods-model.js";
	import { Alert,Toast,Popup,Loading } from "vux";
	import BScroll from 'better-scroll';
	export default {
	    data() {
	        return {
	        	no: 0, 
	        	id: 0,
	        	c_no: 0,
	        	showLoading: false,
	        	goodsList: [],
	        	imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
	        	listHeight: [], //存储区块的高度
	        	scrollY: {},
	        	clickTrue: false,
	        	currentNum: 0
	        }
	    },
	    computed: {     
	    	currentIndex () {
				const { scrollY, listHeight, clickTrue, currentNum } = this
				let index = listHeight.findIndex((height, index) => {
					return scrollY >= listHeight[index] && scrollY < listHeight[index + 1]
				})
				if (scrollY > listHeight[index] + 50) {
					index++
				}
				if(listHeight[listHeight.length-1] - this.$refs.foodWrapper.clientHeight <= scrollY ) {
					if(clickTrue) {
						return currentNum
					} else {
						return (listHeight.length-1)
					}
				}
				return index
			}

			/*currentIndex() {
				for (let i = 0; i < this.listHeight.length; i++){
					let height = this.listHeight[i]
					let height2 = this.listHeight[i + 1]
					//当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
					//>=height,是因为一开始this.scrollY=0,height=0
					if( !height2 || (this.scrollY >= height && this.scrollY < height2)) {
						return i
					}
					if(this.listHeight[this.listHeight.length-1] - this.$refs.foodWrapper.clientHeight <= this.scrollY ) {
						if(this.clickTrue) {
							return this.currentNum
						} else {
							return (this.listHeight.length-1)
						}
					}
				}
				return 0
			}*/
	    },
	    components: {
			Toast,
			Popup,
			Loading
		},
        methods:{     
            //返回上一页
            goBack() {
                // history.go(-1)
                this.$router.push({
					name: "首页"
				});
            },
            // 取到路由带过来的参数 
            getParams () {
                this.no = this.$route.params.no
                this.id = this.$route.params.id
                this.c_no = this.$route.params.c_no  
                this.getGoodsList() 
            },
            //加载商品列表
		   	getGoodsList (){
		   		let that = this
		   		that.showLoading = true
		   		var params = {
		   			"merchantNo": this.no,
		   			"districtId": this.id
		   		}
		   		goodsApi.getGoods(params).then(res => {
		   			that.showLoading = false
					if ( res.code == 0 ){
						this.goodsList = res.data || []
						let list = []
						for (var i = 0; i < this.goodsList.length; i++) {
							if (this.goodsList[i].goodsList.length != 0) {
								list.push(this.goodsList[i])
							}
						}
						this.goodsList = list
						this.$nextTick(function(){
				            //调用scroll函数，实现滚动
					         this._initScroll()
					        //拿到数据以后计算高度
					        this._calculateHeight();
					        // 自动选中
					        this.autoSelect(list, this.c_no)
			            })
					} else {
						this.$vux.toast.text(res.msg,"middle");
					}
				});
		   	},
		   	toJSON (data){
		   		if (data){
		   			return JSON.parse(data)[0].labelText
		   		}else {
		   			return ;
		   		}
		   	},
		   	_initScroll() {        
			   	this.menuScroll = new BScroll(this.$refs.menuWrapper,{          
			   		click:true    //允许better-scroll列表上的点击事件        
			   	});        
			   	this.foodsScroll = new BScroll(this.$refs.foodWrapper,{ 
			   		click:true,    //允许better-scroll列表上的点击事件         
			   		probeType : 3   //让better-scroll监听scroll事件        
			   	});        
			   	this.foodsScroll.on('scroll', (pos) => {          
			   		this.scrollY = Math.abs(Math.round(pos.y));        
			   	})      
		   	},
			 _calculateHeight() {     
				//food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块    
        		let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook"); 
				let height = 0;    
				this.listHeight.push(height); 
				//listHeight是一个递增的区间数组，是每个专区高度的累加    
				for (let i = 0; i < foodList.length; i++) {      
					let item = foodList[i];      
					height += item.clientHeight;      
					this.listHeight.push(height);    
				}
			},
			/*selectMenu(index, event) {        
				if(event && !event._constructed) {          
					return ;        
				}        
				let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");        
				let el = foodList[index];        
				this.foodsScroll.scrollToElement(el,300)
			},*/
			selectMenu(index, event){
				this.clickTrue = true //触发过事件之后，clickTrue的值变为true
				this.currentNum = index

				//在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
				// 浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
				if (event && !event._constructed){
					return
				} else {
					let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");      
					let el = foodList[index];        
					this.foodsScroll.scrollToElement(el,300)
				}
			},
			autoSelect(list, no) {
				list.forEach((v, i, a) => {
					if(v.combinationNo === no) {
                        this.selectMenu(i)
                    }
			　　})
			},
			ShareWenXin (){
		   		var merchantNo = this.no
				this.wxShare({"merchantNo":merchantNo,"source":0,"url":encodeURIComponent(location.href)})
		   	}
        },       
        mounted() {	
            this.getParams()
	      	this.ShareWenXin()
        },
	}
</script>
<style lang="scss" scoped>
	.goods {
		background-color: #fff;
		.top {
			position: relative;
			width: 100%;
			height: 0.9rem;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.36rem;
			color: #249e6c;
			img {
				position: absolute;
				width: 0.2rem;
				height: 0.35rem;
				top: 50%;
				left: 0.4rem;
				margin-top: -0.17rem;
			}
		}
		.content {
			width: 100%;
			display: flex;
			height: calc(100vh - 0.9rem);
			-webkit-overflow-scrolling: touch;
			.left {
				width: 1.74rem;
				background-color: #F3F3F3;
			    overflow-y: auto;
				overflow-x: hidden;
			    -webkit-overflow-scrolling: touch;
				ul {
					li {
						width: 1.74rem;
						height: 1.1rem;
						line-height: 1.1rem;
						text-align: center;
						font-size: 0.28rem;
						a {
							color: #888;
							position: relative;
							img {
								position: absolute;
								font-size: 10px;
								top: -0.1rem;
								right: -0.2rem;
							}
							.i-hot {
								width: 0.24rem;
								height: 0.1rem;
							}
							.i-new {
								width: 0.24rem;
								height: 0.08rem;
							}	
						}
					}
					.on {
						background-color: #fff;
						color: #333;
					}
				}
			}
			.right {
			    overflow-y: auto;
    			overflow-x: hidden;
			    -webkit-overflow-scrolling: touch;
				padding: 0.2rem 0.22rem 0;
				width: calc(100% - 1.74rem);
				box-sizing: border-box;
				.title {
					padding: 0.12rem 0 0.12rem;
					font-size: 0.24rem;
					color: #999;
				}
				.item {
					position: relative;
					padding: 0.16rem;
					z-index: 1;
					// height: 1.87rem;
					box-sizing: border-box;
					margin-bottom: 0.2rem;
					.thumb {
						width: 1.54rem;
						height: 1.54rem;
					}
					.info {
						margin-left: 0.15rem;
						flex: 1;
						height: 100%;
						font-size: 0;
						flex-direction: column;
					    align-items: flex-start;
					    justify-content: space-between;
						.title {
							font-size: 0.3rem;
							color: #333;
							padding: 0;
						}
						.rule {
							font-size: 0.22rem;
							color: #999;
							padding: 0.1rem 0 0;
							// line-height: 1;
						}
						.full {
							height: 0.3rem;
							font-size:0.2rem;
							color:rgba(244,163,83,1);
							margin: 0.16rem 0 0.1rem;
							i {
								background:rgba(255,242,229,1);
								padding: 1px 3px;
							}
						}
						.price {
							.money {
								font-size: 0.22rem;
							}
							color: #249E6C;
							font-size: 0.34rem;
						}
						.cost {
							color: #BBBBBB;
							font-size: 0.24rem;
							margin-left: 0.18rem;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>