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

<template>
	<view class="container">
		<view class="top">
			<uni-notice-bar show-get-more show-icon more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
				@getmore="getMore" />
		</view>
		<view class="my-message">
			<view class="left">
				<image :src="userInfo.img" mode=""></image>
			</view>
			<view class="right">
				{{userInfo.username}}
			</view>
		</view>
		<view class="middle">
			<uni-section title="我的资金" type="line" padding>
				<uni-group mode="card">
					<view>啦啦啦</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" />
								<text class="text">{{item.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-group>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					url: '/pages/userInfo/about/about',
					title: '关于节点',
					img: ''
				},{
					url: '/pages/userInfo/contact/contact',
					title: '联系我们',
					img: ''
				},{
					url: '/pages/userInfo/extends/extends',
					title: '邀请他人',
					img: ''
				},{
					url: '/pages/userInfo/inviteLog/inviteLog',
					title: '邀请记录',
					img: ''
				},{
					url: '/pages/userInfo/notice/notice',
					title: '通知公告',
					img: ''
				},{
					url: '/pages/userInfo/withdraw/withdraw',
					title: '提现记录',
					img: ''
				}],
				pageUrl: ''
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				this.pageUrl = this.list[index].url
				console.log('this.pageUrl',this.pageUrl)
				/** 跳转指定页面*/
				uni.navigateTo({
					url: this.pageUrl
				});
			},
		},
	}
</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;
	}
</style>