基本成型

2025-09-27 17:24:52 +08:00
parent 578d49826b
commit eae49c76bd
502 changed files with 15238 additions and 708 deletions
--- a/miniprogram/pages/user/user.json
+++ b/miniprogram/pages/user/user.json
@@ -1,11 +1,16 @@
 {
  "component": true,
  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-grid": "tdesign-miniprogram/grid/grid",
    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
    "t-avatar": "tdesign-miniprogram/avatar/avatar",
  "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group",
  "t-toast": "tdesign-miniprogram/toast/toast",
-  "t-divider": "tdesign-miniprogram/divider/divider"
+  "t-divider": "tdesign-miniprogram/divider/divider",
+  "t-cell": "tdesign-miniprogram/cell/cell",
+  "t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
  }
+ 
+  
 }
--- a/miniprogram/pages/user/user.ts
+++ b/miniprogram/pages/user/user.ts
@@ -1,4 +1,5 @@
 import Toast from 'tdesign-miniprogram/toast/index';
+import envConfig from '../../env';
 Component({
  data: {
    img1: 'https://tdesign.gtimg.com/mobile/demos/example1.png',
@@ -6,7 +7,10 @@ Component({
    img3: 'https://tdesign.gtimg.com/mobile/demos/example3.png',
    image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
    hasToken: false,
-    username: ''
+    userinfo: null,
+    refresherTriggered: false,
+    article_num:0
+
  },
  methods: {
    userlogin(){
@@ -16,23 +20,155 @@ Component({
      console.log("主动刷新user界面")
      const app = getApp();
      console.log("全局userinfo",app.globalData.userInfo)
-      console.log("全局用户信息:", app.globalData.userInfo.username); // 这里打印的是 userInfo
      const userInfo = app.globalData.userInfo || {};
+      console.log("userInfo 的数据类型：", typeof userInfo);
      console.log("user中的userInfo：",userInfo)
+      let userInfoObj = userInfo;
+        if (typeof userInfo === "string") {
+        try {
+            userInfoObj = JSON.parse(userInfo); // 字符串转对象
+        } catch (e) {
+            console.error("解析 userInfo 字符串失败：", e);
+            return;
+        }
+        }
+      console.log("应保存的username：",userInfoObj.username)
      this.setData({
        hasToken: !!app.globalData.token, // 从全局变量获取token状态
-        username: userInfo.username
+        userinfo: userInfoObj
      });
      // 调试：确认页面数据是否正确
      console.log("页面username赋值后:", this.data.username);
    },
+    onRefresherRefresh() {
+        console.log("触发刷新");
+        this.getArticleNum()
+        
+        // 模拟接口请求延迟
+        this.setData({
+            refresherTriggered: true 
+        });
+
+        setTimeout(() => {
+            wx.request({
+                url: `${envConfig.apiBaseUrl}/user/getInfo`, // 替换为你的后端接口地址
+                method: 'POST',
+                data: {
+                    "uid": this.data.userinfo.uid
+                },
+                success: (res) => {
+                    console.log("后端刷新数据返回成功:", res.data);
+                    wx.setStorageSync('ttk_userInfo', JSON.stringify(res.data.data)); 
+                    this.setData({
+                        userinfo: res.data.data
+                    }, () => {
+                        console.log("视图已更新，新用户名为:", this.data.userinfo.username);
+                        // 3. 关闭动画并提示成功
+                    });
+
+                    console.log("更新后用户名为:",this.data.userinfo.username)
+
+                    
+                    // 假设后端返回的数据包含在 res.data.data 或 res.data.userinfo 中
+                    // const newUserData = res.data.data; 
+                    
+                    // 修正语法：补上右括号 `)`
+                    this.setData({
+                        refresherTriggered: false
+                    }); // <-- 语法已修正
+            
+                    // ⭐️ 建议：调用方法来处理新数据并显示 Toast
+                    // 假设你有一个方法来处理返回的用户数据，并同时关闭刷新动画和提示
+                    // this.handleSuccessfulRefresh(res.data);
+                    
+                    // 如果你只是想关闭刷新动画和显示成功提示：
+                   
+                },
+                fail: (err) => {
+                    this.setData({
+                        refresherTriggered: false
+                    });
+                    console.error("后端刷新请求失败:", err);
+                    // 建议：显示失败提示
+                   
+                }
+            });
+        }, 2000);
+
+        
+        
+
+        // 2. 模拟接口请求延迟（你的数据加载逻辑将放在这里）
+        // setTimeout(() => {
+        //     // 执行你的数据刷新逻辑，例如：this.refreshData();
+        //     console.log("数据加载完成，准备关闭刷新动画。");
+            
+            // // 3. 刷新完成后，设置状态为 false，关闭动画
+            // this.setData({
+            //     refresherTriggered: false
+            // }, () => {
+        //         console.log("完成刷新")
+        //         // 确保动画关闭后，再提示用户成功
+        //         const toast = this.selectComponent('#t-toast');
+            
+        //         if (toast) {
+        //             // 确保 Toast 实例存在，并调用其 show 方法
+        //             toast.show({
+        //                 message: '刷新成功',
+        //                 theme: 'success',
+        //                 duration: 1500 // 可选：设置显示时间
+        //             });
+        //         } else {
+        //             console.error("未找到 t-toast 组件实例，请检查 WXML ID。");
+        //         }
+        //     });
+            
+        // }, 3000); // ⭐️ 延迟时间已修改为 3000 毫秒
+      },
+      onRefresherPulling() {
+        console.log("正在下拉...");
+      },
+      onRefresherRestore() {
+        console.log("刷新完成，已恢复原位");
+      },
+
+      getArticleNum(){
+        wx.request({
+            url: `${envConfig.apiBaseUrl}/article/getnum`, // 替换为你的后端接口地址
+            method: 'POST',
+            data: {
+                "uid": this.data.userinfo.uid
+            },
+            success: (res) => {
+                console.log("后端刷新数据getArticleNum返回成功:", res.data);
+                
+                this.setData({
+                    article_num: res.data.article_num
+                }, () => {
+                    console.log("视图已更新，新用户名为:", this.data.article_num);
+           
+                });
+
+            },
+            fail: (err) => {
+                console.error("后端刷新请求失败:", err);
+                // 建议：显示失败提示
+               
+            }
+        });
+      }
+
    
  },
  lifetimes:{
    attached(){
      console.log("user界面刷新")
      this.refreshUserStatus()
+      this.getArticleNum()
    }
    
-  }
+  },
+  
+
+
 })
--- a/miniprogram/pages/user/user.wxml
+++ b/miniprogram/pages/user/user.wxml
@@ -1,15 +1,116 @@
-<view class="user-contain">
-  <view class="user-avatar">
-  <t-avatar class="avatar-example" image="{{image}}" size="large" />
-  <a class="avatar-font" bind:tap="userlogin">{{hasToken ? (username || '用户中心') : '点击登录/注册'}}</a>
-  <t-toast id="t-toast" />
+<scroll-view
+  class="user-scroll"
+  id="userScroll"
+  scroll-y="true"                
+  refresher-enabled="true"       
+  refresher-triggered="{{refresherTriggered}}" 
+  refresher-threshold="80"        
+  refresher-default-style="black"  
+  refresher-background="#f5f5f5"  
+  bindrefresherpulling="onRefresherPulling"  
+  bindrefresherrefresh="onRefresherRefresh" 
+  bindrefresherrestore="onRefresherRestore" 
+  bindscrolltolower="onReachBottom"          
+>
+  <view class="user-contain">
+    <!-- 头像与用户名区域 -->
+    <view class="user-avatar">
+      <t-avatar class="avatar-example" image="{{image || 'https://picsum.photos/id/64/200/200'}}" size="large" />
+      <a class="avatar-font" bind:tap="userlogin">
+        {{hasToken ? (userinfo.username || '用户中心') : '点击登录/注册'}}
+      </a>
+      <t-toast id="t-toast" />
+    </view>
+    
+    <!-- 分割线 -->
+    <t-divider />
+    
+    <!-- 积分与发布统计区 -->
+    <view class="stats-container">
+      <view class="stat-item" bind:tap="gotoPoints">
+        <view class="stat-value">{{userinfo.total_points || 0}}</view>
+        <view class="stat-label">我的积分</view>
+      </view>
+      <view class="stat-item" bind:tap="gotoMyPosts">
+        <view class="stat-value">{{userinfo.postCount || 0}}</view>
+        <view class="stat-label">我的发布</view>
+      </view>
+      <view class="stat-item" bind:tap="gotoCollections">
+        <view class="stat-value">{{userinfo.collectionCount || 0}}</view>
+        <view class="stat-label">我的收藏</view>
+      </view>
+    </view>
+    
+    <!-- 功能区标题 -->
+    <view class="section-title">常用功能</view>
+    
+    <!-- 第一行功能按钮 -->
+    <view class="function-grid">
+      <view class="function-item" bind:tap="gotoOrders">
+        <view class="function-icon">
+          <t-icon name="article" size="40rpx" />
+        </view>
+        <view class="function-name">我的订单</view>
+      </view>
+      <view class="function-item" bind:tap="gotoAddress">
+        <view class="function-icon">
+          <t-icon name="map-marker" size="40rpx" />
+        </view>
+        <view class="function-name">收货地址</view>
+      </view>
+      <view class="function-item" bind:tap="gotoCoupons">
+        <view class="function-icon">
+          <t-icon name="ticket" size="40rpx" />
+        </view>
+        <view class="function-name">内推码</view>
+      </view>
+      <view class="function-item" bind:tap="gotoMessage">
+        <view class="function-icon">
+          <t-icon name="chat-double" size="40rpx" />
+          <view class="notification-badge" wx:if="{{unreadCount > 0}}">{{unreadCount}}</view>
+        </view>
+        <view class="function-name">消息通知</view>
+      </view>
+    </view>
+    
+    <!-- 第二行功能按钮 -->
+    <view class="function-grid">
+      <view class="function-item" bind:tap="gotoSetting">
+        <view class="function-icon">
+          <t-icon name="setting" size="40rpx" />
+        </view>
+        <view class="function-name">设置</view>
+      </view>
+      <view class="function-item" bind:tap="gotoHelp">
+        <view class="function-icon">
+          <t-icon name="help-circle" size="40rpx" />
+        </view>
+        <view class="function-name">帮助中心</view>
+      </view>
+      <view class="function-item" bind:tap="gotoFeedback">
+        <view class="function-icon">
+          <t-icon name="edit" size="40rpx" />
+        </view>
+        <view class="function-name">意见反馈</view>
+      </view>
+      <view class="function-item" bind:tap="logout" wx:if="{{hasToken}}">
+        <view class="function-icon">
+          <t-icon name="logout" size="40rpx" />
+        </view>
+        <view class="function-name">抽奖券</view>
+      </view>
+    </view>
+    <t-cell-group theme="card">
+
+        <t-divider />
+
+  <t-cell title="最新活动" leftIcon="logout" hover arrow  class="redicon"/>
+  
+</t-cell-group>
+    <!-- 底部区域 -->
+    <view class="footer">
+      <text class="copyright">© 2025 投投看 版权所有</text>
+    </view>
  </view>
-  <t-divider />
-<view class="block" class="server1">
-  <t-grid column="{{4}}" theme="card" >
-    <t-grid-item t-class-image="image" text="标题文字" image="{{img1}}" />
-    <t-grid-item t-class-image="image" text="标题文字" image="{{img2}}" />
-    <t-grid-item t-class-image="image" text="标题文字" image="{{img3}}" />
-  </t-grid>
-</view>
-</view>
+</scroll-view>
+    
--- a/miniprogram/pages/user/user.wxss
+++ b/miniprogram/pages/user/user.wxss
@@ -1,20 +1,183 @@
-.user-avatar{
-  margin-left: 40rpx;
-  width: 100vw;
-  display: flex;
-  align-items: center;
-  font-weight: bold;
-
-}
-.avatar-font{
-  margin-left: 30rpx;
-}
-
-.user-contain {
-  background-color: #f5f7fa; /* 浅灰色背景 */
-  height: 100vh;
-}
-.server1{
-  margin-top: 3vh;
-}
+/* 滚动容器样式 */
+.user-scroll {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 20rpx;
+    background-color: #f5f7fa;
+  }
+  
+  /* 主容器样式 */
+  .user-contain {
+    width: 100%;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+    min-height: calc(100vh - 40rpx);
+  }
+  
+  /* 头像与用户名区域 */
+  .user-avatar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30rpx;
+    padding: 20rpx 0;
+  }
+  
+  .avatar-example {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+    border: 4rpx solid #f0f2f5;
+  }
+  
+  .avatar-font {
+    margin-left: 20rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333333;
+    text-decoration: none;
+  }
+  
+  /* 统计数据区域 */
+  .stats-container {
+    display: flex;
+    justify-content: space-around;
+    padding: 30rpx 0;
+    border-bottom: 1px solid #f0f2f5;
+    margin-bottom: 20rpx;
+  }
+  
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15rpx 0;
+    width: 33.333%;
+  }
+  
+  .stat-value {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #51bdb6;
+    margin-bottom: 10rpx;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .stat-value::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2rpx;
+    background-color: #51bdb6;
+    transition: width 0.3s ease;
+  }
+  
+  .stat-item:active .stat-value::after {
+    width: 100%;
+  }
+  
+  .stat-label {
+    font-size: 26rpx;
+    color: #666666;
+  }
+  
+  /* 功能区标题 */
+  .section-title {
+    font-size: 28rpx;
+    color: #999999;
+    margin: 20rpx 0 15rpx 10rpx;
+    font-weight: 500;
+  }
+  
+  /* 功能按钮网格 */
+  .function-grid {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10rpx;
+  }
+  
+  .function-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 25%;
+    padding: 25rpx 0;
+    position: relative;
+  }
+  
+  .function-item::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 1rpx;
+    height: 40rpx;
+    background-color: #f0f2f5;
+    transform: translateY(-50%);
+  }
+  
+  .function-item:nth-child(4n)::after {
+    display: none;
+  }
+  
+  .function-item:active {
+    background-color: #f5f7fa;
+  }
+  
+  .function-icon {
+    width: 64rpx;
+    height: 64rpx;
+    background-color: #f0f2f5;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 15rpx;
+    color: #51bdb6;
+    position: relative;
+  }
+  
+  .function-name {
+    font-size: 26rpx;
+    color: #333333;
+  }
+  
+  /* 消息通知徽章 */
+  .notification-badge {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    width: 30rpx;
+    height: 30rpx;
+    background-color: #ff4d4f;
+    color: white;
+    font-size: 20rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* 底部版权信息 */
+  .footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 60rpx;
+    padding: 20rpx 0;
+  }
+  
+  .copyright {
+    font-size: 24rpx;
+    color: #999999;
+  }

+  .redicon {
+    color: red;
+  }
+