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

<template>
	<view class="creatorDetail">
		<view class="avatar-box">
      <view class="dim-div"></view>
      <view class="avatar-content">
        <view class="avatar-top">
          <view class="avatar-left-box">
            <image :src="creatorInfo.img" mode=""></image>
            <text>{{creatorInfo.scanCode}}</text>
          </view>
          <view class="avatar-right-box">
            <button class="" open-type="share" size="mini" type="default" style="background: none; outline: none;">
              <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="'icon-fenxiang'" size="20" :color="'#FFFFFF'"></uni-icons>
            </button>
          </view>
        </view>
        <view class="avatar-box-text">
          <text>{{creatorInfo.intro}}</text>
        </view>
        <view class="avatar-box-tag">
          <view class="avatar-box-tag-left">
            <view class="tag-left-box">
              <text>{{creatorInfo.imgTotalNum}}</text>
              <text>图片</text>
            </view>
            <view class="tag-left-box">
              <text>{{creatorInfo.imgCollectionNum}}</text>
              <text>收藏</text>
            </view>
            <view class="tag-left-box">
              <text>{{creatorInfo.imgLikeNum}}</text>
              <text>喜欢</text>
            </view>
          </view>
          <view class="avatar-box-tag-right">
          </view>
        </view>
      </view>
		</view>
		<view class="middle">
			<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
				activeColor="#1a94bc"></uni-segmented-control>
		</view>
    <waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList>
    <!-- 显示加载中或者全部加载完成 -->
    <view>
      <uni-load-more :status="loadStatus"></uni-load-more>
    </view>
    <toTop :toTopFlag="toTopFlag" :toTop="toTop"></toTop>
	</view>
</template>

<script>
	import {
		getTypeImgsPage
	} from '@/api/creator.js'
  import waterfallList from '@/components/waterfall-list/waterfall-list.vue'
  import toTop from '@/components/toTop/toTop.vue'
	export default {
    components: {
      waterfallList,
      toTop
    },
		data() {
			return {
				creatorInfo: {},
				current: 0,
				typeId: 1,
				typeIdList: [],
				arrList: [],
				imgList: [],
				pageNum: 1,
				pageSize: 10,
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中,
        toTopFlag: false
			}
		},
		created() {
			uni.getStorage({
				key: 'creatorDetail',
				success: res => {
				  let that = this;
          that.pageNum = 1;
          that.creatorInfo = res.data
          that.creatorInfo.typeList.forEach(item => {
            that.arrList.push(item.typeName)
            that.typeIdList.push(item.typeId)
					})
          that.typeId = that.typeIdList[0]
          that.$refs.waterfallRef && that.$refs.waterfallRef.init();
          that.getTypeImgsPage(that.typeId)
				}
			})
		},
		// 上划加载更多
		onReachBottom() {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getTypeImgsPage(this.typeId);
        }
      }
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res)
			}
      uni.showToast({
        title: '分享成功',
        icon: 'none'
      })
			return {
				title: `来看看艺术家${this.creatorInfo.scanCode}精心准备的图片吧~`,
				path: `/pages/creator/imgDetail?id=${this.creatorInfo.id}`
			}
		},
		watch: {
			current(n, o) {
			  let that = this
        that.typeId = that.typeIdList[n]
        that.pageNum = 1
        that.$refs.waterfallRef && that.$refs.waterfallRef.init();
				this.getTypeImgsPage(that.typeId)
        immediate: true
			}
		},
    onPageScroll(e){
      // 监听页面滚动
      this.toTopFlag = e.scrollTop > 200; //根据距离顶部距离是否显示回到顶部按钮
    },
		methods: {
			// 标签栏点击
			onClickItem(e) {
				this.current = e.currentIndex
			},
			// 前往详情页
			targetDetail(item) {
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: './imgDetail'
							})
						}
					})
				}
			},

			//获取图片分页
			async getTypeImgsPage(typeId) {
			  let that = this
				that.loadStatus = 'loading';
				const params = {
					scanCode: that.creatorInfo.scanCode,
					typeId: typeId,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
				}
				const res = await getTypeImgsPage(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.showToast({
						title: res.data.msg,
						icon: 'none'
					})
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
				}
			},
      toTop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 100,
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
	.creatorDetail {
		.avatar-box {
      height: 20vh;
      background-image: linear-gradient(-225deg, #007adf 0%, #00ecbc 100%);
      position: relative;

      .dim-div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* 主要内容 */
        background: rgba(26, 148, 188, .1);
        /* 模糊大小就是靠的blur这个函数中的数值大小 */
        backdrop-filter: blur(25rpx);
      }

      .avatar-content {
        width: 100%;
        height: 100%;
        padding: 20px;
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
      }

			.avatar-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;

				.avatar-left-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;
					}

					text {
						font-size: 26rpx;
						color: $uni-white;
						margin-left: 20rpx;
            font-weight: 600;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
					}
				}

				.avatar-right-box {

					button::after {
						border: none;
					}
				}
			}

			.avatar-box-text {
				color: $uni-white;
				font-size: 24rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
			}

			.avatar-box-tag {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;

				.avatar-box-tag-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tag-left-box {
            margin-right: 40rpx;
            display: flex;

						text {
							display: block;
							color: #fff;
							font-size: 12px;
						}

						text:last-child {
							margin-left: 8rpx;
						}
					}
				}
			}
		}

		.middle {
      margin-bottom: 20rpx;

			::v-deep .segmented-control {
				border-radius: 8rpx 8rpx 0 0;
				background-color: rgba(17, 168, 253, 0.1);
			}

      ::v-deep .segmented-control__item {

        view {
          display: flex;
          align-items: center;
        }

      }


		}

		.bottom {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 20px;

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