vuecli实现仿写饿了么

​​点击github获取代码​​

仿写饿了么是一个不错的用来锻炼vue的方式，我仿写的饿了么还是比较浅显的，没有使用饿了么提供的api，数据就是自己手写的几条json用json-server打开，只是实现基本功能，唯一一个第三方api就是百度地图的获取的定位还不是精准定位只定位到城市，高德的可以实现精准定位，不过用到cli中不会用了，就只用了百度的定位

bandicam 2020-04-22 10-19-41-442

以下是一些实现的功能

店铺页面实现

基本功能

头部
顶部一个返回栏，可以返回点上一页
头部商家头像高斯模糊当做背景，暗色
右侧一个收藏按钮，点击收藏弹窗显示功能，并可取消
商家头像下面一个搜索框缩小状态，获取焦点时伸长并遮盖住搜索框右侧的tab选项卡，失去焦点时恢复（搜索商品列表内商品功能未实现）
搜索框右侧三个tab选项卡分为点餐主页和评论，商家店铺介绍，点击切换不同组件显示对应内容
选项卡切换效果以及页面向下滚动时浮动紧贴顶部返回导航栏，以及样式变化

点餐
一个展示商家距离和商家特色等信息的横幅
再下面一个商家优惠活动介绍的横幅
菜单区

左侧纵向tab选项卡，点击切换右侧不同系列菜品，点击带高亮显示
右侧菜品展示,页面下滑至菜单区正好顶住，头部tab选项卡时，开启菜单的可滑动，手指拖动上下查看下面的菜品
在手指向下滑动查看下方菜品时，左侧对应tab选项卡跟随菜品种类发生对应选中状态
左侧tab选项卡，点击时高亮并且右侧对应菜品出现在菜品展示区头部开始向下排列
商品右下角有添加按钮，点击添加，弹出一个悬浮在页面中间的菜单卡，展示当前点击的商品的图片，title以及价钱，有菜品的份量，数量可选择功能，点击取消则弹窗消失
点击确定，则将当前商品加入购物车含数量份量信息(添加购物车特效未完成)
添加到购物车中的商品，不同商品直接添加，若有相同商品重复添加，判断此次添加的商品和购物车中存在的商品的尺寸及其他辨识信息，若都相同则将两次添加商品的购买数量相加，若存在同一种商品不同尺寸等型号不同点，则当做新商品添加

购物车

购物车浮动在页面的底部，左侧购物车图标，中间当前是否有添加商品，右侧一个点击购买按钮在满足一定金额商品后为可点击状态否则呈灰色，购物车底部栏在评价等页面展示时隐藏状态
购物车图标右上角一个气泡，展示当前购物车中商品的数量，购物车图标右侧显示当前购物车中的商品的总价，若没有商品，则显示未购买字样，
点击购物车图标，页面加一个蒙版，下方弹出一个弹窗，展示购物车中信息
购物车展开后右侧一个清空按钮，点击清空询问是否清空，确定则清空商品，
下面是所有添加商品的列表，列表高度固定，可以手指上下滑动，查看添加的商品，每个商品卡片上展示商品的基本信息和所添加的商品的型号等辨识信息，有删除单个商品功能，也可对添加的商品的数量进项加减操作，实时响应，点击蒙版阴影区弹窗关闭
购物车展示时有一个从底部向上滑动的效果(目前购物车展示时会遮挡住页面底部的购物车浮动栏)

店铺页面展示基本功能以上

请求地理位置-百度地图api接口

定位不准，只能定位到城市，不过能获取经纬度，可以用别的方式通过经纬度获取详细地址

高德地图功能较强就是不会在vuecli中使用是只能获取个经纬度，但还报错，本项目不需要展示地图所以凑合用百度的吧

proxy代理

vuecli4 没有config及index.js文件，换成了Vue.config.js配置文件，第一次跨域激动了一天才整明白，好简单的
axios请求：

this.axios.get('/location/ip?ak=msRpqxIUqM1iBm1QvPTllTxvLsz0OuNO&coor=bd09ll')

vue.config.js

module.exports = {
  devServer: {
    host: "localhost",
    port: 8080, // 端口号
    proxy: { //配置多个跨域
      "/location": {//当请求/location时以哪个网址代理
        target: "http://api.map.baidu.com",
        changeOrigin: true,
      }
    }
  }
}

