bnyer-cloud-hub/pages/userInfo/userInfo.vue

<template>
	<view class="container">
		<view class="top">
		</view>
		<view class="my-message">
			<view class="left">
				<image :src="userInfo.img" mode=""></image>
			</view>
			<view class="right">
				{{userInfo.name}}
			</view>
		</view>
		<view class="middle">
			<uni-section title="我的数据" type="line" padding>
				<uni-group mode="card">
					<view>粉丝数 {{creatorFansLikeInfo.fansNum}} </view>
					<view>点赞数 {{creatorFansLikeInfo.likeNum}}</view>
					<view>收藏数 {{creatorFansLikeInfo.collectNum}} </view>
				</uni-group>
			</uni-section>
		</view>
		<view class="foot">
			<uni-section title="更多服务" type="line">
				<uni-group mode="card">
					<uni-grid :column="3" @change="change" :showBorder="false" :square="true">
						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box" style="background-color: #fff;">
								<!-- <uni-icons type="image" :size="30" color="#777" /> -->
								<image :src="item.img" class="listIconImage" mode="aspectFill" />
								<text class="text">{{item.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-group>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {
		getCreatorInfoFansLike
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				list: [{
					url: '/pages-userInfo/about/about',
					title: '常见问题',
					img: '/static/iconAbout.png'
				}, {
					url: '/pages-userInfo/contact/contact',
					title: '联系我们',
					img: '/static/iconContactUs.png'
				}, {
					url: '/pages-userInfo/extends/extends',
					title: '邀请他人',
					img: '/static/iconInvite.png'
				},  {
					url: '/pages-userInfo/notice/notice',
					title: '通知公告',
					img: '/static/iconNotice.png'
				}, {
					url: '/pages-userInfo/withdraw/withdrawIndex',
					title: '提现记录',
					img: '/static/iconWithdraw.png'
				},{
					url: '/pages-userInfo/setting/setting',
					title: '系统设置',
					img: '/static/iconInviteLog.png'
				}],
				pageUrl: '',
				userInfo: {},
				creatorFansLikeInfo: {}
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			//获取粉丝李欢收藏数量
			this.getCreatorInfoFansLike();
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.pageUrl = this.list[index].url
				console.log('this.pageUrl', this.pageUrl)
				/** 跳转指定页面*/
				uni.navigateTo({
					url: this.pageUrl
				});
			},
			
			//获取粉丝喜欢收藏数量
			
			async getCreatorInfoFansLike() {
				let that = this;
				const res = await getCreatorInfoFansLike(that.userInfo.id)
				console.log('res', res)
				if (res.data.code === 200) {
					that.creatorFansLikeInfo = res.data.data
					console.log('creatorFansLikeInfo', that.creatorFansLikeInfo)
				} else {
					uni.showModal({
						content: '获取粉丝喜欢收藏数量数据加载失败！',
						showCancel: false
					});
				}
			},
		},
	}
</script>

<style lang="scss">
	.container {
		font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
	}

	.my-message {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;

		.left {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;

			>image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.right {
			font-size: 12px;
		}
	}


	// .container {
	// 	.top {
	// 		width: 100vw;

	// 		image {
	// 			width: 100vw;
	// 			height: 400rpx;
	// 		}

	// 		.uni-searchbar {
	// 			border: 1px solid #11A8FD;
	// 			margin: 0 40rpx;
	// 			border-radius: 16rpx;
	// 			padding: 0;

	// 			.uni-searchbar__box {
	// 				padding: 0;
	// 				border-radius: 16rpx !important;
	// 			}
	// 		}

	// 		>text {
	// 			font-weight: bold;
	// 			font-size: 14px;
	// 			display: block;
	// 			text-align: center;
	// 			padding-top: 40rpx;
	// 			padding-bottom: 20rpx;
	// 		}

	// 		.user-list {
	// 			display: flex;
	// 			justify-content: flex-start;
	// 			align-items: center;
	// 			overflow-x: auto;

	// 			.user-list-box {
	// 				width: 140rpx;
	// 				padding: 20rpx;
	// 				text-align: center;

	// 				image {
	// 					width: 100rpx;
	// 					height: 100rpx;
	// 					border-radius: 100rpx;
	// 				}

	// 				text {
	// 					font-size: 24rpx;
	// 					color: #1E1E1E;
	// 					text-align: center;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.middle {
	// 		text-align: center;
	// 		height: calc(100vh - 248rpx);
	// 		padding-top: 40rpx;

	// 		text {
	// 			font-weight: bold;
	// 			font-size: 14px;
	// 			display: block;
	// 		}

	// 		image {
	// 			width: 40rpx;
	// 			height: 40rpx;
	// 		}
	// 	}
	// }
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.listIconImage{
		width:2rem;
		height:2rem;
	}
</style>