333 lines
12 KiB
Plaintext
333 lines
12 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}} 条结果，已加载 {{priceList.length}} 条</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>
|
||
|
||
<!-- 加载更多状态 -->
|
||
<view class="load-more" wx:if="{{priceList.length > 0}}">
|
||
<!-- 加载中 -->
|
||
<view class="loading-more" wx:if="{{loadingMore}}">
|
||
<t-loading theme="circular" size="40rpx" text="加载中..."></t-loading>
|
||
</view>
|
||
|
||
<!-- 没有更多数据 -->
|
||
<view class="no-more" wx:elif="{{!hasMore}}">
|
||
<text>已加载全部数据</text>
|
||
</view>
|
||
|
||
<!-- 继续滚动提示 -->
|
||
<view class="scroll-hint" wx:else>
|
||
<text>继续滚动加载更多</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<t-empty
|
||
wx:if="{{priceList.length === 0 && searched}}"
|
||
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" />
|
||
|
||
<!-- 价格详情弹窗 -->
|
||
<view class="detail-modal" wx:if="{{detailVisible}}" bindtap="onCloseDetail">
|
||
<view class="detail-content" catchtap="stopPropagation">
|
||
<!-- 头部 -->
|
||
<view class="detail-header">
|
||
<view class="detail-title">价格详情</view>
|
||
<view class="detail-close" bindtap="onCloseDetail">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要价格信息 -->
|
||
<view class="detail-main">
|
||
<view class="detail-price-section">
|
||
<view class="price-label">挂牌价</view>
|
||
<view class="price-value-large">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-number">{{detailItem.hang_price || detailItem.make_price || '-'}}</text>
|
||
</view>
|
||
<view class="price-unit">元/吨</view>
|
||
</view>
|
||
|
||
<!-- 钢厂价（如果有） -->
|
||
<view class="detail-factory-price" wx:if="{{detailItem.make_price && detailItem.hang_price}}">
|
||
<view class="factory-row">
|
||
<text class="factory-label">钢厂价</text>
|
||
<text class="factory-value">¥{{detailItem.make_price}}</text>
|
||
</view>
|
||
<view class="factory-row" wx:if="{{detailItem.make_price_updw}}">
|
||
<text class="factory-label">涨跌幅</text>
|
||
<text class="trend-tag {{detailItem.make_price_updw.includes('+') ? 'trend-up' : detailItem.make_price_updw.includes('-') ? 'trend-down' : 'trend-flat'}}">
|
||
{{detailItem.make_price_updw}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详细信息列表 -->
|
||
<view class="detail-info">
|
||
<!-- 基本信息 -->
|
||
<view class="info-section">
|
||
<view class="section-title">基本信息</view>
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">地区</text>
|
||
<text class="info-value">{{detailItem.price_region || '-'}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">品名</text>
|
||
<text class="info-value">{{detailItem.partsname_name || '-'}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">材质</text>
|
||
<text class="info-value highlight">{{detailItem.goods_material || '-'}}</text>
|
||
</view>
|
||
<view class="info-item" wx:if="{{detailItem.goods_spec}}">
|
||
<text class="info-label">规格</text>
|
||
<text class="info-value">{{detailItem.goods_spec}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他信息 -->
|
||
<view class="info-section">
|
||
<view class="section-title">其他信息</view>
|
||
<view class="info-list">
|
||
<view class="info-row">
|
||
<text class="row-label">价格日期</text>
|
||
<text class="row-value">{{detailItem.price_date_str || detailItem.price_date || '-'}}</text>
|
||
</view>
|
||
<view class="info-row" wx:if="{{detailItem.price_source}}">
|
||
<text class="row-label">数据来源</text>
|
||
<text class="row-value tag">{{detailItem.price_source}}</text>
|
||
</view>
|
||
<view class="info-row" wx:if="{{detailItem.productarea_name}}">
|
||
<text class="row-label">产地钢厂</text>
|
||
<text class="row-value">{{detailItem.productarea_name}}</text>
|
||
</view>
|
||
<view class="info-row" wx:if="{{detailItem.pntree_name}}">
|
||
<text class="row-label">分类</text>
|
||
<text class="row-value">{{detailItem.pntree_name}}</text>
|
||
</view>
|
||
<view class="info-row" wx:if="{{detailItem.operator_name}}">
|
||
<text class="row-label">操作员</text>
|
||
<text class="row-value">{{detailItem.operator_name}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="detail-footer">
|
||
<t-button theme="default" size="large" variant="outline" bindtap="onCloseDetail" block>
|
||
关闭
|
||
</t-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 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>
|