You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
6.2 KiB
175 lines
6.2 KiB
<!-- 药品详情页 -->
|
|
<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>
|