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.
97 lines
3.3 KiB
97 lines
3.3 KiB
<view class="container">
|
|
<!-- 步骤指示器 -->
|
|
<view class="step-indicator">
|
|
<view class="step-item active">
|
|
<view class="step-number">1</view>
|
|
<text class="step-text">选择品种</text>
|
|
</view>
|
|
<view class="step-line active"></view>
|
|
<view class="step-item active">
|
|
<view class="step-number">2</view>
|
|
<text class="step-text">选择产品</text>
|
|
</view>
|
|
<view class="step-line"></view>
|
|
<view class="step-item">
|
|
<view class="step-number">3</view>
|
|
<text class="step-text">选择规格</text>
|
|
</view>
|
|
<view class="step-line"></view>
|
|
<view class="step-item">
|
|
<view class="step-number">4</view>
|
|
<text class="step-text">查看估价</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 头部导航栏 -->
|
|
<view class="header">
|
|
<view class="header-content">
|
|
<button class="back-button" bindtap="goBackToCategories">
|
|
<text class="back-icon" style="width: 75rpx; display: block; box-sizing: border-box; position: relative; left: -162rpx; top: 2rpx">←</text>
|
|
</button>
|
|
<text class="title">商品选择</text>
|
|
<view class="header-right"></view> <!-- 占位，保持标题居中 -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<!-- 加载中状态 -->
|
|
<view wx:if="{{loading}}" class="loading">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">正在加载商品数据...</text>
|
|
</view>
|
|
|
|
<!-- 非加载状态 -->
|
|
<view wx:else>
|
|
<!-- 错误提示 -->
|
|
<view wx:if="{{error}}" class="error-card">
|
|
<view class="error-icon">⚠️</view>
|
|
<text class="error-text">{{error}}</text>
|
|
<button bindtap="loadProductNames" class="btn-primary">重新加载</button>
|
|
</view>
|
|
|
|
<!-- 商品名称列表 -->
|
|
<view wx:else class="product-section">
|
|
<view class="section-header">
|
|
<text class="section-title">{{category}}系列的商品列表</text>
|
|
<view class="section-count">{{productNames.length}}个商品</view>
|
|
</view>
|
|
<view class="section-divider"></view>
|
|
|
|
<!-- 有商品时显示网格 -->
|
|
<view wx:if="{{productNames.length > 0}}" class="product-grid">
|
|
<view
|
|
wx:for="{{productNames}}"
|
|
wx:key="*this"
|
|
class="product-card"
|
|
data-product="{{item}}"
|
|
bindtap="selectProduct"
|
|
>
|
|
<view class="product-image-container">
|
|
<image
|
|
src="../../images/OIP-C.png"
|
|
mode="aspectFill"
|
|
class="product-image"
|
|
/>
|
|
</view>
|
|
<text class="product-name">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 无商品时显示空状态 -->
|
|
<view wx:if="{{productNames.length === 0}}" class="empty-state">
|
|
<view class="empty-icon">📦</view>
|
|
<text class="empty-text">
|
|
{{category ? '该分类下暂无商品' : '暂无商品'}}
|
|
</text>
|
|
<text class="empty-subtext">试试其他分类吧</text>
|
|
<button bindtap="loadProductNames" class="btn-secondary">刷新</button>
|
|
</view>
|
|
|
|
<!-- 暂无更多商品提示 -->
|
|
<view wx:if="{{productNames.length > 0}}" class="no-more">
|
|
<text class="no-more-text">已经到底啦</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|