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.
309 lines
12 KiB
309 lines
12 KiB
<!-- pages/market/market.wxml -->
|
|
<view class="market-page">
|
|
<!-- 顶部渐变标题栏 -->
|
|
<view class="header-container" animation="{{headerAnimation}}">
|
|
<view class="header-bg">
|
|
<view class="bg-gradient"></view>
|
|
<view class="bg-pattern"></view>
|
|
</view>
|
|
|
|
<view class="header-content">
|
|
<view class="header-main">
|
|
<view class="title-area">
|
|
<view class="app-name">畜牧业市场信息</view>
|
|
<view class="app-desc">实时行情 · 专业洞察 · 精准决策</view>
|
|
</view>
|
|
|
|
<view class="header-actions">
|
|
<view class="time-display">
|
|
<text class="iconfont icon-time"></text>
|
|
<text>{{currentTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据统计摘要 -->
|
|
<view class="data-summary">
|
|
<view class="summary-item">
|
|
<text class="summary-value">{{salesData.length}}</text>
|
|
<text class="summary-label">畜产品类</text>
|
|
</view>
|
|
<view class="summary-divider"></view>
|
|
<view class="summary-item">
|
|
<text class="summary-value">{{feedData.length}}</text>
|
|
<text class="summary-label">饲料品类</text>
|
|
</view>
|
|
<view class="summary-divider"></view>
|
|
<view class="summary-item">
|
|
<text class="summary-value">{{trendData.length}}</text>
|
|
<text class="summary-label">趋势公告</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主内容区域 -->
|
|
<scroll-view
|
|
scroll-y
|
|
class="content-container"
|
|
enable-back-to-top="true"
|
|
refresher-enabled="{{true}}"
|
|
refresher-triggered="{{isRefreshing}}"
|
|
bindrefresherrefresh="onPullDownRefresh"
|
|
>
|
|
<!-- 销售市场卡片 -->
|
|
<view class="section-title fade-in-item">
|
|
<text class="section-icon iconfont icon-sales"></text>
|
|
<text class="section-text">销售市场</text>
|
|
<text class="section-desc">畜产品价格动态</text>
|
|
<view class="section-indicator"></view>
|
|
<view class="data-count" wx:if="{{salesData.length > 3}}">
|
|
<text>{{salesData.length}}条</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="market-card card-sales"
|
|
animation="{{cardAnimation1}}"
|
|
>
|
|
<view class="card-header">
|
|
<view class="card-title-area">
|
|
<view class="card-main-title">
|
|
<view class="card-icon">
|
|
<image src="/pages/images/ccp.png" class="icon-img" mode="aspectFit" />
|
|
</view>
|
|
<text class="card-title-text">畜产品实时价格</text>
|
|
</view>
|
|
<view class="card-subtitle">各地牛、羊等畜产品的市场价格动态</view>
|
|
</view>
|
|
<view class="card-status">
|
|
<view class="status-dot {{salesStatus}}"></view>
|
|
<text class="status-text">已更新</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售市场数据 - 可滚动区域 -->
|
|
<scroll-view
|
|
scroll-y
|
|
class="data-scroll-container"
|
|
style="height: {{salesData.length > 3 ? '420rpx' : 'auto'}}"
|
|
>
|
|
<view class="price-list">
|
|
<view class="price-item" wx:for="{{salesData}}" wx:key="id">
|
|
<view class="price-info">
|
|
<text class="product-name">{{item.productName}}</text>
|
|
<text class="product-region">{{item.regionDetail}}</text>
|
|
</view>
|
|
<view class="price-value {{item.trend}}">
|
|
<text class="price-number">¥{{item.price}}</text>
|
|
<text class="price-unit">{{item.unit}}</text>
|
|
<view class="trend-indicator">
|
|
<text class="trend-icon" wx:if="{{item.trend === 'up'}}">↗</text>
|
|
<text class="trend-icon" wx:if="{{item.trend === 'down'}}">↘</text>
|
|
<text class="trend-icon" wx:if="{{item.trend === 'stable'}}">→</text>
|
|
<text class="trend-change" wx:if="{{item.priceChange}}">+{{item.priceChange}}%</text>
|
|
</view>
|
|
</view>
|
|
<view class="price-time">
|
|
<text class="iconfont icon-clock-small"></text>
|
|
<text>{{item.updateTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="card-footer">
|
|
<view class="update-info">
|
|
<text class="iconfont icon-clock"></text>
|
|
<text class="update-text">更新于 {{salesUpdateTime}}</text>
|
|
</view>
|
|
<view class="scroll-tip" wx:if="{{salesData.length > 3}}">
|
|
<text class="iconfont icon-scroll"></text>
|
|
<text>上下滚动查看更多</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 饲料市场卡片 -->
|
|
<view class="section-title fade-in-item" style="animation-delay: 0.1s">
|
|
<text class="section-text">饲料市场</text>
|
|
<text class="section-desc">饲草料供应商价格</text>
|
|
<view class="section-indicator"></view>
|
|
<view class="data-count" wx:if="{{feedData.length > 3}}">
|
|
<text>{{feedData.length}}条</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="market-card card-feed"
|
|
animation="{{cardAnimation2}}"
|
|
>
|
|
<view class="card-corner"></view>
|
|
|
|
<view class="card-header">
|
|
<view class="card-title-area">
|
|
<view class="card-main-title">
|
|
<view class="card-icon">
|
|
<image src="/pages/images/sl.png" class="icon-img" mode="aspectFit" />
|
|
</view>
|
|
<text class="card-title-text">饲料价格行情</text>
|
|
</view>
|
|
<view class="card-subtitle">各地饲草料供应商实时报价</view>
|
|
</view>
|
|
<view class="card-status">
|
|
<view class="status-dot {{feedStatus}}"></view>
|
|
<text class="status-text">已更新</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 饲料市场数据 - 可滚动区域 -->
|
|
<scroll-view
|
|
scroll-y
|
|
class="data-scroll-container"
|
|
style="height: {{feedData.length > 3 ? '420rpx' : 'auto'}}"
|
|
>
|
|
<view class="supplier-list">
|
|
<view class="supplier-item" wx:for="{{feedData}}" wx:key="id">
|
|
<view class="supplier-info">
|
|
<text class="supplier-name">{{item.feedName}}</text>
|
|
<text class="supplier-company">{{item.supplier}}</text>
|
|
</view>
|
|
<view class="price-display">
|
|
<view class="price-tag {{item.trend}}">
|
|
<text class="price-label">¥{{item.price}}</text>
|
|
<text class="price-per">{{item.unit}}</text>
|
|
</view>
|
|
<view class="trend-chart-small">
|
|
<view class="chart-bar {{item.trend}}"
|
|
style="height: {{item.chartHeight}}%">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="supplier-time">
|
|
<text class="iconfont icon-clock-small"></text>
|
|
<text>{{item.updateTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="card-footer">
|
|
<view class="update-info">
|
|
<text class="iconfont icon-clock"></text>
|
|
<text class="update-text">更新于 {{feedUpdateTime}}</text>
|
|
</view>
|
|
<view class="scroll-tip" wx:if="{{feedData.length > 3}}">
|
|
<text class="iconfont icon-scroll"></text>
|
|
<text>上下滚动查看更多</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 市场趋势卡片 - 通知公告（无缝向上滚动） -->
|
|
<view class="section-title fade-in-item" style="animation-delay: 0.2s">
|
|
<text class="section-icon iconfont icon-trend"></text>
|
|
<text class="section-text">市场趋势</text>
|
|
<text class="section-desc">通知公告与行业分析</text>
|
|
<view class="section-indicator"></view>
|
|
</view>
|
|
|
|
<view
|
|
class="market-card card-trend"
|
|
animation="{{cardAnimation3}}"
|
|
>
|
|
<view class="card-corner"></view>
|
|
|
|
<view class="card-header">
|
|
<view class="card-title-area">
|
|
<view class="card-main-title">
|
|
<view class="card-icon">
|
|
<image src="/pages/images/scqs.png" class="icon-img" mode="aspectFit" />
|
|
</view>
|
|
<text class="card-title-text">行业洞察与预测</text>
|
|
</view>
|
|
<view class="card-subtitle">行业报告和专家预测等信息，把握市场发展方向</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 市场趋势通知公告 - 无缝向上滚动区域 -->
|
|
<view class="notice-scroll-wrapper" style="height: 420rpx;">
|
|
<view class="notice-scroll-content"
|
|
style="transform: translateY(-{{scrollOffset}}px); transition: transform {{scrollDuration}}s ease;">
|
|
<!-- 第一组数据 -->
|
|
<view class="notice-list">
|
|
<view class="notice-item" wx:for="{{trendData}}" wx:key="id">
|
|
<view class="notice-left">
|
|
<view class="notice-type {{item.type}}">
|
|
{{item.category === '报告' ? '报告' : '预测'}}
|
|
</view>
|
|
<view class="notice-marker {{item.isNew ? 'new' : ''}}"></view>
|
|
</view>
|
|
<view class="notice-content">
|
|
<view class="notice-title-area">
|
|
<text class="notice-title">{{item.title}}</text>
|
|
<view class="notice-tag hot" wx:if="{{item.isHot}}">
|
|
<text>热点</text>
|
|
</view>
|
|
<view class="notice-tag new" wx:if="{{item.isNew}}">
|
|
<text>新</text>
|
|
</view>
|
|
</view>
|
|
<text class="notice-summary">{{item.content}}</text>
|
|
<view class="notice-footer">
|
|
<text class="notice-source">{{item.source}}</text>
|
|
<text class="notice-date">{{item.publishDate}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第二组相同数据（用于无缝滚动） -->
|
|
<view class="notice-list">
|
|
<view class="notice-item" wx:for="{{trendData}}" wx:key="id">
|
|
<view class="notice-left">
|
|
<view class="notice-type {{item.type}}">
|
|
{{item.category === '报告' ? '报告' : '预测'}}
|
|
</view>
|
|
<view class="notice-marker {{item.isNew ? 'new' : ''}}"></view>
|
|
</view>
|
|
<view class="notice-content">
|
|
<view class="notice-title-area">
|
|
<text class="notice-title">{{item.title}}</text>
|
|
<view class="notice-tag hot" wx:if="{{item.isHot}}">
|
|
<text>热点</text>
|
|
</view>
|
|
<view class="notice-tag new" wx:if="{{item.isNew}}">
|
|
<text>新</text>
|
|
</view>
|
|
</view>
|
|
<text class="notice-summary">{{item.content}}</text>
|
|
<view class="notice-footer">
|
|
<text class="notice-source">{{item.source}}</text>
|
|
<text class="notice-date">{{item.publishDate}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-footer">
|
|
<view class="statistics-info">
|
|
<text class="stat-text">共 {{trendData.length}} 条公告 · 自动滚动</text>
|
|
</view>
|
|
<view class="auto-scroll-tip">
|
|
<text class="iconfont icon-auto-scroll"></text>
|
|
<text>每5秒自动滚动</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据更新时间 -->
|
|
<view class="update-footer fade-in-item" style="animation-delay: 0.3s">
|
|
<view class="update-line">
|
|
<text class="iconfont icon-sync"></text>
|
|
<text class="update-tip">数据每30分钟自动同步 · 最后更新 {{lastUpdateTime}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|