nanocode/wanandroid/uniapp_android/pages/official/official.vue

<template>
  <view class="official-page">
    <!-- 状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 标题栏 -->
    <view class="title-bar">
      <text class="title">公众号</text>
    </view>
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 搜索栏 -->
      <view class="search-container">
        <view class="search-icon">🔍</view>
        <input class="search-input" placeholder="搜索公众号..." />
      </view>
      
      <!-- 公众号列表 -->
      <view class="official-list">
        <view class="official-card" v-for="item in officialList" :key="item.id">
          <image class="official-avatar" :src="item.avatar" mode="aspectFill"></image>
          <view class="official-info">
            <text class="official-name">{{ item.name }}</text>
            <text class="official-desc">{{ item.description }}</text>
            <view class="official-stats">
              <text class="stat-item">📰 {{ item.articleCount }}篇文章</text>
              <text class="stat-item">👥 {{ item.followerCount }}关注</text>
            </view>
          </view>
          <view class="follow-btn" :class="{ followed: item.followed }">
            {{ item.followed ? '已关注' : '关注' }}
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载更多...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="officialList.length === 0">
        <view class="empty-icon">📱</view>
        <text class="empty-text">暂无公众号数据</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      officialList: [
        {
          id: 1,
          name: '鸿洋',
          avatar: 'https://via.placeholder.com/60/6200EE/ffffff?text=H',
          description: '玩Android创始人，分享Android开发技术',
          articleCount: 128,
          followerCount: 12500,
          followed: true
        },
        {
          id: 2,
          name: '郭霖',
          avatar: 'https://via.placeholder.com/60/03DAC6/ffffff?text=G',
          description: 'Android开发专家，《第一行代码》作者',
          articleCount: 96,
          followerCount: 9800,
          followed: false
        },
        {
          id: 3,
          name: '扔物线',
          avatar: 'https://via.placeholder.com/60/FF9800/ffffff?text=R',
          description: 'HenCoder系列教程作者，UI绘制专家',
          articleCount: 72,
          followerCount: 8500,
          followed: true
        },
        {
          id: 4,
          name: '代码家',
          avatar: 'https://via.placeholder.com/60/4CAF50/ffffff?text=D',
          description: '开源项目维护者，技术布道师',
          articleCount: 64,
          followerCount: 7200,
          followed: false
        }
      ],
      hasMore: true
    }
  },
  
  methods: {
    loadMore() {
      // 模拟加载更多数据
      setTimeout(() => {
        this.officialList = this.officialList.concat([
          {
            id: 5,
            name: '技术小黑屋',
            avatar: 'https://via.placeholder.com/60/9C27B0/ffffff?text=J',
            description: '分享Android性能优化经验',
            articleCount: 48,
            followerCount: 5600,
            followed: false
          }
        ])
        this.hasMore = false
      }, 1000)
    }
  },
  
  onLoad() {
    console.log('公众号页面加载')
  },
  
  onReachBottom() {
    if (this.hasMore) {
      this.loadMore()
    }
  }
}
</script>

<style>
.official-page {
  background: #F5F5F5;
  min-height: 100vh;
}

.status-bar {
  height: 40px;
  background: #6200EE;
}

.title-bar {
  background: #6200EE;
  padding: 16px 20px;
}

.title {
  font-size: 20px;
  font-weight: 500;
  color: white;
}

.content {
  padding: 20px;
}

.search-container {
  background: white;
  border-radius: 24px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.search-icon {
  font-size: 20px;
  margin-right: 12px;
  color: #6200EE;
}

.search-input {
  flex: 1;
  font-size: 16px;
  color: #212121;
}

.search-input::placeholder {
  color: #757575;
}

.official-list {
  margin-bottom: 20px;
}

.official-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s;
}

.official-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.official-avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 16px;
}

.official-info {
  flex: 1;
}

.official-name {
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  display: block;
  margin-bottom: 4px;
}

.official-desc {
  font-size: 14px;
  color: #757575;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

.official-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  font-size: 12px;
  color: #666;
}

.follow-btn {
  background: #6200EE;
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.follow-btn.followed {
  background: #E0E0E0;
  color: #666;
}

.load-more {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
  color: #6200EE;
}

.empty-text {
  font-size: 16px;
  color: #757575;
}
</style>