forestH5/pages/productcategory/productcategory.vue

<template>
	<view class="pages producttype-wrap">
		<view class="producttype">
			<view class="producttype-nav">
				<view v-for="(item,index) in navitem" :key="index" @click="typeclick(index)" :class="{active:index==ins}" class="producttype-nav-item">{{ item.name }}</view>
			</view>
			<view class="producttype-con">
				<view class="search">
					<view class="searchTxt">
						<uni-search-bar :placeholder="searchtxt" @confirm="search" ></uni-search-bar>
					</view>
				</view>
				<view class="search-typelist">
					<view v-for="(item,index) in typelist" :key="index" @click="publishtype(item.id,item.name)" class="search-typelist-item">
						<view class="search-typelist-item-serial">{{ index +1 }}</view>
						<view class="search-typelist-item-name">{{item.name}}</view>
					</view>					
				</view>
				<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="search-typelist">
						<view v-for="(item,index) in typelist" :key="index" @click="publishtype(item.name)" class="search-typelist-item">
							<view class="search-typelist-item-serial">{{ index +1 }}</view>
							<view class="search-typelist-item-name">{{item.name}}</view>
						</view>					
					</view>	 
				</mescroll-body> -->				
			</view>
			<!-- producttype-con end -->
		</view>
		<!-- fix-content end -->
		
	</view>
</template>

<script>	
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		components: {
			uniSearchBar,	
		
		},
		data() {
			return {
				params:{
					token:'',
				},
				searchtxt:'产品名称',
				//nav active
				ins:0,
				//菜单类别
				navitem:[],
				//热门列表
				// hotlist:[
				// ],
				//typelist
				typelist:[],
				//显示的分类标题
				nowtype:'',
				
				
				
			}
		},
		onShow() {
			let serf = this;
			//检查登录,获取token
			// let loginRes = this.checkLogin('/pages/index/index', '2');
			// if(!loginRes){return false;}
			// serf.params.token=loginRes[0];			
		},
		onLoad() {
			this.nowtype = this.navitem[this.ins];
			this.params.product = this.nowtype;
			//获取产品分类
			// ,{header: {Authorization:this.params.tokenhead+this.params.token}}
			this.$api.http.get(this.config.apiBaseurl+'/product/categoryTreeList').then(res => {
				console.log('产品分类',res);
				this.navitem = res.data.data;
				this.nowtype = this.navitem[this.ins].name;
				// this.params.productCategoryId = this.navitem[this.ins].id;
				this.searchtxt = this.navitem[this.ins].name;
				this.typelist = this.navitem[this.ins].children;
				// this.downCallback();
			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			//搜索
			search(e) {
				// console.log(e);
				uni.navigateTo({
					url:`/pages/searchresults/searchresults?keyword=${e.value}`,					
				})	
			},
			
			//左侧导航点击
			typeclick(num){
				this.ins=num;
				this.nowtype = this.navitem[num];
				this.searchtxt = this.navitem[this.ins].name;
				this.typelist = this.navitem[this.ins].children;
			},
			//产品点击
			publishtype(id,name){
				// console.log(id,name);
				uni.navigateTo({
					url:`/pages/searchresults/searchresults?productCategoryId=${id}&name=${name}`,					
				})				
			},

		}
	}
</script>

<style scoped>
	@import url("./productcategory.css");
</style>