mp-ui-user/pages/user/index.vue

<template>
	<view>
		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#E96737">
			<view class="u-nav-slot" slot="left">
				<text>我的</text>
			</view>
		</u-navbar>
		<view class="user">
			<view class="user-ava">
				<view class="user-ava-img">
					<image :src="avatar" mode="aspectFill"></image>
				</view>
				<view class="user-ava-info">
					<view>{{ userInfo.nickName }}</view>
					<view>{{ userInfo.userName }}</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="flex account-action">
				<view>账户明细</view>
				<view class="flex account-action-icon" @click="toAccountDatail">
					<text>明细</text>
					<u-icon name="arrow-right" color="#E96737" size="16"></u-icon>
				</view>
			</view>
			<view class="flex account-info">
				<view class="account-info-amt">￥{{ $numberFormat(info.money) }}</view>
				<button type="default" @click="toWithdraw">提现</button>
			</view>
			<view class="account-details">
				<view class="account-details-item">
					<text>冻结金额：</text>
					<text>￥{{ $numberFormat(info.frozenMoney) }}</text>
				</view>
			</view>
		</view>
		<view class="action">
			<u-cell-group :border="false">
				<u-cell icon="coupon" title="我的地址" :isLink="true" :url="'/pages/address/index'"></u-cell>
				<u-cell icon="order" title="我的订单" :isLink="true" :border="false" :url="'/pages/order/index'"></u-cell>
			</u-cell-group>
		</view>


		<view class="cancel">
			<u-cell icon="close-circle" title="注销登录" :isLink="true" :border="false" @click="logout"></u-cell>
		</view>
		
		<custom-tab-bar :activeValue="'user'" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	export default {
		components: {
			CustomTabBar,
		},
		data() {
			return {
				userInfo: {},
				avatar: '',
				certifyStatus: {},
				info: {},
				
			};
		},
		
		onShow() {
			
		},

		methods: {
			toAccountDatail() {
				uni.navigateTo({
					url: '/pages/account/detail'
				})
			},

			toWithdraw() {
				uni.navigateTo({
					url: '/pages/account/withdraw'
				})
			},

			logout() {
				uni.showModal({
					title: '注销登录',
					content: '确定要注销登录吗？',
					success(res) {
						if (res.confirm) {
							uni.clearStorage({
								success: () => {
									wx.reLaunch({
										url: '/pages/login/entry',
									})
								}
							})
						}
					}
				})
			},
		},

		created() {
			this.userInfo = getApp().globalData.userInfo
			this.avatar = env.filePublic + getApp().globalData.userInfo.avatar
			console.log(getApp().globalData);
		},

	}
</script>

<style lang="scss" scoped>
	/deep/ .u-cell__body {
		padding: 20rpx 0;
	}
</style>

<style lang="scss" scoped>
	.u-nav-slot text {
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.user {
		display: flex;
		align-items: center;
		height: 340rpx;
		padding: 0 36rpx;
		background-color: $uni-bg-color;

		&-ava {
			display: flex;
			height: 144rpx;
			margin-top: -30rpx;

			&-img {
				width: 144rpx;
				height: 144rpx;
				border-radius: 150rpx;
				background-color: #FFF;
				border: 3rpx solid #FFF;
				margin-bottom: 32rpx;
				box-shadow: 0 0 24rpx #FFFFFF32;
				overflow: hidden;

				image {
					width: 144rpx;
					height: 144rpx;
				}
			}

			&-info {
				flex: 1;
				padding: 0 32rpx;
				color: #FFF;
				height: 144rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				view:nth-child(1) {
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.account {
		margin: 0 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: -60rpx;
		margin-bottom: 20rpx;

		&-action {
			justify-content: space-between;
			margin-bottom: 40rpx;

			&-icon {
				text {
					color: $uni-text-color;
					margin-right: 10rpx;
					font-size: 28rpx;
				}
			}
		}

		&-info {
			justify-content: space-between;
			margin-bottom: 30rpx;

			&-amt {
				font-size: 40rpx;
				font-weight: bold;
			}

			button {
				width: 144rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				border-radius: 30rpx;
				background-color: rgba(235, 112, 9, 100);
				color: rgba(255, 255, 255, 100);
				margin: 0;
			}
		}

		&-details {
			display: flex;
			font-size: 28rpx;

			&-item {
				margin-right: 40rpx;
			}
		}
	}

	.action {
		margin: 0 20rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.cancel {
		margin: 0 20rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>