vue3实现饿了么短信验证和高德定位（一）

前言

1. Vue3实现饿了么短信验证和高德定位（一）
2. Vue3实现饿了么商家筛选排序（二）
3. Vue3实现饿了么商品列表详情购物车评论（三）

一、项目简介
    这个项目基于VueCli3+Vuex+Axios+Vue-router，实现了饿了么的登录界面和地址界面
    登录界面实现了短信验证，需要用户输入手机号和正确的验证码才能进入主页面。
    地址界面分为三个：一开始主页面的默认定位地址；点击当前定位进入自定义地址界面；点击自定义界面的城市进入地址选择界面。

二、项目效果展示

三、具体实现

登录页面

1.验证码使用了聚合数据的api，新用户注册送10条，1.5五十条，适合测试用。

this.$axios.post('/api/posts/sms_send',{
						tpl_id:"******",
						key:"******",
						phone:this.phone
					})

2.验证码点击后禁用获取验证码按钮 45s后重试
用setInterval()和clearInterval()实现倒计时

地址页面

自定义地址页面，用v-model绑定输入的地址，调用高德地图提供的api，搜索匹配结果

searchPlace(){
	const self=this;
	AMap.plugin('AMap.Autocomplete', function(){
	  // 实例化Autocomplete
	  var autoOptions = {
		//city 限定城市，默认全国
		city: self.city
	  }
	  var autoComplete= new AMap.Autocomplete(autoOptions);
	  autoComplete.search(self.search_val, function(status, result) {
		// 搜索成功时，result即是对应的匹配数据
		self.areaList = result.tips;
		console.log(result);
	  })
	})
},

选择城市界面
通过axios获取全国城市(包括全部城市和热门城市)，将获取的城市遍历放到citylist里面去，按字母排序

getCityInfo(){
	this.$axios("/api/posts/cities")
	.then(res => {
		 console.log(res.data);
		this.cityInfo = res.data;
		//计算key
		this.keys = Object.keys(res.data);
		//移除hotcities
		this.keys.pop();
		//keys排序
		this.keys.sort();
}

引入Bscroll来实现页面固定、城市滚动以及字母索引的跳转

import BScroll from "better-scroll";

initScroll(){
this.scroll = new BScroll(this.$refs.area_scroll,{
		click:true
	});
},
selectKey(index){
		const citylist = this.$refs.area_scroll.getElementsByClassName("citylist");
		// 滚动到对应位置
	  let el = citylist[index];
	  this.scroll.scrollToElement(el,250); 
}

饿了么后续更新
2. Vue3实现饿了么商家筛选排序
3. Vue3实现饿了么商品列表详情购物车评论