<view class="appointmentPage-wrap page" id="appointmentPage" data-router="appointmentPage"> <view class="appointment-top-section"> <view class="appointment-model-field"> <text>服务时长</text> <text style="float:right;">{{ serviceTimeUnit }}</text> <view class="appointment-model-right"> <picker class="appointment-field-selection" mode="selector" range="{{ appointmentInfo.serviceLongRange }}" value="{{ longRangeIndex }}" bindchange="serviceLongChange"> <view>{{ appointmentInfo.serviceLongRange[longRangeIndex] }}</view> </picker> </view> </view> <view class="appointment-model-field" wx:if="{{ serviceTimeUnit == '小时' }}"> <text>营业时段</text> <view class="appointment-model-right"> <picker class="appointment-field-selection" mode="selector" range="{{ appointmentInfo.servicePeriodRange }}" value="{{ periodRangeIndex }}" bindchange="servicePeriodSelectChange"> <view>{{ appointmentInfo.servicePeriodRange[periodRangeIndex] }}</view> </picker> </view> </view> <view class="appointment-model-field" style="border:none;"><text>价格</text><view class="appointment-model-right"><text class="appointment-service-price">{{ servicePrice }}</text> 元</view></view> </view> <view class="appointment-time-section"> <view class="appointment-date-list"> <view wx:for="{{ appointmentInfo.serviceDateList }}" wx:for-item="date" class="appointment-date-item {{ selectedDate == date.date ? 'selected':'' }} {{ !date.ifBusiness ? 'disabled':'' }}" data-date="{{ date.date }}" data-ifBusinessDay="{{ date.ifBusiness }}" bindtap="serviceDateChange"> <view>{{ date.week }}<text wx:if="{{ !date.ifBusiness }}">(不营业)</text></view> <view>{{ date.modifiedDate }}</view> </view> </view> <view class="appointment-period-list"> <view wx:for="{{ appointmentInfo.servicePeriodList }}" wx:for-item="period" class="appointment-period-item {{ selectedPeriod == period.interval ? 'selected':'' }} {{ period.can_buy == 0 || period.expired == 1 ? 'disabled' : '' }}" bindtap="servicePeriodListChange" data-expired="{{ period.expired }}" data-can-buy="{{ period.can_buy }}" data-interval="{{ period.interval }}"> <view>{{ period.interval }}</view> <text wx:if="{{ period.can_buy == 0 || period.expired == 1 }}">({{ period.expired == 1 ? '过期' : '约满' }})</text> </view> </view> </view> <view class="appointment-bottom-bar"> <form report-submit="true" bindsubmit="sureMakeAppointment"> <button formType="submit" class="btn btn-block sure-make-appointment">确认</button> </form> <!-- <text class="btn btn-block sure-make-appointment" bindtap="sureMakeAppointment">确认</text> --> </view> </view> |
.appointmentPage-wrap { padding-bottom: 117rpx; } .appointment-top-section { padding: 0 35rpx; line-height: 93rpx; } .appointment-model-field { padding: 12rpx 23rpx; border-bottom: 1px solid #ddd; } .appointment-model-right { float: right; } .appointment-field-selection { width: 400rpx; height: 94rpx; line-height: 94rpx; text-align: right; } .appointment-service-price { color: red; } .appointment-date-list { width: 100%; padding-bottom: 23rpx; white-space: nowrap; overflow-x: auto; } .appointment-date-item { display: inline-block; padding: 23rpx 33rpx; border: 1px solid #ddd; border-left: none; background-color: #eee; text-align: center; } .appointment-date-item.disabled { color: #aaa; } .appointment-date-item.selected { position: relative; background-color: #666; color: #fff; } .appointment-date-item.selected:before { content: ''; position: absolute; left: calc(50% - 19rpx); bottom: -19rpx; display: block; border-left: 19rpx solid transparent; border-right: 19rpx solid transparent; border-top: 23rpx solid #666; } .appointment-period-list { padding: 12rpx 23rpx 33rpx; } .appointment-period-item { position: relative; display: inline-block; height: 70rpx; width: 24.5%; margin-left: -1px; margin-top: -1px; padding: 33rpx 0; z-index: 1; font-size: 29rpx; text-align: center; color: #666; background-color: #fff; border: 1px solid #aaa; vertical-align: top; } .appointment-period-item.disabled { color: #aaa; background-color: #eee; border-color: #ccc; z-index: 0; } .appointment-period-item.selected { border-color: #10b935; /*box-shadow: inset 0 0 1px #10b935;*/ z-index: 2; } .appointment-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 23rpx 35rpx; z-index:1; background:#fff; border-top: 1px solid #f8f8f8; } .sure-make-appointment { color: #fff; background-color: #10b935; } |
var app = getApp() Page({ data: { appointmentInfo: {}, servicePrice: '', goodsId: '', longRangeIndex: 0, periodRangeIndex: 0, selectedDate: '', selectedDateIfBusiness: 0, selectedPeriod: '', serviceTimeUnit: '' }, onLoad: function(options){ var goodsId = options.detail, franchiseeId = options.franchisee || ''; this.setData({ goodsId: goodsId, franchiseeId: franchiseeId }); this.getAppointmentList({ app_id: app.getAppId(), goods_id: goodsId, sub_shop_app_id: franchiseeId }, true); }, getAppointmentList: function(param, initial){ var that = this; app.sendRequest({ url: '/index.php?r=AppShop/getAppointmentList', data: param, success: function(res){ var data = {}, day7from_now; if(initial){ day7from_now = res.day7from_now; for (var i = 0; i < day7from_now.length; i++) { var date = day7from_now[i].date+''; day7from_now[i].modifiedDate = date.substring(4, 6)+'月'+date.substring(6)+'日'; } data['appointmentInfo.serviceDateList'] = day7from_now; data['appointmentInfo.serviceLongRange'] = res.can_select_long; data['appointmentInfo.servicePeriodRange'] = res.can_select_interval; data['selectedDate'] = day7from_now[0].date; data['selectedDateIfBusiness'] = day7from_now[0].ifBusiness; data['serviceTimeUnit'] = res.unit; } data['appointmentInfo.servicePeriodList'] = res.appointment_info; data['servicePrice'] = res.price; that.setData(data); } }) }, serviceLongChange: function(e){ var value = e.detail.value; this.setData({ longRangeIndex: value }); this.serviceConditionChange(); }, servicePeriodSelectChange: function(e){ var value = e.detail.value; this.setData({ periodRangeIndex: value }); this.serviceConditionChange(); }, serviceDateChange: function(e){ var dataset = e.currentTarget.dataset, ifBusinessDay = dataset.ifbusinessday, date = dataset.date, data = {}; data['selectedDate'] = date; if(!ifBusinessDay){ data['appointmentInfo.servicePeriodList'] = ''; } this.setData(data); if(ifBusinessDay){ this.serviceConditionChange(); } }, servicePeriodListChange: function(e){ var dataset = e.currentTarget.dataset, canBuy = dataset.canBuy, expired = dataset.expired; if(expired == 1 || canBuy == 0){ return; } this.setData({ selectedPeriod: e.currentTarget.dataset.interval }); }, serviceConditionChange: function(){ var param = this.getParam(); this.getAppointmentList(param, false); this.setData({ selectedPeriod: '' }); }, getParam: function(){ var appointmentInfo = this.data.appointmentInfo; var param = { timelong: appointmentInfo.serviceLongRange[this.data.longRangeIndex], day: this.data.selectedDate, app_id: app.getAppId(), goods_id: this.data.goodsId, sub_shop_app_id: this.data.franchiseeId }; if(this.data.serviceTimeUnit == '小时'){ param.interval = appointmentInfo.servicePeriodRange[this.data.periodRangeIndex]; } return param; }, sureMakeAppointment: function(e){ var selectPeriod = this.data.selectedPeriod, param; if(!selectPeriod){ app.showModal({ content: '请选择具体时间' }); return; } param = this.getParam(); param.interval = selectPeriod; param.model_id = 0; param.num = 1; param.formId = e.detail.formId; app.sendRequest({ url: '/index.php?r=AppShop/addOrder', data: param, success: function(res){ app.turnToPage('/pages/orderDetail/orderDetail?detail='+res.data, true); } }) } }) |
模板简介:该模板名称为【微信小程序预约服务时长价格样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。