feat: 汇率换算功能完整实现
- 首页双向换算：30种主流货币，实时计算，一键互换 - 汇率总览页：一对多查看所有货币换算结果 - 数据源 open.er-api.com，4小时本地缓存 + 失败兜底 - UI 美化：渐变背景、分色货币块、紫色互换按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
manpengan
@@ -1,7 +1,84 @@
|
||||
const { CURRENCIES, getPickerData } = require('../../utils/currencies');
|
||||
const { getRates, convert, formatAmount, formatRate } = require('../../utils/rate');
|
||||
|
||||
const pickerData = getPickerData();
|
||||
|
||||
Page({
|
||||
data: {},
|
||||
data: {
|
||||
pickerData,
|
||||
baseIndex: 0, // CNY
|
||||
amount: '100',
|
||||
list: [],
|
||||
updatedAt: '',
|
||||
loading: true,
|
||||
error: '',
|
||||
rates: null,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
console.log('Overview page loaded');
|
||||
this.loadRates();
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.loadRates().then(() => {
|
||||
wx.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
|
||||
async loadRates() {
|
||||
this.setData({ loading: true, error: '' });
|
||||
try {
|
||||
const baseCode = CURRENCIES[this.data.baseIndex].code;
|
||||
const { rates, updatedAt } = await getRates(baseCode);
|
||||
this.setData({
|
||||
rates,
|
||||
updatedAt,
|
||||
loading: false,
|
||||
});
|
||||
this.buildList();
|
||||
} catch (e) {
|
||||
this.setData({
|
||||
loading: false,
|
||||
error: '汇率获取失败，请检查网络后下拉刷新',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
buildList() {
|
||||
const { rates, baseIndex, amount } = this.data;
|
||||
if (!rates) return;
|
||||
|
||||
const num = parseFloat(amount);
|
||||
if (isNaN(num) || num <= 0) {
|
||||
this.setData({ list: [] });
|
||||
return;
|
||||
}
|
||||
|
||||
const baseCode = CURRENCIES[baseIndex].code;
|
||||
const list = CURRENCIES
|
||||
.filter((c) => c.code !== baseCode)
|
||||
.map((c) => {
|
||||
const converted = convert(num, baseCode, c.code, rates);
|
||||
const unitRate = convert(1, baseCode, c.code, rates);
|
||||
return {
|
||||
flag: c.flag,
|
||||
code: c.code,
|
||||
name: c.name,
|
||||
converted: formatAmount(converted, c.code),
|
||||
unitRate: formatRate(unitRate),
|
||||
};
|
||||
});
|
||||
|
||||
this.setData({ list });
|
||||
},
|
||||
|
||||
handleBaseChange(e) {
|
||||
this.setData({ baseIndex: Number(e.detail.value) });
|
||||
this.loadRates();
|
||||
},
|
||||
|
||||
handleAmountInput(e) {
|
||||
this.setData({ amount: e.detail.value });
|
||||
this.buildList();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"navigationBarTitleText": "汇率总览",
|
||||
"enablePullDownRefresh": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,64 @@
|
||||
<view class="container">
|
||||
<view class="page-title">汇率总览</view>
|
||||
<view class="page-subtitle">一个基准货币对所有主流货币</view>
|
||||
<!-- 顶部控制区 -->
|
||||
<view class="card header-card">
|
||||
<view class="header-top">
|
||||
<text class="header-title">📊 汇率总览</text>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="placeholder-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>
|
||||
|
||||
@@ -1,6 +1,157 @@
|
||||
.placeholder-text {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
padding: 48rpx 0;
|
||||
/* ===== 顶部控制区 ===== */
|
||||
.header-card {
|
||||
padding: 36rpx;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-top: 2rpx solid #F1F5F9;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 28rpx;
|
||||
color: #64748B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.base-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #F8FAFC;
|
||||
border: 2rpx solid #E2E8F0;
|
||||
border-radius: 12rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.base-tag-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.tag-arrow {
|
||||
font-size: 18rpx;
|
||||
color: #94A3B8;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #1E293B;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.amount-placeholder {
|
||||
color: #CBD5E1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.updated-at {
|
||||
font-size: 22rpx;
|
||||
color: #94A3B8;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
/* ===== 错误 & 加载 ===== */
|
||||
.error-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 36rpx;
|
||||
background: #FEF2F2;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 26rpx;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.loading-card {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
color: #94A3B8;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* ===== 汇率列表 ===== */
|
||||
.list-card {
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
.rate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 36rpx;
|
||||
border-bottom: 2rpx solid #F8FAFC;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.rate-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rate-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rate-flag {
|
||||
font-size: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.rate-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rate-code {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.rate-name {
|
||||
font-size: 22rpx;
|
||||
color: #94A3B8;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.rate-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.rate-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.rate-unit {
|
||||
font-size: 22rpx;
|
||||
color: #94A3B8;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user