<swiper class="ws_lineBanenr" indicator-dots="{{banner.indicatorDots}}" autoplay="{{banner.autoplay}}" interval="{{banner.interval}}" duration="{{banner.duration}}"> <block wx:for="{{banner.imgUrls}}"> <swiper-item> <image src="http://m.youzhu.com{{item}}" class="slide-image"/> </swiper-item> </block> </swiper> <view> <view class="ws_lineBox"> <view class="ws_lineTitle"> <text class="noSpan" bindtap="openMap">{{shopList.name}}</text><text class="span" bindtap="openMap">(点击导航)</text> <navigator hover-class="none" open-type="navigateBack" url="/pages/lineshoplist/lineshoplist">更多<image src="https://m.youzhu.com/images/public/icon_more.svg" /></navigator> </view> <view class="ws_lineInfo"> <view class="ws_infoRow"> <label>详细地址:</label> <text>{{shopList.address}}</text> </view> <view class="ws_infoRow"> <label>服务热线:</label> <text bindtap="callTel">{{shopList.telephone}}</text> </view> <view class="ws_infoRow"> <label>服务时间:</label> <text>{{shopList.shophour}}</text> </view> </view> <view class="ws_lineBtnAll"> <button bindtap="showMask" data-type="1">预约到店</button> <button bindtap="showMask" data-type="0">发送地址</button> </view> </view> </view> <view class="ws_offerMask" wx:if="{{maskShow}}"> <view class="ws_offerBox"> <view class="ws_offBtnX" bindtap="maskOpen"><image src="https://m.youzhu.com/images/index/offer/icon_off.png" /></view> <view class="ws_maskTitle"> <image src="https://m.youzhu.com/images/lineshop/index/title_1.png" wx:if="{{dataType == 1}}" /> <image src="https://m.youzhu.com/images/lineshop/index/title_2.png" wx:if="{{dataType == 0}}" style="width:302rpx;" /> </view> <view class="ws_maskList"> <input type="text" placeholder="您的姓名" wx:if="{{dataType == 1}}" bindinput="changeName" /> <input type="tel" placeholder="手机号码" bindinput="changeTel" /> <input type="number" placeholder="房屋面积" wx:if="{{dataType == 1}}" bindinput="changeArea" /> </view> <button bindtap="submit">确定</button> </view> </view> |
.ws_lineBanenr{height: 520rpx;} .ws_lineBanenr image{display: block;height: 520rpx;width: 100%;} page .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom:20px; } page .wx-swiper-dot{ display: inline-flex; height: 17rpx; width:17rpx; border-radius:17rpx; margin:0rpx; vertical-align: sub; border:0; } page .wx-swiper-dot::before{ content: ''; background: #cbcbcb; flex-grow: 1; border-radius:17rpx; } page .wx-swiper-dot-active::before{ content: ''; background:#53d55e; flex-grow: 1; border-radius:17rpx; } #js_linePage{bottom: 50rpx !important;} .ws_lineBox{background:#ffffff; box-shadow:0 4rpx 32rpx 0 rgba(50,38,10,0.16); border-radius:12rpx; width:692rpx;margin: auto;margin-top: -34rpx;position:relative;z-index:5;padding-top: 20rpx;padding-bottom: 100rpx;} .ws_lineTitle{height: 68rpx;line-height: 68rpx;background:url(https://m.youzhu.com/images/lineshop/index/title_bg.png) no-repeat left center;margin-left: -29rpx;background-size:484rpx 68rpx;} .ws_lineTitle text.noSpan{background:url(https://m.youzhu.com/images/lineshop/index/icon_map.png) no-repeat 70rpx center;float: left;text-indent:116rpx;font-size:32rpx;color:#131f0f;background-size:28rpx 38rpx;} .ws_lineTitle navigator{display: block;float: right;font-size:26rpx;color:#b6b6b6;margin-right: 30rpx;} .ws_lineTitle navigator image{width: 14rpx; height: 26rpx; margin-left: 6rpx; position: relative; bottom: -4rpx;} .ws_lineInfo{padding:0 40rpx;margin-top: 64rpx;font-size:28rpx;margin-bottom: 100rpx;} .ws_infoRow{margin-bottom: 10rpx;overflow: hidden;} .ws_infoRow label{display: block;width: 144rpx;float: left;line-height: 32rpx;color:#999999;} .ws_infoRow text{color:#333;float: left;width: 440rpx;line-height: 32rpx;} .ws_lineBtnAll{text-align: center;font-size:0;} .ws_lineBtnAll button{margin:0 20rpx;display: inline-block;background:#ffb921;border-radius:12rpx;width:280rpx;font-size:30rpx;color:#fff;border:0;outline:none;} .ws_offerMask{display: no--ne;background:rgba(0,0,0,0.6);width: 100%;height: 100%;position:fixed;left: 0;top: 0;z-index:10;} .ws_offerBox{width: 650rpx;background: #fff;border-radius:20rpx 20rpx 10rpx 10rpx;position:fixed;left: 50%;top: 50%;transform:translate(-50%,-44%);-webkit-transform:translate(-50%,-44%);} .ws_maskTitle{border-radius:20rpx 20rpx 0 0;height: 80rpx;text-align: center;} .ws_maskTitle image{margin-top: 40rpx;width: 176rpx;height: 42rpx;} .ws_maskList{padding-top: 10rpx;} .ws_maskList input{margin: auto;display: block;border:1rpx solid #cccccc; border-radius:12rpx; width:542rpx; height:76rpx;font-size:28rpx;color:#999999;margin-top: 20rpx;padding-left:30rpx;} .ws_offerBox button{display: block;margin: auto;margin-top:40rpx;background:#ffb921;border-radius:12rpx;width:542rpx;outline:none;font-size:32rpx;color:#fff;border:0;} .ws_offerBox{padding-bottom:40rpx;} .ws_offBtn{position:absolute;top: -94rpx;right: 26rpx;} .ws_offBtnX{text-align: center;width: 44rpx;height: 44rpx;background:rgba(0,0,0,0.50); border:2rpx solid #ffffff;border-radius:22rpx;position: absolute;right: 20rpx;top:20rpx;} .ws_offBtnX image{margin-top: 8rpx;width:26rpx;height:26rpx;} .ws_offBtn span{display: block;width: 2rpx;height: 48rpx;background: #fff;position:absolute;right: 22rpx;} .ws_lineBox text.span{font-size: 24rpx;padding-left: 10rpx;display: block;float: left;} |
var check = require('../../utils/check.js'); var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); var qqmapsdk; var app = getApp() Page({ data: { banner: { imgUrls: [], indicatorDots: true, autoplay: true, interval: 3000, duration: 200 }, shopList: {}, id: '', maskShow:false, dataType:1, userInfo:{ name: '', tel: '', area:'' } }, showMask:function(e){ this.setData({ dataType: e.target.dataset.type, maskShow: true }) }, maskOpen:function(){ this.setData({ maskShow: false }) }, submit:function(){ var _this = this; if(this.data.dataType == 1){ if ( check.validTools('isnul', _this.data.userInfo.name, '请输入姓名') && check.validTools('mobile', _this.data.userInfo.tel, '请输入正确的手机号码') && check.validTools('house', _this.data.userInfo.area, '请输入正确的装修面积(1-500 m²)') ){ wx.showLoading({ title: '加载中', mask: true }) wx.request({ url: 'https://m.youzhu.com/centershop/externalSave', header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'post', data:{ username: _this.data.userInfo.name, telephone: _this.data.userInfo.tel, area: _this.data.userInfo.area, mark: 1 }, success: function (data){ wx.hideLoading() if (data.data.errorNo >= 0) { wx.showToast({title:'成功'}) _this.setData({ maskShow: false, 'userInfo.name': '', 'userInfo.tel': '', 'userInfo.area': '' }) }else{ wx.showModal({ title: '提示', content: data.data.message }) } } }) } }else{ if ( check.validTools('mobile', _this.data.userInfo.tel, '请输入正确的手机号码') ) { wx.showLoading({ title: '加载中', mask: true }) wx.request({ url: 'https://m.youzhu.com/centershop/sendAddress', header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'post', data: { id: _this.data.shopList.id, telephone: _this.data.userInfo.tel }, success: function (data) { wx.hideLoading() if (data.data.errorNo >= 0) { wx.showToast({ title: '成功' }) _this.setData({ maskShow: false, 'userInfo.name': '', 'userInfo.tel': '', 'userInfo.area':'' }) } else { wx.showModal({ title: '提示', content: data.data.message }) } } }) } } }, changeName: function (e) { this.setData({ 'userInfo.name': e.detail.value }) }, changeTel: function (e) { this.setData({ 'userInfo.tel': e.detail.value }) }, changeArea: function (e) { this.setData({ 'userInfo.area': e.detail.value }) }, loadBanner: function () { var _this = this; wx.request({ url: 'https://m.youzhu.com/centershop/getCenterShopById', header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'post', data: { id: _this.data.id }, success: function (res) { wx.hideLoading() if (res.data.errorNo >= 0) { _this.setData({ 'banner.imgUrls': _this.img(res.data.data[0].wap_img), shopList: res.data.data[0] }) } } }) }, callTel: function () { var _this = this; wx.makePhoneCall({ phoneNumber: _this.data.shopList.telephone }) }, openMap: function () { var _this = this; qqmapsdk.geocoder({ address: _this.data.shopList.address, success: function (res) { wx.openLocation({ latitude: res.result.location.lat, longitude: res.result.location.lng, scale: 10, name: _this.data.shopList.name, address: _this.data.shopList.address }) } }); }, img: function (src) { if (src) { if (src.indexOf('_') == '-1') { return src; } else { src = src.split('_'); return src; } } }, onLoad: function (e) { if (e.id) { this.setData({ id: e.id }) } qqmapsdk = new QQMapWX({ key: 'UC3BZ-WENWG-75FQ7-IG5Z7-TVWX7-LHBXS' }); wx.showLoading({ title: '加载中', mask: true }) this.loadBanner() } }) |
模板简介:该模板名称为【微信小程序线下体验店预约导航功能页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。