drone_delivery_of_medicines_applet/pages/order/order.wxml

<!--order.wxml-->
<view class="container">
  <!-- 选项卡切换 -->
  <view class="tab-bar">
    <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-tab="0">
      <text>医院选择</text>
    </view>
    <view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-tab="1">
      <text>药品比价</text>
    </view>
  </view>

  <!-- 医院选择页面 -->
  <view class="tab-content" wx:if="{{currentTab === 0}}">
    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-box">
        <image class="search-icon" src="/images/search-icon.png"></image>
        <input class="search-input" placeholder="搜索医院名称" bindinput="onHospitalSearch" value="{{hospitalKeyword}}" />
      </view>
    </view>

    <!-- 医院列表 -->
    <view class="hospital-list">
      <view class="hospital-item" wx:for="{{filteredHospitals}}" wx:key="id" bindtap="selectHospital" data-hospital="{{item}}">
        <image class="hospital-image" src="{{item.image}}" mode="aspectFill"></image>
        <view class="hospital-info">
          <text class="hospital-name">{{item.name}}</text>
          <text class="hospital-address">{{item.address}}</text>
          <view class="hospital-details">
            <text class="rating">{{item.rating}}分</text>
            <text class="distance">{{item.distance}}</text>
            <text class="case-count">{{item.cases.length}}个病例单</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 药品比价页面 -->
  <view class="tab-content" wx:if="{{currentTab === 1}}">
    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-box">
        <image class="search-icon" src="/images/search-icon.png"></image>
        <input class="search-input" placeholder="输入药品名称" bindinput="onMedicineSearch" value="{{medicineKeyword}}" />
      </view>
    </view>

    <!-- 药品比价结果 -->
    <view class="price-comparison" wx:if="{{medicineKeyword}}">
      <view class="medicine-title">
        <text>药品：{{medicineKeyword}}</text>
      </view>
      <view class="price-list">
        <view class="price-item" wx:for="{{priceResults}}" wx:key="hospital" bindtap="selectByPrice" data-price="{{item}}">
          <view class="hospital-info">
            <text class="hospital-name">{{item.hospital}}</text>
            <text class="price">¥{{item.price}}</text>
          </view>
          <view class="action">
            <text class="select-btn">选择</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门药品推荐 -->
    <view class="hot-medicines" wx:if="{{!medicineKeyword}}">
      <view class="section-title">
        <text>热门药品</text>
      </view>
      <view class="medicine-grid">
        <view class="medicine-item" wx:for="{{hotMedicines}}" wx:key="name" bindtap="selectHotMedicine" data-medicine="{{item.name}}">
          <image class="medicine-icon" src="{{item.icon || '/images/medicine-default.png'}}" mode="aspectFit"></image>
          <view class="medicine-info">
            <text class="medicine-name">{{item.name}}</text>
            <text class="medicine-price">¥{{item.minPrice}}起</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 病例单选择模态框 -->
  <view class="modal" wx:if="{{showCaseModal}}">
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">选择病例单</text>
        <text class="modal-close" bindtap="closeCaseModal">×</text>
      </view>
      <view class="case-list">
        <view class="case-item" wx:for="{{selectedHospital.cases}}" wx:key="id" bindtap="selectCase" data-case="{{item}}">
          <view class="case-info">
            <text class="case-date">{{item.date}}</text>
            <text class="case-doctor">{{item.doctor}} - {{item.department}}</text>
            <text class="case-diagnosis">诊断：{{item.diagnosis}}</text>
          </view>
          <view class="case-arrow">
            <text>></text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 药品选择模态框 -->
  <view class="modal" wx:if="{{showMedicineModal}}">
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">选择药品</text>
        <text class="modal-close" bindtap="closeMedicineModal">×</text>
      </view>
      <view class="medicine-list">
        <view class="medicine-item" wx:for="{{selectedCase.medicines}}" wx:key="id">
          <view class="medicine-info">
            <text class="medicine-name">{{item.name}}</text>
            <text class="medicine-price">¥{{item.price}}</text>
          </view>
          <view class="medicine-action">
            <text class="quantity-control">
              <text class="btn minus" bindtap="decreaseQuantity" data-medicine="{{item}}">-</text>
              <text class="quantity">{{item.quantity || 0}}</text>
              <text class="btn plus" bindtap="increaseQuantity" data-medicine="{{item}}">+</text>
            </text>
          </view>
        </view>
      </view>
      
      <!-- 送货地址 -->
      <view class="address-section">
        <view class="address-title">
          <text>送货地址</text>
        </view>
        <view class="address-input-wrapper">
          <input 
            class="address-input" 
            placeholder="请输入送货地址" 
            value="{{deliveryAddress}}" 
            bindinput="onAddressInput"
            maxlength="100"
          />
          <view class="address-actions">
            <text class="address-btn" bindtap="useDefaultAddress">使用默认地址</text>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="total-price">
          <text>总计：¥{{totalPrice}}</text>
        </view>
        <view class="action-buttons">
          <button class="btn cancel" bindtap="closeMedicineModal">取消</button>
          <button class="btn confirm" bindtap="confirmOrder">确认下单</button>
        </view>
      </view>
    </view>
  </view>

  <!-- 药品比价下单确认模态框 -->
  <view class="modal" wx:if="{{showPriceConfirmModal}}">
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">确认下单</text>
        <text class="modal-close" bindtap="closePriceConfirmModal">×</text>
      </view>
      <view class="price-confirm-info">
        <view class="confirm-item">
          <text class="confirm-label">药品：</text>
          <text class="confirm-value">{{selectedPriceItem.medicine}}</text>
        </view>
        <view class="confirm-item">
          <text class="confirm-label">医院：</text>
          <text class="confirm-value">{{selectedPriceItem.hospital}}</text>
        </view>
        <view class="confirm-item">
          <text class="confirm-label">价格：</text>
          <text class="confirm-value price">¥{{selectedPriceItem.price}}</text>
        </view>
      </view>
      
      <!-- 送货地址 -->
      <view class="address-section">
        <view class="address-title">
          <text>送货地址</text>
        </view>
        <view class="address-input-wrapper">
          <input 
            class="address-input" 
            placeholder="请输入送货地址" 
            value="{{deliveryAddress}}" 
            bindinput="onAddressInput"
            maxlength="100"
          />
          <view class="address-actions">
            <text class="address-btn" bindtap="useDefaultAddress">使用默认地址</text>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <view class="action-buttons">
          <button class="btn cancel" bindtap="closePriceConfirmModal">取消</button>
          <button class="btn confirm" bindtap="confirmPriceOrder">确认下单</button>
        </view>
      </view>
    </view>
  </view>
</view>