t/components/image-grid/media-list.vue

<template>
  <scroll-view 
    class="container"
    scroll-y 
    :show-scrollbar="false"
    @scrolltolower="loadMore"
  >
	<view class="" v-if="dataType === 'template'">
		<view class="list-container">
		  <view 
		    v-for="(item, index) in list"
		    :key="index"
		    class="list-item"
		  >
		  <view class="" v-if="item.src !== 'not_image'">
		  	<view @click="select(item._id)"
		  	:class="{
			'select-image': selectValue === item._id,
			'item-image': true
				}">
				<cloud-image
					:src="item.src"
					mode="scaleToFill"
					width="33vw"
					height="100%"
				>
				</cloud-image>
		  	</view>
			<text class="item-text">{{ item.value }}</text>
		  </view>
		  <view class="" v-else>
		  	<view
			@click="select(item._id)"
			:class="{
			'select-image': selectValue === item._id,
			'item-image': true
				}">
		  		<view style="width: 33vw;height:100%;background-color: aqua;">
		  			
		  		</view>
		  	</view>
			<text class="item-text">{{ item.value }}</text>
		</view>
		
		  </view>
		</view>
	</view>
	<view class="" v-else-if="dataType === 'music'">
		<view class="list-container">
		  <view 
		    v-for="(item, index) in list"
		    :key="index"
		    class="list-item"
		  >
		  
		  <view class="center-con" v-if="item.src !== 'not_music'">
		  	<view @click="select(item._id)"
		  	:class="{
			'select-image': selectValue === item._id,
			'music-item': true
				}">
				<cloud-image
					:src="item.src"
					mode="scaleToFill"
					width="100%"
					height="100%"
				>
				</cloud-image>
		  	</view>
			<text class="item-text">{{ item.value }}</text>
		  </view>
		  <view class="center-con" v-else>
		  	<view
			:class="{
			'select-image': selectValue === item._id,
			'music-item': true
				}">
		  		<view style="width: 100%;height:100%;background-color: aqua;">
		  			
		  		</view>
		  	</view>
			<text class="item-text">{{ item.value }}</text>
		  </view>
		
		  </view>
		</view>
	
    </view>
    
    <!-- 加载状态提示 -->
    <view class="loading-tips">
      <text v-if="loading">正在加载...</text>
      <text v-if="noMore">没有更多了~</text>
    </view>
  </scroll-view>
</template>

<script>
	
	const db = uniCloud.database();
import cloudImage from "@/components/cloud-image.vue";
export default {
	components: {
		cloudImage,
	},
  props: {
    // 初始数据（可选）
    dataType: {
      type: String,
      default: ""
    },
    // 每页数量
    pageSize: {
      type: Number,
      default: 10
    },
	currentTemplate: {
		type: String,
		default: ""
	}
	
  },
  data() {
    return {
      list: [

	  ],
	  selectValue: "",
      page: 12,
      loading: false,
      noMore: false,
    };
  },
  mounted() {
    if(this.list.length === 0) {
		if (this.dataType === "template") {
			this.list = [
			  {
				value: "不使用模板",
				_id: "",
				src: "not_image"
			  },
			]
		} else if(this.dataType === "music") {
			this.list = [
				{
					value: "不播放音乐",
					_id: "",
					src: "not_music"
				}
			]
		} else if(this.dataType === "font") {
			
		}
		this.loadData();
    }
  },
  methods: {
	select(id) {
		this.selectValue = id;
		this.$emit('update', this.selectValue);
	},
    async loadData() {
      if (this.loading || this.noMore) return;
      
      this.loading = true;
      
	  if (this.dataType === "template") {
		  console.log(this.list)
		if (this.list.length === 1) {
			let res = await db.collection("cms-temp").get();
			console.log(res.result.data)
			let lst = [];
			for (let i = 0 ; i < res.result.data.length ; i++ ) {
				lst.push({
					value:res.result.data[i].temptele_name,
					_id: res.result.data[i]._id,
					src: res.result.data[i].temptele_src
				})
			}
			this.list.push(...lst);
			await this.select(this.list[0]._id)
			this.noMore = true
		}

	  } else if (this.dataType === "music") {
			await this.select(this.list[0]._id)
			this.noMore = true
	  } else if (this.dataType === "font" ) {
			
	  } else {
		  this.noMore = true
	  }
    },
    loadMore() {
      if (!this.noMore) {
        this.loadData();
      }
    },

    previewImage(current) {
      uni.previewImage({
        current,
        urls: this.list.map(item => item.image)
      });
    }
  }
};
</script>

<style scoped>
.container {
  box-sizing: border-box;
}

.list-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
}

.list-item {
  width: 33%;
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-image {
  width: 100%;
  height: 250rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  padding: 10rpx;
}

.item-text {
  display: block;
  padding: 20rpx 10rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
  text-align: center;
}

.loading-tips {
  text-align: center;
  padding: 30rpx;
  font-size: 24rpx;
  color: #999;
}

.select-image {
	box-sizing: border-box;
	border: 10rpx solid #3399ff;
}

.music-item {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
</style>