124 lines
4.2 KiB
Plaintext
124 lines
4.2 KiB
Plaintext
<!--pages/product-detail/product-detail.wxml-->
|
|
<view class="page">
|
|
<!-- 加载 -->
|
|
<view class="loading-box" wx:if="{{isLoading}}">
|
|
<view class="spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 错误 -->
|
|
<view class="error-box" wx:if="{{!isLoading && loadError}}">
|
|
<text class="error-text">加载失败</text>
|
|
<view class="error-btn" bindtap="onRefresh">重新加载</view>
|
|
</view>
|
|
|
|
<!-- 商品详情 -->
|
|
<block wx:if="{{!isLoading && !loadError && shangpinData}}">
|
|
<!-- 商品大图 -->
|
|
<view class="hero" bindtap="previewImage">
|
|
<image src="{{shangpinData.tupian}}" mode="aspectFill" class="hero-img" />
|
|
<!-- 图片角标 -->
|
|
<view class="hero-badge">
|
|
<text class="hero-badge-text">{{shangpinData.kucun <= 0 ? '已售罄' : '现货'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 价格区 - 红底渐变 -->
|
|
<view class="price-block">
|
|
<view class="price-left">
|
|
<text class="price-sym">¥</text>
|
|
<text class="price-int">{{shangpinData.priceInteger || '0'}}</text>
|
|
<text class="price-dec">.{{shangpinData.priceDecimal || '00'}}</text>
|
|
</view>
|
|
<view class="price-right">
|
|
<text class="sold-text">已拼{{shangpinData.xiaoliangText || '0'}}件</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标题区 -->
|
|
<view class="title-block">
|
|
<view class="title-tags">
|
|
<text class="tag-hot">热卖</text>
|
|
</view>
|
|
<text class="title-text">{{shangpinData.biaoti || ''}}</text>
|
|
</view>
|
|
|
|
<!-- 服务保障条 -->
|
|
<view class="service-strip">
|
|
<view class="service-item">
|
|
<text class="service-check">✓</text>
|
|
<text class="service-label">极速接单</text>
|
|
</view>
|
|
<view class="service-item">
|
|
<text class="service-check">✓</text>
|
|
<text class="service-label">资金担保</text>
|
|
</view>
|
|
<view class="service-item">
|
|
<text class="service-check">✓</text>
|
|
<text class="service-label">售后保障</text>
|
|
</view>
|
|
<view class="service-item">
|
|
<text class="service-check">✓</text>
|
|
<text class="service-label">隐私保护</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选择SKU入口 -->
|
|
<view class="sku-trigger" bindtap="onOrderClick">
|
|
<view class="sku-trigger-left">
|
|
<text class="sku-label">选择</text>
|
|
<text class="sku-value">服务规格、购买数量</text>
|
|
</view>
|
|
<text class="sku-arrow">></text>
|
|
</view>
|
|
|
|
<!-- 商品介绍 -->
|
|
<view class="detail-card" wx:if="{{shangpinData.xiangqing}}">
|
|
<view class="detail-card-head">
|
|
<text class="detail-card-title">商品介绍</text>
|
|
</view>
|
|
<text class="detail-card-body">{{shangpinData.xiangqing}}</text>
|
|
</view>
|
|
|
|
<!-- 购买须知 -->
|
|
<view class="detail-card" wx:if="{{shangpinData.xiadanxuzhi}}">
|
|
<view class="detail-card-head">
|
|
<text class="detail-card-title">购买须知</text>
|
|
</view>
|
|
<text class="detail-card-body">{{shangpinData.xiadanxuzhi}}</text>
|
|
</view>
|
|
|
|
<!-- 规则图片 -->
|
|
<view class="detail-card" wx:if="{{shangpinData.guize}}">
|
|
<view class="detail-card-head">
|
|
<text class="detail-card-title">服务规则</text>
|
|
</view>
|
|
<image src="{{shangpinData.guize}}" mode="widthFix" class="rule-img" binderror="onImageError" />
|
|
</view>
|
|
|
|
<!-- 底部留白 -->
|
|
<view class="bottom-space"></view>
|
|
</block>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view class="bottom-bar" wx:if="{{!isLoading && !loadError && shangpinData}}">
|
|
<view class="bottom-bar-inner">
|
|
<!-- 客服 -->
|
|
<view class="bar-icon-btn" bindtap="goToKefu">
|
|
<text class="bar-icon-text">客服</text>
|
|
</view>
|
|
<!-- 单独购买 -->
|
|
<view
|
|
class="bar-buy-btn {{shangpinData.kucun <= 0 ? 'bar-buy-btn--disabled' : ''}}"
|
|
bindtap="onOrderClick"
|
|
hover-class="bar-buy-btn--hover"
|
|
>
|
|
<text class="bar-buy-text">{{shangpinData.kucun <= 0 ? '已售罄' : '立即下单'}}</text>
|
|
<text class="bar-buy-price">¥{{shangpinData.priceInteger || '0'}}.{{shangpinData.priceDecimal || '00'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<global-notification id="global-notification" />
|
|
</view>
|