uniapp我的页面

<template>
  <view class="container">
    <!-- 标题栏（已存在，无需修改） -->
    
    <!-- 个人信息 -->
    <view class="personal-info">
      <!-- 上部 -->
      <view class="info-top">
        <!-- 左侧：头像 -->
        <image :src="user.avatar" class="avatar"></image>
        
        <!-- 中间：昵称和账号 -->
        <view class="info-middle">
          <text class="nickname">{{ user.nickname }}</text>
          <text class="account">{{ user.account }}</text>
        </view>
        
        <!-- 右侧：向右箭头图标 -->
        <image src="/static/arrow-right.png" class="arrow-icon" @click="goToDetail"></image>
      </view>
      
      <!-- 下部：其他信息或留空 -->
      <view class="info-bottom">
        <!-- 这里可以放置其他信息，或者留空 -->
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 导航栏 -->
      <view class="nav-bar">
        <text :class="['nav-item', activeTab === 'posts' ? 'active' : '']" @click="switchTab('posts')">我发布的</text>
        <text :class="['nav-item', activeTab === 'likes' ? 'active' : '']" @click="switchTab('likes')">我的喜欢</text>
      </view>

      <!-- 滑动展示区 -->
      <swiper class="swiper-container" :current="activeTabIndex" @change="onSwiperChange">
        <!-- 我发布的 -->
        <swiper-item>
          <view class="grid-container">
            <block v-for="(post, index) in posts" :key="index">
              <navigator :url="'/pages/post-detail/main?id=' + post.id" hover-class="navigator-hover" class="grid-item">
                <image :src="post.image" class="post-image"></image>
                <text class="post-title">{{ post.title }}</text>
              </navigator>
            </block>
          </view>
        </swiper-item>

        <!-- 我的喜欢 -->
        <swiper-item>
          <view class="grid-container">
            <block v-for="(like, index) in likes" :key="index">
              <navigator :url="'/pages/post-detail/main?id=' + like.id" hover-class="navigator-hover" class="grid-item">
                <image :src="like.image" class="post-image"></image>
                <text class="post-title">{{ like.title }}</text>
              </navigator>
            </block>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 底部导航栏（已存在，无需修改） -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      user: {
        avatar: "https://example.com/avatar.jpg",
        nickname: "用户名",
        account: "账号ID"
      },
      activeTab: "posts", // 默认选中“我发布的”
      activeTabIndex: 0, // swiper 初始索引
      posts: [
        { id: 1, image: "https://example.com/post1.jpg", title: "帖子1" },
        { id: 2, image: "https://example.com/post2.jpg", title: "帖子2" },
        { id: 3, image: "https://example.com/post3.jpg", title: "帖子3" },
        // 更多数据...
      ],
      likes: [
        { id: 1, image: "https://example.com/like1.jpg", title: "喜欢1" },
        { id: 2, image: "https://example.com/like2.jpg", title: "喜欢2" },
        { id: 3, image: "https://example.com/like3.jpg", title: "喜欢3" },
        // 更多数据...
      ]
    };
  },
  methods: {
    goToDetail() {
      console.log("跳转到个人详情页");
      uni.navigateTo({
        url: '/pages/user-detail/detail'
      });
    },
    switchTab(tab) {
      this.activeTab = tab;
      this.activeTabIndex = tab === "posts" ? 0 : 1;
      console.log(`切换到 ${tab} 标签`);
    },
    onSwiperChange(e) {
      const currentIndex = e.detail.current;
      this.activeTab = currentIndex === 0 ? "posts" : "likes";
      this.activeTabIndex = currentIndex;
      console.log(`滑动到第 ${currentIndex} 个标签`);
    }
  }
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 个人信息 */
.personal-info {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.info-middle {
  flex: 1;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.account {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
}

.arrow-icon {
  width: 24px;
  height: 24px;
}

.info-bottom {
  margin-top: 10px;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 10px;
  background-color: #f9f9f9;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.nav-item {
  font-size: 16px;
  color: #333;
  padding: 5px 10px;
}

.nav-item.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.swiper-container {
  height: calc(100% - 50px); /* 减去导航栏的高度 */
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  width: calc(33.333% - 10px); /* 3列布局，减去间距 */
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.post-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.post-title {
  font-size: 14px;
  color: #333;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>