bnyer-cloud-tiktok/pages/atlas/atlasList.vue

<template>
	<view class="atlasList">
    <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
    <!-- 显示加载中或者全部加载完成 -->
    <view>
      <uni-load-more :status="loadStatus"></uni-load-more>
    </view>
	</view>
</template>

<script>
	import {
		imgLists,
		creatorDetails,
	} from '@/api/index.js'
	import {
		querySignImg,
		querySignImgBySignName
	} from '@/api/atlas.js'
  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
	export default {
    components: {
      waterfallList
    },
		data() {
			return {
				imgList: [], //图片列表
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高
				checkId: {},
				pageNum: 1,
				pageSize: 10,
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中
			}
		},
		created() {
      let that = this;
      that.pageNum = 1;
      that.$refs.waterfallRef && that.$refs.waterfallRef.init();
			if (uni.getStorageSync('atlas_detailId')) {
        that.checkId = uni.getStorageSync('atlas_detailId')

				uni.setNavigationBarTitle({
					title: that.checkId.signName
				});
        that.getImgList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.imgList = []
			this.getImgList()
			uni.stopPullDownRefresh()
		},
		// 上划加载更多
		onReachBottom() {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getImgList();
        }
      }
		},
		methods: {
			// 搜索
			search(res) {
				if (res.value) {
					console.log('search', res.value)
					this.goCreatorDetail(res.value)
				} else {
					uni.showToast({
						title: '请输入艺术家代号',
						icon: 'none',
					})
				}
			},
			// 前往艺术家空间
			async goCreatorDetail(scanCode) {
				if (scanCode) {
					const res = await creatorDetails({
						scanCode
					})
					console.log('creatorDetails', res)
					if (res && res.data.code === 200) {
						uni.setStorage({
							key: 'creatorDetail',
							data: res.data.data,
							success() {
								uni.navigateTo({
									url: '../creator/creatorDetail'
								})
							}
						})

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '搜索码不能为空',
						icon: 'none'
					})
				}
			},
			// 图片列表
			async getImgList() {
        let that = this;
        that.loadStatus = 'loading';
				if (that.checkId.type === 'click') {
					const res = await querySignImg({
						pageNum: that.pageNum,
						pageSize: that.pageSize,
						signId: that.checkId.signId,
						typeId: that.checkId.typeId
					})
					if (res && res.data.code === 200) {
            that.$refs.waterfallRef.addData(res.data.rows);
            if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
              that.isLoadMore = true
              that.loadStatus = 'noMore'
            }else{
              this.loadStatus = 'more';
              that.isLoadMore = false
            }
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
            that.isLoadMore = false
            if(that.page > 1){
              that.page -= 1
            }
					}
				} else if (that.checkId.type === 'search') {
					const params = {
						pageNum: that.pageNum,
						pageSize: that.pageSize,
						signName: that.checkId.signName
					}
					const res = await querySignImgBySignName(params)
					if (res && res.data.code === 200) {
            that.$refs.waterfallRef.addData(res.data.rows);
            if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
              that.isLoadMore = true
              that.loadStatus = 'noMore'
            }else{
              this.loadStatus = 'more';
              that.isLoadMore = false
            }
					} else {
						uni.showModal({
							content: res.data.msg,
							showCancel: false
						});
            that.isLoadMore = false
            if(that.page > 1){
              that.page -= 1
            }
					}
				}
			},
			// 前往详情页
			targetDetail(item) {
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: '../creator/imgDetail'
							})
						}
					})
				}
			},
			onload(e) {
				console.log("加载了广告");
			},
			onclose(e) {
				console.log("关闭了广告: " + e.detail);
			},
			onerror(e) {
				console.log("广告错误了: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			}
		},
	}
</script>

<style lang="scss">
	.atlasList {
		.uni-searchbar {
			border: 1px solid #11A8FD;
			border-radius: 16rpx;
			padding: 0;
			margin-left: 40rpx;
			margin-right: 40rpx;

			.uni-searchbar__box {
				padding: 0;
				border-radius: 16rpx !important;
			}
		}

		.atlasList-list {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: space-between;
			padding: 0 20px 20px 20px;

			.first-box {
				border-radius: 16rpx;
				font-size: 16px;
				margin-top: 40rpx;
				margin-left: 30rpx;
				color: #fff;
				line-height: 60rpx;
				text-align: center;
				height: 60rpx;
				background-color: #11A8FD;
				display: inline-block;
				vertical-align: top;
			}

			image {
				margin-top: 40rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>