Skip to content

V
vue2-elm

momo的小宝贝 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue2-elm

体验新版 GitCode，发现更多精彩内容 >>

提交 87e6b1cd 编写于 作者: M maguohua
浏览文件
操作

updata food

上级 357c49c9
隐藏空白更改
内联 并排
Showing with 138 addition and 11 deletion
src/page/food/food.vue
浏览文件 @ 87e6b1cd
......@@ -11,8 +11,8 @@
</svg>
</div>
</div>
<transition name="showlist" v-if="category">
<section v-if="sortBy == 'food'" class="category_container sort_detail_type">
<transition name="showlist" v-show="category">
<section v-show="sortBy == 'food'" class="category_container sort_detail_type">
<section class="category_left">
<ul>
<li v-for="(item, index) in category" :key="index" class="category_left_li" :class="{category_active:restaurant_category_id == item.id}" @click="selectCategoryName(item.id, index)">
......@@ -50,7 +50,7 @@
</div>
</div>
<transition name="showlist">
<section v-if="sortBy == 'sort'" class="sort_detail_type">
<section v-show="sortBy == 'sort'" class="sort_detail_type">
<ul class="sort_list_container" @click="sortList($event)">
<li class="sort_list_li">
<svg>
......@@ -130,8 +130,31 @@
</svg>
</div>
<transition name="showlist">
<section v-if="sortBy == 'activity'" class="sort_detail_type">
efsfsdf
<section v-show="sortBy == 'activity'" class="sort_detail_type filter_container">
<section style="width: 100%;">
<header class="filter_header_style">配送方式</header>
<ul class="filter_ul">
<li v-for="item in Delivery" :key="item.id" class="filter_li" @click="selectDeliveryMode(item.id)">
<svg :style="{opacity: (item.id == 0)&&(delivery_mode !== 0)? 0: 1}">
<use xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="delivery_mode == item.id? '#selected':'#fengniao'"></use>
</svg>
<span>{{item.text}}</span>
</li>
</ul>
</section>
<section style="width: 100%;">
<header class="filter_header_style">商家属性（可以多选）</header>
<ul class="filter_ul" style="paddingBottom: .5rem;">
<li v-for="item in Activity" :key="item.id" class="filter_li">
<span class="filter_icon" :style="{color: '#' + item.icon_color, borderColor: '#' + item.icon_color}">{{item.icon_name}}</span>
<span>{{item.name}}</span>
</li>
</ul>
</section>
<footer class="confirm_filter">
<div class="clear_all filter_button_style">清空</div>
<div class="confirm_select filter_button_style">确定<span v-if="filterNum">({{filterNum}})</span></div>
</footer>
</section>
</transition>
</div>
......@@ -150,7 +173,7 @@ import {mapState, mapMutations} from 'vuex'
import headTop from '../../components/header/head'
import shopList from '../../components/common/shoplist'
import {imgBaseUrl} from '../../config/env'
import {msiteAdress, foodCategory} from '../../service/getData'
import {msiteAdress, foodCategory, foodDelivery, foodActivity} from '../../service/getData'
export default {
data(){
......@@ -165,6 +188,11 @@ export default {
category: null, // category分类左侧数据
categoryDetail: null, // category分类右侧的详细数据
sortByType: null, // 根据何种方式排序
Delivery: null, // 配送方式数据
Activity: null, // 商家支持活动数据
delivery_mode: null, // 选中的配送方式
support_ids: [], // 选中的商铺活动列表
filterNum: 0, // 所选中的所有样式的集合
}
},
async beforeMount(){
......@@ -212,6 +240,12 @@ export default {
}else{
this.foodTitle = this.headTitle;
}
if (type == 'activity' && !this.Delivery && ! this.Activity) {
this.Delivery = await foodDelivery(this.latitude, this.longitude);
this.Activity = await foodActivity(this.latitude, this.longitude)
}
}else{
this.sortBy = '';
if (type == 'food') {
......@@ -250,6 +284,12 @@ export default {
this.sortByType = event.target.getAttribute('data');
this.sortBy = '';
},
selectDeliveryMode(id){
if (this.delivery_mode == null) {
this.filterNum++;
}
this.delivery_mode = id;
}
},
watch: {
......@@ -413,6 +453,77 @@ export default {
}
}
}
.filter_container{
flex-direction: column;
align-items: flex-start;
min-height: 10.6rem;
background-color: #f1f1f1;
.filter_header_style{
@include sc(0.4rem, #333);
line-height: 1.5rem;
height: 1.5rem;
text-align: left;
padding-left: .5rem;
background-color: #fff;
}
.filter_ul{
display: flex;
flex-wrap: wrap;
padding: 0 0.5rem;
background-color: #fff;
.filter_li{
display: flex;
align-items: center;
border: 0.025rem solid #eee;
@include wh(4.7rem, 1.4rem);
margin-right: 0.25rem;
border-radius: 0.125rem;
padding: 0 0.25rem;
margin-bottom: 0.25rem;
svg{
@include wh(.8rem, .8rem);
margin-right: 0.125rem;
}
span{
@include sc(0.4rem, #333);
}
.filter_icon{
@include wh(.8rem, .8rem);
font-size: 0.5rem;
border: 0.025rem solid $bc;
border-radius: 0.15rem;
margin-right: 0.25rem;
line-height: .8rem;
text-align: center;
}
}
}
.confirm_filter{
display: flex;
background-color: #f1f1f1;
width: 100%;
padding: .3rem .2rem;
.filter_button_style{
@include wh(50%, 1.8rem);
font-size: 0.8rem;
line-height: 1.8rem;
border-radius: 0.2rem;
}
.clear_all{
background-color: #fff;
margin-right: .5rem;
border: 0.025rem solid #fff;
}
.confirm_select{
background-color: #56d176;
color: #fff;
border: 0.025rem solid #56d176;
span{
color: #fff;
}
}
}
}
}
.showcover-enter-active, .showcover-leave-active {
transition: opacity .3s
......
src/service/getData.js
浏览文件 @ 87e6b1cd
......@@ -3,6 +3,7 @@ import * as home from './tempdata/home'
import * as city from './tempdata/city'
import * as msite from './tempdata/msite'
import * as search from './tempdata/search'
import * as food from './tempdata/food'
/**
* 获取首页默认地址
*/
......@@ -42,11 +43,20 @@ export const searchRestaurant = (geohash, keyword) => fetch('GET', '/v4/restaura
/**
* 获取food页面的 category 种类列表
*/
export const foodCategory = (latitude, longitude) => fetch('GET', '/shopping/v2/restaurant/category', {latitude, longitude})
export const foodCategory = (latitude, longitude) => fetch('GET', '/shopping/v2/restaurant/category', {latitude, longitude});
/**
* 获取food页面的配送方式
*/
export const foodDelivery = (latitude, longitude) => fetch('GET', '/shopping/v1/restaurants/delivery_modes', {latitude, longitude, kw: ''});
/**
* 获取food页面的商家属性活动列表
*/
export const foodActivity = (latitude, longitude) => fetch('GET', '/shopping/v1/restaurants/activity_attributes', {latitude, longitude, kw: ''});
//以下是临时数据
/**
* 以下是临时数据
*/
const setpromise = data => {
return new Promise((resolve, reject) => {
resolve(data)
......@@ -62,4 +72,6 @@ export const msiteAdress = geohash => setpromise(msite.msiteAdress);
export const msiteFoodTypes = geohash => setpromise(msite.foodTypes);
//export const shopList = (latitude, longitude, offset) => setpromise(msite.shopList);
//export const searchRestaurant = (geohash, keyword) => setpromise(search.searchData);
//export const foodCategory = (latitude, longitude) => setpromise(food.category);
//export const foodDelivery = (latitude, longitude) => setpromise(food.delivery);
//export const foodActivity = (latitude, longitude) => setpromise(food.activity);
src/service/tempdata/food.js
浏览文件 @ 87e6b1cd
export const category = [{"count":3261,"ids":[207,220,260,233,239,244,248,252],"image_url":"","level":1,"name":"全部商家"},{"count":1129,"id":207,"ids":[207],"image_url":"bff533cf9617bd57fe1dfb05603bebcfpng","level":1,"name":"快餐便当","sub_categories":[{"count":1129,"id":207,"level":1,"name":"全部快餐便当"},{"count":422,"id":265,"level":2,"name":"简餐"},{"count":354,"id":209,"level":2,"name":"盖浇饭"},{"count":239,"id":213,"level":2,"name":"米粉面馆"},{"count":78,"id":214,"level":2,"name":"麻辣烫"},{"count":74,"id":219,"level":2,"name":"香锅砂锅"},{"count":72,"id":215,"level":2,"name":"包子粥店"},{"count":47,"id":217,"level":2,"name":"饺子馄饨"},{"count":31,"id":212,"level":2,"name":"汉堡"},{"count":27,"id":216,"level":2,"name":"生煎锅贴"},{"count":21,"id":267,"level":2,"name":"黄焖鸡米饭"},{"count":16,"id":266,"level":2,"name":"烧腊饭"},{"count":16,"id":269,"level":2,"name":"煲仔饭"},{"count":8,"id":268,"level":2,"name":"咖喱饭"}]},{"count":473,"id":220,"ids":[220],"image_url":"655ac1bfd1e818013a9f099e964f1e9djpeg","level":1,"name":"特色菜系","sub_categories":[{"count":473,"id":220,"level":1,"name":"全部特色菜系"},{"count":142,"id":221,"level":2,"name":"川湘菜"},{"count":132,"id":263,"level":2,"name":"其他菜系"},{"count":60,"id":225,"level":2,"name":"江浙菜"},{"count":55,"id":232,"level":2,"name":"海鲜"},{"count":49,"id":231,"level":2,"name":"火锅烤鱼"},{"count":39,"id":222,"level":2,"name":"粤菜"},{"count":19,"id":223,"level":2,"name":"东北菜"},{"count":10,"id":226,"level":2,"name":"西北菜"},{"count":7,"id":224,"level":2,"name":"云南菜"},{"count":4,"id":228,"level":2,"name":"新疆菜"},{"count":0,"id":227,"level":2,"name":"鲁菜"}]},{"count":351,"id":260,"ids":[260],"image_url":"1babf6efbfdb0ef701f19689a5529e5fjpeg","level":1,"name":"异国料理","sub_categories":[{"count":351,"id":260,"level":1,"name":"全部异国料理"},{"count":146,"id":229,"level":2,"name":"日韩料理"},{"count":145,"id":230,"level":2,"name":"西餐"},{"count":57,"id":211,"level":2,"name":"披萨意面"},{"count":31,"id":264,"level":2,"name":"东南亚菜"}]},{"count":460,"id":233,"ids":[233],"image_url":"435a7eda7659bac613e524ca7c1ae12epng","level":1,"name":"小吃夜宵","sub_categories":[{"count":460,"id":233,"level":1,"name":"全部小吃夜宵"},{"count":177,"id":237,"level":2,"name":"地方小吃"},{"count":94,"id":235,"level":2,"name":"鸭脖卤味"},{"count":94,"id":236,"level":2,"name":"小龙虾"},{"count":90,"id":234,"level":2,"name":"炸鸡炸串"},{"count":54,"id":218,"level":2,"name":"烧烤"},{"count":29,"id":238,"level":2,"name":"零食"}]},{"count":671,"id":239,"ids":[239],"image_url":"48243703799592368585b23589cf3ba8png","level":1,"name":"甜品饮品","sub_categories":[{"count":671,"id":239,"level":1,"name":"全部甜品饮品"},{"count":381,"id":240,"level":2,"name":"奶茶果汁"},{"count":285,"id":241,"level":2,"name":"甜品"},{"count":187,"id":242,"level":2,"name":"咖啡"}]},{"count":135,"id":244,"ids":[244],"image_url":"6235a6fce94bed63a21508f68a72c158png","level":1,"name":"果蔬生鲜","sub_categories":[{"count":135,"id":244,"level":1,"name":"全部果蔬生鲜"},{"count":108,"id":245,"level":2,"name":"水果"},{"count":25,"id":247,"level":2,"name":"生鲜"},{"count":9,"id":246,"level":2,"name":"蔬菜"},{"count":0,"id":270,"level":2,"name":"海鲜水产"}]},{"count":492,"id":248,"ids":[248],"image_url":"0e07558e305abfb2618ae760142222f9png","level":1,"name":"鲜花蛋糕","sub_categories":[{"count":492,"id":248,"level":1,"name":"全部鲜花蛋糕"},{"count":350,"id":251,"level":2,"name":"鲜花"},{"count":152,"id":249,"level":2,"name":"蛋糕"},{"count":40,"id":250,"level":2,"name":"面包"}]},{"count":107,"id":252,"ids":[252],"image_url":"ac15c5dd59b641bdfdeb822362547fb4png","level":1,"name":"商店超市","sub_categories":[{"count":107,"id":252,"level":1,"name":"全部商店超市"},{"count":100,"id":254,"level":2,"name":"超市"},{"count":4,"id":256,"level":2,"name":"奶站"},{"count":3,"id":255,"level":2,"name":"水站"},{"count":1,"id":258,"level":2,"name":"茶"},{"count":0,"id":257,"level":2,"name":"粮油"},{"count":0,"id":271,"level":2,"name":"便利店"},{"count":0,"id":272,"level":2,"name":"美妆母婴"},{"count":0,"id":273,"level":2,"name":"零食饮料"},{"count":0,"id":274,"level":2,"name":"名酒坊"}]}];
\ No newline at end of file
export const category = [{"count":3261,"ids":[207,220,260,233,239,244,248,252],"image_url":"","level":1,"name":"全部商家"},{"count":1129,"id":207,"ids":[207],"image_url":"bff533cf9617bd57fe1dfb05603bebcfpng","level":1,"name":"快餐便当","sub_categories":[{"count":1129,"id":207,"level":1,"name":"全部快餐便当"},{"count":422,"id":265,"level":2,"name":"简餐"},{"count":354,"id":209,"level":2,"name":"盖浇饭"},{"count":239,"id":213,"level":2,"name":"米粉面馆"},{"count":78,"id":214,"level":2,"name":"麻辣烫"},{"count":74,"id":219,"level":2,"name":"香锅砂锅"},{"count":72,"id":215,"level":2,"name":"包子粥店"},{"count":47,"id":217,"level":2,"name":"饺子馄饨"},{"count":31,"id":212,"level":2,"name":"汉堡"},{"count":27,"id":216,"level":2,"name":"生煎锅贴"},{"count":21,"id":267,"level":2,"name":"黄焖鸡米饭"},{"count":16,"id":266,"level":2,"name":"烧腊饭"},{"count":16,"id":269,"level":2,"name":"煲仔饭"},{"count":8,"id":268,"level":2,"name":"咖喱饭"}]},{"count":473,"id":220,"ids":[220],"image_url":"655ac1bfd1e818013a9f099e964f1e9djpeg","level":1,"name":"特色菜系","sub_categories":[{"count":473,"id":220,"level":1,"name":"全部特色菜系"},{"count":142,"id":221,"level":2,"name":"川湘菜"},{"count":132,"id":263,"level":2,"name":"其他菜系"},{"count":60,"id":225,"level":2,"name":"江浙菜"},{"count":55,"id":232,"level":2,"name":"海鲜"},{"count":49,"id":231,"level":2,"name":"火锅烤鱼"},{"count":39,"id":222,"level":2,"name":"粤菜"},{"count":19,"id":223,"level":2,"name":"东北菜"},{"count":10,"id":226,"level":2,"name":"西北菜"},{"count":7,"id":224,"level":2,"name":"云南菜"},{"count":4,"id":228,"level":2,"name":"新疆菜"},{"count":0,"id":227,"level":2,"name":"鲁菜"}]},{"count":351,"id":260,"ids":[260],"image_url":"1babf6efbfdb0ef701f19689a5529e5fjpeg","level":1,"name":"异国料理","sub_categories":[{"count":351,"id":260,"level":1,"name":"全部异国料理"},{"count":146,"id":229,"level":2,"name":"日韩料理"},{"count":145,"id":230,"level":2,"name":"西餐"},{"count":57,"id":211,"level":2,"name":"披萨意面"},{"count":31,"id":264,"level":2,"name":"东南亚菜"}]},{"count":460,"id":233,"ids":[233],"image_url":"435a7eda7659bac613e524ca7c1ae12epng","level":1,"name":"小吃夜宵","sub_categories":[{"count":460,"id":233,"level":1,"name":"全部小吃夜宵"},{"count":177,"id":237,"level":2,"name":"地方小吃"},{"count":94,"id":235,"level":2,"name":"鸭脖卤味"},{"count":94,"id":236,"level":2,"name":"小龙虾"},{"count":90,"id":234,"level":2,"name":"炸鸡炸串"},{"count":54,"id":218,"level":2,"name":"烧烤"},{"count":29,"id":238,"level":2,"name":"零食"}]},{"count":671,"id":239,"ids":[239],"image_url":"48243703799592368585b23589cf3ba8png","level":1,"name":"甜品饮品","sub_categories":[{"count":671,"id":239,"level":1,"name":"全部甜品饮品"},{"count":381,"id":240,"level":2,"name":"奶茶果汁"},{"count":285,"id":241,"level":2,"name":"甜品"},{"count":187,"id":242,"level":2,"name":"咖啡"}]},{"count":135,"id":244,"ids":[244],"image_url":"6235a6fce94bed63a21508f68a72c158png","level":1,"name":"果蔬生鲜","sub_categories":[{"count":135,"id":244,"level":1,"name":"全部果蔬生鲜"},{"count":108,"id":245,"level":2,"name":"水果"},{"count":25,"id":247,"level":2,"name":"生鲜"},{"count":9,"id":246,"level":2,"name":"蔬菜"},{"count":0,"id":270,"level":2,"name":"海鲜水产"}]},{"count":492,"id":248,"ids":[248],"image_url":"0e07558e305abfb2618ae760142222f9png","level":1,"name":"鲜花蛋糕","sub_categories":[{"count":492,"id":248,"level":1,"name":"全部鲜花蛋糕"},{"count":350,"id":251,"level":2,"name":"鲜花"},{"count":152,"id":249,"level":2,"name":"蛋糕"},{"count":40,"id":250,"level":2,"name":"面包"}]},{"count":107,"id":252,"ids":[252],"image_url":"ac15c5dd59b641bdfdeb822362547fb4png","level":1,"name":"商店超市","sub_categories":[{"count":107,"id":252,"level":1,"name":"全部商店超市"},{"count":100,"id":254,"level":2,"name":"超市"},{"count":4,"id":256,"level":2,"name":"奶站"},{"count":3,"id":255,"level":2,"name":"水站"},{"count":1,"id":258,"level":2,"name":"茶"},{"count":0,"id":257,"level":2,"name":"粮油"},{"count":0,"id":271,"level":2,"name":"便利店"},{"count":0,"id":272,"level":2,"name":"美妆母婴"},{"count":0,"id":273,"level":2,"name":"零食饮料"},{"count":0,"id":274,"level":2,"name":"名酒坊"}]}];
export const delivery = [{"color":"4CA9FF","id":0,"is_solid":true,"text":"不限"},{"color":"57A9FF","id":1,"is_solid":true,"text":"蜂鸟专送"}];
export const activity = [{"description":"","icon_color":"3FBDE6","icon_name":"品","id":8,"name":"品牌商家","ranking_weight":7},{"description":"已加入“外卖保”计划，食品安全有保障","icon_color":"999999","icon_name":"保","id":7,"name":"外卖保","ranking_weight":6},{"description":"新店","icon_color":"E8842D","icon_name":"新","id":5,"name":"新店","ranking_weight":4},{"description":"该商家支持开发票，请在下单时填写好发票抬头","icon_color":"999999","icon_name":"票","id":4,"name":"开发票","ranking_weight":3},{"description":"可使用支付宝、微信、手机QQ进行在线支付","icon_color":"FF4E00","icon_name":"付","id":3,"name":"在线支付","ranking_weight":2},{"description":"准时必达，超时秒赔","icon_color":"57A9FF","icon_name":"准","id":9,"name":"准时达","ranking_weight":1}];
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或