模仿老乡鸡点餐小程序选择门店功能

1.wxml

<!--pages/home/chooseShop/chooseShop.wxml-->
<wxs src="../../../common.wxs" module="common" />
<view class="choose_head"><view><view class="choose_head_btn">附近门店</view></view><view class="choose_head_search" bindtap="goSearch"><image src="../../../icons/search.png" class="choose_head_search_icon"></image><text>搜索</text></view>
</view><view class="choose_main"><map id="map" longitude="118.789393" latitude="31.967154" scale="12" v-if="hasMarker" markers="{{markers}}" bindmarkertap="markertap" style="height:{{showMap == true?'160px':'0px'}}"></map><view class="mapBtn" bindtap="mapChange"><text>{{showMap == true?'收起地图':'展开地图'}}</text><image src="../../../icons/row.png" class="mapBtn_icon" style="{{row}}"></image></view><block wx:for="{{storeList}}" wx:for-item="store" wx:key="{{index}}"><view class="choose_item"><view class="choose_item_left"><view><view class="choose_item_name">{{store.name}}</view><view><image src="../../../icons/address.png" style="width:8px;height:10px;margin-right:3px;"></image><text style="margin-top:20px;">{{store.address}}</text></view></view><view class="choose_item_flag">24h营业</view></view><view class="choose_item_right"><view class="buy_btn" data-storeid="{{store.storeId}}" bindtap="buy">去下单</view><text style="font-size:11px;">距离{{common.inverse(store.distance)}}</text><view class="choose_item_right_btn"><view data-phone="{{store.phone}}" bindtap="callPhone"><image src="../../../icons/phone.png" style="width:33px;height:33px;"></image></view><view data-store="{{store}}" bindtap="openLocation"><image src="../../../icons/plane.png" style="width:33px;height:33px;margin-left:10px;"></image></view></view></view></view></block>
</view>

2.js

