fix upload

2025-12-09 18:20:17 +08:00
parent 4a7c1e0907
commit d61dd28654
4 changed files with 231 additions and 95 deletions
--- a/miniprogram/pages/upload/upload.ts
+++ b/miniprogram/pages/upload/upload.ts
@@ -40,6 +40,7 @@ Page({
    facePosition: 'normal' as 'up' | 'down' | 'normal',
    // SVG data for avatar
    avatarSvgData: '',
+    sunSvgData: '',
    paperSvgData: '',
    photoSvgData: '',
    scrollTop: 0,
@@ -51,7 +52,17 @@ Page({
    photoExpandCurrentWidth: 0,
    expandBorderStyle: '',
    shouldResetOnReturn: false,
-    scannerVisible: false
+    scannerVisible: false,
+    dateStripItems: [] as any[],
+    selectedDateKey: '',
+    selectedMonthTitle: '',
+    selectedDateImages: [] as any[],
+    gridCols: 3,
+    imagesByDate: {} as Record<string, any[]>,
+    useWaterfall: false,
+    waterfallLeft: [] as any[],
+    waterfallRight: [] as any[],
+    stripCentered: true,
  },

  onLoad() {
@@ -77,12 +88,22 @@ Page({
        <path d="M 486 70 C 486 71.7614 483.761 74 481 74 C 478.239 74 476 71.7614 476 70 C 476 69 477 69 477 70 C 477 71 479 73 481 73 C 483 73 485 71 485 70 C 485 69 486 69 486 70 M 490 64 C 488.7 64 488.7 66 490 66 C 491.3 66 491.3 64 490 64 M 472 64 C 470.7 64 470.7 66 472 66 C 473.3 66 473.3 64 472 64" stroke="#001858" stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
    `.trim();
+    const sunString = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="428 10 120 130">
+          <path d="M493.305 20.4491L496.802 26.0264C499.208 29.8632 504.199 31.14 508.152 28.9299L513.386 26.0031C517.052 23.9532 521.57 26.6033 521.57 30.8036V36.4623C521.57 40.866 524.934 44.5405 529.32 44.9292L534.961 45.4289C539.08 45.7939 541.338 50.4041 539.101 53.8825L536.232 58.3445C533.614 62.4145 534.918 67.8453 539.097 70.284L543.66 72.9462C547.336 75.0913 547.288 80.42 543.572 82.4973L539.09 85.0035C534.912 87.3401 533.486 92.6653 535.939 96.777L537.452 99.3128C539.638 102.979 536.997 107.63 532.728 107.63H528.5C523.806 107.63 520 111.436 520 116.13V121.531C520 125.764 515.418 128.41 511.751 126.294L508.069 124.17C504.174 121.922 499.203 123.097 496.726 126.849L493.234 132.141C491.035 135.471 486.133 135.426 483.998 132.055L480.708 126.864C478.326 123.103 473.445 121.818 469.52 123.918L464.094 126.82C460.43 128.779 456 126.125 456 121.97V117.696C456 113.001 452.194 109.196 447.5 109.196H442.811C438.72 109.196 436.061 104.887 437.895 101.23L440.309 96.4177C442.332 92.3853 440.852 87.4751 436.938 85.2318L432.118 82.4694C428.471 80.3789 428.422 75.1351 432.03 72.9773L436.973 70.0214C440.87 67.6907 442.247 62.7084 440.1 58.7072L436.753 52.4702C434.786 48.8062 437.441 44.3696 441.599 44.3696H447.5C452.194 44.3696 456 40.564 456 35.8696V30.8036C456 26.6033 460.518 23.9532 464.184 26.0031L469.312 28.8701C473.317 31.1095 478.376 29.7661 480.742 25.8348L483.933 20.5344C486.048 17.0207 491.126 16.9745 493.305 20.4491Z" fill="#f582ae" stroke="#001858" stroke-width="3"></path>
+          <circle cx="488.5" cy="76.5" r="44" fill="#fef6e4" stroke="#001858" stroke-width="3"></circle>
+      </svg>
+    `.trim();
    
    const encodedSvg = encodeURIComponent(svgString);
    const dataUrl = `data:image/svg+xml;utf8,${encodedSvg}`;
+
+    const encodedSunSvg = encodeURIComponent(sunString);
+    const sunDataUrl = `data:image/svg+xml;utf8,${encodedSunSvg}`;
    
    this.setData({
-      avatarSvgData: dataUrl
+      avatarSvgData: dataUrl,
+      sunSvgData: sunDataUrl
    });
  },

@@ -162,7 +183,7 @@ Page({
    // 根据日间/夜间模式设置导航栏颜色
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
-      backgroundColor: dayType === 'night' ? '#232946' : '#fffffe',
+      backgroundColor: dayType === 'night' ? '#0E1330' : '#FDFDFC',
      animation: {
        duration: 300,
        timingFunc: 'easeIn'
@@ -279,7 +300,7 @@ Page({
        dailyHasMore: page * this.data.dailySize < result.total,
        isLoading: false,
      }, () => {
-        // 在数据设置完成后获取安全的图片URL
+        this.rebuildDateData();
        this.fetchSecureImageUrls();
      });
    } catch (error) {
@@ -326,7 +347,7 @@ Page({
      this.setData({
        todaySummary: processedItems
      }, () => {
-        // 在数据设置完成后获取安全的图片URL
+        this.rebuildDateData();
        this.fetchSecureTodayImageUrls();
      });
      
@@ -424,8 +445,9 @@ Page({
      if (hasChanges) {
        this.setData({
          groupedHistory: updatedHistory
+        }, () => {
+          this.rebuildDateData();
        });
-        // console.log('安全图片URL获取完成');
      }
    } catch (error) {
      console.error('获取安全图片URL失败:', error);
@@ -478,8 +500,9 @@ Page({
      if (hasChanges) {
        this.setData({
          todaySummary: todaySummary
+        }, () => {
+          this.rebuildDateData();
        });
-        // console.log('安全图片URL获取完成');
      }
    } catch (error) {
      console.error('获取安全图片URL失败:', error);
@@ -561,24 +584,7 @@ Page({
    }
  },

-  onImageCardTap(e: any) {
-    const { imageItems } = e.currentTarget.dataset;
-    if (!imageItems?.images?.length) return;
-    
-    const items = imageItems.images.map((item: any) => ({
-      image_id: item.image_id,
-      image: item.thumbnail_loading ? '' : (item.thumbnail_url || '/static/sun-2.png'), // 使用安全URL或占位图
-    }));
-    ActionSheet.show({
-      theme: ActionSheetTheme.Grid,
-      selector: '#t-images-sheet',
-      context: this,
-      align: 'center',
-      description: '请选择图片',
-      items,
-      cancelText: '取消'
-    });
-  },
+  

  // 检查登录状态
  async checkLoginStatus() {
@@ -651,17 +657,7 @@ Page({
    }
  },

-  handleImageSelected(e: any) {
-    console.log('用户选择:', e)
-    if (e.detail.selected === 'cancel') return;
-    
-    const { image_id } = e.detail.selected
-    if (image_id) {
-      wx.navigateTo({
-        url: `/pages/assessment/assessment?imageId=${image_id}`
-      })
-    }
-  },
+  

  // 拍照
  async handleTakePhoto() {
@@ -856,7 +852,86 @@ Page({
    wx.navigateTo({
      url: '/pages/profile/profile'
    })
-  }
+  },
+
+  onDateTap(e: any) {
+    const { key } = e.currentTarget.dataset;
+    if (!key) return;
+    this.updateSelection(key);
+  },
+
+  rebuildDateData() {
+    try {
+      const records: Array<{ key: string; date: Date; year: number; month: number; day: number; weekday: string; images: any[] }> = [];
+      const pushRecord = (item: any) => {
+        const d = new Date(item.summary_time);
+        const y = d.getFullYear();
+        const m = d.getMonth() + 1;
+        const dd = d.getDate();
+        const key = `${y}-${String(m).padStart(2, '0')}-${String(dd).padStart(2, '0')}`;
+        const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        records.push({ key, date: d, year: y, month: m, day: dd, weekday: weekdays[d.getDay()], images: item.images || [] });
+      };
+      (this.data.todaySummary || []).forEach(pushRecord);
+      (this.data.groupedHistory || []).forEach((yg: any) => {
+        (yg.items || []).forEach(pushRecord);
+      });
+      if (!records.length) {
+        this.setData({ dateStripItems: [], selectedDateKey: '', selectedDateImages: [], selectedMonthTitle: '', imagesByDate: {} });
+        return;
+      }
+      records.sort((a, b) => a.date.getTime() - b.date.getTime());
+      const imagesByDate: Record<string, any[]> = {};
+      records.forEach(r => { imagesByDate[r.key] = r.images; });
+      const strip: any[] = [];
+      let prevYear = -1, prevMonth = -1;
+      const now = new Date();
+      const nowYear = now.getFullYear();
+      const nowMonth = now.getMonth() + 1;
+      for (const r of records) {
+        if (r.year !== prevYear || r.month !== prevMonth) {
+          if (!(r.year === nowYear && r.month === nowMonth)) {
+            strip.push({ type: 'ym', year: r.year, month: r.month, key: `ym-${r.year}-${r.month}` });
+          }
+          prevYear = r.year; prevMonth = r.month;
+        }
+        strip.push({ type: 'day', key: r.key, weekday: r.weekday, day: r.day, year: r.year, month: r.month });
+      }
+      let selectedKey = '';
+      const today = new Date();
+      const todayKey = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
+      if (imagesByDate[todayKey]) selectedKey = todayKey; else selectedKey = records[records.length - 1].key;
+      const selectedImages = imagesByDate[selectedKey] || [];
+      const gridCols = selectedImages.length <= 1 ? 1 : selectedImages.length <= 4 ? 2 : 3;
+      const sel = records.find(r => r.key === selectedKey)!;
+      const monthTitle = `${sel.year}-${String(sel.month).padStart(2,'0')}`;
+      const useWaterfall = selectedImages.length > 3;
+      let waterfallLeft: any[] = [], waterfallRight: any[] = [];
+      if (useWaterfall) {
+        selectedImages.forEach((img, idx) => {
+          (idx % 2 === 0 ? waterfallLeft : waterfallRight).push(img);
+        });
+      }
+      const stripCentered = strip.length <= 5;
+      this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered });
+    } catch (err) {
+      console.error('重建日期条失败:', err);
+    }
+  },
+
+  updateSelection(dateKey: string) {
+    const images = (this.data.imagesByDate || {})[dateKey] || [];
+    const parts = dateKey.split('-');
+    const y = Number(parts[0]);
+    const m = Number(parts[1]);
+    const gridCols = images.length <= 1 ? 1 : images.length <= 4 ? 2 : 3;
+    const useWaterfall = images.length > 3;
+    let waterfallLeft: any[] = [], waterfallRight: any[] = [];
+    if (useWaterfall) {
+      images.forEach((img, idx) => { (idx % 2 === 0 ? waterfallLeft : waterfallRight).push(img); });
+    }
+    this.setData({ selectedDateKey: dateKey, selectedDateImages: images, gridCols, selectedMonthTitle: `${y}-${String(m).padStart(2,'0')}`, useWaterfall, waterfallLeft, waterfallRight });
+  },

 })

--- a/miniprogram/pages/upload/upload.wxml
+++ b/miniprogram/pages/upload/upload.wxml
@@ -7,21 +7,9 @@
 <view class="{{['upload-container', day_type]}}">
  <!-- 主功能界面 -->
  <view class="main-content">
-    <!-- 欢迎区域 -->
-    <!-- <view class="welcome-section">
-      <view class="welcome-card">
-        <view class="user-info" wx:if="{{userInfo}}">
-          <text class="nickname">你好，{{userInfo.nickName || '用户'}}</text>
-        </view>
-        <text class="welcome-text">选择一张图片开始识别</text>
-      </view>
-    </view> -->
-    <!-- 欢迎区域 -->
    <view class="sunny-wrap" wx:if="{{ day_type !== 'night' }}">
-      <image src="/static/sun-2.png" class="sunny-icon" />
+      <image src="{{sunSvgData}}" class="sunny-icon" />
      <image class="face {{facePosition}}" src="{{avatarSvgData}}" mode="aspectFit"></image>
-      <!-- <view class="face {{facePosition}}">•ᴗ•</view> -->
-      <!-- <view class="face {{facePosition}}">•◡•</view> -->
    </view>
    <view wx:else>
      <view class="moon-wrap">
@@ -70,33 +58,56 @@
        <view class='button-bg'></view>
      </view> -->
    </view>
-    <view wx:if="{{!takePhoto && (todaySummary.length > 0 || groupedHistory.length > 0)}}" class="history-wrap">
-      <view class="today-card" wx:for="{{todaySummary}}" wx:key="index">
-        <p class="month-day">{{item.monthDay}}</p>
-        <scroll-view class="images-list" scroll-x enable-flex>
-          <view class="image-item-wrap" wx:for="{{item.images}}" wx:for-item="image" wx:key="index" catch:tap="onImageTap" data-image-id="{{image.image_id}}">
-            <t-skeleton wx:if="{{image.thumbnail_loading}}" class="image-item" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
-            <image wx:else class="image-item" src="{{image.thumbnail_url}}" mode="aspectFill" />
-          </view>
+    <view wx:if="{{!takePhoto && dateStripItems && dateStripItems.length > 0}}" class="date-section">
+      <view class="date-strip-header">
+        <text class="month-title">{{selectedMonthTitle}}</text>
+        <!-- <t-icon name="calendar" size="40rpx" /> -->
+      </view>
+      <scroll-view class="date-strip" scroll-x>
+        <view class="date-strip-inner {{stripCentered ? 'strip-center' : 'strip-default'}}">
+          <block wx:for="{{dateStripItems}}" wx:key="index">
+            <view wx:if="{{item.type === 'day'}}" class="date-item {{item.key === selectedDateKey ? 'active' : ''}}" data-key="{{item.key}}" bindtap="onDateTap">
+              <view class="weekday">{{item.weekday}}</view>
+              <view class="day">{{item.day}}</view>
+            </view>
+            <view wx:elif="{{item.type === 'ym'}}" class="date-item label">
+              <view class="weekday">{{item.year}}</view>
+              <view class="day">{{item.month}}</view>
+            </view>
+          </block>
+        </view>
+      </scroll-view>
+    </view>
+    <view wx:if="{{!takePhoto && selectedDateImages && selectedDateImages.length > 0}}" class="history-wrap">
+      <view class="history-card-item white-card">
+        <scroll-view scroll-y>
+          <block wx:if="{{!useWaterfall}}">
+            <view class="image-list">
+              <view class="list-item" wx:for="{{selectedDateImages}}" wx:for-item="image" wx:key="index" catch:tap="onImageTap" data-image-id="{{image.image_id}}">
+                <t-skeleton wx:if="{{image.thumbnail_loading}}" class="full-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
+                <image wx:else class="full-image" src="{{image.thumbnail_url}}" mode="widthFix" />
+              </view>
+            </view>
+          </block>
+          <block wx:else>
+            <view class="waterfall">
+              <view class="wf-col">
+                <view class="wf-item" wx:for="{{waterfallLeft}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
+                  <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
+                  <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
+                </view>
+              </view>
+              <view class="wf-col">
+                <view class="wf-item" wx:for="{{waterfallRight}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
+                  <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
+                  <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
+                </view>
+              </view>
+            </view>
+          </block>
        </scroll-view>
      </view>
-      <view class="history-card" wx:for="{{groupedHistory}}" wx:key="index">
-        <view class="history-card-title" wx:if="{{item.year < currentYear}}">{{item.year}}年</view>
-        <view class="history-card-list">
-          <view class="history-card-item" catch:tap="onImageCardTap" data-image-items="{{historyItem}}" wx:for="{{item.items}}" wx:for-item="historyItem" wx:for-index="index" wx:key="index">
-            <p class="month-day">{{historyItem.monthDay}}</p>
-            <scroll-view class="images-list" scroll-x enable-flex>
-              <view class="image-item-wrap" wx:for="{{historyItem.images}}" wx:for-item="image" wx:key="index" catch:tap="onImageTap" data-image-id="{{image.image_id}}">
-                <t-skeleton wx:if="{{image.thumbnail_loading}}" class="image-item" theme="image" animation="gradient" loading="{{true}}"></t-skeleton>
-                <image wx:else class="image-item" src="{{image.thumbnail_url}}" mode="aspectFill" />
-              </view>
-            </scroll-view>
-          </view>
-        </view>
-      </view>
-      <t-action-sheet id="t-images-sheet" bind:selected="handleImageSelected" />
    </view>
-    <view class="date-section"></view>
    <!-- 历史记录区域 -->
    <!-- 仅在加载更多时显示骨架屏 -->
    <t-skeleton wx:if="{{isLoading && page >= 1}}" theme="paragraph" animation="gradient" loading="{{true}}"></t-skeleton>
--- a/miniprogram/pages/upload/upload.wxss
+++ b/miniprogram/pages/upload/upload.wxss
@@ -2,18 +2,17 @@

 .upload-container.morning,
 .upload-container.afternoon {
-  /* background-color: #f3d2c1; */
-  background-color: #fffffe;
+  background: linear-gradient(180deg, #FDFDFC 0%, #EAF7FF 48%, #ECEBFF 100%);
 }
 .morning .history-wrap,
 .afternoon .history-wrap {
-  color: rgb(0, 24, 88);
+  /* color: rgb(0, 24, 88); */
 }


 .upload-container {
  min-height: 100vh;
-  background-color: #232946;
+  background: linear-gradient(180deg, #0E1330 0%, #162447 40%, #6B85C8 75%, #EAF1FF 100%);
  padding: 0;
  position: relative;
  padding-top: calc(var(--height) + 100rpx);
@@ -84,8 +83,8 @@
 /* 历史记录区域 */
 .history-wrap {
  position: relative;
-  padding: 40rpx 40rpx;
-  color: #b8c1ec;
+  /* padding: 40rpx 40rpx; */
+  /* color: #b8c1ec; */
 }
 .history-card-title {
  margin-top: 40rpx;
@@ -95,21 +94,33 @@
  width: 100%;
 }

-.morning .history-card-item,
-.afternoon .history-card-item {
-  /* background-color: rgb(254, 246, 228); */
-  background-color: #faeee7;
+.image-grid { 
+  width: 100%; 
+  max-height: 900rpx; 
+  padding: 24rpx; 
+  box-sizing: border-box; 
+  display: flex; 
+  flex-wrap: wrap; 
+  justify-content: space-between;
 }
+.grid-item { border-radius: 24rpx; overflow: hidden; margin-bottom: 24rpx; }
+.grid-image { width: 100%; height: 220rpx; object-fit: cover; }
+.cols-1 .grid-item { width: 100%; }
+.cols-2 .grid-item { width: calc(50% - 12rpx); }
+.cols-3 .grid-item { width: calc(33.333% - 16rpx); }
+.cols-1 .grid-image { height: 480rpx; }
+.cols-3 .grid-image { height: 200rpx; }

-.history-card-item {
-  padding: 40rpx;
-  background-color: #fffffe;
-  font-weight: 600;
-  border-radius: 30rpx;
-  /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); */
-  margin: 40rpx 0;
-  color: rgb(18, 22, 41);
-}
+/* 新：单列全幅图片列表 */
+.image-list { padding: 24rpx; box-sizing: border-box; }
+.list-item { margin-bottom: 24rpx; border-radius: 24rpx; overflow: hidden; background: #fff; }
+.full-image { width: 100%; height: auto; display: block; }
+
+/* 新：两列瀑布布局 */
+.waterfall { display: flex; gap: 12rpx; padding: 12rpx; box-sizing: border-box; }
+.wf-col { width: calc(50% - 6rpx); }
+.wf-item { margin-bottom: 12rpx; border-radius: 24rpx; overflow: hidden; background: #fff; }
+.wf-image { width: 100%; height: auto; display: block; }
 .images-list {
  margin-top: 20rpx;
  width: 100%;
@@ -280,7 +291,7 @@
    transform: translate(300%, -50%);
  }
  to {
-    transform: translate(240%, 4%);
+    transform: translate(255%, 4%);
  }
 }

@@ -327,6 +338,45 @@
  animation: moveLeftRight 4s infinite alternate linear;
 }

+/* 新：底部日期条样式 */
+.date-section { 
+  padding: 20rpx;
+  background: transparent; 
+  color: #001858; 
+  z-index: 1;
+}
+.night .date-section { 
+  color: #fffffe; 
+}
+.date-strip-header { 
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between; 
+  margin-bottom: 24rpx; 
+}
+.month-title { font-size: 36rpx; }
+.date-strip { white-space: nowrap; height: 100rpx;}
+.date-strip-inner { display: flex; gap: 24rpx; }
+.strip-center { justify-content: center; min-width: 100%; }
+.strip-default { justify-content: flex-start; }
+.date-strip::-webkit-scrollbar { display: none; }
+.date-item { 
+  display: inline-flex; 
+  flex-direction: column; 
+  align-items: center; 
+  justify-content: center; 
+  width: 120rpx; 
+  height: 100rpx; 
+  margin: 0 6rpx;
+  border-radius: 24rpx; 
+  background: #ffffff; 
+  color: #001858; 
+}
+.date-item.active { background: #000000; color: #fffffe; }
+.date-item.label { background: rgba(255,255,255,0.65); color: #001858; box-shadow: none; }
+.date-item .weekday { font-size: 24rpx; opacity: 0.8; }
+.date-item .day { font-size: 36rpx;}
+
@keyframes moveLeftRight {
    0% {
        transform: translateX(-20rpx);
@@ -337,7 +387,7 @@
 }

 .welcome-section {
-  margin-bottom: 40rpx;
+  margin-bottom: 24rpx;
 }

 .morning .welcome-card,
--- a/miniprogram/static/sun-2.png
+++ b/miniprogram/static/sun-2.png