Mobile模块前端开发

(一) MVVM概念

​ MVVM是视图层概念,主要关注于视图层分离:MVVM把前端的视图层分为Model,View,VM ViewModel.

app.js:项目的入口模块,一切请求都要进入这里处理(无路由分发的功能,需要调用router.js)

router.js:路由分发模块:为了保证路由模块的职能单一,不负责具体业务逻辑的处理。(业务处理调用controller模块)

controller:业务逻辑处理层。封装具体代码,不负责处理数据的CRUD(CRUD需要调用Model层.

Model:只负责操作数据库,执行对应的SQL语句,进行数据的CRUD(C:create; R:read; U:update; D:delete)

View视图层:每当用户操作界面,如果需要进行业务处理,如果需要进行业务处理,都会通过网络请求后端的服务器,此时请求会被后端的App.js监听。

M:保存的是每个页面中单独的数据;

VM:是调度者,分割了M和V,每当V层想要获取保存数据的时候,都要由VM做中间处理。

V:是每个页面中的HTML结构

MVVM让数据双向绑定(由VM提供,VM是核心)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JIFnKu7-1630673191818)(C:\Users\xyx\Downloads\mvc.png)]

(二)前期准备

  • 全局安装vue-cli脚手架工具:cnpm install -g vue-cli
  • 初始化sell项目:vue init webpack flash-waimai-mobile
  • 进入sell目录:cd flash-waimai-mobile
  • 安装依赖(依据package.json文件):cnpm install
  • 运行项目(package.json中配置):cnpm run dev 或者 node build/dev-server.js

(三)mobile大体框架与开发步骤

1. build模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RDwxx8fl-1630673191830)(C:\Users\xyx\AppData\Roaming\Typora\typora-user-images\image-20210819162840108.png)]

目录和作用如下:

build.js 生产环境构建代码

utils.js 构建工具相关

dev-client.js-配合dev-server.js监听html文件改动也能够触发自动刷新

// 引入 webpack-hot-middleware/client 
var hotClient = require('webpack-hot-middleware/client');

// 订阅事件,当 event.action === 'reload' 时执行页面刷新
hotClient.subscribe(function (event) {
    if (event.action === 'reload') {
        window.location.reload();
    }
})

webpack.base.conf.js webpack配置路径别名

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: config.build.assetsRoot,
        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
        fallback: [path.join(__dirname, '../node_modules')],
        alias: {
             // 路径别名配置(自定义)
            'vue$': 'vue/dist/vue.common.js',
            'src': path.resolve(__dirname, '../src'),
            'assets': path.resolve(__dirname, '../src/assets'),
            'components': path.resolve(__dirname, '../src/components')
        }
    },
    resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
    },
    ......

webpack.dev.conf.js webpack开发环境设置,构建本地服务器
webpack.pro.conf.js webpack生产环境配置

2. 整体路由配置
  • 安装ajax异步请求插件vue-resource:cnpm install vue-resource --save-dev

  • 配置项目整体路由

    // 文件位置:src/APP.vue
    <template>
    	<div>
            <!--路由刷新缓存-->
    		<transition name="router-fade" mode="out-in">
    			<keep-alive>
    			    <router-view v-if="$route.meta.keepAlive"></router-view>
    			</keep-alive>
        	</transition>
        	<transition name="router-fade" mode="out-in">
    			<router-view v-if="!$route.meta.keepAlive"></router-view>
    		</transition>
    		<svg-icon></svg-icon>	
        </div>
    
    </template>
    
    <script>
    	import svgIcon from './components/common/svg';
      	export default {
        	components:{
                svgIcon
            },
      	}
    
    </script>
    
    <style lang="scss">
      	@import './style/common';
    	.router-fade-enter-active, .router-fade-leave-active {
    	  	transition: opacity .3s;
    	}
    	.router-fade-enter, .router-fade-leave-active {
    	  	opacity: 0;
    	}
    </style>
    
    
    // 文件位置:src/router/index.js
    // 截取部分代码
    import App from '../App'
    //通过webpack来分模块加载路由
    const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
    const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')
    const msite = r => require.ensure([], () => r(require('../page/msite/msite')), 'msite')
    const search = r => require.ensure([], () => r(require('../page/search/search')), 'search')
    ..............
    export default [{
        path: '/',
        component: App, //顶层路由,对应index.html
        children: [ //二级路由。对应App.vue
            //地址为空时跳转home页面
            {
                path: '',
                redirect: '/home'
            },
            //首页城市列表页
            {
                path: '/home',
                component: home
            },
            //当前选择城市页
            {
                path: '/city/:cityid',
                component: city
            },
            //所有商铺列表页
            {
                path: '/msite',
                component: msite,
                meta: { keepAlive: false },
            },
            .........
               ]
    }]
    
  • 配置项目整体依赖

    // 文件位置:src/main.js
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routes from './router/router'
    import store from './store/'
    import {routerMode} from './config/env'
    import './config/rem'
    
    // 使用Vue-resource必须放在前面,放在后面报错
    Vue.use(VueRouter)
    const router = new VueRouter({
    	routes,
    	mode: routerMode,
    	strict: process.env.NODE_ENV !== 'production',
    	scrollBehavior (to, from, savedPosition) {
    	    if (savedPosition) {
    		    return savedPosition
    		} else {
    			if (from.meta.keepAlive) {
    				from.meta.savedPosition = document.body.scrollTop;
    			}
    		    return { x: 0, y: to.meta.savedPosition || 0 }
    		}
    	}
    })
    
    new Vue({
    	router,
    	store,
    }).$mount('#app')
    
