booking.wxml
5.68 KB
<view class="page-shell booking-page data-v-54bc03ba"><view class="page-blur data-v-54bc03ba"></view><view class="page-blur-secondary data-v-54bc03ba"></view><view class="page-blur-tertiary data-v-54bc03ba"></view><view class="page-content booking-content data-v-54bc03ba"><view class="booking-nav data-v-54bc03ba"><view class="data-v-54bc03ba"><text class="nav-title data-v-54bc03ba">预约服务</text><text class="nav-subtitle data-v-54bc03ba">选择日期与时间，锁定到店档期</text></view></view><view class="summary-card glass-card data-v-54bc03ba"><view class="summary-copy data-v-54bc03ba"><text class="summary-tag data-v-54bc03ba">BOOKING CONFIRMATION</text><text class="summary-title data-v-54bc03ba">请确认本次到店信息</text><text class="summary-store data-v-54bc03ba">{{selectedStore.name}}</text><view class="summary-pills data-v-54bc03ba"><text class="summary-pill data-v-54bc03ba">会员预约</text><text class="summary-pill data-v-54bc03ba">到店前可修改</text><text class="summary-pill data-v-54bc03ba">门店电话确认</text></view></view><view class="summary-art-wrap data-v-54bc03ba"><image class="summary-art data-v-54bc03ba" src="/static/images/art-booking.png" mode="aspectFill"></image></view></view><view class="selector-section data-v-54bc03ba"><view class="section-head data-v-54bc03ba"><text class="section-title data-v-54bc03ba">选择日期</text><text class="section-link data-v-54bc03ba">未来 10 天</text></view><scroll-view class="date-scroll data-v-54bc03ba" scroll-x="{{true}}"><view class="date-row data-v-54bc03ba"><block wx:for="{{dates}}" wx:for-item="item" wx:for-index="__i0__" wx:key="value"><view data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" data-event-params="{{({item})}}" class="{{['date-chip','data-v-54bc03ba',(selectedDate===item.value)?'active':'']}}" bindtap="__e"><text class="date-week data-v-54bc03ba">{{item.week}}</text><text class="date-day data-v-54bc03ba">{{item.label}}</text></view></block></view></scroll-view></view><view class="selector-section data-v-54bc03ba"><view class="section-head data-v-54bc03ba"><text class="section-title data-v-54bc03ba">到店时间</text><text class="section-link data-v-54bc03ba">{{"已选 "+selectedStart}}</text></view><view class="time-panel glass-card data-v-54bc03ba"><view class="time-helper data-v-54bc03ba">营业时段 09:00 - 19:00 · 每 30 分钟一个档位</view><view class="time-grid data-v-54bc03ba"><block wx:for="{{allTimes}}" wx:for-item="time" wx:for-index="__i1__" wx:key="*this"><view data-event-opts="{{[['tap',[['selectStart',['$0'],[[['allTimes','',__i1__]]]]]]]}}" class="{{['time-chip','data-v-54bc03ba',(selectedStart===time)?'active':'']}}" bindtap="__e">{{''+time+''}}</view></block></view></view></view><view class="selector-section data-v-54bc03ba"><view class="section-head data-v-54bc03ba"><text class="section-title data-v-54bc03ba">预约信息确认</text><text class="section-link data-v-54bc03ba">提交前核对</text></view><view class="info-card glass-card data-v-54bc03ba"><view class="info-row data-v-54bc03ba"><text class="info-label data-v-54bc03ba">门店</text><text class="info-value data-v-54bc03ba">{{selectedStore.name}}</text></view><view class="info-row data-v-54bc03ba"><text class="info-label data-v-54bc03ba">护理顾问</text><text class="info-value data-v-54bc03ba">优先安排资深顾问</text></view><view class="info-row data-v-54bc03ba"><text class="info-label data-v-54bc03ba">备注</text><text class="info-value data-v-54bc03ba">敏感肌护理，请避开刺激环境</text></view><view class="info-row data-v-54bc03ba"><text class="info-label data-v-54bc03ba">联系电话</text><text class="info-value data-v-54bc03ba">138****5628</text></view></view></view><view class="selector-section data-v-54bc03ba"><view class="section-head data-v-54bc03ba"><text class="section-title data-v-54bc03ba">到店提醒</text><text class="section-link data-v-54bc03ba">请留意</text></view><view class="notice-card glass-card data-v-54bc03ba"><view class="notice-item data-v-54bc03ba"><text class="notice-dot data-v-54bc03ba"></text><text class="notice-text data-v-54bc03ba">建议提前 10 分钟到店，以便完成签到与护理准备。</text></view><view class="notice-item data-v-54bc03ba"><text class="notice-dot data-v-54bc03ba"></text><text class="notice-text data-v-54bc03ba">如需调整预约，请在到店前在小程序内修改，或直接联系门店。</text></view><view class="notice-item data-v-54bc03ba"><text class="notice-dot data-v-54bc03ba"></text><text class="notice-text data-v-54bc03ba">提交后将收到预约确认电话，请留意接听电话。</text></view></view></view><view class="booking-submit glass-card data-v-54bc03ba"><view class="bar-copy data-v-54bc03ba"><text class="bar-label data-v-54bc03ba">预约确认</text><text class="bar-value data-v-54bc03ba">{{selectedDateText+" "+selectedStart}}</text></view><view data-event-opts="{{[['tap',[['confirmBooking',['$event']]]]]}}" class="primary-button booking-submit-button data-v-54bc03ba" bindtap="__e">确认预约</view></view><view class="safe-bottom-space data-v-54bc03ba"></view></view><view class="lf-tabbar-wrap data-v-54bc03ba"><view class="lf-tabbar-panel data-v-54bc03ba"><block wx:for="{{tabs}}" wx:for-item="item" wx:for-index="__i2__" wx:key="key"><view data-event-opts="{{[['tap',[['goTab',['$0'],[[['tabs','key',item.key]]]]]]]}}" class="{{['lf-tabbar-item','data-v-54bc03ba',(item.key==='booking')?'active':'']}}" bindtap="__e"><view class="lf-tabbar-icon-shell data-v-54bc03ba"><image class="lf-tabbar-icon data-v-54bc03ba" src="{{item.key==='booking'?item.activeIcon:item.icon}}" mode="aspectFit"></image></view><text class="lf-tabbar-label data-v-54bc03ba">{{item.label}}</text></view></block></view></view></view>