wxamp-ymtxUser/pagesA/pages/medicineDetails/medicineDetails.wxml

<!-- 药品详情页 -->
<view class="detail-page">
  <!-- 药品图片轮播 -->
  <view class="medicine-images">
    <swiper 
      class="detail-swiper" 
      indicator-dots="{{medicineData.store.images && medicineData.store.images.length > 0}}" 
      indicator-color="rgba(255, 255, 255, 0.5)" 
      indicator-active-color="#3a7ff3"
      autoplay="true"
      interval="3000"
      duration="500"
    >
      <block wx:for="{{medicineData.store.images}}" wx:key="index">
        <swiper-item>
          <image 
            src="{{item}}" 
            class="detail-image"
            mode="aspectFill"
            bindtap="previewImage"
            data-index="{{index}}"
          />
        </swiper-item>
      </block>
    </swiper>
    
    <!-- 药品标签 -->
    <view class="detail-tag {{medicineData.category}}">
      {{medicineData.categoryText}}
      <view class="hot-badge" wx:if="{{medicineData.isHot}}">热销</view>
    </view>
  </view>
  
  <!-- 药品基本信息 -->
  <view class="basic-info-section">
    <view class="medicine-name">{{medicineData.name}}</view>
    <view class="medicine-spec">{{medicineData.specification}}</view>
    <view class="manufacturer">{{medicineData.manufacturer}}</view>
    
    <!-- 价格信息 -->
    <view class="price-info">
      <view class="current-price">
        <text class="price-symbol">¥</text>
        <text class="price-value">{{medicineData.price}}</text>
      </view>
      <view class="original-price" wx:if="{{medicineData.originalPrice}}">
        原价：¥{{medicineData.originalPrice}}
      </view>
      <view class="sales-count">
        已售：{{medicineData.salesCount}}件
      </view>
    </view>
  </view>
  
  <!-- 适用症状 -->
  <view class="info-section">
    <view class="section-title">适用症状</view>
    <view class="section-content">{{medicineData.indication}}</view>
  </view>
  
  <!-- 专家推荐信息 -->
  <view class="expert-section">
    <view class="section-title">专家推荐</view>
    <view class="expert-card">
      <view class="expert-header">
        <image 
          src="{{medicineData.expert.avatar || '/images/default-avatar.png'}}" 
          class="expert-avatar"
          mode="aspectFill"
        />
        <view class="expert-info">
          <view class="expert-name">{{medicineData.expert.name}}<text class="expert-title"> | {{medicineData.expert.title}}</text></view>
          <view class="expert-hospital">{{medicineData.expert.hospital}}</view>
          <view class="expert-experience">
            <text class="experience-label">专业：</text>{{medicineData.expert.expertise}}
            <text class="experience-label">从业：</text>{{medicineData.expert.years}}年
          </view>
        </view>
      </view>
      <view class="expert-reason">
        <view class="reason-title">推荐理由</view>
        <view class="reason-content">{{medicineData.expert.reason}}</view>
      </view>
      <view class="recommend-time">推荐时间：{{medicineData.expert.recommendTime}}</view>
    </view>
  </view>
  
  <!-- 店铺信息 -->
  <view class="store-section">
    <view class="section-title">推荐店铺</view>
    <view class="store-card">
      <view class="store-header">
        <view class="store-name">{{medicineData.store.name}}</view>
        <view class="store-rating" wx:if="{{medicineData.store.rating}}">
          <text class="rating-value">{{medicineData.store.rating}}</text>
          <text class="rating-star">★</text>
        </view>
      </view>
      
      <view class="store-info">
        <view class="info-item">
          <text class="info-icon">📍</text>
          <text class="info-text">{{medicineData.store.address}}</text>
          <view class="store-distance" wx:if="{{medicineData.store.distance}}">
            距离：{{medicineData.store.distance}}km
          </view>
        </view>
        
        <view class="info-item">
          <text class="info-icon">📞</text>
          <text class="info-text">{{medicineData.store.phone}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-icon">🕒</text>
          <text class="info-text">{{medicineData.store.businessHours}}</text>
        </view>
        
        <view class="info-item" wx:if="{{medicineData.store.features}}">
          <text class="info-icon">⭐</text>
          <text class="info-text">{{medicineData.store.features}}</text>
        </view>
      </view>
      
      <!-- 店铺图片 -->
      <view class="store-images" wx:if="{{medicineData.store.images && medicineData.store.images.length > 0}}">
        <scroll-view class="store-images-scroll" scroll-x="true">
          <block wx:for="{{medicineData.store.images}}" wx:key="index">
            <view class="store-image-item" bindtap="previewStoreImage" data-index="{{index}}">
              <image src="{{item}}" class="store-image" mode="aspectFill" />
            </view>
          </block>
        </scroll-view>
      </view>
      
      <!-- 店铺操作按钮 -->
      <view class="store-actions">
        <button class="action-btn map-btn" bindtap="openLocation">
          <text class="btn-icon">🗺️</text>
          <text class="btn-text">查看位置</text>
        </button>
        <button class="action-btn call-btn" bindtap="makePhoneCall">
          <text class="btn-icon">📱</text>
          <text class="btn-text">联系店铺</text>
        </button>
      </view>
    </view>
  </view>
  
  <!-- 药品详细信息 -->
  <view class="details-section">
    <view class="section-title">药品详情</view>
    <view class="details-grid">
      <view class="detail-item">
        <view class="item-label">用法用量</view>
        <view class="item-value">{{medicineData.details.usage}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">注意事项</view>
        <view class="item-value">{{medicineData.details.precautions}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">贮藏方式</view>
        <view class="item-value">{{medicineData.details.storage}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">有效期</view>
        <view class="item-value">{{medicineData.details.validity}}</view>
      </view>
    </view>
  </view>
</view>