217 lines
8.2 KiB
Plaintext
217 lines
8.2 KiB
Plaintext
<!-- pages/category/category.wxml -->
|
|
<view class="fenlei-page">
|
|
<!-- 1. 毛玻璃搜索框区域（固定） -->
|
|
<view class="search-container">
|
|
<view class="search-box search-box--glass">
|
|
<image src="/images/search.png" class="search-icon" />
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
placeholder="输入商品名称搜索"
|
|
placeholder-class="search-placeholder"
|
|
value="{{searchText}}"
|
|
bindinput="onSearchInput"
|
|
bindconfirm="onSearchConfirm"
|
|
confirm-type="search"
|
|
/>
|
|
<!-- 清空按钮 -->
|
|
<view wx:if="{{searchText}}" class="search-clear" bindtap="onClearSearch">
|
|
<image src="/images/clear.png" class="clear-icon" />
|
|
</view>
|
|
<!-- 搜索按钮 -->
|
|
<view class="search-btn btn btn-sm btn-sm--gold" bindtap="onSearchTap">
|
|
<text class="search-btn-text">搜索</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. 商品类型选择区域 -->
|
|
<view class="leixing-container" wx:if="{{!showSearchResult}}">
|
|
<scroll-view
|
|
class="leixing-scroll"
|
|
scroll-x
|
|
scroll-with-animation
|
|
show-scrollbar="{{false}}"
|
|
>
|
|
<view class="leixing-list">
|
|
<block wx:for="{{shangpinleixing}}" wx:key="id" wx:for-index="idx">
|
|
<view
|
|
class="leixing-item {{selectedLeixingId === item.id ? 'leixing-active' : ''}}"
|
|
bindtap="selectLeixing"
|
|
data-id="{{item.id}}"
|
|
data-index="{{idx}}"
|
|
>
|
|
<view class="leixing-image-box">
|
|
<image
|
|
src="{{ossImageUrl}}{{item.tupian_url}}"
|
|
mode="aspectFill"
|
|
class="leixing-image"
|
|
/>
|
|
<view class="leixing-glow {{selectedLeixingId === item.id ? 'leixing-glow-active' : ''}}"></view>
|
|
</view>
|
|
<text class="leixing-text">{{item.jieshao}}</text>
|
|
<view class="leixing-active-bar {{selectedLeixingId === item.id ? 'leixing-active-bar-show' : ''}}"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 3. 左右分栏布局 -->
|
|
<view class="main-container" wx:if="{{!showSearchResult}}">
|
|
<!-- 左边：商品专区列表 -->
|
|
<scroll-view
|
|
class="zhuanqu-left"
|
|
scroll-y
|
|
enhanced="{{true}}"
|
|
show-scrollbar="{{false}}"
|
|
scroll-into-view="{{'zhuanqu-' + selectedZhuanquId}}"
|
|
>
|
|
<view class="zhuanqu-list">
|
|
<block wx:for="{{filteredZhuanquList}}" wx:key="id">
|
|
<view
|
|
id="zhuanqu-{{item.id}}"
|
|
class="zhuanqu-item {{selectedZhuanquId === item.id ? 'zhuanqu-active' : ''}}"
|
|
bindtap="selectZhuanqu"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<view class="zhuanqu-item-content">
|
|
<text class="zhuanqu-name">{{item.mingzi}}</text>
|
|
<text class="zhuanqu-count">({{zhuanquGoodsCount[item.id] || 0}})</text>
|
|
</view>
|
|
<view class="zhuanqu-active-indicator {{selectedZhuanquId === item.id ? 'zhuanqu-indicator-glow' : ''}}"></view>
|
|
</view>
|
|
</block>
|
|
|
|
<view wx:if="{{filteredZhuanquList.length === 0}}" class="zhuanqu-empty">
|
|
<image src="/images/empty-box.png" class="zhuanqu-empty-icon" />
|
|
<text class="zhuanqu-empty-text">暂无专区</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 右边：商品列表 -->
|
|
<scroll-view
|
|
class="shangpin-right"
|
|
scroll-y
|
|
enhanced="{{true}}"
|
|
show-scrollbar="{{false}}"
|
|
>
|
|
<view class="shangpin-list">
|
|
<block wx:for="{{filteredShangpinList}}" wx:key="id">
|
|
<view
|
|
class="shangpin-item"
|
|
bindtap="goToDetail"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<view class="shangpin-image-box">
|
|
<image
|
|
src="{{ossImageUrl}}{{item.tupian_url}}"
|
|
mode="aspectFill"
|
|
class="shangpin-image"
|
|
/>
|
|
</view>
|
|
|
|
<view class="shangpin-info">
|
|
<view class="shangpin-title">
|
|
<text class="shangpin-title-text">{{item.biaoqian}}</text>
|
|
</view>
|
|
|
|
<view class="shangpin-footer">
|
|
<view class="shangpin-price">
|
|
<text class="price-icon">¥</text>
|
|
<text class="price-integer">{{item.priceInteger}}</text>
|
|
<text class="price-decimal">.{{item.priceDecimal}}</text>
|
|
</view>
|
|
<view class="detail-btn">
|
|
<text class="detail-btn-text">了解详情</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-divider" wx:if="{{index !== filteredShangpinList.length - 1}}"></view>
|
|
</view>
|
|
</block>
|
|
|
|
<view wx:if="{{filteredShangpinList.length === 0 && !isLoading}}" class="shangpin-empty">
|
|
<image src="/images/empty-goods.png" class="shangpin-empty-icon" />
|
|
<text class="shangpin-empty-text">该专区暂无商品</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="load-more" wx:if="{{filteredShangpinList.length > 0}}">
|
|
<text class="load-more-text">— 已加载全部商品 —</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 搜索结果弹窗 -->
|
|
<view class="search-results-container" wx:if="{{showSearchResult}}">
|
|
<view class="search-mask" bindtap="onClearSearch"></view>
|
|
<view class="search-results-content">
|
|
<view class="search-results-header">
|
|
<view class="search-header-left">
|
|
<text class="search-results-title">搜索结果</text>
|
|
<text class="search-results-count">({{searchResults.length}}个)</text>
|
|
</view>
|
|
<view class="search-close" bindtap="onClearSearch">
|
|
<image src="/images/close.png" class="close-icon" />
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="search-results-list" scroll-y>
|
|
<block wx:for="{{searchResults}}" wx:key="id">
|
|
<view class="search-result-item" bindtap="goToDetail" data-id="{{item.id}}">
|
|
<view class="search-result-left">
|
|
<image
|
|
src="{{ossImageUrl}}{{item.tupian_url}}"
|
|
mode="aspectFill"
|
|
class="search-result-image"
|
|
/>
|
|
</view>
|
|
<view class="search-result-right">
|
|
<view class="search-result-title">{{item.biaoqian}}</view>
|
|
<view class="search-result-info">
|
|
<text class="search-result-category">{{item.leixing_name}}</text>
|
|
<text class="search-result-separator">·</text>
|
|
<text class="search-result-zhuanqu">{{item.zhuanqu_name}}</text>
|
|
</view>
|
|
<view class="search-result-price">
|
|
<text class="price-icon">¥</text>
|
|
<text class="price-integer">{{item.priceInteger}}</text>
|
|
<text class="price-decimal">.{{item.priceDecimal}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<view wx:if="{{searchResults.length === 0 && !isSearching}}" class="search-empty">
|
|
<image src="/images/search-empty.png" class="search-empty-icon" />
|
|
<text class="search-empty-text">未找到相关商品</text>
|
|
</view>
|
|
|
|
<view wx:if="{{isSearching}}" class="search-loading">
|
|
<view class="search-spinner">
|
|
<view class="spinner-circle"></view>
|
|
</view>
|
|
<text class="search-loading-text">搜索中...</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 全局加载状态 -->
|
|
<view class="loading-toast loading-mask loading-mask--dark" 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>
|
|
|
|
<!-- 底部自定义TabBar -->
|
|
<tab-bar />
|
|
<global-notification id="global-notification" /> |