216 lines
6.9 KiB
Plaintext
216 lines
6.9 KiB
Plaintext
<!--pages/index/index.wxml-->
|
||
<view class="container">
|
||
<!-- 搜索表单区域 -->
|
||
<view class="search-section">
|
||
<view class="section-title">价格查询</view>
|
||
|
||
<!-- 地区选择 -->
|
||
<view class="form-item">
|
||
<t-cell-group>
|
||
<t-cell title="地区" note="{{regionText}}" arrow hover bindtap="showRegionPicker" required />
|
||
</t-cell-group>
|
||
</view>
|
||
|
||
<!-- 材质选择 -->
|
||
<view class="form-item">
|
||
<t-cell-group>
|
||
<t-cell title="材质" note="{{materialText}}" arrow hover bindtap="showMaterialPicker" />
|
||
</t-cell-group>
|
||
</view>
|
||
|
||
<!-- 品名选择 -->
|
||
<view class="form-item">
|
||
<t-cell-group>
|
||
<t-cell title="品名" note="{{partsnameText}}" arrow hover bindtap="showPartsnamePicker" />
|
||
</t-cell-group>
|
||
</view>
|
||
|
||
<!-- 日期选择 -->
|
||
<view class="form-item">
|
||
<t-cell-group>
|
||
<t-cell title="日期" note="{{selectedDate || '请选择日期 (可选)'}}" hover bindtap="showDatePicker" />
|
||
</t-cell-group>
|
||
</view>
|
||
|
||
<!-- 查询按钮 -->
|
||
<view class="btn-group">
|
||
<t-button
|
||
theme="primary"
|
||
size="large"
|
||
bindtap="onSearch"
|
||
loading="{{loading}}"
|
||
disabled="{{loading}}"
|
||
block>
|
||
查询价格
|
||
</t-button>
|
||
<t-button
|
||
theme="default"
|
||
size="large"
|
||
variant="outline"
|
||
bindtap="onReset"
|
||
disabled="{{loading}}"
|
||
block>
|
||
重置
|
||
</t-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<t-loading theme="circular" loading="{{loading}}" text="加载中..." wx:if="{{loading}}"></t-loading>
|
||
|
||
<!-- 查询结果区域 -->
|
||
<view class="result-section" wx:if="{{searched && !loading}}">
|
||
<!-- 统计信息卡片 -->
|
||
<view
|
||
wx:if="{{stats && stats.count > 0}}"
|
||
class="stats-card">
|
||
<view class="stats-title">价格统计</view>
|
||
<view class="stats-grid">
|
||
<view class="stats-item">
|
||
<view class="stats-label">数据量</view>
|
||
<view class="stats-value">{{stats.count}} 条</view>
|
||
</view>
|
||
<view class="stats-item">
|
||
<view class="stats-label">平均价</view>
|
||
<view class="stats-value avg">¥{{stats.avgPrice}}</view>
|
||
</view>
|
||
<view class="stats-item">
|
||
<view class="stats-label">最低价</view>
|
||
<view class="stats-value min">¥{{stats.minPrice}}</view>
|
||
</view>
|
||
<view class="stats-item">
|
||
<view class="stats-label">最高价</view>
|
||
<view class="stats-value max">¥{{stats.maxPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<t-divider></t-divider>
|
||
<view class="stats-trend" wx:if="{{stats.trend}}">
|
||
<text>价格趋势：</text>
|
||
<t-tag
|
||
theme="{{stats.trend === 'up' ? 'danger' : stats.trend === 'down' ? 'success' : 'default'}}"
|
||
variant="light"
|
||
size="small">
|
||
{{stats.trend === 'up' ? '↑ 上涨' : stats.trend === 'down' ? '↓ 下跌' : '→ 平稳'}}
|
||
</t-tag>
|
||
<text class="trend-rate" wx:if="{{stats.changeRate}}">（{{stats.changeRate}}）</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 价格列表 -->
|
||
<view class="price-list">
|
||
<view class="list-header">
|
||
<text wx:if="{{priceList.length > 0}}">共找到 {{total}} 条结果</text>
|
||
<text wx:else>暂无数据</text>
|
||
</view>
|
||
|
||
<!-- 价格卡片 -->
|
||
<view
|
||
class="price-card"
|
||
wx:for="{{priceList}}"
|
||
wx:key="id"
|
||
bindtap="onPriceDetail"
|
||
data-item="{{item}}">
|
||
<view class="price-main">
|
||
<view class="price-info">
|
||
<text class="price-region">{{item.price_region}}</text>
|
||
<text class="price-separator">·</text>
|
||
<text class="price-material">{{item.goods_material}}</text>
|
||
<text class="price-spec" wx:if="{{item.goods_spec}}">({{item.goods_spec}})</text>
|
||
</view>
|
||
<view class="price-value">¥{{item.hang_price || item.make_price}}</view>
|
||
</view>
|
||
<view class="price-sub">
|
||
<text class="price-date">{{item.price_date_str || item.price_date}}</text>
|
||
<t-tag wx:if="{{item.price_source}}" theme="primary" variant="light" size="small">{{item.price_source}}</t-tag>
|
||
<t-tag wx:if="{{item.productarea_name}}" theme="success" variant="light" size="small">{{item.productarea_name}}</t-tag>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<t-empty
|
||
wx:if="{{priceList.length === 0}}"
|
||
icon="search"
|
||
description="未找到相关价格数据"
|
||
tips="请尝试调整查询条件">
|
||
</t-empty>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 初始提示 -->
|
||
<view class="welcome-section" wx:if="{{!searched && !loading}}">
|
||
<view class="welcome-card">
|
||
<view class="welcome-icon">📊</view>
|
||
<view class="welcome-title">钢材价格查询</view>
|
||
<view class="welcome-desc">请选择地区和材质查询钢材价格信息</view>
|
||
</view>
|
||
<view class="features">
|
||
<view class="feature-item">
|
||
<view class="feature-icon">📊</view>
|
||
<view class="feature-text">实时价格</view>
|
||
</view>
|
||
<view class="feature-item">
|
||
<view class="feature-icon">📈</view>
|
||
<view class="feature-text">趋势分析</view>
|
||
</view>
|
||
<view class="feature-item">
|
||
<view class="feature-icon">🔍</view>
|
||
<view class="feature-text">多维筛选</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Picker 选择器 -->
|
||
<t-picker
|
||
visible="{{regionPickerVisible}}"
|
||
value="{{regionPickerValue}}"
|
||
data-key="region"
|
||
title="选择地区"
|
||
cancelBtn="取消"
|
||
confirmBtn="确认"
|
||
usingCustomNavbar
|
||
bindchange="onPickerChange"
|
||
bindcancel="onPickerCancel">
|
||
<t-picker-item options="{{regions}}"></t-picker-item>
|
||
</t-picker>
|
||
|
||
<t-picker
|
||
visible="{{materialPickerVisible}}"
|
||
value="{{materialPickerValue}}"
|
||
data-key="material"
|
||
title="选择材质"
|
||
cancelBtn="取消"
|
||
confirmBtn="确认"
|
||
usingCustomNavbar
|
||
bindchange="onPickerChange"
|
||
bindcancel="onPickerCancel">
|
||
<t-picker-item options="{{materials}}"></t-picker-item>
|
||
</t-picker>
|
||
|
||
<t-picker
|
||
visible="{{partsnamePickerVisible}}"
|
||
value="{{partsnamePickerValue}}"
|
||
data-key="partsname"
|
||
title="选择品名"
|
||
cancelBtn="取消"
|
||
confirmBtn="确认"
|
||
usingCustomNavbar
|
||
bindchange="onPickerChange"
|
||
bindcancel="onPickerCancel">
|
||
<t-picker-item options="{{partsnames}}"></t-picker-item>
|
||
</t-picker>
|
||
|
||
<t-date-time-picker
|
||
visible="{{datePickerVisible}}"
|
||
value="{{selectedDate}}"
|
||
mode="date"
|
||
end="{{today}}"
|
||
bind:confirm="onDateConfirm"
|
||
bind:cancel="onDatePickerCancel" />
|
||
|
||
<!-- TDesign TabBar -->
|
||
<t-tab-bar value="0" theme="normal" bindchange="onTabChange">
|
||
<t-tab-bar-item value="0" icon="search" label="价格查询" />
|
||
<t-tab-bar-item value="1" icon="chart-line" label="价格趋势" />
|
||
</t-tab-bar>
|
||
</view>
|