cnic_buyerApp/pages/category/index.vue

<template>
	<view class="body">
		
		<view class="search">
			<view class="status_bar"></view>
			<view class="search1">
				<navigator url="/pages/index/search">
					<view class="navigation_seach">
							<image src="../../static/img/seach.png" mode=""></image>
							<text>search</text>
					</view>
				</navigator>
				<view class="navigation_title_right">
					<image src="../../static/img/like.png" mode=""></image>
					<uni-badge :text="5" type="error" absolute="rightTop">
						<image src="../../static/img/shop_cart.png" mode=""></image>
					</uni-badge>  
				</view>
			</view>
			
		</view>
		<view class="category">
			<view class="category_left">
				<view class="category_left_item" :class="categoryIndex==item.cat_id?'categoryActive':''"  v-for="(item,index) in categoryList"  :key="item.cat_id" 
				@click="changeCategory(item.cat_id)">
					{{item.cat_name}}
				</view>
			</view>
			
			<view class="good_body">
				<view class="good_title">PICKS FOR YOU</view>
				<view class="good_content" v-for="(item,index) in categoryList" :key="item.cat_id" v-show="categoryIndex==item.cat_id">
					<view class="good_item" v-for="(item1,index1) in item.subcategories" :key="item1.cat_id" @click="goPets(item1.cat_id)">
						<img :src="item1.first_goods_thumb" alt="" class="good_item_img">
						<text>{{item1.cat_name}}</text>
					</view>
				</view>
				<!-- <view class="good_title">YOU MAY ALSO LIKE</view>
				<view class="good_content">
					<view class="good_item" v-for="(item,index) in 5" :key="index">
						<view class="good_item_img"></view>
						<text>Women Drese</text>
					</view>
				</view> -->
			</view>
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest} from '../../api/index.js'
	export default {
		data() {
			return {
				categoryIndex:0,
				categoryList:['CHOICE','WOMEN','MEN','KIDS','PETS','SWIMWEAR','LINGERUE&LOUNGEAR','DENIM&JEANS','ACTIVEWEAR','BEAUTY','SHOES']
			}
		},
		methods:{
			changeCategory(i){
				this.categoryIndex=i
			},
			goPets(id){
				// uni.navigateTo({
				// 	url:"productList?cat_id="+id+'&type=0'
				// })
				uni.navigateTo({
					url:"pets?cat_id="+id+'&type=0'
				})
			},
			getList(){
				let data={_action:'getcategorytree'}
				defaultRequest(data).then(res=>{
					console.info(res)
					if(res.error==0){
						this.categoryList=res.data
						this.categoryIndex=res.data[0].cat_id
					}
				})
			}
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	
	page{
		padding-top: 200rpx;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.body{
		height: 100%;
	}
	.search{
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 33.33rpx 26.67rpx;
		
		position: fixed;
		top: 0;
		z-index: 99;
		border-bottom: 1px solid #F5F6FA;
		
		.search1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.navigation_seach{
				width: 546.67rpx;
				background-color: #F5F6FA;
				border-radius: 6.67rpx;
				height: 66.67rpx;
				display: flex;
				align-items: center;
				color: #8F9094;
				font-size: 26.67rpx;
				padding-left: 22rpx;
				box-sizing: border-box;
				
				image{
					width: 29.33rpx;
					height: 29.33rpx;
					margin-right: 22rpx;
				}
			}
			.navigation_title_right{
				display: flex;
				align-items: center;
				
				image{
					width: 44rpx;
					height: 44rpx;
				}
				>image:first-child{
					margin-right: 32.67rpx;
				}
			}
			
		}
		
	}
	.category{
		height: 100%;
		display: flex;
		
		.category_left{
			height: 100%;
			background-color: #F5F6FA;
			width: 197.33rpx;
			.category_left_item{
				width: 100%;
				padding: 0 18rpx;
				height: 96rpx;
				font-size: 26.67rpx;
				font-weight: 600;	
				box-sizing: border-box;
				font-family: PingFang SC;
				
				display: flex;
				align-items: center;
				word-wrap: break-word;
				word-break: break-all;
			}
			.categoryActive{
				background-color: black;
				color: white;
			}
		}
		.good_body{
			margin-left: 36rpx;
			width: 552.67rpx;
			// padding-top: 39.33rpx;
			
			.good_title{
				height: 96rpx;
				line-height: 96rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
			.good_content{
				display: flex;
				flex-wrap: wrap;
				
				.good_item{
					font-size: 22.67rpx;
					text-align: center;
					margin-right: 25.33rpx;
					margin-bottom: 51.33rpx;
					
					.good_item_img{
						display: block;
						background-color: #999999;
						width: 146.67rpx;
						height: 146.67rpx;
						margin-bottom: 22rpx;
						
					}
				}
				.good_item:nth-child(3n+3){
					margin-right: 0;
				}
			}
		}
	}
</style>