// pages/home/chooseShop/chooseShop.js
const httpRequest = require("../../../providers/httpRequest");
const globalData = getApp().globalData;
Page({/*** 页面的初始数据*/data: {markers: [{iconPath: "/icons/icon_address.png", //浮标图片路径，推荐png图片id: 0, // Id支持多个，方便后期点击浮标获取相关信息latitude: 31.967154, // 经度longitude: 118.789393, //纬度width: 30, // 浮标宽度height: 30, // 浮标高度}],hasMarker: false,//是否显示标记showMap: true,//是否展开地图row: '',//展开、收起图标的样式storeList: [],//附近门店列表},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.getLocation()},// 点击浮标markertap(e) { // 这是一个事件，在wxml中绑定这个事件，点击浮标后wx.openLocation({ //此设置属于高级APi,可以打开微信内置地图组件latitude: this.data.storeList[0].lat,longitude: this.data.storeList[0].lng,});},/** 获取当前地理位置 */getLocation: function() {var _this = this;// 查看用户是否授权获取当前地理位置wx.getLocation({type: 'wgs84',success(res) {// _location = {//   latitude: res.latitude, // 纬度//   longitude: res.longitude // 经度// }// 获取门店列表_this.getStoreList(res.latitude, res.longitude);},fail: function(err) {if (err.errMsg == "getLocation:fail auth deny") { // 未授权wx.showModal({title: '是否授权获取当前位置',content: '需要获取您的地理位置，请确认授权，否则无法获取您附近的门店信息',success: function(res) {if (res.confirm) {// 前往设置授权wx.openSetting();}}})}}});},/** 获取门店列表 */getStoreList: function(lat, lng) {var _this = this;httpRequest.get("xxx/xxx", {lat: lat || _location.latitude, // 纬度lng: lng || _location.longitude, // 经度order: "range",}, function(data) {console.log(data.result.data)if (data.code == 200) {if (data.result.data.length > 0) {var storeList = data.result.data;_this.setData({storeList: storeList,hasMarker: true,markers: [{iconPath: "/icons/icon_address.png", //浮标图片路径，推荐png图片id: 0, // Id支持多个，方便后期点击浮标获取相关信息latitude: storeList[0].lat, // 经度longitude: storeList[0].lng, //纬度width: 30, // 浮标宽度height: 30, // 浮标高度callout: {//气泡框content: storeList[0].name,color: '#4c5264',bgColor: "#fff",padding: "5px 10px",display: "ALWAYS",//气泡框是否常显}}]});console.log(_this.data.markers)}console.log(_this.data.storeList)} else {wx.showModal({content: data.message,})}})},// 搜索goSearch: function() {var that = this;wx.chooseLocation({latitude: this.data.storeList.length > 0 ? this.data.storeList[0].lat : '',longitude: this.data.storeList.length > 0 ? this.data.storeList[0].lng : '',success: function(res) {// console.log(res);that.getStoreList(res.latitude, res.longitude)}})},// 是否展示地图mapChange() {if (this.data.showMap == true) {this.setData({showMap: !this.data.showMap,row: "transform:rotate(180deg)"});} else {this.setData({showMap: !this.data.showMap,row: "transform:rotate(360deg)"});}},/**拨打客服电话 */callPhone: function(e) {wx.makePhoneCall({phoneNumber: e.currentTarget.dataset.phone});},// 打开地图查看位置openLocation: function(e) {wx.openLocation({latitude: e.currentTarget.dataset.store.lat,longitude: e.currentTarget.dataset.store.lng,})},// 去下单buy(e) {var storeid = e.currentTarget.dataset.storeid;wx.setStorageSync('storeid', storeid)if (!wx.getStorageSync('token')) {this.outLogin()} else {wx.switchTab({url: '../home?storeId=' + storeid,})}},outLogin: function() {wx.showModal({content: '您已退出登录，请先登录账号',complete: function() {wx.switchTab({url: '../../mine/mine',})}});},
})

3.wxss

/* pages/home/chooseShop/chooseShop.wxss */page {background-color: rgba(0, 0, 0, 0.04);
}.choose_head {padding: 0 20px;background-color: #fff;font-size: 14px;display: flex;justify-content: space-between;align-items: center;
}.choose_head_btn {padding: 10px 0;box-sizing: border-box;color: #ff6969;border-bottom: 2px solid #ff6969;
}.choose_head_search {color: #727072;font-size: 12px;padding: 5px 13px;background-color: #f6f6f6;border-radius: 20px;
}.choose_head_search_icon {width: 12px;height: 12px;vertical-align: middle;margin-right: 3px;
}.choose_main {padding: 10px;
}#map {width: 100%;transition: height 0.3s;
}.mapBtn {text-align: center;padding: 7px;font-size: 12px;color: #4c5264;background-color: #fff;margin-bottom: 15px;box-sizing: border-box;
}.mapBtn_icon {width: 15px;height: 8px;margin-left: 5px;transition: all 0.3s;
}.choose_item {padding: 10px 15px;background-color: #fff;color: #424242;font-size: 12px;margin-bottom: 15px;display: flex;
}.choose_item_left {width: 70%;border-right: 1px solid #e7eaf0;display: flex;flex-direction: column;justify-content: space-between;
}.choose_item_name {font-size: 16px;font-weight: bold;color: #4c5264;
}.choose_item_flag {color: #ff6969;font-size: 11px;width: 50px;border: 1px solid #ff6969;text-align: center;border-radius: 5px;
}.choose_item_right {width: 30%;box-sizing: border-box;padding-left: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.choose_item_right_btn {display: flex;margin-top: 10px;
}.buy_btn {font-size: 15px;color: #ff6969;
}

模仿老乡鸡点餐小程序选择门店功能相关推荐

智能点餐小程序有哪些基本功能
智能点餐小程序随着互联网技术的发展,它是互联网智慧在很多领域的体现,比如餐饮业的智能点菜和餐厅管理系统.智能点菜app的开发和生产是当前餐饮服务软件.人们的点餐服务可以直接在手机上使用app软件在餐厅 ...
餐饮店点餐小程序开发怎么做
随着科技的发展,点餐小程序已经成为餐饮业必不可少的工具.可以帮助餐厅提高服务质量,提升顾客体验,提高餐厅的经营效率.那么,如何开发餐厅点餐小程序呢?本文将为您介绍点餐小程序的开发过程,帮助您更好地了解 ...
扫码点餐小程序源码_扫码点餐小程序有什么用？怎么制作？
现在小程序扫码点餐服务已经越来越普及,当用户需要点餐时,无需麻烦服务人员,只需扫描餐桌上或者海报上的小程序码,就能快速点餐下单.这样不仅节约了排队时间,也提高了商家自己的服务效率. 上线了小程序案例, ...
“李记餐厅”微信点餐小程序+后台管理系统
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 "李记餐厅"微信点餐小程序+后台管理系统效果视频 http ...
微信点餐小程序开发_分享微信点餐小程序可以实现哪些功能
线下餐饮实体店都开始摸索发展网上订餐服务.最多人选择的是入驻外卖平台,但抽成高,推广还要另买流量等问题,也让不少商家入不敷出.在这种情况下,建立自己的微信订餐小程序,做自己的私域流量是另一种捷径.那么 ...
2021最新外卖霸王餐小程序、H5、微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩源码下载
2021年了,你还在用淘宝客吗?赶紧跟上互联网的大势吧,外卖cps就是cps人群趋势! 个人.个体.企业均可使用外卖霸王餐小程序.H5.微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩 2 ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
微信小程序-店内点餐小程序
店内点餐小程序 ##前几天给朋友店里写了个点餐小程序,可以实现点餐.上架.编辑.在线支付,,,废话不多说,看代码代码下载地址:https://download.csdn.net/download/w ...
商家如何自己零成本免费制作点餐小程序
现在点餐小程序成为餐饮店的标配,顾客只要扫码,即可进入小程序点餐.顾客付款后,后厨自动打印出订单并开始制作.整个过程非常方便流畅,甚至还可以免去收银(或服务)人员.那么,这种餐饮小程序要如何搭建呢?找 ...
如何制作点餐小程序？
随着移动互联网的发展,点餐小程序的出现越来越受到大家的欢迎,它方便快捷,可以随时随地点餐,特别是在疫情期间更受到了用户的喜爱.那么,如何制作一个点餐小程序呢?下面将会简单介绍一下步骤,并通过一个具体案 ...

模仿老乡鸡点餐小程序选择门店功能

模仿老乡鸡点餐小程序选择门店功能相关推荐

最新文章

热门文章