饿了么vue实现学习笔记

Posted 2020-11-02 Archer-Fang

技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
以功能实现着手学习
1. 定位功能 home.vue
通过跨域获取当前的地理位置
http://cangdu.org:8001/v1/cities?type=guess
2. 选择城市转跳页面到搜索详细地址 home.vue
根据API接口的ID，通过
router-link :to="‘/city/‘ + guessCityid"传值
路由定位到city.vue组件
根据路由cityid获取cityid：
this.cityid = this.$route.params.cityid;
通过跨域获取城市名称
3. 搜索地址，并且点击时缓存 city.vue
还是通过跨域访问获取JSON数据，并且在前端控制UI的显示
//http://cangdu.org:8001/v1/pois?type=search&city_id=2&keyword=123
缓存：window.localStorage.getItem(name);
3.1地址的本地缓存加载
如果存在地址的本地缓存的话，在页面初始化时通过getStore方法加载缓存，并且加以显示
3.2搜索地址
在挂载mount的时候已经通过router那里获取到所属城市的id了，如果输入的地址不为空，那么设置3个参数historytitle,placelist,placeNone,分别控制UI（搜索历史，清空所有的显示），输入地址内容的显示，以及如果没有结果显示的UI。
3.3本地缓存的存储
点击一个搜索出来的地址以后，获取本地对该地址数组的缓存：1.如果缓存存在，那么判断地址跟缓存中的数据是否重复，如果不重复，则加入到缓存中去，否则不加入，并且重新设置缓存。2.如果缓存不存在直接加入到数组中，设置为数组缓存。
3.4完成缓存操作以后，通过路由转跳到新的组件上去。
4. 展示所选地址附近商家列表和食品类型列表
4.1展示导航食品类型列表
1.根据搜索地址那儿的router获取经纬度：
"geohash":"30.26537,120.17519"
2.根据api接口获取JSON数组
api:http://cangdu.org:8001/v2/index_entry?30.26537,120.17519&group_type=1&flags[]=F
3.设置新数组负责展示模块
4.2通过组件展示附近商家列表
1.定义一个shopList组件，为组件传值，传值的方式有两种，一种是直接在组件那儿设置参数传值，另外一种是通过mutation传值，通过state取值。
2.在methods处定义一个异步函数initDate，去api获取数据，完成以后再mounted()那儿初始化。
5. 搜索美食，餐馆
跨域。该项目有BUG，显示经纬度错误，已修改PR。
修改详情如下：
BUG显示经纬度错误
src/components/footer section处加入query
代码从 <section @click = "gotoAddress({path: ‘/search/geohash‘})" class="guide_item">
改为<section @click = "gotoAddress({path: ‘/search/geohash‘,query: {geohash}})" class="guide_item">
src/page/search/search.vue mouted处
代码从 this.geohash = this.$route.params;
改为 this.geohash = this.$route.query.geohash;
6.根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 ---组件展示
1.当选中要排序的内容时，将要排序的内容赋值，到data()中，并且将参数传到组件中
赋值例子：
this.restaurant_category_ids=id
传参到组件：
<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>
2.组件通过props获取父组件中的传值
props: [‘restaurantCategoryId‘, ‘restaurantCategoryIds‘, ‘sortByType‘, ‘deliveryMode‘, ‘supportIds‘, ‘confirmSelect‘, ‘geohash‘]
3.创建监听，如果数据改变了的话，通过异步函数去取值，例子如下：
1.创建监听：
watch: {
//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
restaurantCategoryIds: function (value){
this.listenPropChange();
}
}
2.在methods处创建异步函数：
async listenPropChange(){
this.showLoading = true;
this.offset = 0;
let res = await shopList(this.latitude, this.longitude, this.offset, ‘‘, this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
this.hideLoading();
//考虑到本地模拟数据是引用类型，所以返回一个新的数组
this.shopListArr = [...res];
}

7. 餐馆食品列表页
1.点击菜单，显示相应的foodList
设置menuIndexChange，解决运动时foodList处依然监听的BUG，点击时menuIndexChange为false，运动结束，true，继续监听，获取shopListTop数组，用scrollTo，移动到相应的foodList
2.下拉食品列表，显示相应的菜单
监听加载数据的动画结束时的状态，动画结束以后获取食品列表的高度，并且对食品列表设定监听，根据pos.y的值来与食品列表高度数组比较获取index，并且显示。同时，设置scrollToElement,当食品列表下移到一定高度时，菜单下移，当点击一定高度以下（从上往下看）菜单时，菜单点击结束，恢复监听，菜单下移。
notice:有点疑问的是，为什么设置好偏移量以后，菜单会下移，从代码层面看，是跟BScroll有关系的。BScroll有点不熟悉hhh，我就看的懂BScroll的参数，并且给它注释了。

8. 购物车功能
8.1购物车父组件功能说明
1.moveInCart
添加到购物车动画
2.showChooseList
显示选规格的界面
3.showReduceTip
显示减少按钮
4.showMoveDot
接收子组件传递的参数，用于moveInCart
8.2moveInCart和showMoveDot
用JS实现点击添加以后，图标移动到购物车
1.在组件中，点击添加按钮，触发addToCart事件，在事件中获取按钮距离视图左边和底部的位置，并且对showMoveDot数组赋值为true,触发父组件showMoveDot的事件
2.父组件showMoveDot的事件触发函数showMoveDotFun对相关参数进行赋值，其中this.showMoveDot = [...this.showMoveDot, ...showMoveDot];是在原先的数组上，清空数组，继续添加数据的意思
3.transition中v-for="(item,index) in showMoveDot"存在该数据的值，则执行动画，执行动画参数：
appear
@after-appear = ‘afterEnter‘
@before-appear="beforeEnter"
4.用JS实现afterEnter和beforeEnter

 

9. 店铺评价页面
点击标签无变化，我看了下API接口，是接口数据的问题。
10. 单个食品详情页面
11.商家详情页
12.登录、注册
后台传递一个base64格式的图片与图片内容
图片给用户看，图片内容校验用户输入的验证码
用户输入的匹配后将验证码内容一起发到服务器再验证

<------之后的部分觉得没必要再看下去了.------>
13.修改密码
14.个人中心 -- 完成
15.发送短信、语音验证 -- 完成
16.下单功能 -- 完成 ?????? //不会
17.订单列表 -- 完成
18.订单详情 -- 完成