mini-starter/mini-demo/pages/order/order.wxml

<view class="order-page {{isCharter ? 'charter-theme' : ''}}">
  <!-- 活动信息 -->
  <view class="activity-header">
    <view class="activity-title">{{activityName}}</view>
  </view>
  
  <!-- 班次信息 -->
  <view class="schedule-card {{isCharter ? 'charter-card' : ''}}">
    <view class="schedule-header">
      <view class="schedule-title">{{isCharter ? '包车服务' : '班次信息'}}</view>
      <view class="schedule-type">{{schedule.type === 'business-charter' ? '专车包车' : (schedule.type === 'business-share' ? '商务拼车' : '大巴拼车')}}</view>
    </view>
    
    <view class="schedule-details">
      <view class="detail-row">
        <text class="label">出发时间：</text>
        <text class="value">{{schedule.time}}</text>
      </view>
      <view class="detail-row">
        <text class="label">车辆型号：</text>
        <text class="value">{{schedule.model}}</text>
      </view>
      <view class="detail-row">
        <text class="label">上车地点：</text>
        <text class="value">{{schedule.fromLoc}}</text>
      </view>
      <view class="detail-row">
        <text class="label">下车地点：</text>
        <text class="value">{{schedule.toLoc}}</text>
      </view>
      <view class="detail-row">
        <text class="label">行程时长：</text>
        <text class="value">{{schedule.duration}}</text>
      </view>
      <view class="detail-row">
        <text class="label">{{isCharter ? '包车价格' : '单人票价'}}：</text>
        <text class="value price">¥{{schedule.price}}{{isCharter ? '/车' : '/人'}}</text>
      </view>
      <view wx:if="{{!isCharter}}" class="detail-row">
        <text class="label">剩余座位：</text>
        <text class="value">{{schedule.left}}个</text>
      </view>
    </view>
    
    <view class="policy-info">
      <text class="policy-text">{{schedule.refundPolicy}}</text>
    </view>
  </view>
  
  <!-- 手机号获取 -->
  <view class="phone-section">
    <view class="section-title">联系方式</view>
    <view wx:if="{{hasPhoneNumber}}" class="phone-display">
      <view class="phone-info">
        <text class="phone-icon">📱</text>
        <text class="phone-number">{{phoneNumber}}</text>
        <text class="phone-status">已验证</text>
      </view>
    </view>
    <button wx:else 
            open-type="getPhoneNumber" 
            bindgetphonenumber="onGetPhoneNumber" 
            class="phone-btn {{isCharter ? 'charter-btn' : ''}}">
      <text class="btn-icon">📱</text>
      微信一键获取手机号
    </button>
  </view>
  
  <!-- 乘车人信息 -->
  <view class="passenger-section">
    <view class="section-header">
      <view class="section-title">{{isCharter ? '乘车人信息' : '购票人信息'}}</view>
      <view class="passenger-count">{{passengers.length}}{{isCharter ? '人' : '张票'}}</view>
    </view>
    
    <view wx:if="{{passengers.length > 0}}" class="passenger-list">
      <view wx:for="{{passengers}}" wx:key="index" class="passenger-item">
        <view class="passenger-info">
          <view class="passenger-name">{{item.name}}</view>
          <view class="passenger-details">
            <text class="id-type">{{item.idtype}}</text>
            <text class="id-number">{{item.idcard}}</text>
          </view>
          <view class="passenger-phone">{{item.phone}}</view>
        </view>
        <button class="delete-btn" bindtap="deletePassenger" data-index="{{index}}">删除</button>
      </view>
    </view>
    
    <button class="add-passenger-btn {{isCharter ? 'charter-btn' : ''}}" 
            bindtap="addPassenger">
      <text class="btn-icon">➕</text>
      {{passengers.length === 0 ? '添加乘车人' : '继续添加'}}
    </button>
    
    <view wx:if="{{!isCharter && passengers.length > 0}}" class="passenger-tip">
      <text class="tip-text">最多可购买{{schedule.left}}张票</text>
    </view>
  </view>
  
  <!-- 会员折扣和优惠券 -->
  <view class="discount-section">
    <!-- 会员信息 -->
    <view class="member-info">
      <view class="member-level">
        <text class="level-icon">{{memberLevel.icon}}</text>
        <text class="level-name">{{memberLevel.name}}</text>
        <text class="discount-text">享受{{(1-memberLevel.discount)*100}}折优惠</text>
      </view>
    </view>
    
    <!-- 优惠券选择 -->
    <view class="coupon-section" bindtap="selectCoupon">
      <view class="coupon-info">
        <text class="coupon-icon">🎫</text>
        <view class="coupon-text">
          <text wx:if="{{selectedCoupon}}" class="coupon-selected">{{selectedCoupon.name}} (-¥{{selectedCoupon.value}})</text>
          <text wx:else class="coupon-placeholder">{{availableCoupons.length > 0 ? '选择优惠券' : '暂无可用优惠券'}}</text>
        </view>
      </view>
      <text class="arrow">></text>
    </view>
  </view>

  <!-- 价格统计 -->
  <view class="price-section {{isCharter ? 'charter-price' : ''}}">
    <view class="price-breakdown">
      <view wx:if="{{isCharter}}" class="price-item">
        <text class="price-label">包车费用</text>
        <text class="price-value">¥{{schedule.price}}</text>
      </view>
      <view wx:else class="price-item">
        <text class="price-label">票价 × {{passengers.length}}人</text>
        <text class="price-value">¥{{schedule.price}} × {{passengers.length}}</text>
      </view>
      
      <view class="price-item">
        <text class="price-label">原价小计</text>
        <text class="price-value">¥{{originalPrice}}</text>
      </view>
      
      <view wx:if="{{memberDiscount > 0}}" class="price-item discount">
        <text class="price-label">{{memberLevel.name}}折扣</text>
        <text class="price-value discount-value">-¥{{memberDiscount}}</text>
      </view>
      
      <view wx:if="{{selectedCoupon}}" class="price-item discount">
        <text class="price-label">优惠券</text>
        <text class="price-value discount-value">-¥{{couponDiscount}}</text>
      </view>
    </view>
    
    <view class="total-price">
      <text class="total-label">实付金额</text>
      <text class="total-value">¥{{totalPrice}}</text>
    </view>
  </view>
  
  <!-- 支付按钮 -->
  <view class="pay-section">
    <button class="pay-btn {{isCharter ? 'charter-pay-btn' : ''}}" 
            bindtap="pay">
      <text class="pay-icon">💳</text>
      {{isCharter ? '立即包车支付' : '立即购票支付'}} ¥{{totalPrice}}
    </button>
  </view>

  <!-- 乘车人选择器模态框 -->
  <view wx:if="{{showPassengerSelector}}" class="passenger-modal-overlay" bindtap="closePassengerSelector">
    <view class="passenger-modal-content" catchtap="">
      <view class="passenger-modal-header">
        <view class="passenger-modal-title">选择乘车人</view>
        <button class="passenger-modal-close" bindtap="closePassengerSelector">✕</button>
      </view>
      
      <view class="passenger-modal-body">
        <view wx:if="{{savedPassengers.length === 0}}" class="no-saved-passengers">
          <view class="no-passengers-icon">👥</view>
          <view class="no-passengers-text">暂无已保存的乘车人</view>
          <view class="no-passengers-desc">添加后可快速选择</view>
        </view>
        
        <view wx:else class="saved-passenger-list">
          <view wx:for="{{savedPassengers}}" wx:key="id" 
                class="saved-passenger-item" 
                bindtap="selectSavedPassenger" 
                data-id="{{item.id}}">
            <view class="saved-passenger-info">
              <view class="saved-passenger-name">{{item.name}}</view>
              <view class="saved-passenger-details">
                <text class="saved-passenger-type">{{item.idtype}}</text>
                <text class="saved-passenger-id">{{item.idcard}}</text>
              </view>
              <view class="saved-passenger-phone">{{item.phone}}</view>
            </view>
            <view class="select-icon">➕</view>
          </view>
        </view>
      </view>
      
      <view class="passenger-modal-actions">
        <button class="passenger-action-btn secondary" bindtap="addNewPassenger">
          ➕ 添加新乘车人
        </button>
        <button wx:if="{{savedPassengers.length > 0}}" 
                class="passenger-action-btn primary" 
                bindtap="managePassengers">
          🔧 管理乘车人
        </button>
      </view>
    </view>
  </view>
</view>