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

<template>
	<view class="creator">
		<view>
			<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="linkTo(item)" :src="item.bannerImg"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="list">
			<view v-for="(item, index) in creatorImgList" :key="index" class="list-item" @click="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"></image>
						<view class="ml-10">
							<view class="">
								<text class="">{{item.scanCode}}</text>
							</view>
							<view class="fb-d-r fb-j-sb">
								<view class="imgLength-box">
									<image class="img-icon" src="../../static/imgLength.png" mode=""></image>
									<text>{{item.imgTotalNum}}</text>
								</view>
								<view class="imgLength-box">
									<image class="img-icon" src="../../static/collectLength.png" mode=""></image>
									<text>{{item.imgCollectionNum}}</text>
								</view>
								<view class="imgLength-box">
									<image class="img-icon" src="../../static/likeLength.png" mode=""></image>
									<text>{{item.imgLikeNum}}</text>
								</view>
							</view>
						</view>
					</view>
					<image class="jiantou" src="../../static/jiantou-right.png" mode=""></image>
				</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"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBannerList,
		getCreatorImgsPage
	} from '@/api/creator.js'
	import {
		creatorImgsDetails
	} from '@/api/index.js'
	export default {
		data() {
			return {
				banner: [],
				creatorImgList: [],
				autoplay: true,
				interval: 2000,
				duration: 1000,
				indicatorDots: true,
				pageNum: 1,
				pageSize: 2,
				creatorInfo: {}
			}
		},
		onLoad() {
			this.getBanner();
			this.getCreatorImgsPage();
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.getBanner();
			this.pageNum = 1
			this.creatorImgList = []
			this.getCreatorImgsPage();
			uni.stopPullDownRefresh()
		},

		// 上划加载更多
		onReachBottom() {
			if (this.creatorImgList.length > 1) {
				this.pageNum += 1
				this.getCreatorImgsPage()
			}
		},
		methods: {
			// 跳转艺术家详情页
			toCreatorDetail(item){
				if (item) {
					const params = {
						scanCode: item.scanCode
					}
					creatorImgsDetails(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
						});
					}
				});
				} 
			},
			// 跳转图片详情页
			linkTo(item) {
				console.log(item)
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							console.log(111111)
							uni.navigateTo({
								url: '../creator/imgDetail'
							})
						}
					})
				}
			},

			getCreatorDetails(item) {
				//TODO 点击跳转对应艺术家详情页面
				console.log(item);
			},

			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() {
				const res = await getCreatorImgsPage({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if (res.data.code === 200) {
					this.creatorImgList.push(...res.data.rows)
					console.log('creatorImgList', this.creatorImgList)
				} else {
					uni.showModal({
						content: '用户图片列表加载失败！',
						showCancel: false
					});
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.creator {
		padding: 20rpx;
		background-color: #ffffff;
		font-size: 22rpx;

		.list {
			margin-top: 20rpx;

			&-item {
				padding: 5rpx;
				margin-top: 20rpx;
			}
			.list-top{
				margin-bottom: 20rpx;
			}
			.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;
						.img-icon {
							width: 30rpx;
							height: 30rpx;
						}
					}

				}
			}

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

			.img-box {
				margin-top: 10rpx;
				display: flex;
				justify-content: flex-start;
				view {
					width: 32%;
					image {
						border-radius: 8rpx;
						width: calc(100% - 12rpx);
					}
				}
			}
		}
	}

	.swiper-box {
		height: 250rpx;
		// border: 2rpx solid #18BC37;
		border-radius: 8rpx;
		overflow: hidden;

	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	.img {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.head {
		// flex: 1;
		// display: flex;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		// justify-content: space-between;
		// align-items: flex-end;
	}

	.userName {

		margin-left: 10rpx;

	}

	.threeImg {
		height: 300rpx;
		width: 200rpx;
	}
</style>