- 首页双向换算:30种主流货币,实时计算,一键互换 - 汇率总览页:一对多查看所有货币换算结果 - 数据源 open.er-api.com,4小时本地缓存 + 失败兜底 - UI 美化:渐变背景、分色货币块、紫色互换按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
1.8 KiB
Plaintext
65 lines
1.8 KiB
Plaintext
<view class="container">
|
|
<!-- 顶部控制区 -->
|
|
<view class="card header-card">
|
|
<view class="header-top">
|
|
<text class="header-title">📊 汇率总览</text>
|
|
</view>
|
|
|
|
<view class="control-row">
|
|
<text class="control-label">基准</text>
|
|
<picker range="{{pickerData}}" value="{{baseIndex}}" bindchange="handleBaseChange">
|
|
<view class="base-tag">
|
|
<text class="base-tag-text">{{pickerData[baseIndex]}}</text>
|
|
<text class="tag-arrow">▼</text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="control-row">
|
|
<text class="control-label">金额</text>
|
|
<input
|
|
class="amount-input"
|
|
type="digit"
|
|
value="{{amount}}"
|
|
bindinput="handleAmountInput"
|
|
placeholder="输入金额"
|
|
placeholder-class="amount-placeholder"
|
|
/>
|
|
</view>
|
|
|
|
<view class="updated-at" wx:if="{{updatedAt}}">{{updatedAt}} 更新</view>
|
|
</view>
|
|
|
|
<!-- 错误提示 -->
|
|
<view class="card error-card" wx:if="{{error}}">
|
|
<text class="error-icon">⚠</text>
|
|
<text class="error-text">{{error}}</text>
|
|
</view>
|
|
|
|
<!-- 加载中 -->
|
|
<view class="loading-card" wx:if="{{loading}}">
|
|
<text>正在获取汇率数据...</text>
|
|
</view>
|
|
|
|
<!-- 汇率列表 -->
|
|
<view class="card list-card" wx:if="{{list.length}}">
|
|
<view
|
|
class="rate-item"
|
|
wx:for="{{list}}"
|
|
wx:key="code"
|
|
>
|
|
<view class="rate-left">
|
|
<text class="rate-flag">{{item.flag}}</text>
|
|
<view class="rate-info">
|
|
<text class="rate-code">{{item.code}}</text>
|
|
<text class="rate-name">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="rate-right">
|
|
<text class="rate-value">{{item.converted}}</text>
|
|
<text class="rate-unit">1 = {{item.unitRate}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|