<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()
}
})
|
模板简介：该模板名称为【微信小程序线下体验店预约导航功能页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
