一、项目简介
这个项目基于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);
}