Showing
7 changed files
with
173 additions
and
77 deletions
| 1 | // components/reserve/seller-box/seller-box.js | 1 | // components/reserve/seller-box/seller-box.js |
| 2 | +import util from '../../../utils/util'; | ||
| 3 | +import App from '../../../utils/api'; | ||
| 4 | +const {regeneratorRuntime} = global | ||
| 2 | Component({ | 5 | Component({ |
| 3 | /** | 6 | /** |
| 4 | * 组件的属性列表 | 7 | * 组件的属性列表 |
| 5 | */ | 8 | */ |
| 6 | properties: { | 9 | properties: { |
| 7 | - seller:{ | ||
| 8 | - type:Object, | ||
| 9 | - value:{} | ||
| 10 | - } | 10 | + |
| 11 | }, | 11 | }, |
| 12 | 12 | ||
| 13 | /** | 13 | /** |
| @@ -15,15 +15,23 @@ Component({ | @@ -15,15 +15,23 @@ Component({ | ||
| 15 | */ | 15 | */ |
| 16 | data: { | 16 | data: { |
| 17 | hasShow:false, | 17 | hasShow:false, |
| 18 | + seller:{}, | ||
| 18 | }, | 19 | }, |
| 19 | 20 | ||
| 20 | /** | 21 | /** |
| 21 | * 组件的方法列表 | 22 | * 组件的方法列表 |
| 22 | */ | 23 | */ |
| 23 | methods: { | 24 | methods: { |
| 24 | - show(){ | 25 | + show(seller){ |
| 26 | + seller.distance=parseInt(seller.distance); | ||
| 27 | + if(seller.distance>1000){ | ||
| 28 | + seller.distance=(seller.distance/1000).toFixed(2)+'公里' | ||
| 29 | + }else{ | ||
| 30 | + seller.distance+='米'; | ||
| 31 | + } | ||
| 25 | this.setData({ | 32 | this.setData({ |
| 26 | hasShow:true, | 33 | hasShow:true, |
| 34 | + seller:seller, | ||
| 27 | }) | 35 | }) |
| 28 | }, | 36 | }, |
| 29 | hide(){ | 37 | hide(){ |
| @@ -31,6 +39,30 @@ Component({ | @@ -31,6 +39,30 @@ Component({ | ||
| 31 | hasShow:false, | 39 | hasShow:false, |
| 32 | }) | 40 | }) |
| 33 | this.triggerEvent('event',{type:'hide'}); | 41 | this.triggerEvent('event',{type:'hide'}); |
| 34 | - } | 42 | + }, |
| 43 | + tapButton(e){ | ||
| 44 | + let type=util.attr(e,'type'); | ||
| 45 | + if(type=='oncall'){ | ||
| 46 | + if(!this.data.seller.phone){ | ||
| 47 | + return util.toast('商家电话错误','none'); | ||
| 48 | + } | ||
| 49 | + wx.makePhoneCall({ | ||
| 50 | + phoneNumber:this.data.seller.phone | ||
| 51 | + }) | ||
| 52 | + }else{ | ||
| 53 | + util.toast('请打电话预定','none'); | ||
| 54 | + } | ||
| 55 | + }, | ||
| 56 | + lookLocation:function(){ | ||
| 57 | + wx.openLocation({ | ||
| 58 | + latitude:Number(this.data.seller.lat), | ||
| 59 | + longitude:Number(this.data.seller.long), | ||
| 60 | + scale:17, | ||
| 61 | + address:this.data.seller.map_address, | ||
| 62 | + success:function (res) { | ||
| 63 | + console.log(res) | ||
| 64 | + } | ||
| 65 | + }) | ||
| 66 | + }, | ||
| 35 | } | 67 | } |
| 36 | }) | 68 | }) |
| @@ -2,16 +2,39 @@ | @@ -2,16 +2,39 @@ | ||
| 2 | <cover-view class="mask flex-vr" hidden="{{!hasShow}}" bindtap="hide"> | 2 | <cover-view class="mask flex-vr" hidden="{{!hasShow}}" bindtap="hide"> |
| 3 | <cover-view class="showModal"> | 3 | <cover-view class="showModal"> |
| 4 | <cover-view class="header"> | 4 | <cover-view class="header"> |
| 5 | - {{seller.seller_name}} | 5 | + {{seller.sellername}} |
| 6 | </cover-view> | 6 | </cover-view> |
| 7 | - <cover-view class="body">{{opt.body}}</cover-view> | ||
| 8 | - <cover-view class="footer flex-cc"> | ||
| 9 | - <button class="button-none cancel" plain wx:if="{{opt.cancelText}}" | ||
| 10 | - bindtap="tapButton" data-type="cancel" | ||
| 11 | - style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button> | ||
| 12 | - <button class="button-none" plain | ||
| 13 | - bindtap="tapButton" data-type="confirm" | ||
| 14 | - style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button> | 7 | + <cover-view class="tip flex-lr"> |
| 8 | + <cover-view class="ping flex-ll">★★★★★ | ||
| 9 | + <cover-view style="color: #353535; text-indent: 40rpx">¥50元/人</cover-view> | ||
| 10 | + </cover-view> | ||
| 11 | + <cover-view class="type">潮汕火锅</cover-view> | ||
| 12 | + </cover-view> | ||
| 13 | + <cover-view class="info flex-ll"> | ||
| 14 | + <cover-image src="/pages/image/add-act.png" style="width: 30rpx; height: 30rpx; background-color: #F4A22A"></cover-image> | ||
| 15 | + <cover-view class="type">在线订座买单8折起</cover-view> | ||
| 16 | + </cover-view> | ||
| 17 | + <cover-view class="info flex-ll"> | ||
| 18 | + <cover-view src="" style="width: 30rpx; height: 30rpx;"></cover-view> | ||
| 19 | + <cover-view class="type">赠送精美小菜和饮品</cover-view> | ||
| 20 | + </cover-view> | ||
| 21 | + <cover-view class="info flex-ll" style="margin-top: 22rpx;"> | ||
| 22 | + <cover-image src="/pages/image/gps-icon.png" style="width: 26rpx; height: 32rpx;"></cover-image> | ||
| 23 | + <cover-view class="type" catchtap="lookLocation">{{seller.map_address}}</cover-view> | ||
| 24 | + </cover-view> | ||
| 25 | + <cover-view class="body"></cover-view> | ||
| 26 | + </cover-view> | ||
| 27 | + <cover-view class="footer flex-lr"> | ||
| 28 | + <cover-view class="flex-lr left"> | ||
| 29 | + 距离{{seller.distance}} | ||
| 30 | + </cover-view> | ||
| 31 | + <cover-view class="flex-lr right"> | ||
| 32 | + <button class="button-none online" plain | ||
| 33 | + bindtap="tapButton" data-type="online" | ||
| 34 | + style="color:{{opt.cancelColor}};">在线预订</button> | ||
| 35 | + <button class="button-none oncall" | ||
| 36 | + bindtap="tapButton" data-type="oncall" | ||
| 37 | + style="color:{{opt.confirmColor}};">电话预定</button> | ||
| 15 | </cover-view> | 38 | </cover-view> |
| 16 | </cover-view> | 39 | </cover-view> |
| 17 | </cover-view> | 40 | </cover-view> |
| @@ -13,11 +13,14 @@ | @@ -13,11 +13,14 @@ | ||
| 13 | width: 90%; | 13 | width: 90%; |
| 14 | background-color: #fff; | 14 | background-color: #fff; |
| 15 | padding: 20rpx 5% 0 5%; | 15 | padding: 20rpx 5% 0 5%; |
| 16 | +/* border-top-left-radius:20rpx; | ||
| 17 | + border-top-right-radius:20rpx;*/ | ||
| 16 | } | 18 | } |
| 17 | .showModal .header{ | 19 | .showModal .header{ |
| 18 | font-size: 40rpx; | 20 | font-size: 40rpx; |
| 19 | - line-height: 120rpx; | ||
| 20 | - height: 120rpx; | 21 | + line-height: 60rpx; |
| 22 | + height: 60rpx; | ||
| 23 | + | ||
| 21 | } | 24 | } |
| 22 | .showModal .body{ | 25 | .showModal .body{ |
| 23 | font-size: 30rpx; | 26 | font-size: 30rpx; |
| @@ -26,13 +29,50 @@ | @@ -26,13 +29,50 @@ | ||
| 26 | .footer{ | 29 | .footer{ |
| 27 | border-top: 2rpx solid #ccc; | 30 | border-top: 2rpx solid #ccc; |
| 28 | background-color: #fff; | 31 | background-color: #fff; |
| 29 | - width: 90%; | 32 | + width: 100%; |
| 30 | } | 33 | } |
| 31 | .footer .button-none{ | 34 | .footer .button-none{ |
| 32 | - line-height: 120rpx; | ||
| 33 | - height: 120rpx; | ||
| 34 | - border-width: 0; | 35 | + margin: 30rpx 0; |
| 36 | + font-size: 36rpx; | ||
| 37 | + height: 82rpx; | ||
| 38 | + line-height: 82rpx; | ||
| 39 | + border-radius: 4rpx; | ||
| 40 | + padding: 0 34rpx; | ||
| 41 | +} | ||
| 42 | +.footer .button-none.online{ | ||
| 43 | + border: 2rpx solid #393939; | ||
| 44 | + color: #353535; | ||
| 45 | + margin-right: 20rpx; | ||
| 46 | +} | ||
| 47 | +.footer .button-none.oncall{ | ||
| 48 | + border: 2rpx solid #393939; | ||
| 49 | + background-color: #393939; | ||
| 50 | + color: #FEFEFE; | ||
| 51 | +} | ||
| 52 | +.footer .left{ | ||
| 53 | + margin-left: 40rpx; | ||
| 54 | + font-size: 30rpx; | ||
| 55 | +} | ||
| 56 | +.footer .right{ | ||
| 57 | + margin-right: 40rpx; | ||
| 58 | + font-size: 36rpx; | ||
| 59 | +} | ||
| 60 | + | ||
| 61 | +.tip{ | ||
| 62 | + font-size: 30rpx; | ||
| 63 | + height: 42rpx; | ||
| 64 | + line-height: 42rpx; | ||
| 65 | + margin: 8rpx 0 2rpx; | ||
| 66 | +} | ||
| 67 | +.tip .ping{ | ||
| 68 | + color: #F4A22A; | ||
| 69 | +} | ||
| 70 | +.info{ | ||
| 71 | + font-size: 30rpx; | ||
| 72 | + height: 42rpx; | ||
| 73 | + line-height: 42rpx; | ||
| 74 | + margin-bottom: 6rpx; | ||
| 75 | +} | ||
| 76 | +.info cover-view:last-child{ | ||
| 77 | + margin-left: 22rpx; | ||
| 35 | } | 78 | } |
| 36 | -.footer .button-none.cancel{ | ||
| 37 | - border-right: 2rpx solid #ccc !important; | ||
| 38 | -} |
| @@ -88,7 +88,7 @@ Page({ | @@ -88,7 +88,7 @@ Page({ | ||
| 88 | }, | 88 | }, |
| 89 | sendsms(){ | 89 | sendsms(){ |
| 90 | App.SendSMS.Message({ | 90 | App.SendSMS.Message({ |
| 91 | - phone:15877556369,/*this.bookInfo.phone,*/ | 91 | + phone:this.bookInfo.phone, |
| 92 | sign_name:'订个座儿', | 92 | sign_name:'订个座儿', |
| 93 | template_code:'SMS_145597605', | 93 | template_code:'SMS_145597605', |
| 94 | template_param:JSON.stringify([this.smsData]) | 94 | template_param:JSON.stringify([this.smsData]) |
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | import util from '../../utils/util'; | 2 | import util from '../../utils/util'; |
| 3 | import App from '../../utils/api'; | 3 | import App from '../../utils/api'; |
| 4 | const {regeneratorRuntime} = global | 4 | const {regeneratorRuntime} = global |
| 5 | -import QQMapWX from '../../utils/qqmap-wx-jssdk' | 5 | +//import QQMapWX from '../../utils/qqmap-wx-jssdk' |
| 6 | Page({ | 6 | Page({ |
| 7 | 7 | ||
| 8 | /** | 8 | /** |
| @@ -12,7 +12,7 @@ Page({ | @@ -12,7 +12,7 @@ Page({ | ||
| 12 | map:{ | 12 | map:{ |
| 13 | latitude: 23.099994, | 13 | latitude: 23.099994, |
| 14 | longitude: 113.324520, | 14 | longitude: 113.324520, |
| 15 | - scale:4, | 15 | + scale:18, |
| 16 | height:300, | 16 | height:300, |
| 17 | }, | 17 | }, |
| 18 | markers: [{ | 18 | markers: [{ |
| @@ -23,17 +23,17 @@ Page({ | @@ -23,17 +23,17 @@ Page({ | ||
| 23 | width: 50, | 23 | width: 50, |
| 24 | height: 50 | 24 | height: 50 |
| 25 | }], | 25 | }], |
| 26 | - seller:{}, | ||
| 27 | //polygons:{}, | 26 | //polygons:{}, |
| 28 | }, | 27 | }, |
| 29 | - qqmapsdk:null, | 28 | + //qqmapsdk:null, |
| 29 | + sellers:[], | ||
| 30 | /** | 30 | /** |
| 31 | * 生命周期函数--监听页面加载 | 31 | * 生命周期函数--监听页面加载 |
| 32 | */ | 32 | */ |
| 33 | onLoad: function (options) { | 33 | onLoad: function (options) { |
| 34 | - this.qqmapsdk=new QQMapWX({ | ||
| 35 | - key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ' | ||
| 36 | - }); | 34 | + // this.qqmapsdk=new QQMapWX({ |
| 35 | + // key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ' | ||
| 36 | + // }); | ||
| 37 | }, | 37 | }, |
| 38 | 38 | ||
| 39 | /** | 39 | /** |
| @@ -96,8 +96,7 @@ Page({ | @@ -96,8 +96,7 @@ Page({ | ||
| 96 | }) | 96 | }) |
| 97 | this.getMarkers(); | 97 | this.getMarkers(); |
| 98 | //this.getMapPos(); | 98 | //this.getMapPos(); |
| 99 | - }).catch((e)=>{ | ||
| 100 | - console.log(e); | 99 | + }).catch(()=>{ |
| 101 | this.selectComponent('#showModal').options({ | 100 | this.selectComponent('#showModal').options({ |
| 102 | header:'定位失败', | 101 | header:'定位失败', |
| 103 | body:'需要地理位置授权' | 102 | body:'需要地理位置授权' |
| @@ -131,29 +130,32 @@ Page({ | @@ -131,29 +130,32 @@ Page({ | ||
| 131 | }, | 130 | }, |
| 132 | markertap(e){ | 131 | markertap(e){ |
| 133 | console.log(e) | 132 | console.log(e) |
| 134 | - let seller_id=e.markerId; | ||
| 135 | - this.setData({ | ||
| 136 | - seller:{ | ||
| 137 | - id:seller_id, | ||
| 138 | - seller_name:'商户名名称'+seller_id, | ||
| 139 | - seller_addr:'商户地址'+seller_id, | ||
| 140 | - seller_phone:'商户电话'+seller_id, | 133 | + let seller={ |
| 134 | + id:e.markerId | ||
| 135 | + }; | ||
| 136 | + this.sellers.forEach(se=>{ | ||
| 137 | + if(se.id==seller.id){ | ||
| 138 | + seller=se; | ||
| 139 | + return false; | ||
| 141 | } | 140 | } |
| 142 | }) | 141 | }) |
| 143 | - this.selectComponent('#seller-box').show(); | 142 | + this.selectComponent('#seller-box').show(seller); |
| 144 | wx.hideTabBar(); | 143 | wx.hideTabBar(); |
| 145 | }, | 144 | }, |
| 146 | - getMarkers(pos){ | 145 | + getMarkers(){ |
| 147 | let map=this.data.map; | 146 | let map=this.data.map; |
| 148 | let markers=[]; | 147 | let markers=[]; |
| 149 | - App.Reserve.Sellers({ | 148 | + App.Reserve.SellerList({ |
| 150 | lat:map.latitude, | 149 | lat:map.latitude, |
| 151 | lng:map.longitude, | 150 | lng:map.longitude, |
| 152 | offset:0, | 151 | offset:0, |
| 153 | rows:100, | 152 | rows:100, |
| 153 | + distance:100, | ||
| 154 | }).then(res=>{ | 154 | }).then(res=>{ |
| 155 | if(res.ret==200){ | 155 | if(res.ret==200){ |
| 156 | + this.sellers=res.data; | ||
| 156 | res.data.forEach(seller=>{ | 157 | res.data.forEach(seller=>{ |
| 158 | + let namelength=seller.sellername.replace(/[^\x00-\xff]/g,"01").length+8; | ||
| 157 | markers.push({ | 159 | markers.push({ |
| 158 | id: seller.id, | 160 | id: seller.id, |
| 159 | iconPath: "/pages/image/ding.png", | 161 | iconPath: "/pages/image/ding.png", |
| @@ -161,12 +163,12 @@ Page({ | @@ -161,12 +163,12 @@ Page({ | ||
| 161 | longitude: seller.long, | 163 | longitude: seller.long, |
| 162 | width: 24, | 164 | width: 24, |
| 163 | height: 30, | 165 | height: 30, |
| 164 | - title:seller.seller_name, | 166 | + //title:seller.seller_name, |
| 165 | label:{ | 167 | label:{ |
| 166 | - content:seller.seller_name, | 168 | + content:' '+seller.sellername+' ', |
| 167 | color:'#353535', | 169 | color:'#353535', |
| 168 | fontSize:13, | 170 | fontSize:13, |
| 169 | - anchorX:-50, | 171 | + anchorX:-(namelength/2*5), |
| 170 | anchorY:1, | 172 | anchorY:1, |
| 171 | borderWidth:1, | 173 | borderWidth:1, |
| 172 | borderColor:'#B4B0B0', | 174 | borderColor:'#B4B0B0', |
| @@ -178,35 +180,34 @@ Page({ | @@ -178,35 +180,34 @@ Page({ | ||
| 178 | }) | 180 | }) |
| 179 | }) | 181 | }) |
| 180 | }else{ | 182 | }else{ |
| 181 | - for(var i=1;i<50;i++){ | ||
| 182 | - markers.push({ | ||
| 183 | - id: i, | ||
| 184 | - iconPath: "/pages/image/ding.png", | ||
| 185 | - latitude: parseFloat(map.latitude) + Math.random()*(parseInt(Math.random()*10)%2==0?-1:1)/500, | ||
| 186 | - longitude: parseFloat(map.longitude) +Math.random()*(parseInt(Math.random()*10)%2==0?-1:1)/500, | ||
| 187 | - width: 24, | ||
| 188 | - height: 30, | ||
| 189 | - title:'店铺名称t'+i, | ||
| 190 | - label:{ | ||
| 191 | - content:'店铺名称lc'+i, | ||
| 192 | - color:'#353535', | ||
| 193 | - fontSize:13, | ||
| 194 | - anchorX:-50, | ||
| 195 | - anchorY:1, | ||
| 196 | - borderWidth:1, | ||
| 197 | - borderColor:'#B4B0B0', | ||
| 198 | - borderRadius:20, | ||
| 199 | - bgColor:'#fff', | ||
| 200 | - padding:5, | ||
| 201 | - textAlign:'center', | ||
| 202 | - }, | ||
| 203 | - }) | ||
| 204 | - } | 183 | + markers.push({ |
| 184 | + id: 1, | ||
| 185 | + iconPath: "/pages/image/ding.png", | ||
| 186 | + latitude: parseFloat(map.latitude) + 1/1000, | ||
| 187 | + longitude: parseFloat(map.longitude) +1/1000 , | ||
| 188 | + width: 24, | ||
| 189 | + height: 30, | ||
| 190 | + //title:'演示店铺', | ||
| 191 | + label:{ | ||
| 192 | + content:' 演示店铺 ', | ||
| 193 | + color:'#353535', | ||
| 194 | + fontSize:13, | ||
| 195 | + anchorX:-50, | ||
| 196 | + anchorY:1, | ||
| 197 | + borderWidth:1, | ||
| 198 | + borderColor:'#B4B0B0', | ||
| 199 | + borderRadius:20, | ||
| 200 | + bgColor:'#fff', | ||
| 201 | + padding:3, | ||
| 202 | + textAlign:'center' | ||
| 203 | + }, | ||
| 204 | + }) | ||
| 205 | } | 205 | } |
| 206 | + this.setData({ | ||
| 207 | + markers:markers, | ||
| 208 | + }) | ||
| 206 | }) | 209 | }) |
| 207 | - this.setData({ | ||
| 208 | - markers:markers, | ||
| 209 | - }) | 210 | + |
| 210 | }, | 211 | }, |
| 211 | //seller box 通知 | 212 | //seller box 通知 |
| 212 | sellerBoxEvent(e){ | 213 | sellerBoxEvent(e){ |
| @@ -241,6 +242,6 @@ Page({ | @@ -241,6 +242,6 @@ Page({ | ||
| 241 | this.setData({ | 242 | this.setData({ |
| 242 | polygons:polygons, | 243 | polygons:polygons, |
| 243 | }) | 244 | }) |
| 244 | - this.getMarkers([{latitude: latitude-xs, longitude: longitude-ys},{latitude: latitude+xs, longitude: longitude+ys}]) | 245 | + this.getMarkers() |
| 245 | }, | 246 | }, |
| 246 | }) | 247 | }) |
| @@ -16,5 +16,5 @@ | @@ -16,5 +16,5 @@ | ||
| 16 | </view> | 16 | </view> |
| 17 | </view> | 17 | </view> |
| 18 | <showModal id="showModal" confirmText="去授权" bindshowModal="showModal"></showModal> | 18 | <showModal id="showModal" confirmText="去授权" bindshowModal="showModal"></showModal> |
| 19 | -<seller-box id="seller-box" seller="{{seller}}" bindevent="sellerBoxEvent"></seller-box> | 19 | +<seller-box id="seller-box" bindevent="sellerBoxEvent"></seller-box> |
| 20 | 20 |
-
Please register or login to post a comment