添加设置页面

miniprogram/app.json

@@ -8,7 +8,9 @@
     "pages/user-login/user-login",
     "pages/articledetail/articledetail",
     "pages/shop/shop",
-    "pages/notifications/notifications"
+    "pages/notifications/notifications",
+    "pages/setting/setting",
+    "pages/opinion/opinion"
   ],
   "window": {
     "navigationBarTextStyle": "black",

miniprogram/pages/setting/setting.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+   
+  }
+}

miniprogram/pages/setting/setting.ts

@@ -0,0 +1,198 @@
+// 定义用户信息数据类型
+interface UserInfo {
+  uid: string;
+  telephone: string;
+  password: string;
+  avatar_url: string;
+  gender: 0 | 1; // 0:女, 1:男
+  birthdate_date: string;
+  createtime: string;
+  updatetime: string;
+  bio: string;
+  username: string;
+  total_points: number;
+}
+
+Page({
+  data: {
+    userInfo: {} as UserInfo
+  },
+
+  onLoad() {
+    // 从缓存或接口获取用户信息
+    this.loadUserInfo();
+  },
+
+  // 加载用户信息
+  loadUserInfo() {
+    // 模拟数据，实际项目中应从接口获取
+    const mockUserInfo: UserInfo = {
+      uid: '10086',
+      telephone: '138****8888',
+      password: '',
+      avatar_url: 'https://picsum.photos/200/200',
+      gender: 1,
+      birthdate_date: '1995-08-15',
+      createtime: '2023-01-01',
+      updatetime: '2023-06-10',
+      bio: '热爱生活，喜欢探索',
+      username: '张小明',
+      total_points: 1250
+    };
+
+    this.setData({
+      userInfo: mockUserInfo
+    });
+  },
+
+  // 编辑昵称
+  editNickname() {
+    const { username } = this.data.userInfo;
+    
+    wx.showModal({
+      title: '修改昵称',
+      content: '请输入新的昵称',
+      editable: true,
+      placeholderText: username,
+      success: (res) => {
+        if (res.confirm && res.content) {
+          // 调用接口修改昵称
+          this.setData({
+            'userInfo.username': res.content
+          });
+          
+          wx.showToast({
+            title: '昵称已更新',
+            icon: 'success',
+            duration: 1500
+          });
+        }
+      }
+    });
+  },
+
+  // 编辑性别
+  editGender() {
+    const { gender } = this.data.userInfo;
+    
+    wx.showActionSheet({
+      itemList: ['男', '女'],
+      itemColor: '#333',
+      success: (res) => {
+        const newGender = res.tapIndex === 0 ? 1 : 0;
+        
+        if (newGender !== gender) {
+          this.setData({
+            'userInfo.gender': newGender
+          });
+          
+          wx.showToast({
+            title: '性别已更新',
+            icon: 'success',
+            duration: 1500
+          });
+        }
+      }
+    });
+  },
+
+  // 编辑生日
+  editBirthdate() {
+    const { birthdate_date } = this.data.userInfo;
+    
+    wx.showDatePickerModal({
+      startDate: '1900-01-01',
+      endDate: '2023-12-31',
+      currentDate: birthdate_date,
+      success: (res) => {
+        if (res.confirm) {
+          this.setData({
+            'userInfo.birthdate_date': res.date
+          });
+          
+          wx.showToast({
+            title: '生日已更新',
+            icon: 'success',
+            duration: 1500
+          });
+        }
+      }
+    });
+  },
+
+  // 编辑手机号
+  editPhone() {
+    wx.navigateTo({
+      url: '/pages/editPhone/editPhone'
+    });
+  },
+
+  // 修改密码
+  changePassword() {
+    wx.navigateTo({
+      url: '/pages/changePassword/changePassword'
+    });
+  },
+
+  // 更换头像
+  changeAvatar() {
+    wx.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        const tempFilePath = res.tempFiles[0].tempFilePath;
+        
+        // 模拟上传头像
+        this.setData({
+          'userInfo.avatar_url': tempFilePath
+        });
+        
+        wx.showToast({
+          title: '头像已更新',
+          icon: 'success',
+          duration: 1500
+        });
+      }
+    });
+  },
+
+  // 隐私设置
+  managePrivacy() {
+    wx.navigateTo({
+      url: '/pages/privacySettings/privacySettings'
+    });
+  },
+
+  // 关于我们
+  showAbout() {
+    wx.navigateTo({
+      url: '/pages/about/about'
+    });
+  },
+
+  // 退出登录
+  logout() {
+    wx.showModal({
+      title: '确认退出',
+      content: '确定要退出当前账号吗？',
+      confirmText: '退出',
+      confirmColor: '#ff4d4f',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) {
+          // 清除登录状态
+          wx.removeStorageSync('token');
+          wx.removeStorageSync('userInfo');
+          
+          // 跳转到登录页
+          wx.reLaunch({
+            url: '/pages/login/login'
+          });
+        }
+      }
+    });
+  }
+});
+    

miniprogram/pages/setting/setting.wxml

