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.
221 lines
8.8 KiB
221 lines
8.8 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"></view>
|
|
<view class="step-item">
|
|
<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 wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
|
|
<view class="auth-modal-container">
|
|
<view class="auth-modal-title">授权登录</view>
|
|
<view class="auth-modal-content">授权您的手机号后才能使用完整功能</view>
|
|
<view class="auth-modal-buttons">
|
|
<button
|
|
class="auth-primary-button"
|
|
open-type="getPhoneNumber"
|
|
bindgetphonenumber="onGetPhoneNumber"
|
|
>
|
|
授权手机号
|
|
</button>
|
|
<button
|
|
class="auth-cancel-button"
|
|
bindtap="closeOneKeyLoginModal"
|
|
>
|
|
取消
|
|
</button>
|
|
</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: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 {{item === '粉壳' ? 'pink-shell-card' : item === '绿壳' ? 'green-shell-card' : item === '褐壳' ? 'brown-shell-card' : 'free-range-card'}}"
|
|
data-category="{{item}}"
|
|
bindtap="selectCategory"
|
|
>
|
|
<!-- 标签系统 -->
|
|
<view class="card-labels">
|
|
<view class="feature-label">
|
|
<text class="feature-label-text">{{item === '绿壳' ? '珍稀品种' : item === '粉壳' ? '杂交品种' : item === '褐壳' ? '常见品种' : '农家散养'}}</text>
|
|
</view>
|
|
<view class="category-label">
|
|
<text class="category-label-text">{{item}}系列</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 产品图片区域 -->
|
|
<view class="product-image-container">
|
|
<image
|
|
src="../../images/OIP-C.png"
|
|
mode="aspectFill"
|
|
class="product-image"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 文字信息区域 -->
|
|
<view class="card-content">
|
|
<text class="product-title">{{item}}鸡蛋</text>
|
|
<text class="product-description">{{categoryDescriptions[item] || '点击选择此类型查看相关商品'}}</text>
|
|
|
|
<!-- 卖点标签 -->
|
|
<view class="selling-points">
|
|
<!-- 粉壳鸡蛋卖点 -->
|
|
<view wx:if="{{item === '粉壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🧬</text>
|
|
<text class="selling-point-text">杂交品种</text>
|
|
</view>
|
|
<view wx:if="{{item === '粉壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🌸</text>
|
|
<text class="selling-point-text">粉红蛋壳</text>
|
|
</view>
|
|
<view wx:if="{{item === '粉壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">👅</text>
|
|
<text class="selling-point-text">口感细腻</text>
|
|
</view>
|
|
|
|
<!-- 绿壳鸡蛋卖点 -->
|
|
<view wx:if="{{item === '绿壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🍃</text>
|
|
<text class="selling-point-text">五黑一绿</text>
|
|
</view>
|
|
<view wx:if="{{item === '绿壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">💪</text>
|
|
<text class="selling-point-text">高氨基酸</text>
|
|
</view>
|
|
<view wx:if="{{item === '绿壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🏥</text>
|
|
<text class="selling-point-text">保健功效</text>
|
|
</view>
|
|
|
|
<!-- 褐壳鸡蛋卖点 -->
|
|
<view wx:if="{{item === '褐壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🔥</text>
|
|
<text class="selling-point-text">常见品种</text>
|
|
</view>
|
|
<view wx:if="{{item === '褐壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">📦</text>
|
|
<text class="selling-point-text">耐运输</text>
|
|
</view>
|
|
<view wx:if="{{item === '褐壳'}}" class="selling-point">
|
|
<text class="selling-point-icon">🍳</text>
|
|
<text class="selling-point-text">日常烹饪</text>
|
|
</view>
|
|
|
|
<!-- 土鸡蛋卖点 -->
|
|
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
|
|
<text class="selling-point-icon">🌾</text>
|
|
<text class="selling-point-text">自然觅食</text>
|
|
</view>
|
|
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
|
|
<text class="selling-point-icon">🥚</text>
|
|
<text class="selling-point-text">蛋黄饱满</text>
|
|
</view>
|
|
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
|
|
<text class="selling-point-icon">🥘</text>
|
|
<text class="selling-point-text">风味浓郁</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 按钮区域 -->
|
|
<view class="card-footer">
|
|
<button class="select-button" bindtap="selectCategory" data-category="{{item}}">
|
|
<text class="select-button-icon">→</text>
|
|
<text class="select-button-text">选择</text>
|
|
</button>
|
|
</view>
|
|
</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>
|
|
</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>
|