列表组件，实现点击分类下方显示对应的商品列表

通过引入data.js文件引入列表信息，然后在主题中获取主题的序列，传给list中，实现点击主题切换列表

将主题列表单独写入到一个js文件中

新建list.vue

<template>
	<div class="list">
		<h2>{{data1[this.$store.state.myindex][0].type}}</h2>
		<ul>
			
			<!-- index 是二维列表data1中的子列表的索引 -->
			<li v-for="(item,index) in data1[this.$store.state.myindex]">
				<router-link :to="{path:'/detail'}">
					<div class="bg">
						
						  <img :src="item.picUrl" alt="">
					
					</div>
					<div class="content">
						<div class="title">
							{{item.name}}
						</div>
						<div class="second">
							<div class="count">月售：{{item.count}}</div>
							<div class="distance">{{item.distance}}km</div>
							<div class="time">{{item.time}}分钟</div>
						</div>
						<div class="third">
							<div class="price">￥{{item.price}} 起送</div>
											  
						</div>
					</div>
				
				</router-link>
			</li>
				
		</ul>
	</div>
</template>

<script>
	import {getTakeOuts} from '@/assets/js/data.js'
	export default{
		name:"list",
		data:function(){
			return{
				data1:getTakeOuts(),
				index1:0,
				index2:this.$store.state.myindex
			}
		},
		//props:["typeIndex1"]
	}
</script>

<style>
	.list{
		width: 100%;
		margin-top: 140px;
		
	}
	.list h2{
		text-align: center;
	}
	.list ul{
		width: 100%;
	}
	.list ul li a{
		width: 100%;
		display: flex;
	}
	.bg img{
		width: 60px;
		height: 60px;
		border-radius: 70%;
		flex: 1;
	}
	.content{
			flex:3;
		}
		
		.content  .title{
			font-size:16px;
			color: #00aa7f;
		}
		/*  内容中的第二行的样式 */
		.content  .second{
			
			display: flex;
			font-size:12px;
		
		}
		.content  .second div{
			margin-left:5px;
		}
		
		.content .second .count{
			font-weight: bold;
			flex:1;
		}
		.content .second .distance{
			color:#007AFF;
			flex:1;
		}
		.content .second .time{
			color:gold;
			flex:1;
		}
		
		.content  .third{
			font-size:13px;
			color: purple;
		}
</style>

在catogery中获取列表序列

在list中获取catgery中的列表序列

在home中加入list