@@ -0,0 +1,143 @@
+<view class="setting-page">
+
+  <!-- 用户信息卡片 -->
+  <view class="user-card">
+    <view class="avatar-container" bindtap="changeAvatar">
+      <image class="avatar" src="{{userInfo.avatar_url}}" mode="aspectFill"></image>
+      <view class="avatar-overlay">
+        <image class="edit-icon" src="/images/edit-icon.png" mode="widthFix"></image>
+      </view>
+    </view>
+    
+    <view class="user-info">
+      <view class="username">{{userInfo.username}}</view>
+      <view class="user-id">ID: {{userInfo.uid}}</view>
+    </view>
+  </view>
+
+  <!-- 主要设置区域 -->
+  <view class="settings-container">
+    <!-- 账户设置 -->
+    <view class="setting-section">
+      <text class="section-title">账户设置</text>
+      
+      <view class="setting-card">
+        <view class="setting-item" bindtap="editNickname">
+          <view class="item-icon">
+            <image src="/images/icon-nickname.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">昵称</text>
+            <text class="item-value">{{userInfo.username}}</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+        
+        <view class="item-divider"></view>
+        
+        <view class="setting-item" bindtap="editGender">
+          <view class="item-icon">
+            <image src="/images/icon-gender.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">性别</text>
+            <text class="item-value">{{userInfo.gender === 1 ? '男' : '女'}}</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+        
+        <view class="item-divider"></view>
+        
+        <view class="setting-item" bindtap="editBirthdate">
+          <view class="item-icon">
+            <image src="/images/icon-birthday.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">生日</text>
+            <text class="item-value">{{userInfo.birthdate_date}}</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+        
+        <view class="item-divider"></view>
+        
+        <view class="setting-item" bindtap="editPhone">
+          <view class="item-icon">
+            <image src="/images/icon-phone.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">手机号</text>
+            <text class="item-value">{{userInfo.telephone}}</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 安全设置 -->
+    <view class="setting-section">
+      <text class="section-title">安全设置</text>
+      
+      <view class="setting-card">
+        <view class="setting-item" bindtap="changePassword">
+          <view class="item-icon">
+            <image src="/images/icon-password.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">修改密码</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+        
+        <view class="item-divider"></view>
+        
+        <view class="setting-item" bindtap="managePrivacy">
+          <view class="item-icon">
+            <image src="/images/icon-privacy.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">隐私设置</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 其他设置 -->
+    <view class="setting-section">
+      <text class="section-title">其他</text>
+      
+      <view class="setting-card">
+        <view class="setting-item" bindtap="showAbout">
+          <view class="item-icon">
+            <image src="/images/icon-about.png" mode="widthFix"></image>
+          </view>
+          <view class="item-content">
+            <text class="item-label">关于我们</text>
+          </view>
+          <view class="item-arrow">
+            <image src="/images/arrow-right.png" mode="widthFix"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 退出登录按钮 -->
+    <view class="logout-btn" bindtap="logout">
+      <text class="logout-text">退出登录</text>
+    </view>
+  </view>
+</view>
+    

miniprogram/pages/setting/setting.wxss

@@ -0,0 +1,189 @@
+/* 基础样式 */
+page {
+  background-color: #f5f7fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/* 导航栏 */
+.navbar {
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  position: relative;
+}
+
+.nav-title {
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+/* 用户信息卡片 */
+.user-card {
+  background-color: #fff;
+  margin: 30rpx;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.avatar-container {
+  position: relative;
+  margin-right: 30rpx;
+}
+
+.avatar {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  border: 4rpx solid #f0f0f0;
+}
+
+.avatar-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 48rpx;
+  height: 48rpx;
+  background-color: #4a90e2;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4rpx solid #fff;
+}
+
+.edit-icon {
+  width: 24rpx;
+  height: 24rpx;
+}
+
+.user-info {
+  flex: 1;
+}
+
+.username {
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.user-id {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 设置区域 */
+.settings-container {
+  padding: 0 30rpx 60rpx;
+}
+
+.setting-section {
+  margin-bottom: 30rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+  display: block;
+  padding-left: 10rpx;
+}
+
+.setting-card {
+  background-color: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 25rpx;
+  transition: background-color 0.2s;
+}
+
+.setting-item:active {
+  background-color: #f9f9f9;
+}
+
+.item-icon {
+  width: 50rpx;
+  height: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 25rpx;
+}
+
+.item-icon image {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+.item-content {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.item-label {
+  font-size: 32rpx;
+  color: #333;
+}
+
+.item-value {
+  font-size: 30rpx;
+  color: #999;
+}
+
+.item-arrow {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item-arrow image {
+  width: 20rpx;
+  height: 34rpx;
+  opacity: 0.6;
+}
+
+.item-divider {
+  height: 1rpx;
+  background-color: #f0f0f0;
+  margin: 0 25rpx;
+}
+
+/* 退出登录按钮 */
+.logout-btn {
+  margin-top: 50rpx;
+  background-color: #fff;
+  border: 2rpx solid #ff4d4f;
+  border-radius: 100rpx;
+  padding: 25rpx 0;
+  text-align: center;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+  transition: all 0.2s;
+}
+
+.logout-btn:active {
+  background-color: #fff5f5;
+}
+
+.logout-text {
+  font-size: 32rpx;
+  color: #ff4d4f;
+  font-weight: 500;
+}
+    

miniprogram/pages/user/user.ts

@@ -162,6 +162,11 @@ Component({
         wx.navigateTo({
           url: `/pages/notifications/notifications?id=${this.data.userinfo.uid}`,
         });
+      },
+      gotoSetting(){
+        wx.navigateTo({
+          url: `/pages/setting/setting?id=${this.data.userinfo.uid}`,
+        });
       }