3. 通用组件开发
  • 通用样式

    • 总体样式
    //文件位置src/style/common.scss
    body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        color: #333;
        font-weight: normal;
        font-family: "Microsoft Yahei";
        box-sizing: border-box;
        -webkit-tap-highlight-color:transparent;
        -webkit-font-smoothing: antialiased;
        &:hover{
            outline: none;
        }
    }
    
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
    ::-webkit-scrollbar  
    {  
        width: 0px;  
        height: 0px;  
        background-color: #F5F5F5;  
    }  
      
    /*定义滚动条轨道 内阴影+圆角*/  
    ::-webkit-scrollbar-track  
    {  
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);  
        border-radius: 10px;  
        background-color: #F5F5F5;  
    }  
      
    /*定义滑块 内阴影+圆角*/  
    ::-webkit-scrollbar-thumb  
    {  
        border-radius: 10px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color: #555;  
    }  
    
    input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
        -webkit-appearance: none;
    }
    
    textarea { -webkit-appearance: none;}   
    
    html,body{
        height: 100%;
        width: 100%;
        background-color: #F5F5F5;
    }
    
    
    .clear:after{
        content: '';
        display: block;
        clear: both;
    }
    
    .clear{
        zoom:1;
    }
    
    .back_img{
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    
    .margin{
        margin: 0 auto;
    }
    
    .left{
        float: left;
    }
    
    .right{
        float: right;
    }
    
    .hide{
        display: none;
    }
    
    .show{
        display: block;
    }
    
    .ellipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .paddingTop{
        padding-top: 1.95rem;
    }
    
    @keyframes backOpacity{
       0%   { opacity: 1 }
       25%  { opacity: .5 }
       50%  { opacity: 1 }
       75%  { opacity: .5 }
       100% { opacity: 1 }
    }
    
    .animation_opactiy{
        animation: backOpacity 2s ease-in-out infinite;
    }
    
    
    //文件位置src/style/mixin.scss
    $blue: #3190e8;  
    $bc: #e4e4e4;
    $fc:#fff;
    
    // 背景图片地址和大小
    @mixin bis($url) { 
    	background-image: url($url);
    	background-repeat: no-repeat;
    	background-size: 100% 100%;
    }
    
    @mixin borderRadius($radius) {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        -ms-border-radius: $radius;
        -o-border-radius: $radius;
        border-radius: $radius;
    }
    //定位全屏
    @mixin allcover{
    	position:absolute;
    	top:0;
    	right:0;
    }
    
    //定位上下左右居中
    @mixin center {  
    	position: absolute;
    	top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    //定位上下居中
    @mixin ct {  
    	position: absolute;
    	top: 50%;
        transform: translateY(-50%);
    }
    
    //定位左右居中
    @mixin cl {  
    	position: absolute;
    	left: 50%;
        transform: translateX(-50%);
    }
    
    //宽高
    @mixin wh($width, $height){
    	width: $width;
    	height: $height;
    }
    
    //字体大小、行高、字体
    @mixin font($size, $line-height, $family: 'Microsoft YaHei') {  
    	font: #{$size}/#{$line-height} $family;
    }
    
    //字体大小,颜色
    @mixin sc($size, $color){
    	font-size: $size;
    	color: $color;
    }
    
    //flex 布局和 子元素 对其方式
    @mixin fj($type: space-between){
    	display: flex;
    	justify-content: $type;
    
    }
    
    
    • 构建通用版块

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQMUK42F-1630673191836)(C:\Users\xyx\AppData\Roaming\Typora\typora-user-images\image-20210819195116555.png)]

    ​ alertTip.vue:使用mixin样式,作用是移动端小弹窗。

    ​ buyCart.vue:购物模块,用于添加商品。

    ​ computeTime.vue:下单后支付时间倒计时模块。

    ​ loading.vue:使用mixin样式,加载时屏幕上显示弹跳小水果。

    ​ ratingstar.vue:五星好评效果。

    ​ shoplist.vue:商铺展示,数据最多20位。

    ​ svg.vue:字体显示。

    ​ 以商铺展示为例:

    <template>
    	<div class="shoplist_container">
    		<ul v-load-more="loaderMore" v-if="shopListArr.length" type="1">
    			<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
    				<section>
    					<img :src="imgBaseUrl + item.image_path" class="shop_img">
    				</section>
    				<hgroup class="shop_right">
    					<header class="shop_detail_header">
    						<h4 :class="item.is_premium? 'premium': ''" class="" class="shop_title ellipsis">{{item.name}}</h4>
    						<ul class="shop_detail_ul">
    							<li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
    						</ul>
    					</header>
    					<h5 class="rating_order_num">
    						<section class="rating_order_num_left">
    							<section class="rating_section">
    								<rating-star :rating='item.rating'></rating-star>
    								<span class="rating_num">{{item.rating}}</span>
    							</section>
    							<section class="order_section">
    								月售{{item.recent_order_num}}单
    							</section>
    						</section>
    						<section class="rating_order_num_right">
    							<span class="delivery_style delivery_left" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
    							<span class="delivery_style delivery_right" v-if="zhunshi(item.supports)">准时达</span>
    						</section>
    					</h5>
    					<h5 class="fee_distance">
    						<p class="fee">
    							¥{{item.float_minimum_order_amount}}起送
    							<span class="segmentation">|</span>
    							{{item.piecewise_agent_fee.tips}}
    						</p>
    						<p class="distance_time">
    							<template v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
    								<span class="segmentation">|</span>
    							</template>
    							<template v-else>
                    {{item.distance}}
    							<span class="segmentation">|</span>
                  </template>
    							<span class="order_time">{{item.order_lead_time}}</span>
    						</p>
    					</h5>
    				</hgroup>
    			</router-link>
    		</ul>
    		<ul v-else class="animation_opactiy">
    			<li class="list_back_li" v-for="item in 10" :key="item">
    				<img src="../../images/shopback.svg" class="list_back_svg">
    			</li>
    		</ul>
    		<p v-if="touchend" class="empty_data">没有更多了</p>
    		<aside class="return_top" @click="backTop" v-if="showBackStatus">
    			<svg class="back_top_svg">
    				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
    			</svg>
    		</aside>
    		<div ref="abc" style="background-color: red;"></div>
    		<transition name="loading">
    			<loading v-show="showLoading"></loading>
    		</transition>
    	</div>
    </template>
    
    <script>
    
    import {mapState} from 'vuex'
    import {shopList} from 'src/service/getData'
    import {imgBaseUrl} from 'src/config/env'
    import {showBack, animate} from 'src/config/mUtils'
    import {loadMore, getImgPath} from './mixin'
    import loading from './loading'
    import ratingStar from './ratingStar'
    
    export default {
    	data(){
    		return {
    			offset: 0, // 批次加载店铺列表,每次加载20个 limit = 20
    			shopListArr:[], // 店铺列表数据
    			preventRepeatReuqest: false, //到达底部加载数据,防止重复加载
    			showBackStatus: false, //显示返回顶部按钮
    			showLoading: true, //显示加载动画
    			touchend: false, //没有更多数据
    			imgBaseUrl,
    		}
    	},
    	mounted(){
    		this.initData();
    	},
    	components: {
    		loading,
    		ratingStar,
    	},
    	props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
    	mixins: [loadMore, getImgPath],
    	computed: {
    		...mapState([
    			'latitude','longitude'
    		]),
    	},
    	updated(){
    		// console.log(this.supportIds, this.sortByType)
    	},
    	methods: {
    		async initData(){
    			//获取数据
    			let resResponse = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
    			console.log('resresponse',resResponse)
    			let res = resResponse.records
          console.log('res',res)
    			this.shopListArr = [...res];
    			if (res.length < 20) {
    				this.touchend = true;
    			}
    			this.hideLoading();
    			//开始监听scrollTop的值,达到一定程度后显示返回顶部按钮
    			showBack(status => {
    				this.showBackStatus = status;
    			});
    		},
    		//到达底部加载更多数据
    		async loaderMore(){
    			if (this.touchend) {
    				return
    			}
    			//防止重复请求
    			if (this.preventRepeatReuqest) {
    				return
    			}
    			this.showLoading = true;
    			this.preventRepeatReuqest = true;
    
    			//数据的定位加20位
    			this.offset += 20;
    			let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
    			this.hideLoading();
    			this.shopListArr = [...this.shopListArr, ...res];
    			//当获取数据小于20,说明没有更多数据,不需要再次请求数据
    			if (res.length < 20) {
    				this.touchend = true;
    				return
    			}
    			this.preventRepeatReuqest = false;
    		},
    		//返回顶部
    		backTop(){
    			animate(document.body, {scrollTop: '0'}, 400,'ease-out');
    		},
    		//监听父级传来的数据发生变化时,触发此函数重新根据属性值获取数据
    		async listenPropChange(){
    			this.showLoading = true;
    			this.offset = 0;
    			let resResponse = await shopList(this.latitude, this.longitude, this.offset, '' , this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
    			let res = resResponse.records
    			this.hideLoading();
    			//考虑到本地模拟数据是引用类型,所以返回一个新的数组
    			this.shopListArr = [...res];
    		},
    		//开发环境与编译环境loading隐藏方式不同
    		hideLoading(){
    			this.showLoading = false;
    		},
    		zhunshi(supports){
    			let zhunStatus;
    			if ((supports instanceof Array) && supports.length) {
     				supports.forEach(item => {
     					if (item.icon_name === '准') {
     						zhunStatus = true;
     					}
     				})
    			}else{
    				zhunStatus = false;
    			}
    			return zhunStatus
    		},
    	},
    	watch: {
    		//监听父级传来的restaurantCategoryIds,当值发生变化的时候重新获取餐馆数据,作用于排序和筛选
    		restaurantCategoryIds: function (value){
    		  console.log('watchids',value)
    			this.listenPropChange();
    		},
    		//监听父级传来的排序方式
    		sortByType: function (value){
    			this.listenPropChange();
    		},
    		//监听父级的确认按钮是否被点击,并且返回一个自定义事件通知父级,已经接收到数据,此时父级才可以清除已选状态
    		confirmSelect: function (value){
    			this.listenPropChange();
    		}
    	}
    }
    </script>
    
    <style lang="scss" scoped>
    	@import 'src/style/mixin';
    	.shoplist_container{
    		background-color: #fff;
    		margin-bottom: 2rem;
    	}
    	.shop_li{
    		display: flex;
    		border-bottom: 0.025rem solid #f1f1f1;
    		padding: 0.7rem 0.4rem;
    	}
    	.shop_img{
    		@include wh(2.7rem, 2.7rem);
    		display: block;
    		margin-right: 0.4rem;
    	}
    	.list_back_li{
    		height: 4.85rem;
    		.list_back_svg{
    			@include wh(100%, 100%)
    		}
    	}
    	.shop_right{
    		flex: auto;
    		.shop_detail_header{
    			@include fj;
    			align-items: center;
    			.shop_title{
    				width: 8.5rem;
    				color: #333;
    				padding-top: .01rem;
    				@include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
    				font-weight: 700;
    			}
    			.premium::before{
    				content: '品牌';
    				display: inline-block;
    				font-size: 0.5rem;
    				line-height: .6rem;
    				color: #333;
    				background-color: #ffd930;
    				padding: 0 0.1rem;
    				border-radius: 0.1rem;
    				margin-right: 0.2rem;
    			}
    			.shop_detail_ul{
    				display: flex;
    				transform: scale(.8);
    				margin-right: -0.3rem;
    				.supports{
    					@include sc(0.5rem, #999);
    					border: 0.025rem solid #f1f1f1;
    					padding: 0 0.04rem;
    					border-radius: 0.08rem;
    					margin-left: 0.05rem;
    				}
    			}
    		}
    		.rating_order_num{
    			@include fj(space-between);
    			height: 0.6rem;
    			margin-top: 0.52rem;
    			.rating_order_num_left{
    				@include fj(flex-start);
    				.rating_section{
    					display: flex;
    					.rating_num{
    						@include sc(0.4rem, #ff6000);
    						margin: 0 0.2rem;
    					}
    				}
    				.order_section{
    					transform: scale(.8);
    					margin-left: -0.2rem;
    					@include sc(0.4rem, #666);
    				}
    			}
    			.rating_order_num_right{
    				display: flex;
    				align-items: center;
    				transform: scale(.7);
    				min-width: 5rem;
    				justify-content: flex-end;
    				margin-right: -0.8rem;
    				.delivery_style{
    					font-size: 0.4rem;
    					padding: 0.04rem 0.08rem 0;
    					border-radius: 0.08rem;
    					margin-left: 0.08rem;
    					border: 1px;
    				}
    				.delivery_left{
    					color: #fff;
    					background-color: $blue;
    					border: 0.025rem solid $blue;
    				}
    				.delivery_right{
    					color: $blue;
    					border: 0.025rem solid $blue;
    				}
    			}
    		}
    		.fee_distance{
    			margin-top: 0.52rem;
    			@include fj;
    			@include sc(0.5rem, #333);
    			.fee{
    				transform: scale(.9);
    				@include sc(0.5rem, #666);
    			}
    			.distance_time{
    				transform: scale(.9);
    				span{
    					color: #999;
    				}
    				.order_time{
    					color: $blue;
    				}
    				.segmentation{
    					color: #ccc;
    				}
    			}
    		}
    	}
    	.loader_more{
    		@include font(0.6rem, 3);
    		text-align: center;
    	    color: #999;
    	}
    	.empty_data{
    		@inlude sc(0.5rem, #666);
    		text-align: center;
    		line-height: 2rem;
    	}
    	.return_top{
    		position: fixed;
    		bottom: 3rem;
    		right: 1rem;
    		.back_top_svg{
    			@include wh(2rem, 2rem);
    		}
    	}
    	.loading-enter-active, .loading-leave-active {
    		transition: opacity 1s
    	}
    	.loading-enter, .loading-leave-active {
    		opacity: 0
    	}
    </style>
    
    
4. 数据获取
import fetch from '../config/fetch'
import {getStore} from '../config/mUtils'

/**
 * 获取首页默认地址
 */

export const cityGuess = () => fetch('/v1/cities', {
  type: 'guess'
});


/**
 * 获取首页热门城市
 */

export const hotcity = () => fetch('/v1/cities', {
  type: 'hot'
});


/**
 * 获取首页所有城市
 */

export const groupcity = () => fetch('/v1/cities', {
  type: 'group'
});


/**
 * 获取当前所在城市
 */

export const currentcity = number => fetch('/v1/cities/' + number);


/**
 * 获取搜索地址
 */

export const searchplace = (cityid, value) => fetch('/v1/pois', {
  type: 'search',
  city_id: cityid,
  keyword: value
});


/**
 * 获取msite页面地址信息
 */

export const msiteAddress = geohash => fetch('/v1/position/pois', {
  geohash
});


/**
 * 获取msite页面食品分类列表
 */

export const msiteFoodTypes = geohash => fetch('/v2/index_entry', {
  geohash,
  group_type: '1'
});


/**
 * 获取msite商铺列表
 */

export const shopList = (latitude, longitude, offset, restaurant_category_id = '', restaurant_category_ids = '', order_by = '', delivery_mode = '', support_ids = []) => {
  let supportStr = '';
  support_ids.forEach(item => {
    if (item.status) {
      supportStr += '&support_ids[]=' + item.id;
    }
  });
  let data = {
    latitude,
    longitude,
    offset,
    limit: '20',
    'extras': 'activities',
    keyword: '',
    restaurant_category_id,
    'restaurant_category_ids': restaurant_category_ids,
    order_by,
    'delivery_mode': delivery_mode + supportStr
  };
  return fetch('/shopping/restaurants', data);
};


/**
 * 获取search页面搜索结果
 */

export const searchRestaurant = (geohash, keyword) => fetch('/v4/restaurants', {
  'extras': 'restaurant_activity',
  geohash,
  keyword,
  type: 'search'
});


/**
 * 获取food页面的 category 种类列表
 */

export const foodCategory = (latitude, longitude) => fetch('/shopping/v2/restaurant/category', {
  latitude,
  longitude
});


/**
 * 获取food页面的配送方式
 */

export const foodDelivery = (latitude, longitude) => fetch('/shopping/v1/restaurants/delivery_modes', {
  latitude,
  longitude,
  kw: ''
});


/**
 * 获取food页面的商家属性活动列表
 */

export const foodActivity = (latitude, longitude) => fetch('/shopping/v1/restaurants/activity_attributes', {
  latitude,
  longitude,
  kw: ''
});


/**
 * 获取shop页面商铺详情
 */

export const shopDetails = (shopid, latitude, longitude) => fetch('/shopping/restaurant/' + shopid, {
  latitude,
  longitude: longitude + '&extras=activities&extras=album&extras=license&extras=identification&extras=statistics'
});


/**
 * 获取shop页面菜单列表
 */

export const foodMenu = restaurant_id => fetch('/shopping/v2/menu', {
  restaurant_id
});


/**
 * 获取商铺评价列表
 */

export const getRatingList = (shopid, offset, tag_name = '') => fetch('/ugc/v2/restaurants/' + shopid + '/ratings', {
  has_content: true,
  offset,
  limit: 10,
  tag_name
});


/**
 * 获取商铺评价分数
 */

export const ratingScores = shopid => fetch('/ugc/v2/restaurants/' + shopid + '/ratings/scores');


/**
 * 获取商铺评价分类
 */

export const ratingTags = shopid => fetch('/ugc/v2/restaurants/' + shopid + '/ratings/tags');


/**
 * 获取短信验证码
 */

export const mobileCode = phone => fetch('/v4/mobile/verify_code/send', {
  mobile: phone,
  scene: 'login',
  type: 'sms'
}, 'POST');


/**
 * 获取图片验证码
 */

export const getcaptchas = () => fetch('/v1/captchas', {}, 'POST');


/**
 * 检测帐号是否存在
 */

export const checkExsis = (checkNumber, type) => fetch('/v1/users/exists', {
  [type]: checkNumber,
  type
});


/**
 * 发送帐号
 */

export const sendMobile = (sendData, captcha_code, type, password) => fetch('/v1/mobile/verify_code/send', {
  action: "send",
  captcha_code,
  [type]: sendData,
  type: "sms",
  way: type,
  password,
}, 'POST');


/**
 * 确认订单
 */

export const checkout = (geohash, entities, shopid) => fetch('/v1/carts/checkout', {
  come_from: "web",
  geohash,
  entities,
  restaurant_id: shopid,
}, 'POST');


/**
 * 获取快速备注列表
 */

export const getRemark = (id, sig) => fetch('/v1/carts/' + id + '/remarks', {
  sig
});


/**
 * 获取地址列表
 */

export const getAddress = (id, sig) => fetch('/v1/carts/' + id + '/addresses', {
  sig
});


/**
 * 搜索地址
 */

export const searchNearby = keyword => fetch('/v1/pois', {
  type: 'nearby',
  keyword
});


/**
 * 添加地址
 */

export const postAddAddress = (userId, address, address_detail, geohash, name, phone, phone_bk, poi_type, sex, tag, tag_type) => fetch('/v1/users/' + userId + '/addresses', {
  address,
  address_detail,
  geohash,
  name,
  phone,
  phone_bk,
  poi_type,
  sex,
  tag,
  tag_type,
}, 'POST');


/**
 * 下订单
 */

export const placeOrders = (user_id, cart_id, address_id, description, entities, geohash, sig) => fetch('/v1/users/' + user_id + '/carts/' + cart_id + '/orders', {
  address_id,
  come_from: "mobile_web",
  deliver_time: "",
  description,
  entities,
  geohash,
  paymethod_id: 1,
  sig,
}, 'POST');


/**
 * 重新发送订单验证码
 */

export const rePostVerify = (cart_id, sig, type) => fetch('/v1/carts/' + cart_id + '/verify_code', {
  sig,
  type,
}, 'POST');


/**
 * 下订单
 */

export const validateOrders = ({
                                 user_id,
                                 cart_id,
                                 address_id,
                                 description,
                                 entities,
                                 geohash,
                                 sig,
                                 validation_code,
                                 validation_token
                               }) => fetch('/v1/users/' + user_id + '/carts/' + cart_id + '/orders', {
  address_id,
  come_from: "mobile_web",
  deliver_time: "",
  description,
  entities,
  geohash,
  paymethod_id: 1,
  sig,
  validation_code,
  validation_token,
}, 'POST');


/**
 * 重新发送订单验证码
 */

export const payRequest = (merchantOrderNo, userId) => fetch('/payapi/payment/queryOrder', {
  merchantId: 5,
  merchantOrderNo,
  source: 'MOBILE_WAP',
  userId,
  version: '1.0.0',
});


/**
 * 获取服务中心信息
 */

export const getService = () => fetch('/v3/profile/explain');


/**
 *兑换会员卡
 */

export const vipCart = (id, number, password) => fetch('/member/v1/users/' + id + '/delivery_card/physical_card/bind', {
  number,
  password
}, 'POST')


/**
 * 获取红包
 */

export const getHongbaoNum = id => fetch('/promotion/v2/users/' + id + '/hongbaos?limit=20&offset=0');


/**
 * 获取过期红包
 */


export const getExpired = id => fetch('/promotion/v2/users/' + id + '/expired_hongbaos?limit=20&offset=0');


/**
 * 兑换红包
 */

export const exChangeHongbao = (id, exchange_code, captcha_code) => fetch('/v1/users/' + id + '/hongbao/exchange', {
  exchange_code,
  captcha_code,
}, 'POST');


/**
 * 获取用户信息
 */

export const getUser = () => fetch('/v1/users', {user_id: getStore('user_id')});


/**
 * 手机号登录
 */

var sendLogin = (code, mobile, validate_token) => fetch('/v1/login/app_mobile', {
  code,
  mobile,
  validate_token
}, 'POST');


/**
 * 获取订单列表
 */

export const getOrderList = (user_id, offset) => fetch('/bos/v2/users/' + user_id + '/orders', {
  limit: 10,
  offset,
  t: new Date().getTime()
});

export const finishOrder = (user_id, orderid) => fetch('/bos/v1/users/' + user_id + '/orders/' + orderid + '/finish');


/**
 * 获取订单详情
 */

export const getOrderDetail = (user_id, orderid) => fetch('/bos/v1/users/' + user_id + '/orders/' + orderid + '/snapshot');


/**
 *个人中心里编辑地址
 */

export const getAddressList = (user_id) => fetch('/v1/users/' + user_id + '/addresses')

/**
 *个人中心里搜索地址
 */

export const getSearchAddress = (keyword) => fetch('v1/pois', {
  keyword: keyword,
  type: 'nearby'
})

/**
 * 删除地址
 */

export const deleteAddress = (userid, addressid) => fetch('/v1/users/' + userid + '/addresses/' + addressid, {}, 'DELETE')


/**
 * 账号密码登录
 */
export const accountLogin = (username, password, captchaCode, captchCodeId) => fetch('/v1/users/v2/login', {username, password, captchaCode, captchCodeId}, 'POST');


/**
 * 退出登录
 */
export const signout = () => fetch('/v1/users/v2/signout');


/**
 * 改密码
 */
export const changePassword = (username, oldpassWord, newpassword, confirmpassword, captcha_code) => fetch('/v2/changepassword', {
  username,
  oldpassWord,
  newpassword,
  confirmpassword,
  captcha_code
}, 'POST');

5. 具体功能开发

详见注释

<template>
    <div class="food_container">
    	<head-top :head-title="headTitle" goBack="true"></head-top>
    	<section class="sort_container">
			<!-- 分类 -->
    		<div class="sort_item" :class="{choose_type:sortBy == 'food'}" >
    			<div class="sort_item_container" @click="chooseType('food')">
    				<div class="sort_item_border">
    					<span :class="{category_title: sortBy == 'food'}">{{foodTitle}}</span>
		    			<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
			    			<polygon points="0,3 10,3 5,8"/>
			    		</svg>
    				</div>
    			</div>
	    		<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)">
									<section>
										<img :src="getImgPath(item.image_url)" v-if="index" class="category_icon">
										<span>{{item.name}}</span>
									</section>
									<section>
	    								<span class="category_count">{{item.count}}</span>
	    								<svg v-if="index" width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow" >
							    			<path d="M0 0 L6 4 L0 8"  stroke="#bbb" stroke-width="1" fill="none"/>
							    		</svg>
									</section>
	    						</li>
	    					</ul>
	    				</section>
	    				<section class="category_right">
	    					<ul>
	    						<li v-for="(item, index) in categoryDetail" v-if="index" :key="index" class="category_right_li" @click="getCategoryIds(item.id, item.name)" :class="{category_right_choosed: restaurant_category_ids == item.id || (!restaurant_category_ids)&&index == 0}">
	    							<span>{{item.name}}</span>
	    							<span>{{item.count}}</span>
	    						</li>
	    					</ul>
	    				</section>
	    			</section>
	    		</transition>
    		</div>
			<!-- 排序 -->
    		<div class="sort_item" :class="{choose_type:sortBy == 'sort'}">
    			<div class="sort_item_container" @click="chooseType('sort')">
    				<div class="sort_item_border">
		    			<span :class="{category_title: sortBy == 'sort'}">排序</span>
		    			<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
			    			<polygon points="0,3 10,3 5,8"/>
			    		</svg>
    				</div>
    			</div>
	    		<transition name="showlist">
	    			<section v-show="sortBy == 'sort'" class="sort_detail_type">
	    				<ul class="sort_list_container" @click="sortList($event)">
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default"></use>
								</svg>
	    						<p data="0" :class="{sort_select: sortByType == 0}">
	    							<span>智能排序</span>
	    							<svg v-if="sortByType == 0">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    						</p>
	    					</li>
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance"></use>
								</svg>
	    						<p data="5" :class="{sort_select: sortByType == 5}">
	    							<span>距离最近</span>
	    							<svg v-if="sortByType == 5">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    						</p>
	    					</li>
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot"></use>
								</svg>
	    						<p data="6" :class="{sort_select: sortByType == 6}">
	    							<span>销量最高</span>
	    							<svg v-if="sortByType == 6">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    						</p>
	    					</li>
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"></use>
								</svg>
	    						<p data="1" :class="{sort_select: sortByType == 1}">
	    							<span>起送价最低</span>
	    							<svg v-if="sortByType == 1">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
								</p>
	    					</li>
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed"></use>
								</svg>
	    						<p data="2" :class="{sort_select: sortByType == 2}">
	    							<span>配送速度最快</span>
	    							<svg v-if="sortByType == 2">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    						</p>
	    					</li>
	    					<li class="sort_list_li">
	    						<svg>
									<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating"></use>
								</svg>
	    						<p data="3" :class="{sort_select: sortByType == 3}">
	    							<span>评分最高</span>
	    							<svg v-if="sortByType == 3">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    						</p>
	    					</li>
	    				</ul>
	    			</section>
	    		</transition>
    		</div>
			<!-- 筛选 -->
    		<div class="sort_item" :class="{choose_type:sortBy == 'activity'}">
    			<div class="sort_item_container" @click="chooseType('activity')">
	    			<span :class="{category_title: sortBy == 'activity'}">筛选</span>
	    			<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
		    			<polygon points="0,3 10,3 5,8"/>
		    		</svg>
    			</div>
	    		<transition name="showlist">
	    			<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, index) in Delivery" :key="index" 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" :xlink:href="delivery_mode == item.id? '#selected':'#fengniao'"></use>
									</svg>
	    							<span :class="{selected_filter: delivery_mode == item.id}">{{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,index) in Activity" :key="index" class="filter_li" @click="selectSupportIds(index, item.id)">
	    							<svg v-show="support_ids[index].status" class="activity_svg">
										<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
									</svg>
	    							<span class="filter_icon" :style="{color: '#' + item.icon_color, borderColor: '#' + item.icon_color}" v-show="!support_ids[index].status">{{item.icon_name}}</span>
	    							<span :class="{selected_filter: support_ids[index].status}">{{item.name}}</span>
	    						</li>
	    					</ul>
	    				</section>
	    				<footer class="confirm_filter">
	    					<div class="clear_all filter_button_style" @click="clearSelect">清空</div>
	    					<div class="confirm_select filter_button_style" @click="confirmSelectFun">确定<span v-show="filterNum">({{filterNum}})</span></div>
	    				</footer>
	    			</section>
	    		</transition>
    		</div>
    	</section>
    	<transition name="showcover">
    		<div class="back_cover" v-show="sortBy"></div>
    	</transition>
    	<section class="shop_list_container">
	    	<shop-list :geohash="geohash" :restaurantCategoryId="restaurant_category_id" :restaurantCategoryIds="restaurant_category_ids" :sortByType='sortByType' :deliveryMode="delivery_mode" :confirmSelect="confirmStatus" :supportIds="support_ids" v-if="latitude"></shop-list>
        <shop-list :geohash="geohash" :restaurantCategoryId="restaurant_category_id" :restaurantCategoryIds="restaurant_category_ids" :sortByType='sortByType' :deliveryMode="delivery_mode" :confirmSelect="confirmStatus" :supportIds="support_ids" v-if="latitude"></shop-list>
    	</section>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import headTop from "src/components/header/head";
import shopList from "src/components/common/shoplist";
import { getImgPath } from "src/components/common/mixin";
import {
  msiteAddress,
  foodCategory,
  foodDelivery,
  foodActivity
} from "src/service/getData";

export default {
  data() {
    return {
      geohash: "", // city页面传递过来的地址geohash
      headTitle: "", // msiet页面头部标题
      foodTitle: "", // 排序左侧头部标题
      restaurant_category_id: "", // 食品类型id值
      restaurant_category_ids: "", //筛选类型的id
      sortBy: "", // 筛选的条件
      category: null, // category分类左侧数据
      categoryDetail: null, // category分类右侧的详细数据
      sortByType: null, // 根据何种方式排序
      Delivery: null, // 配送方式数据
      Activity: null, // 商家支持活动数据
      delivery_mode: null, // 选中的配送方式
      support_ids: [], // 选中的商铺活动列表
      filterNum: 0, // 所选中的所有样式的集合
      confirmStatus: false // 确认选择
    };
  },
  created() {
    this.initData();
  },
  mixins: [getImgPath],
  components: {
    headTop,
    shopList
  },
  computed: {
    ...mapState(["latitude", "longitude"])
  },
  methods: {
    ...mapMutations(["RECORD_ADDRESS"]),
    //初始化获取数据
    async initData() {
      //获取从msite页面传递过来的参数
      this.geohash = this.$route.query.geohash;
      this.headTitle = this.$route.query.title;
      this.foodTitle = this.headTitle;
      this.restaurant_category_id = this.$route.query.restaurant_category_id;
      console.log('geohash',this.geohash)
      console.log('restaurant_category_id',this.restaurant_category_id)
      //防止刷新页面时,vuex状态丢失,经度纬度需要重新获取,并存入vuex
      if (!this.latitude) {
        console.log('经度' ,this.latitude)
        //获取位置信息
        let res = await msiteAddress(this.geohash);
        console.log('位置信息',res)
        // 记录当前经度纬度进入vuex
        this.RECORD_ADDRESS(res);
      }
      //获取category分类左侧数据
      this.category = await foodCategory(this.latitude, this.longitude);
      console.log(this.category)
      //初始化时定位当前category分类左侧默认选择项,在右侧展示出其sub_categories列表
      this.category.forEach(item => {
        if (this.restaurant_category_id == item.id) {
          this.categoryDetail = item.sub_categories;
        }
      })

      console.log(1)
      //获取筛选列表的配送方式
      this.Delivery = await foodDelivery(this.latitude, this.longitude);
      //获取筛选列表的商铺活动
      console.log('delivery',this.Delivery)
      this.Activity = await foodActivity(this.latitude, this.longitude);
      console.log('ac1',this.Activity)
      //记录support_ids的状态,默认不选中,点击状态取反,status为true时为选中状态
      this.Activity.forEach((item, index) => {
        this.support_ids[index] = { status: false, id: item.id };
      });
      console.log('activity',this.Activity)
    },
    // 点击顶部三个选项,展示不同的列表,选中当前选项进行展示,同时收回其他选项
    async chooseType(type) {
      if (this.sortBy !== type) {
        this.sortBy = type;
        //food选项中头部标题发生改变,需要特殊处理
        if (type == "food") {
          this.foodTitle = "分类";
        } else {
          //将foodTitle 和 headTitle 进行同步
          this.foodTitle = this.headTitle;
        }
      } else {
        //再次点击相同选项时收回列表
        this.sortBy = "";
        if (type == "food") {
          //将foodTitle 和 headTitle 进行同步
          this.foodTitle = this.headTitle;
        }
      }
    },
    //选中Category左侧列表的某个选项时,右侧渲染相应的sub_categories列表
    selectCategoryName(id, index) {
      //第一个选项 -- 全部商家 因为没有自己的列表,所以点击则默认获取选所有数据
      if (index === 0) {
        this.restaurant_category_ids = null;
        this.sortBy = "";
        //不是第一个选项时,右侧展示其子级sub_categories的列表
      } else {
        this.restaurant_category_id = id;
        this.categoryDetail = this.category[index].sub_categories;
      }
    },
    //选中Category右侧列表的某个选项时,进行筛选,重新获取数据并渲染
    getCategoryIds(id, name) {
	    console.log(id, name)
      this.restaurant_category_ids = id;
      this.restaurant_category_id = id;
      this.sortBy = "";
      this.foodTitle = this.headTitle = name;
    },
    //点击某个排序方式,获取事件对象的data值,并根据获取的值重新获取数据渲染
    sortList(event) {
      let node;
      // 如果点击的是 span 中的文字,则需要获取到 span 的父标签 p
      if (event.target.nodeName.toUpperCase() !== "P") {
        node = event.target.parentNode;
      } else {
        node = event.target;
      }
      this.sortByType = node.getAttribute("data");
      this.sortBy = "";
    },
    //筛选选项中的配送方式选择
    selectDeliveryMode(id) {
      //delivery_mode为空时,选中当前项,并且filterNum加一
      if (this.delivery_mode == null) {
        this.filterNum++;
        this.delivery_mode = id;
        //delivery_mode为当前已有值时,清空所选项,并且filterNum减一
      } else if (this.delivery_mode == id) {
        this.filterNum--;
        this.delivery_mode = null;
        //delivery_mode已有值且不等于当前选择值,则赋值delivery_mode为当前所选id
      } else {
        this.delivery_mode = id;
      }
    },
    //点击商家活动,状态取反
    selectSupportIds(index, id) {
      //数组替换新的值
      this.support_ids.splice(index, 1, {
        status: !this.support_ids[index].status,
        id
      });
      //重新计算filterNum的个数
      this.filterNum = this.delivery_mode == null ? 0 : 1;
      this.support_ids.forEach(item => {
        if (item.status) {
          this.filterNum++;
        }
      });
    },
    //只有点击清空按钮才清空数据,否则一直保持原有状态
    clearSelect() {
      this.support_ids.map(item => (item.status = false));
      this.filterNum = 0;
      this.delivery_mode = null;
    },
    //点击确认时,将需要筛选的id值传递给子组件,并且收回列表
    confirmSelectFun() {
      //状态改变时,因为子组件进行了监听,会重新获取数据进行筛选
      this.confirmStatus = !this.confirmStatus;
      this.sortBy = "";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.food_container {
  padding-top: 3.6rem;
}
.sort_container {
  background-color: #fff;
  border-bottom: 0.025rem solid #f1f1f1;
  position: fixed;
  top: 1.95rem;
  right: 0;
  width: 100%;
  display: flex;
  z-index: 13;
  box-sizing: border-box;
  .sort_item {
    @include sc(0.55rem, #444);
    @include wh(33.3%, 1.6rem);
    text-align: center;
    line-height: 1rem;
    .sort_item_container {
      @include wh(100%, 100%);
      position: relative;
      z-index: 14;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: 0.3rem;
      .sort_item_border {
        height: 1rem;
        border-right: 0.025rem solid $bc;
      }
    }
    .sort_icon {
      vertical-align: middle;
      transition: all 0.3s;
      fill: #666;
    }
  }
  .choose_type {
    .sort_item_container {
      .category_title {
        color: $blue;
      }
      .sort_icon {
        transform: rotate(180deg);
        fill: $blue;
      }
    }
  }
  .showlist-enter-active,
  .showlist-leave-active {
    transition: all 0.3s;
    transform: translateY(0);
  }
  .showlist-enter,
  .showlist-leave-active {
    opacity: 0;
    transform: translateY(-100%);
  }
  .sort_detail_type {
    width: 100%;
    position: absolute;
    display: flex;
    top: 1.6rem;
    left: 0;
    border-top: 0.025rem solid $bc;
    background-color: #fff;
  }
  .category_container {
    .category_left {
      flex: 1;
      background-color: #f1f1f1;
      height: 16rem;
      overflow-y: auto;
      span {
        @include sc(0.5rem, #666);
        line-height: 1.8rem;
      }
      .category_left_li {
        @include fj;
        padding: 0 0.5rem;
        .category_icon {
          @include wh(0.8rem, 0.8rem);
          vertical-align: middle;
          margin-right: 0.2rem;
        }
        .category_count {
          background-color: #ccc;
          @include sc(0.4rem, #fff);
          padding: 0 0.1rem;
          border: 0.025rem solid #ccc;
          border-radius: 0.8rem;
          vertical-align: middle;
          margin-right: 0.25rem;
        }
        .category_arrow {
          vertical-align: middle;
        }
      }
      .category_active {
        background-color: #fff;
      }
    }
    .category_right {
      flex: 1;
      background-color: #fff;
      padding-left: 0.5rem;
      height: 16rem;
      overflow-y: auto;
      .category_right_li {
        @include fj;
        height: 1.8rem;
        line-height: 1.8rem;
        padding-right: 0.5rem;
        border-bottom: 0.025rem solid $bc;
        span {
          color: #666;
        }
      }
      .category_right_choosed {
        span {
          color: $blue;
        }
      }
    }
  }
  .sort_list_container {
    width: 100%;
    .sort_list_li {
      height: 2.5rem;
      display: flex;
      align-items: center;
      svg {
        @include wh(0.7rem, 0.7rem);
        margin: 0 0.3rem 0 0.8rem;
      }
      p {
        line-height: 2.5rem;
        flex: auto;
        text-align: left;
        text-indent: 0.25rem;
        border-bottom: 0.025rem solid $bc;
        @include fj;
        align-items: center;
        span {
          color: #666;
        }
      }
      .sort_select {
        span {
          color: $blue;
        }
      }
    }
  }
  .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: 0.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(0.8rem, 0.8rem);
          margin-right: 0.125rem;
        }
        span {
          @include sc(0.4rem, #333);
        }
        .filter_icon {
          @include wh(0.8rem, 0.8rem);
          font-size: 0.5rem;
          border: 0.025rem solid $bc;
          border-radius: 0.15rem;
          margin-right: 0.25rem;
          line-height: 0.8rem;
          text-align: center;
        }
        .activity_svg {
          margin-right: 0.25rem;
        }
        .selected_filter {
          color: $blue;
        }
      }
    }
    .confirm_filter {
      display: flex;
      background-color: #f1f1f1;
      width: 100%;
      padding: 0.3rem 0.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: 0.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 0.3s;
}
.showcover-enter,
.showcover-leave-active {
  opacity: 0;
}
.back_cover {
  position: fixed;
  @include wh(100%, 100%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值