mint-ui组件的样式修改
有意思的是官网让我们去src源码里修改，呵呵
后来网上的博客说去掉scoped就可以了，md样式设计上要注意不要与别的地方的样式重复

记住了：移动端没有onmousemove以及mouseenter等事件，掉了好多头发才知道

那么问题来了，移动端的拖拽是则呢实现的咧，
上网一搜发现学漏了，移动端的叫touchstart,touchmove等也有一套方法用在移动端上，获取坐标可以用getBoundingClientRect(),不过性能不高，应尽量少用
触摸事件4个接口
touchEvent touch touchList documentTouch
事件类型
touchstart touchmove touchend touchenter touchleave touchcancel(拖拽终断)
事件属性
altKey 事件发生时是否Alt键按下 -> true/false/1/0
type 触摸时触发的事件类型
每一个事件都包括三个触摸属性列表
touches 当前屏幕上所有手指触摸点的一个列表
targetTouches 当前元素对象上所有触摸点的列表
changedTouches 设计当前事件的触摸点的列表
每一个触摸点对应的touch都有三对重要的属性：clientX/Y pageX/Y screenX/Y
触摸事件跟鼠标事件的触发先后顺序：
Touchstart > toucheend > mousemove > mousedown > mouseup >click

​​移动端实现拖拽两种方法​​

pageX/Y：相对于文档边缘,包含滚动条距离clientX/Y：相对于当前页面且不包含滚动条距离

以上，就可以做一个移动端的拖拽菜单

滑动菜单：包裹8宫格的容器设置它的width为200vw，两个菜单每个宽度为100vw，让当前页面overflow-x=hidden,然后设置touchmove事件用clientX获取点击坐标，在移动到指定距离时让这个包裹8宫格的容器向左平移100vw，这样这个容器就’滑’到了右边另一个宽度的100vw的8宫格，然后加个动画，判断个当前样式设置下面两个进度条同步菜单滑动

然后添加一个点击手动设置当前位置的简易实现
用mint-ui的prpup弹出层，弹出的是mint-ui的picker组件，这个组件提供一个方法setSlotValues在picker被改变时触发，让左面省改变时，右侧北选区的信息发生改变，就是换一个数组，组件会罗列数组中每一个元素，在picker右上角添加一个el-Button设置点击事件，点击按钮，让当前的picker选中的值设置成头部的地区信息。

路由切换动画

这里绑定一个变量，用切换绑定变量的值，切换路由切换动画的效果

<transition :name="router_name">
      <router-view />
    </transition>

给transition绑定name属性，可以让空户有几种可调节页面切换样式
基本样式

.v-enter {
    opacity: 0;
    transform: rotate(30deg) translateX(100vw) scale(0);
  }

  .v-leave-to {
    opacity: 0;
    transform: rotate(-30deg) translateX(-100vw)  scale(0);
  }

  .v-enter-active,
  .v-leave-active {
    width: 100vw;
    position: absolute;
    transition: all .7s ease;
  }

点击领取红包跳转红包页面，点击去使用直接进入老八的小店

订单页

订单页就是点击购买是当前购物车中的数据，渲染到订单页面上，
值得一提的是，实现:每次购买的商品头部有一个点击购买时的时间。
这个功能看起来简单，不过做起来还是有点东西的，我感觉我的实现方式十分的笨拙，但也没想到更好的办法，可能跟我获取数据的方式有关吧
实现思路：先将商品订单渲染到页面上，然后在新添加的商品的上边插入它购买的时间
在每次点击购买的时候，将当前购物车中的数据push到vuex中一个数组统一保存，并把当前的时间push到vuex中单独保存时间的数组中，还要获取此次push到数组中的数据的长度，也保存到一个单独的数组中，这样就能知道这次购买的时间，几种商品，和这几种商品的信息，在订单页mounted时，获取这三个数组中的数据，第一次添加肯定是在订单列表的最上边也就是在订单列表的第0项前插入vuex中保存时间数组中的第0项索引数据，如果用户又买了商品，那么此次购买商品的种类的长度就是当前时间要插入在商品列表中的商品的索引。
有点绕有点绕，语言还是无法将自己的想法完全的表述清楚，有待提高，如果看到这，欢迎你跟我说说，如果是你会怎么实现这个功能^ . ^
其他的功能不是多难，就先到这，如果以上你有什么问题或者不同见解，欢迎找我讨论，咱们一起为开源做贡献