ui: 暗色金融风重构 + 自定义货币选择器

- 深色主题：深蓝背景 + 毛玻璃卡片 + 金色结果数字 - 自定义底部弹窗货币选择器，替换原生白色 Picker - 换算卡片内容居中竖排布局 - 汇率信息条改为竖排独立卡片 - 实时脉冲徽章 + 蓝紫渐变互换按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 18:19:02 +08:00
parent 92304d4fa2
commit 2516cc2085
14 changed files with 543 additions and 311 deletions
--- a/miniprogram/pages/overview/overview.js
+++ b/miniprogram/pages/overview/overview.js
@@ -6,13 +6,14 @@ const pickerData = getPickerData();
 Page({
  data: {
    pickerData,
-    baseIndex: 0, // CNY
+    baseIndex: 0,
    amount: '100',
    list: [],
    updatedAt: '',
    loading: true,
    error: '',
    rates: null,
+    showPicker: false,
  },

  onLoad() {
@@ -30,17 +31,10 @@ Page({
    try {
      const baseCode = CURRENCIES[this.data.baseIndex].code;
      const { rates, updatedAt } = await getRates(baseCode);
-      this.setData({
-        rates,
-        updatedAt,
-        loading: false,
-      });
+      this.setData({ rates, updatedAt, loading: false });
      this.buildList();
    } catch (e) {
-      this.setData({
-        loading: false,
-        error: '汇率获取失败，请检查网络后下拉刷新',
-      });
+      this.setData({ loading: false, error: '汇率获取失败，请下拉刷新重试' });
    }
  },

@@ -72,11 +66,19 @@ Page({
    this.setData({ list });
  },

-  handleBaseChange(e) {
-    this.setData({ baseIndex: Number(e.detail.value) });
+  openBasePicker() {
+    this.setData({ showPicker: true });
+  },
+
+  handlePickerSelect(e) {
+    this.setData({ baseIndex: e.detail.value, showPicker: false });
    this.loadRates();
  },

+  handlePickerClose() {
+    this.setData({ showPicker: false });
+  },
+
  handleAmountInput(e) {
    this.setData({ amount: e.detail.value });
    this.buildList();
--- a/miniprogram/pages/overview/overview.json
+++ b/miniprogram/pages/overview/overview.json
@@ -1,5 +1,7 @@
 {
-  "navigationBarTitleText": "汇率总览",
+  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "currency-picker": "/components/currency-picker/currency-picker"
+  }
 }
--- a/miniprogram/pages/overview/overview.wxml
+++ b/miniprogram/pages/overview/overview.wxml
@@ -1,64 +1,73 @@
 <view class="container">
-  <!-- 顶部控制区 -->
-  <view class="card header-card">
-    <view class="header-top">
-      <text class="header-title">📊 汇率总览</text>
+  <!-- 控制区 -->
+  <view class="card ctrl-card">
+    <view class="ctrl-top">
+      <text class="ctrl-title">汇率总览</text>
+      <view class="ctrl-badge" wx:if="{{updatedAt}}">
+        <text class="badge-text">{{updatedAt}}</text>
+      </view>
    </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 class="ctrl-row">
+      <text class="ctrl-label">基准货币</text>
+      <view class="ctrl-chip" bindtap="openBasePicker">
+        <text class="chip-text">{{pickerData[baseIndex]}}</text>
+        <text class="chip-arrow">›</text>
+      </view>
    </view>

-    <view class="control-row">
-      <text class="control-label">金额</text>
+    <view class="ctrl-row">
+      <text class="ctrl-label">换算金额</text>
      <input
-        class="amount-input"
+        class="ctrl-input"
        type="digit"
        value="{{amount}}"
        bindinput="handleAmountInput"
-        placeholder="输入金额"
-        placeholder-class="amount-placeholder"
+        placeholder="100"
+        placeholder-class="ctrl-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 class="loading-wrap" wx:if="{{loading}}">
+    <view class="loading-dot"></view>
+    <text class="loading-text">加载中</text>
  </view>

-  <!-- 汇率列表 -->
-  <view class="card list-card" wx:if="{{list.length}}">
+  <!-- 列表 -->
+  <view class="list-wrap" wx:if="{{list.length}}">
    <view
-      class="rate-item"
+      class="card rate-row"
      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 class="row-left">
+        <view class="flag-circle">
+          <text class="flag-emoji">{{item.flag}}</text>
+        </view>
+        <view class="row-info">
+          <text class="row-code">{{item.code}}</text>
+          <text class="row-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 class="row-right">
+        <text class="row-value">{{item.converted}}</text>
+        <text class="row-unit">1 = {{item.unitRate}}</text>
      </view>
    </view>
  </view>
 </view>
+
+<currency-picker
+  show="{{showPicker}}"
+  list="{{pickerData}}"
+  current="{{baseIndex}}"
+  bind:select="handlePickerSelect"
+  bind:close="handlePickerClose"
+/>
--- a/miniprogram/pages/overview/overview.wxss
+++ b/miniprogram/pages/overview/overview.wxss
@@ -1,157 +1,197 @@
-/* ===== 顶部控制区 ===== */
-.header-card {
+/* ===== CONTROL CARD ===== */
+.ctrl-card {
  padding: 36rpx;
+  background:
+    linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
 }

-.header-top {
-  margin-bottom: 28rpx;
-}
-
-.header-title {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #1E293B;
-}
-
-.control-row {
+.ctrl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 20rpx 0;
-  border-top: 2rpx solid #F1F5F9;
+  margin-bottom: 28rpx;
 }

-.control-label {
-  font-size: 28rpx;
+.ctrl-title {
+  font-size: 44rpx;
+  font-weight: 800;
+  color: #F8FAFC;
+  letter-spacing: 4rpx;
+}
+
+.ctrl-badge {
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
+  border-radius: 40rpx;
+  padding: 8rpx 20rpx;
+}
+
+.badge-text {
+  font-size: 20rpx;
  color: #64748B;
  font-weight: 500;
 }

-.base-tag {
-  display: inline-flex;
+.ctrl-row {
+  display: flex;
  align-items: center;
-  background: #F8FAFC;
-  border: 2rpx solid #E2E8F0;
-  border-radius: 12rpx;
-  padding: 10rpx 20rpx;
+  justify-content: space-between;
+  padding: 24rpx 0;
+  border-top: 2rpx solid rgba(148, 163, 184, 0.06);
 }

-.base-tag-text {
+.ctrl-label {
+  font-size: 26rpx;
+  color: #64748B;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+}
+
+.ctrl-chip {
+  display: flex;
+  align-items: center;
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.15);
+  border-radius: 16rpx;
+  padding: 12rpx 20rpx;
+}
+
+.chip-text {
  font-size: 26rpx;
  font-weight: 500;
-  color: #334155;
+  color: #CBD5E1;
 }

-.tag-arrow {
-  font-size: 18rpx;
-  color: #94A3B8;
-  margin-left: 10rpx;
+.chip-arrow {
+  font-size: 28rpx;
+  color: #475569;
+  margin-left: 12rpx;
 }

-.amount-input {
+.ctrl-input {
  flex: 1;
  text-align: right;
-  font-size: 40rpx;
+  font-size: 44rpx;
  font-weight: 800;
-  color: #1E293B;
+  color: #F1F5F9;
  margin-left: 24rpx;
 }

-.amount-placeholder {
-  color: #CBD5E1;
-  font-weight: 400;
+.ctrl-placeholder {
+  color: #334155;
+  font-weight: 500;
 }

-.updated-at {
-  font-size: 22rpx;
-  color: #94A3B8;
-  margin-top: 16rpx;
-}
-
-/* ===== 错误 & 加载 ===== */
+/* ===== ERROR & LOADING ===== */
 .error-card {
-  display: flex;
-  align-items: center;
  padding: 28rpx 36rpx;
-  background: #FEF2F2;
-}
-
-.error-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
+  background: rgba(239, 68, 68, 0.1);
+  border: 2rpx solid rgba(239, 68, 68, 0.2);
+  text-align: center;
 }

 .error-text {
  font-size: 26rpx;
-  color: #DC2626;
+  color: #FCA5A5;
 }

-.loading-card {
-  padding: 40rpx;
-  text-align: center;
-  color: #94A3B8;
+.loading-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx;
+  gap: 16rpx;
+}
+
+.loading-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #6366F1;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.3; transform: scale(0.8); }
+}
+
+.loading-text {
  font-size: 26rpx;
+  color: #64748B;
 }

-/* ===== 汇率列表 ===== */
-.list-card {
-  padding: 8rpx 0;
+/* ===== RATE LIST ===== */
+.list-wrap {
+  margin-bottom: 32rpx;
 }

-.rate-item {
+.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 28rpx 36rpx;
-  border-bottom: 2rpx solid #F8FAFC;
-  transition: background 0.15s;
+  padding: 28rpx 32rpx;
+  margin-bottom: 16rpx;
+  background: rgba(30, 41, 59, 0.5);
+  border: 2rpx solid rgba(148, 163, 184, 0.06);
 }

-.rate-item:last-child {
-  border-bottom: none;
-}
-
-.rate-left {
+.row-left {
  display: flex;
  align-items: center;
 }

-.rate-flag {
-  font-size: 44rpx;
-  margin-right: 20rpx;
+.flag-circle {
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 50%;
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 24rpx;
 }

-.rate-info {
+.flag-emoji {
+  font-size: 40rpx;
+}
+
+.row-info {
  display: flex;
  flex-direction: column;
 }

-.rate-code {
+.row-code {
  font-size: 30rpx;
  font-weight: 700;
-  color: #1E293B;
+  color: #E2E8F0;
+  letter-spacing: 2rpx;
 }

-.rate-name {
+.row-name {
  font-size: 22rpx;
-  color: #94A3B8;
+  color: #64748B;
  margin-top: 4rpx;
 }

-.rate-right {
+.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
 }

-.rate-value {
-  font-size: 32rpx;
+.row-value {
+  font-size: 34rpx;
  font-weight: 800;
-  color: #1E293B;
+  color: #FBBF24;
+  letter-spacing: 1rpx;
 }

-.rate-unit {
+.row-unit {
  font-size: 22rpx;
-  color: #94A3B8;
-  margin-top: 4rpx;
+  color: #475569;
+  margin-top: 6rpx;
+  font-weight: 500;
 }