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.
100 lines
3.6 KiB
100 lines
3.6 KiB
1 month ago
|
<view class="container">
|
||
|
|
<!-- 头部导航栏 -->
|
||
|
|
<view class="header">
|
||
|
|
<view class="header-content" style="width: 800rpx; display: block; box-sizing: border-box">
|
||
|
|
<text class="title">分类选择</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="content" style="width: 600rpx; display: block; box-sizing: border-box">
|
||
|
|
<!-- 加载中状态 -->
|
||
|
|
<view wx:if="{{loading}}" class="loading">
|
||
|
|
<view class="loading-spinner"></view>
|
||
|
|
<text class="loading-text">正在加载数据...</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 错误提示 -->
|
||
|
|
<view wx:if="{{error}}" class="error-card">
|
||
|
|
<view class="error-icon">⚠️</view>
|
||
|
|
<text class="error-text">{{error}}</text>
|
||
|
|
<view class="button-group">
|
||
|
|
<button bindtap="loadCategories" class="btn-primary">重新加载</button>
|
||
|
|
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 分类选择区域 -->
|
||
|
|
<view wx:else class="category-section">
|
||
|
|
<view class="section-header">
|
||
|
|
<text class="section-title">商品分类</text>
|
||
|
|
<text class="section-count">{{categories.length}}个</text>
|
||
|
|
</view>
|
||
|
|
<view class="category-grid">
|
||
|
|
<view
|
||
|
|
wx:for="{{categories}}"
|
||
|
|
wx:key="item"
|
||
|
|
class="category-card"
|
||
|
|
data-category="{{item}}"
|
||
|
|
bindtap="selectCategory"
|
||
|
|
>
|
||
|
|
<view class="category-info">
|
||
|
|
<text class="category-name">{{item}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="category-arrow">→</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 商品信息 (当有productName时显示) -->
|
||
|
|
<view wx:if="{{productName}}" class="product-card">
|
||
|
|
<view class="product-info-container">
|
||
|
|
<view class="product-info-row">
|
||
|
|
<text class="product-label">商品名称</text>
|
||
|
|
<button bindtap="goBackToProductList" class="btn-back">
|
||
|
|
<text class="btn-back-icon">←</text>
|
||
|
|
<text class="btn-back-text">更换商品</text>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<text class="product-name">{{productName}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 规格列表 (当有specifications时显示) -->
|
||
|
|
<view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section">
|
||
|
|
<view class="section-header">
|
||
|
|
<text class="section-title">可用规格</text>
|
||
|
|
<text class="section-count">{{specifications.length}}个</text>
|
||
|
|
</view>
|
||
|
|
<view class="spec-grid">
|
||
|
|
<view
|
||
|
|
wx:for="{{specifications}}"
|
||
|
|
wx:key="item.name"
|
||
|
|
class="spec-card"
|
||
|
|
data-spec="{{item}}"
|
||
|
|
bindtap="goToSpecDetail"
|
||
|
|
>
|
||
|
|
<view class="spec-info">
|
||
|
|
<text class="spec-name">{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="spec-price">
|
||
|
|
<text class="price-label">参考价格</text>
|
||
|
|
<text class="price-value">¥{{item.finalPriceText}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="spec-arrow">→</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 暂无更多规格提示 -->
|
||
|
|
<view wx:if="{{specifications.length > 0}}" class="no-more">
|
||
|
|
<text class="no-more-text">暂无更多规格选择</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 无规格提示 -->
|
||
|
|
<view wx:if="{{!loading && !error && specifications.length === 0 && productName}}" class="empty-state">
|
||
|
|
<view class="empty-icon">📋</view>
|
||
|
|
<text class="empty-text">该商品暂无可用规格</text>
|
||
|
|
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|