項目實戰-點餐小程式-17 首頁(選擇門店)

一、功能需求

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 }      

三、效果展示