【备战春招】第13天 分类页分类菜单组件开发一

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 4-2 分类页分类菜单组件开发一
课程讲师： CRMEB

课程内容：
1、新增分类页面goods_cate.vue

<template>
	<view class="category">
		<view class="category-container">
			<Search></Search>
			<CategoryArea></CategoryArea>
		</view>
	</view>
</template>

<script>
	import {categoryData as categoryDataApi} from '@/api/category.js'
	import Search from 'components/Search.vue'
	import CategoryArea from 'components/CategoryArea.vue'
	export default{
		components:{
			Search,
			CategoryArea
		},
		data(){
			return {
				categoryData:[]
			}
		},
		onLoad(){
			this.getCategoryList()
		},
		methods:{
			async getCategoryList(){
				const {status,data,msg} = await categoryDataApi()
				if(status === this.API_STATUS_CODE.SUCCESS){
					this.categoryData = data
				}else{
					uni.showToast({
						icon:'none',
						title:'分类数据获取失败，请刷新重试',
						duration:3000
					})
				}
			}
		}
	}
</script>

<style>
</style>

2、使用vant的搜索插件

<template>
	<view class="search">
		<view class="search-container">
			<van-search
			  value="{{ keywords }}"
			  input-align="center"
			  placeholder="请输入搜索关键词"
			/>
		</view>
	</view>
</template>

<script>
	import VantSearch from '@/wxcomponents/vant/search/index'
	export default {
		props:{
			
		},
		components:{
			VantSearch
		},
		data(){
			return{
				keywords
			}
		}
	}
</script>

<style>
</style>

3、定义分类接口文档

import http from '@/utils/http'

export const categoryData = () =>{
	const url = 'api/category'
	return http.get(url)
}

4、新增分类左侧栏目

<template>
	<view class="category-area">
		<view class="category-area-container">
			<view class="first-category">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="item.id">
						{{item.cate_name}}
					</view>
				</view>
			</view>
			<view class="second">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		components: {

		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.category-area {
		&-container {
			.first-category {
				width: 24%;
				height: calc(100vh-54px);
				background-color: #f7f7f7;
				 .list{
					 .item{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 height: 100rpx;
						 width: 100%;
						 font-size: 26rpx;
						 color: #424242;
						 &.on{
							 color: #fc4141;
							 font-weight: 700;
						 }
					 }
				 }
			}
		}
	}
</style>

课程收获：
这个章节主要复习了如何应用外部的UI框架，可通过import按照组件的方式进行导入搜索框，快速开发搜索功能，再有就是学习到了根据页面内容，自定义接口，并在页面中使用开发分类页面的左侧列表，再有就是学习到了如何使用calc(100vh-54px) 对可视化页面的开发等