92 lines
3.1 KiB
Plaintext
92 lines
3.1 KiB
Plaintext
<!--pages/appointment/index.wxml-->
|
|
<navigation-bar title="预约服务" back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
|
|
|
<view class="appointment-container">
|
|
<!-- 日期选择 -->
|
|
<view class="section date-section">
|
|
<view class="section-title">选择日期</view>
|
|
<scroll-view scroll-x class="date-scroll">
|
|
<view class="date-list">
|
|
<view
|
|
wx:for="{{dateList}}"
|
|
wx:key="date"
|
|
class="date-item {{selectedDate === item.date ? 'active' : ''}}"
|
|
bindtap="selectDate"
|
|
data-date="{{item.date}}"
|
|
>
|
|
<view class="date-weekday">{{item.weekday}}</view>
|
|
<view class="date-day">{{item.day}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 时间选择 -->
|
|
<view class="section time-section">
|
|
<view class="section-title">选择时间</view>
|
|
<view class="time-list">
|
|
<view
|
|
wx:for="{{timeSlots}}"
|
|
wx:key="*this"
|
|
class="time-item {{selectedTime === item ? 'active' : ''}}"
|
|
bindtap="selectTime"
|
|
data-time="{{item}}"
|
|
>
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务选择 -->
|
|
<view class="section service-section">
|
|
<view class="section-title">选择服务</view>
|
|
<view class="service-list">
|
|
<view
|
|
wx:for="{{services}}"
|
|
wx:key="id"
|
|
class="service-item {{selectedService.id === item.id ? 'active' : ''}}"
|
|
bindtap="selectService"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<view class="service-name">{{item.name}}</view>
|
|
<view class="service-info">
|
|
<text class="service-duration">{{item.duration}}分钟</text>
|
|
<text class="service-price">¥{{item.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-section">
|
|
<t-button theme="primary" size="large" block bindtap="submitAppointment">提交预约</t-button>
|
|
</view>
|
|
|
|
<!-- 我的预约列表 -->
|
|
<view class="section my-appointments" wx:if="{{appointmentList.length > 0}}">
|
|
<view class="section-title">我的预约</view>
|
|
<view class="appointment-list">
|
|
<view wx:for="{{appointmentList}}" wx:key="id" class="appointment-card">
|
|
<view class="appointment-header">
|
|
<view class="appointment-service">{{item.service.name}}</view>
|
|
<view class="appointment-status {{item.status === '已确认' ? 'confirmed' : ''}}">{{item.status}}</view>
|
|
</view>
|
|
<view class="appointment-info">
|
|
<view class="appointment-time">
|
|
<t-icon name="time" size="40rpx" />
|
|
<text>{{item.date}} {{item.time}}</text>
|
|
</view>
|
|
<view class="appointment-price">¥{{item.service.price}}</view>
|
|
</view>
|
|
<view class="appointment-actions">
|
|
<t-button size="small" variant="outline" bindtap="cancelAppointment" data-id="{{item.id}}">取消预约</t-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 无预约提示 -->
|
|
<view class="empty-appointments" wx:if="{{appointmentList.length === 0}}">
|
|
<t-empty icon="info-circle-filled" description="暂无预约记录" />
|
|
</view>
|
|
</view> |