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

<template>
	<view class="creatorDetail">
		<view class="avatar-box">
			<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 open-type="share" size="mini" type="default" style="background-color:#11A8FD;outline：none;">
						<image src="../../static/img/share.svg" mode=""></image>
					</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 class="middle">
			<uni-segmented-control :current="current" :values="arrList" @clickItem="onClickItem" styleType="text"
				activeColor="#11A8FD"></uni-segmented-control>
		</view>
		<swiper class="swiper" :circular="false" :current="current" :indicator-dots="false" :autoplay="false"
			@change="changeItem" :duration="500">
			<swiper-item v-for="(item,index) in imgList" :key="item"
				:current-item-id="item">
				<view class="swiper-item bottom">
					<image :src="item.imgUrl" mode="":style="'width:'+imgWidth+';height:'+imgHeight" @click="targetDetail(item)"></image>
				</view>
			</swiper-item>
		</swiper>

	</view>
	</view>
</template>

<script>
	import {
		getTypeImgsPage
	} from '@/api/creator.js'
	export default {
		data() {
			return {
				creatorInfo: {},
				current: 0,
				typeId: 0,
				typeIdList:[],
				arrList: [],
				imgList:[],
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高
				pageNum: 1,
				pageSize: 10,
			}
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					this.imgWidth = res.windowWidth - 60 + 'rpx'
					this.imgHeight = (res.windowWidth - 60) * 2 - 30 + 'rpx'
				}
			})
			uni.getStorage({
				key: 'creatorDetail',
				success: res => {
					this.creatorInfo = res.data
					console.log('getStorage', this.creatorInfo)
					this.creatorInfo.typeList.forEach(item => {
						this.arrList.push(item.typeName)
						this.typeIdList.push(item.typeId)
					})
					console.log('arrList', this.arrList)
					console.log('this.typeIdList', this.typeIdList)
				}
			})
		},
		onLoad(){
			this.getTypeImgsPage()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res)
			}
			return {
				title: `来看看艺术家${this.creatorInfo.scanCode}精心准备的图片吧~`,
				path: `/pages/creator/imgDetail?id=${this.creatorInfo.id}`
			}
			uni.showToast({
				title: '分享成功',
				icon: 'none'
			})
		},
		methods: {
			// 标签栏点击
			onClickItem(e) {
				this.current = e.currentIndex
				this.typeId = this.typeIdList[e.currentIndex] 
				
				const params = {
					scanCode: this.creatorInfo.scanCode,
					typeId: this.typeId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				getTypeImgsPage(params).then(response => {
					if(response.data.code === 200){
						this.imgList = response.data.rows
						console.log('this.imgList',this.imgList)
					}
				});
			},
			// 内容滑动
			changeItem(e) {
				// console.log('点击', e.detail)
				// this.current = e.detail.current
			},
			// 前往详情页
			targetDetail(item) {
				console.log('item', item)
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: './imgDetail'
							})
						}
					})
				}
			},
			
			//获取图片分页
			getTypeImgsPage() {
				const params = {
					scanCode: this.creatorInfo.scanCode,
					typeId: this.typeIdList[0],
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				console.log('params',params)
				getTypeImgsPage(params).then(response =>{
				console.log('response',response)
				});
				
				// if (res.data.code === 200) {
				// 	this.imgList = response.data.rows
				// 	console.log('this.imgList',this.imgList)
				// } else {
				// 	uni.showModal({
				// 		content: '图片列表加载失败！',
				// 		showCancel: false
				// 	});
				// }
			}
			
		}
	}
</script>

<style lang="less">
	.creatorDetail {
		.avatar-box {
			padding: 20rpx 20rpx;
			background: #11A8FD;

			.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: 14px;
						color: #fff;
						margin-left: 20rpx;
					}
				}

				.avatar-right-box {
					image {
						width: 40rpx;
						height: 40rpx;
					}

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

			.avatar-box-text {
				color: #fff;
				font-size: 12px;
			}

			.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 {
						width: 120rpx;

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

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

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

		.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>