bnyer-cloud-tiktok/pages/creator/creator.vue

<template>
	<view class="creator">
		<view closs="top">
			<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration"
				:indicator-dots="indicatorDots">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image class="img" @click="$noMultipleClicks(linkTo,item)" :src="item.bannerImg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="list">
			<view v-for="(item, index) in creatorImgList" :key="index" class="list-item" @click="$noMultipleClicks(toCreatorDetail,item)">
				<!-- 展示用户相关信息 -->
				<view class="fb-d-r fb-j-sb fb-a-c list-top">
					<view class="fb-d-r fb-a-c head-box">
						<image class="head" :src="item.img" mode="aspectFill"></image>
						<view class="ml-10">
							<view class="userName">
								<text class="">{{item.scanCode}}</text>
							</view>
							<view class="fb-d-r fb-j-sb">
								<view class="imgLength-box">
                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-tupian" size="12" :color="iconColor" ></uni-icons>
									<text>{{item.imgTotalNum}}</text>
								</view>
								<view class="imgLength-box">
                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-shoucang" size="12" :color="iconColor" ></uni-icons>
									<text>{{item.imgCollectionNum}}</text>
								</view>
								<view class="imgLength-box">
                  <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-xihuan" size="12" :color="iconColor" ></uni-icons>
									<text>{{item.imgLikeNum}}</text>
								</view>
							</view>
						</view>
					</view>
          <view>
            <uni-icons class="listIconImage" custom-prefix="iconfont" type="icon-gengduo" size="20" :color="iconColor" ></uni-icons>
          </view>
				</view>
				<!-- 	展示用户对应三张图 -->
				<view class="fb-d-r fb-j-sb img-box">
					<view v-for="(pic,param) in item.imgList" :key="param">
						<image class="threeImg" :src="pic.imgUrl" mode="aspectFill"></image>
					</view>
				</view>
			</view>
      <!-- 显示加载中或者全部加载完成 -->
      <view>
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		getBannerList,
		getCreatorImgsPage
	} from '@/api/creator.js'
	import {
		creatorDetails
	} from '@/api/index.js'
	export default {
		data() {
			return {
        iconColor: '#1a94bc',
				banner: [],
				creatorImgList: [],
				autoplay: true,
				interval: 2000,
				duration: 1000,
				indicatorDots: false,
				pageNum: 1,
				pageSize: 10,
				creatorInfo: {},
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中
		noClick:true, //防止重复提交
			}
		},
		onLoad() {
			this.getBanner();
			this.getCreatorImgsPage();
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.getBanner();
			this.pageNum = 1
			this.creatorImgList = []
			this.getCreatorImgsPage();
			uni.stopPullDownRefresh()
		},

		// 上划加载更多
		onReachBottom() {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getCreatorImgsPage();
        }
      }
		},
		methods: {
			// 跳转艺术家详情页
			toCreatorDetail(item){
				if (item) {
					const params = {
						scanCode: item.scanCode
					}
					creatorDetails(params).then(response => {
						if(response.data.code === 200){
							this.creatorInfo = response.data.data
							//console.log("this.creatorInfo结果",this.creatorInfo);
							uni.setStorage({
								key: 'creatorDetail',
								data: this.creatorInfo,
								success() {
									uni.navigateTo({
										url: '../creator/creatorDetail'
									})
								}
							})
						}else {
							uni.showModal({
							content: '艺术家详情加载失败！',
							showCancel: false
						});
					}
				});
				}
			},
			// 跳转banner详情页
			linkTo(item) {
				//console.log(item)
				if (item.id) {
					uni.navigateTo({
						url: '../creator/banner'
					});
				}
			},

			async getBanner() {
				const res = await getBannerList()
				if (res.data.code === 200) {
					this.banner = res.data.data
				} else {
					uni.showModal({
						content: 'banner加载失败！',
						showCancel: false
					});
				}
			},
			//获取艺术家图片分页
			async getCreatorImgsPage() {
			  let that = this;
        that.loadStatus = 'loading';
				const res = await getCreatorImgsPage({
					pageNum: that.pageNum,
					pageSize: that.pageSize
				})
				if (res.data.code === 200) {
					this.creatorImgList.push(...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: '用户图片列表加载失败！',
						showCancel: false
					});
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
				}
			}

		}
	}
</script>

<style scoped lang="scss">
.swiper-box {
  height: 25vh;
  background-color: $uni-bg-base-color;
}
.swiper-item {
  background-color: $uni-bg-base-color;
  width: 100%;
  height: 100%;

  ::v-deep image {
    width: 100%;
    height: 100%;
  }

}
	.creator {
		padding: 20rpx;
		font-size: 22rpx;

    .top {

    }

		.list {
			margin-top: 20rpx;

			&-item {
				padding: 20rpx;
				margin-top: 20rpx;
        background-color: $uni-white;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.2);
			}
			.list-top{
				margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid $uni-border-2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
			}
			.head-box {
				flex: .8;

				&>.ml-10 {
					flex: 1;
					height: 40px;
					padding: 4rpx 0;
					display: flex;
					flex-direction:column;
					justify-content: space-between;
					.imgLength-box {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.listIconImage {
              margin-right: 10rpx;
						}
					}

				}
			}

			.jiantou {
				width: 40rpx;
				height: 40rpx;
			}

			.img-box {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

        .threeImg {
          width: 100%;
          height: 100%;
        }

				view {
          width: 220rpx;
          height: 300rpx;
          border-radius: 10rpx;
          overflow: hidden;
				}
			}
		}
	}


	.img {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.userName {
    font-size: 24rpx;
    font-weight: 600;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
	}

/* ==== 弹性盒模型布局 ==== */
.fb-d-r { display: flex; flex-direction: row; }
.fb-d-c { display: flex; flex-direction: column;}
.fb-w { flex-wrap: wrap; }
.fb-j-a { justify-content: flex-start; }
.fb-j-e { justify-content: flex-end; }
.fb-j-c { justify-content: center; }
.fb-j-sb { justify-content: space-between; }
.fb-j-sa { justify-content: space-around; }
.fb-a-a { align-items: flex-start; }
.fb-a-e { align-items: flex-end; }
.fb-a-c { align-items: center; }
.fb-a-sb { align-items: space-between; }
.fb-a-sa { align-items: space-around; }

/* ==== 外边距 ==== */
.ml-10 {
  margin-left: 10rpx;
}
.mt-10 {
  margin-top: 10rpx;
}

</style>