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.
166 lines
5.8 KiB
166 lines
5.8 KiB
<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>
|