vue美团美食模拟实现
vue美团美食模拟实现
由于没有接口，只能算个半成品。但是我认为需要的请求参数都有获取，一旦有接口可以轻松请求数据。
请求参数代码中有注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>美团美食</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style:none;
}
#app{
width:959px;
margin:10px auto;
}
.header_box{
padding:10px 10px 10px 20px;
border:1px solid gainsboro;
font-size: 14px;
}
.txt_span{
margin-right: 20px;
}
.txt_span_btn{
border: 1px solid #13D1BE;
color: #13D1BE;
height: 18px;
margin-right: 10px;
padding: 0 7px;
border-radius: 10px;
cursor: pointer;
}
.txt_span_btn::after{
content: "x";
margin-left: 5px;
}
.txt_clear{
color:#999;
cursor: pointer;
}
.list_box{
padding-left: 20px;
border:1px solid gainsboro;
font-size: 14px;
box-sizing: border-box;
margin-top: -1px;
}
.box_01{
padding-top: 10px;
}
.txt_type{
width: 65px;
color: #333;
font-size: 14px;
display: inline-block;
}
.txt_all{
width: 53px;
text-align: center;
margin: 0 13px 0 9px;
color: #666;
display: inline-block;
font-size: 14px;
cursor: pointer;
}
.box_01 ul {
list-style: none;
display: inline-block;
border-bottom: 1px solid #e5e5e5;
width: 788px;
vertical-align: text-top;
}
.box_01 ul li{
display: inline-block;
width: 125px;
height:28px;
color:#666;
cursor: pointer;
}
.active{
background: #13D1BE;
color: #fff!important;
border-radius: 100px;
padding: 0 6px 0 6px;
}
.con_box{
padding: 15px 20px 21px;
border-radius: 4px;
border: 1px solid #e5e5e5;
color: #666;
margin-top: -1px;
}
.c_header{
font-size: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5 ;
}
.c_header>span{
display: inline-block;
width:80px;
cursor: pointer;
}
.txt_color{
color:#13D1BE;
}
.shop_li{
margin-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.img_box{
width:220px;
height:125px;
display: inline-block;
margin-right: 20px;
vertical-align: text-top;
}
img{
width:100%;
height:100%;
}
.info{
padding-top: 4px;
max-width: 666px;
font-size: 12px;
display: inline-block;
vertical-align: text-top;
}
h4{
font-size: 16px;
color: #333;
}
.p_span{
padding-top: 10px;
display: block;
}
.xing{
padding:10px 0 5px 0;
}
.tlak_span{
margin-left: 10px;
color: #f60;
}
</style>
</head>
<body>
<div id="app">
<list></list>
<container></container>
</div>
<script>
var container={
data(){
return{
title:[{
id:"001",
name:"默认"
},{
id:"002",
name:"销量"
},{
id:"003",
name:"价格"
},{
id:"004",
name:"好评最多"
}],
active:"001",
shopArr:[{
id:"001",
img:"https://img.meituan.net/180.180/msmerchant/03164cda8fd13908b2ef352891dc09eb2356072.jpg@220w_125h_1e_1c",
title:"贺氏洪七公吃串串（总府路直营店）",
address:"锦江区三倒拐街25号（近维特大药房）",
tlak:117,
price:52,
}],
value:3.5,
}
},
template:`
<div class="con_box">
<div class="c_header">
<span
v-for="n in title"
:key="n.id"
@click="handleOrder(n.id)"
:class="{txt_color:active==n.id?true:false}">{{n.name}}</span>
</div>
<ul class="shop_ul">
<li class="shop_li" v-for="n in shopArr" :key="n.id">
<div class="img_box">
<img :src="n.img"></img>
</div>
<div class="info">
<h4>{{n.title}}</h4>
<div class="xing">
<el-rate
v-model="value"
disabled
show-score
text-color="#333"
score-template="{value}分"
style="display:inline-block">
</el-rate>
<span class="tlak_span">{{n.tlak}}条评论</span>
</div>
<p>{{n.address}}
<span class="p_span">人均￥{{n.price}}</span></p>
</div>
</li>
</ul>
</div>
`,
methods: {
handleOrder(id){
this.active=id
//接收Id发送请求
}
},
}
var List={//列表组件
data(){
return{
typeList:[{
id:"001",
name:"代金券"
},{
id:"002",
name:"蛋糕"
},{
id:"003",
name:"甜点"
},{
id:"005",
name:"火锅"
},{
id:"006",
name:"自助餐"
},{
id:"007",
name:"小吃"
},{
id:"008",
name:"快餐"
},{
id:"009",
name:"日韩料理"
},{
id:"010",
name:"西餐"
}],
cityList:[{
id:"001",
name:"武侯区"
},{
id:"002",
name:"青羊区"
},{
id:"003",
name:"武侯区"
},{
id:"004",
name:"成华区"
},{
id:"005",
name:"金牛区"
},{
id:"006",
name:"锦江区"
},{
id:"007",
name:"温江区"
},{
id:"008",
name:"青白江区"
},{
id:"009",
name:"新津县"
},{
id:"010",
name:"都江堰市"
}],
personList:[{
id:"001",
name:"单人餐"
},{
id:"002",
name:"双人餐"
},{
id:"003",
name:"3-4人"
},{
id:"004",
name:"5-6人"
},{
id:"005",
name:"7-8人"
},{
id:"006",
name:"9-10人"
},{
id:"007",
name:"10人以上"
},{
id:"008",
name:"其他"
}],
typeActive:null,
cityActive:null,
personActive:null,
ctionsArr:[],
}
},
template:`
<div>
<div class="header_box">
<span class="txt_span">已选条件</span>
<span class="txt_span_btn" v-for="n in ctionsArr" @click="handleClear(n)">{{n}}</span>
<span class="txt_clear" @click="handleClearAll">清除全部</span>
</div>
<div class="list_box">
<div class="box_01">
<div class="txt_type">分类</div>
<div class="txt_all">
<a
:class="{active:typeActive==null?true:false}"
@click="handleTypeAll">全部</a>
</div>
<ul class="type_ul">
<li v-for="n in typeList" :key="n.id">
<a
:class="{active:typeActive==n.id?true:false}"
@click="handleType(n.id,n.name)">{{n.name}}</a></li>
</ul>
</div>
<div class="box_01">
<div class="txt_type">区域</div>
<div class="txt_all"> <a
:class="{active:cityActive==null?true:false}"
@click="handleCityAll">全部</a>
</div>
<ul class="type_ul">
<li
v-for="n in cityList" :key="n.id">
<a
:class="{active:cityActive==n.id?true:false}"
@click="handleCity(n.id,n.name)"
>{{n.name}}</a></li>
</ul>
</div >
<div class="box_01">
<div class="txt_type">用餐人数</div>
<div class="txt_all"> <a
:class="{active:personActive==null?true:false}"
@click="handlePerAll">全部</a></div>
<ul class="type_ul" style="border:none">
<li v-for="n in personList" :key="n.id">
<a :class="{active:personActive==n.id?true:false}"
@click="handlePerson(n.id,n.name)">
{{n.name}}</a></li>
</ul>
</div>
</div>
</div>
`,
methods: {
handleType(id,name){
this.typeActive=id
this.ctionsArr[0]=name
this.ctionsArr=this.ctionsArr.filter((d)=>d)
},
handleCity(id,name){
this.cityActive=id
this.ctionsArr[1]=name
this.ctionsArr=this.ctionsArr.filter(d=>d)
},
handlePerson(id,name){
this.personActive=id
this.ctionsArr[2]=name
this.ctionsArr=this.ctionsArr.filter(d=>d)
},
handleClearAll(){
this.ctionsArr=[]
this.typeActive=null
this.cityActive=null
this.personActive=null
},
handleClear(name){
this.ctionsArr=this.ctionsArr.filter((n)=>{
return name!=n;
})
},
handleTypeAll(){
this.handleType()
},
handleCityAll(){
this.handleCity()
},
handlePerAll(){
this.handlePerson()
}
},
}
var app= new Vue({
el:"#app",
data:{
},
methods: {
},
components:{
List,
container,
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号