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

<wxs module="tool" src="../../../utils/tool.wxs"></wxs>
<view class="detail-page">
  <!-- 药品图片轮播 -->
  <view class="medicine-images">
    <swiper 
      class="detail-swiper" 
      indicator-dots="{{imageUrl && imageUrl.length > 0}}" 
      indicator-color="rgba(255, 255, 255, 0.5)" 
      indicator-active-color="#3a7ff3"
      autoplay="true"
      interval="3000"
      duration="500"
    >
      <block wx:for="{{imageUrl}}" wx:key="index">
        <swiper-item>
          <image 
            src="{{baseUr+item}}" 
            class="detail-image"
            mode="aspectFill"
            bindtap="previewImage"
            data-index="{{index}}"
          />
        </swiper-item>
      </block>
    </swiper>
    
    <!-- 药品标签 -->
    <view class="detail-tag {{tool.medicineType(medicineData.medicineType)}}">
      {{medicineData.medicineType}}
      <view class="hot-badge" wx:if="{{medicineData.salesType}}">{{medicineData.salesType}}</view>
    </view>
  </view>
  
  <!-- 药品基本信息 -->
  <view class="basic-info-section">
    <view class="medicine-name">{{medicineData.medicineName}}</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.soldQuantity}}件
      </view>
    </view>
  </view>
  
  <!-- 适用症状 -->
  <view class="info-section">
    <view class="section-title">适用症状</view>
    <view class="section-content">{{medicineData.indications}}</view>
  </view>
  
  <!-- 专家推荐信息 -->
  <view class="expert-section">
    <view class="section-title">专家推荐</view>
    <view class="expert-card">
      <view class="expert-header">
        <image 
          src="{{baseUr+medicineData.expertAvatar}}" 
          class="expert-avatar"
          mode="aspectFill"
        />
        <view class="expert-info">
          <view class="expert-name">{{medicineData.expertName}}<text class="expert-title"> | {{medicineData.expertExpert}}</text></view>
          <view class="expert-hospital">{{medicineData.expertExpertiseArea}}</view>
          <view class="expert-experience">
            <text class="experience-label">从业：</text>{{medicineData.expertWorkExperience}}
          </view>
        </view>
      </view>
      <view class="expert-reason">
        <view class="reason-title">推荐理由</view>
        <view class="reason-content">{{medicineData.recommendReason}}</view>
      </view>
      <view class="recommend-time">推荐时间：{{medicineData.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.storeName}}</view>
      </view>
      <view class="store-info">
        <view class="info-item">
          <text class="info-icon">📍</text>
          <text class="info-text">{{medicineData.storeAddress}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-icon">📞</text>
          <text class="info-text">{{medicineData.storePhone}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-icon">🕒</text>
          <text class="info-text">{{medicineData.businessHours}}</text>
        </view>
        
        <view class="info-item" wx:if="{{medicineData.storeRemark}}">
          <text class="info-icon">⭐</text>
          <text class="info-text">{{medicineData.storeRemark}}</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.usageDosage}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">注意事项</view>
        <view class="item-value">{{medicineData.precautions}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">贮藏方式</view>
        <view class="item-value">{{medicineData.storageMethod}}</view>
      </view>
      
      <view class="detail-item">
        <view class="item-label">有效期</view>
        <view class="item-value">{{medicineData.expiryDate}}</view>
      </view>
    </view>
  </view>
</view>