112 lines
4.0 KiB
Plaintext
112 lines
4.0 KiB
Plaintext
<!--pages/shangpinxiangqing/shangpinxiangqing.wxml-->
|
|
<view class="detail-page">
|
|
<!-- 加载状态 -->
|
|
<view class="loading-container" wx:if="{{isLoading}}">
|
|
<view class="loading-content">
|
|
<view class="loading-spinner">
|
|
<view class="spinner-ring"></view>
|
|
<view class="spinner-dot"></view>
|
|
</view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 错误状态 -->
|
|
<view class="error-container" wx:if="{{!isLoading && loadError}}">
|
|
<image src="/images/error.png" class="error-icon" />
|
|
<text class="error-text">加载失败</text>
|
|
<button class="error-btn" bindtap="onRefresh">重新加载</button>
|
|
</view>
|
|
|
|
<!-- 商品详情内容 -->
|
|
<view class="detail-content" wx:if="{{!isLoading && !loadError && shangpinData}}">
|
|
<!-- 商品图片区域（占满屏幕） -->
|
|
<view class="image-section">
|
|
<view class="image-container" bindtap="previewImage">
|
|
<image
|
|
src="{{shangpinData.tupian}}"
|
|
mode="aspectFill"
|
|
class="product-image"
|
|
/>
|
|
<!-- 库存标签 -->
|
|
<view class="kucun-tag {{shangpinData.kucunClass || 'kucun-normal'}}">
|
|
<text class="kucun-text">{{shangpinData.kucunText || '库存充足'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 下方内容区域（顶部有圆角） -->
|
|
<view class="content-area">
|
|
<!-- 商品标题和价格区域 -->
|
|
<view class="title-price-section">
|
|
<view class="title-row">
|
|
<text class="product-title">{{shangpinData.biaoti || ''}}</text>
|
|
</view>
|
|
|
|
<view class="price-row">
|
|
<!-- 价格 -->
|
|
<view class="price-section">
|
|
<text class="price-icon">¥</text>
|
|
<text class="price-integer">{{shangpinData.priceInteger || '0'}}</text>
|
|
<text class="price-decimal">.{{shangpinData.priceDecimal || '00'}}</text>
|
|
</view>
|
|
|
|
<!-- 销量 -->
|
|
<view class="sales-section">
|
|
<image src="/images/xiaoliang.png" class="sales-icon" />
|
|
<text class="sales-text">{{shangpinData.xiaoliangText || '0'}}次购买</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品介绍区域 -->
|
|
<view class="info-section" wx:if="{{shangpinData.xiangqing}}">
|
|
<view class="section-header">
|
|
<image src="/images/jieshao.png" class="section-icon" />
|
|
<text class="section-title">商品介绍：</text>
|
|
</view>
|
|
<view class="section-content">
|
|
<text class="content-text">{{shangpinData.xiangqing}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 购买须知区域 -->
|
|
<view class="info-section" wx:if="{{shangpinData.xiadanxuzhi}}">
|
|
<view class="section-header">
|
|
<image src="/images/jieshao.png" class="section-icon" />
|
|
<text class="section-title">购买须知：</text>
|
|
</view>
|
|
<view class="section-content">
|
|
<text class="content-text">{{shangpinData.xiadanxuzhi}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 规则图片区域（只有有图片时才显示） -->
|
|
<view class="rule-section" wx:if="{{shangpinData.guize}}">
|
|
<image
|
|
src="{{shangpinData.guize}}"
|
|
mode="widthFix"
|
|
class="rule-image"
|
|
binderror="onImageError"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 占位区域（给底部按钮留空间） -->
|
|
<view class="placeholder"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 立即下单按钮（固定在底部，无价格标签） -->
|
|
<view class="order-btn-container" wx:if="{{!isLoading && !loadError && shangpinData}}">
|
|
<view class="order-btn" bindtap="onOrderClick">
|
|
<!-- 按钮发光特效 -->
|
|
<view class="btn-glow"></view>
|
|
<!-- 按钮流光特效 -->
|
|
<view class="btn-streamer"></view>
|
|
<!-- 按钮文字 -->
|
|
<text class="btn-text">立即预约</text>
|
|
</view>
|
|
</view>
|
|
<global-notification id="global-notification" />
|
|
|
|
</view> |