專案實戰 點餐小程式 18 首頁 選擇門店

一、功能需求

顯示當前位置

從資料庫獲取所有門店的資訊

各個門店：點選對應按鈕實現打**聯絡，導航到門店

與其他頁面互動點選門店資訊，攜帶門店資訊跳轉到門店詳情頁 shopdetail

點選【選這家】按鈕，攜帶門店資訊跳轉到首頁 home

二、**實現

1.shop.wxml

1

2<
view 
class
="current"
>
3<
image 
src="/images/currentlocation.png"
class
="location"
>
image
>
4<
text
>}當前位置
text
>
5<
image 
src="/images/down.png"
class
="down"
>
image
>
6view
>78
9<
view 
class
="shopitem"
wx:for
="}"
>
10<
view 
class
="left"
bindtap
="toshopdetail"
data-item
="}"
>
11<
view 
class
="name"
>}
view
>
12<
view 
class
="rightline"
>
13<
view 
class
="distance"
>距離您}
view
>
14<
view 
class
="address"
>}
view
>
15view
>
16<
view 
class
="worktime"
view
>
17view
>
18<
view 
class
="right"
>
19<
view 
class
="chooseok"
bindtap
="chooseshop"
data-item
="}"
>選這家
view
>
20<
view 
class
="img"
>
21<
image 
src="/images/call.png"
class
="call"
bindtap
="callphone"
data-item
="}"
>
image
>
22<
image 
src="/images/n**igate.png"
class
="n**igate"
bindtap
="n**igatetoresturant"
data-item
="}"
>
image
>
23view
>
24view
>
25view
>

1

page4/*
當前位置*/5
.current
12.current .location
16.current .down
2021
22/*
門店列表
*/23
.shopitem
30.left
33.rightline
36.name
41.distance
46.address
55.worktime
59.right
66.right .chooseok
72.right .img
76.call,.n**igate

1

//使用者當前位置的經度和維度
2 let longitudeuser = ''
3 let latitudeuser = ''4//
所選門店的經度和緯度
5 let longitudeshop = ''
6 let latitudeshop = ''7//
使用者當前位置和所選門店的距離
8 let distance = ''9//
門店列表
10 let shoplist =
11page(,
1920 onload: function
(options) ,
2627
//獲取使用者當前位置
28getcurrentlocation()).then(res=>)
42 }).catch(err=>
53} 
54})
55})
56},
5758
//獲取門店列表（自定義）
59getshoplist())
68//
獲取距離
69for (var i =0;i))
79//
在陣列shoplist的物件中新增新字段distance
80var distance = "shoplist["+i+"].distance";
81this
.setdata()
84 console.log("新的陣列",shoplist);85}
86 }).catch(err=>)
89},
9091
//選中門店
92chooseshop(e))
103},
104105
//聯絡餐廳
106callphone(e))
111},
112113
//導航前往
114n**igatetoresturant(e)).then(res=>)
130 }).catch(err=>
141} 
142})
143})
144},
145//
攜帶門店資訊跳轉到詳情頁
146toshopdetail(e))
157},
158159
//計算距離函式
160rad(d) ,
164165
//計算使用者位置和門店的距離（自定義）
166getdistance(lat1, lng1, lat2, lng2) ,
182 })

專案實戰 點餐小程式 17 首頁 選擇門店

一 功能需求 頁面展示預設門店 門店名稱 門店 導航位址 點選聯絡 調取撥打預設門店的聯絡 點選 導航前往 調取手機地圖軟體進行導航 與其他頁面互動 點選預設門店名稱，跳轉到選擇門店頁面 二 實現 1.home.wxml 1 2 view class chooseshop 3 view class ...

微信點餐小程式 1

本專案日誌用logback 1.日誌的使用 runwith springrunner.class springboottest public class loggertest password name password logger.error error.2.logback的配置 logging...

V5shop餐飲小程式優化點餐流程,提公升使用者體驗

v5shop餐飲版小程式新一輪公升級！餐飲行業福利來襲！經過技術部門爭分奪秒的研發 測試，v5shop餐飲版小程式又迎來新一輪的公升級！本次公升級主要內容 全新的點餐流程帶來更震撼的使用者體驗 精準推送優惠券 app中增加優惠買單的訂單資料 app中增加優惠金額的統計資料.一 全新的點餐流程帶來更震...