agri-app/pages/demo/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">我的相册</text>
      <view class="header-actions">
        <text class="action-btn" @click="selectMode">选择</text>
      </view>
    </view>
    
    <view v-if="albums.length > 0" class="album-list">
      <view 
        class="album-item" 
        v-for="(album, index) in albums" 
        :key="index"
        @click="openAlbum(album)"
      >
        <view class="album-cover">
          <image 
            :src="album.cover || defaultImage" 
            class="cover-image" 
            mode="aspectFill"
          ></image>
          <view class="album-count">{{ album.photos.length }}张</view>
        </view>
        <view class="album-info">
          <text class="album-name">{{ album.name }}</text>
          <text class="album-date">{{ album.date }}</text>
        </view>
      </view>
    </view>
    
    <view v-else class="empty-state">
      <image src="/static/empty.png" class="empty-image" mode="aspectFit"></image>
      <text class="empty-text">暂无相册</text>
      <button class="create-btn" @click="createNewAlbum">创建相册</button>
    </view>
    
    <!-- 选择模式下的底部操作栏 -->
    <view v-if="isSelectMode" class="bottom-actions">
      <view class="select-all" @click="toggleSelectAll">
        <text>{{ isAllSelected ? '取消全选' : '全选' }}</text>
      </view>
      <button class="delete-btn" @click="deleteSelected" :disabled="selectedAlbums.length === 0">
        删除({{ selectedAlbums.length }})
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSelectMode: false,
      isAllSelected: false,
      selectedAlbums: [],
      defaultImage: 'https://picsum.photos/300/200?random=1',
      albums: [
        {
          id: 1,
          name: '旅行记忆',
          date: '2024-01-15',
          cover: 'https://picsum.photos/300/200?random=2',
          photos: [
            'https://picsum.photos/400/300?random=3',
            'https://picsum.photos/400/300?random=4',
            'https://picsum.photos/400/300?random=5'
          ]
        },
        {
          id: 2,
          name: '家庭聚会',
          date: '2024-01-10',
          cover: 'https://picsum.photos/300/200?random=6',
          photos: [
            'https://picsum.photos/400/300?random=7',
            'https://picsum.photos/400/300?random=8'
          ]
        },
        {
          id: 3,
          name: '工作记录',
          date: '2024-01-05',
          cover: 'https://picsum.photos/300/200?random=9',
          photos: [
            'https://picsum.photos/400/300?random=10',
            'https://picsum.photos/400/300?random=11',
            'https://picsum.photos/400/300?random=12'
          ]
        }
      ]
    }
  },
  methods: {
    selectMode() {
      this.isSelectMode = !this.isSelectMode
      if (!this.isSelectMode) {
        this.selectedAlbums = []
        this.isAllSelected = false
      }
    },
    
    openAlbum(album) {
      if (this.isSelectMode) {
        this.toggleAlbumSelection(album.id)
      } else {
        uni.navigateTo({
          url: `/pages/album/album?id=${album.id}&name=${album.name}`
        })
      }
    },
    
    toggleAlbumSelection(id) {
      const index = this.selectedAlbums.indexOf(id)
      if (index > -1) {
        this.selectedAlbums.splice(index, 1)
      } else {
        this.selectedAlbums.push(id)
      }
      this.checkAllSelected()
    },
    
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected
      if (this.isAllSelected) {
        this.selectedAlbums = this.albums.map(album => album.id)
      } else {
        this.selectedAlbums = []
      }
    },
    
    checkAllSelected() {
      this.isAllSelected = this.selectedAlbums.length === this.albums.length
    },
    
    deleteSelected() {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除选中的${this.selectedAlbums.length}个相册吗？`,
        success: (res) => {
          if (res.confirm) {
            this.albums = this.albums.filter(album => 
              !this.selectedAlbums.includes(album.id)
            )
            this.selectedAlbums = []
            this.isSelectMode = false
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    
    createNewAlbum() {
      uni.navigateTo({
        url: '/pages/create/create'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.action-btn {
  color: #007aff;
  font-size: 28rpx;
}

.album-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.album-item {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.album-cover {
  position: relative;
  height: 200rpx;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.album-count {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
}

.album-info {
  padding: 15rpx;
}

.album-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.album-date {
  font-size: 20rpx;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 30rpx;
}

.create-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.select-all {
  color: #007aff;
  font-size: 28rpx;
}

.delete-btn {
  background-color: #ff3b30;
  color: #fff;
  border: none;
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
}

.delete-btn[disabled] {
  background-color: #ccc;
}
</style>