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 userImgList" :key="index" class="list-item">
				<!-- 展示用户相关信息 -->
				<view class="fb-d-r fb-j-sb fb-a-c list-top">
					<view class="fb-d-r fb-a-c head-box" @click="toUserDetail(item)">
						<image class="head" :src="item.img"></image>
						<view class="ml-10">
							<view class="">
								<text class="">{{item.username}}</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>11111</text>
								</view>
								<view class="imgLength-box">
									<image class="img-icon" src="../../static/collectLength.png" mode=""></image>
									<text>11111</text>
								</view>
								<view class="imgLength-box">
									<image class="img-icon" src="../../static/likeLength.png" mode=""></image>
									<text>11111</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" @click="linkTo(pic)" :src="pic.imgUrl"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBannerList,
		getUserImgList
	} from '@/api/creator.js'
	export default {
		data() {
			return {
				banner: [],
				userImgList: [],
				autoplay: true,
				interval: 2000,
				duration: 1000,
				indicatorDots: true,

			}
		},
		onLoad() {
			this.getBanner();
			this.getUserImgList();
		},
		methods: {
			// 跳转用户详情页
			toUserDetail(item){
				if (item) {
					uni.setStorage({
						key: 'userDetail',
						data: item,
						success() {
							uni.redirectTo({
								url: '../creator/userDetail'
							})
						}
					})
				} 
			},
			// 跳转图片详情页
			linkTo(item) {
				console.log(item)
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							console.log(111111)
							uni.redirectTo({
								url: '../creator/imgDetail'
							})
						}
					})
				}
			},

			getUserDetails(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 getUserImgList() {
				const res = await getUserImgList()
				if (res.data.code === 200) {
					this.userImgList = res.data.data
					console.log('userListImg', this.userImgList)
				} 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>