• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

项目实战-点餐小程序-17 首页(选择门店)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、功能需求

  1. 页面展示默认门店(门店名称、门店电话、导航地址)
  2. 点击联系电话,调取拨打默认门店的联系电话
  3. 点击【导航前往】,调取手机地图软件进行导航
  4. 与其他页面交互:
    1. 点击默认门店名称,跳转到选择门店页面  

二、代码实现

1.home.wxml

 1 <!-- 选择门店 -->
 2 <view class="chooseshop">
 3 <view class="shop" bindtap="toShop">
 4   <text>{{shopName}}</text>
 5   <image src="/images/right.png"></image>
 6 </view>
 7 <view class="contact">
 8 <view class="call" bindtap="callPhone" data-phoneNumber="{{phoneNumber}}">
 9   <image src="/images/call.png"></image>
10   <text>联系餐厅</text>
11 </view>
12 <view class="navigate" bindtap="navigateToResturant" data-marker="{{marker}}">
13   <image src="/images/navigate.png"></image>
14   <text>导航前往</text>
15 </view>
16 </view>
17 </view>

2.home.wxss

 1 /*选择门店*/
 2 .chooseshop{
 3   display: flex;
 4   justify-content: space-between;
 5   align-items: center;
 6   margin: 10rpx;
 7 }
 8 .shop{
 9   display: flex;
10   align-items: center;
11 }
12 .shop image{
13   width: 30rpx;
14   height: 30rpx;
15 }
16 .contact{
17   display: flex;
18   justify-content: space-around;
19 }
20 .call ,.navigate{
21   display: flex;
22   flex-direction: column;
23   align-items: center;
24   margin: 10rpx;
25 }
26 .call image,.navigate image{
27   width: 50rpx;
28   height: 50rpx;
29 }
30 .call text,.navigate text{
31   font-size: 20rpx;
32   color:gray;
33 }

3.home.js

 1 Page(){
 2  data: {
 3     //门店名称
 4     shopName:\'信义领御店\',
 5     //门店联系电话
 6     phoneNumber:\'0755-23204540\',
 7     marker:{},
 8     //自定义数组,存放banner显示在页面上
 9     bannerList:[],
10     //所有banner图片的高度
11     bannerHeight: \'\',
12     //自定义数组,存放热门推荐菜品
13     hotFoodList:[]
14   },
15   onLoad: function (options) {
16     console.log("门店的名称",options.name);
17     this.setData({
18       shopName:options.name,
19       phoneNumber:options.phoneNumber,
20       marker:{
21         name:options.name,
22         address:options.address,
23         latitude:options.latitude,
24         longitude:options.longitude,
25       }
26     })
27   },   
28 //选择门店
29   toShop(){
30     wx.navigateTo({
31       url: \'/pages/shop/shop\',
32     })
33   },
34   //联系餐厅
35     callPhone(e){
36       console.log("获取的联系电话",e);
37       wx.makePhoneCall({  //调起拨打电话弹窗
38         phoneNumber:e.currentTarget.dataset.phonenumber
39       })
40     },
41   //导航前往
42   navigateToResturant(e){
43     console.log("用户点击了首页导航按钮",e);
44     marker = e.currentTarget.dataset.marker
45     console.log("此时的marker",marker);
46     //获取用户当前位置
47     wx.getLocation({
48       type:"gcj02", //gcj02 返回可用于 wx.openLocation 的坐标
49     }).then(res=>{
50       console.log("用户允许获取当前位置",res);
51       //判断对象是否为空
52       if(Object.keys(marker).length>0){
53       //地图搜索目的地
54       wx.openLocation({
55         name:marker.name,
56         address:marker.address,
57         latitude:Number(marker.latitude),
58         longitude: Number(marker.longitude),
59         scale:16
60       })
61       console.log("导航所选地址");
62     }else{
63       //地图搜索目的地
64       wx.openLocation({
65         name:"信义领御店",
66         address:"广东省深圳市宝安区新安街道信义领御105号铺",
67         latitude:22.578572,
68         longitude: 113.918622,
69         scale:16
70       })
71       console.log("导航默认地址");
72       }
73   }).catch(err=>{
74       console.log("用户拒绝获取当前位置",err);
75       wx.showModal({
76         title:"授权当前位置",
77         content:"需要授权位置信息才可以导航,点击去设置开启位置权限",
78         confirmText:"去设置",
79         success(res){
80           console.log("弹窗点击",res);
81           if(res.confirm){
82             wx.openSetting()  //调起客户端小程序设置界面
83           }
84         } 
85       })
86     })
87   },
88 }

 

三、效果展示

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
项目实战-点餐小程序-20 首页-餐桌预订发布时间:2022-07-18
下一篇:
点餐小程序怎么申请和认证的方法发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap