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>
		<view class="bottom">
			<image :src="item.imgUrl" mode="" v-for="(item,index) in creatorInfo.typeImgList[index].imgList" :key="index"
				:style="'width:'+imgWidth+';height:'+imgHeight" @click="targetDetail(item)"></image>
		</view>
	</view>
</template>

<script>
	import {
		creatorImgsDetails
	} from '@/api/index.js'
	export default {
		data() {
			return {
				creatorInfo: {},
				current: 0,
				arrList: [],
				imgWidth: 0, // 图片宽
				imgHeight: 0, // 图片高
			}
		},
		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 => {
					console.log('getStorage', res)
					this.creatorInfo = res.data
					this.current = res.data.typeImgList[0].typeId
					this.arrList = res.data.typeImgList[0].typeName
				}
			})
		},
		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) {
				console.log('点击', e)
			},
			// 前往详情页
			targetDetail(item) {
				console.log('item',item)
				if (item.id) {
					uni.setStorage({
						key: 'detailId',
						data: item.id,
						success() {
							uni.navigateTo({
								url: './imgDetail'
							})
						}
					})
				}
			}
		}
	}
</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;
					}
				}
			}

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