uniAppXCX/pages/mine/mine.vue

<template>
	<view class="container">
		<view class="user">
			<view class="userInfo">
				<image @click="toUserInfo" class="userPhoto" :src="userInfo.avatarUrl"></image>
				<uni-badge class="message" :text="massageNum" absolute="rightTop" size="small" :max-num="99" :offset="[4, 4]">
					<image 
						class="icon" 
						src="https://mall.rongtongh.cn/storage/img/mine/massage.png" 
						mode="widthFix" 
						@click="$navigateTo('/pages/message/message')"
					></image>
				</uni-badge>
				<view class="info">
					<view class="name" v-if="hasLogin">
						{{userInfo.nickName || ''}}
					</view>
					<view class="loginText" @click="toLogin" v-else>
						点击登录
					</view>
					<view class="id">
						ID: <span v-if="hasLogin">{{userId || ''}}</span>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="box">
					<view class="value" style="color: #FF2C43;">
						{{ userInfoDetail.integral || 0}}
					</view>
					<view class="label">
						积分
					</view>
				</view>
				<view class="box" @click="$navigateTo('/pages/coupon/coupon')">
					<view class="value">
						{{ userInfoDetail.couponNum || 0}}
					</view>
					<view class="label">
						优惠卷
					</view>
				</view>
			</view>
		</view>
		<view class="menus">
			<view class="title">
				<image src="https://mall.rongtongh.cn/storage/img/mine/title.png" mode=""></image>
			</view>
			<view class="menuList">
				<view class="menu" @click="pageTo('/pages/addressManage/addressManage')">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu1.png"></image>
					<span>地址管理</span>
				</view>
				<view class="menu">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu2.png"></image>
					<span>消费记录</span>
				</view>
				<view class="menu">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu3.png"></image>
					<span>加群交流</span>
				</view>
				<view class="menu">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu4.png"></image>
					<span>游戏规则</span>
				</view>
				<view class="menu">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu5.png"></image>
					<span>用户协议</span>
				</view>
				<view class="menu">
					<image src="https://mall.rongtongh.cn/storage/img/mine/menu6.png"></image>
					<span>联系客服</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoApi
	} from "@/api/user.js"
	import {
		messageListApi,
	} from "@/api/message.js"
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: null,
				userId: '-',
				hasLogin: false,
				userInfoDetail: {},
				massageNum: 0
			}
		},
		onShow() {
			this.userInfo = wx.getStorageSync('userInfo');
			this.userId = wx.getStorageSync('userId');
			//获取用户的登录信息
			if (wx.getStorageSync('token')) {
				this.hasLogin = true
				getApp().globalData.hasLogin = true
				// 获取用户信息详情
				this.getUserInfo()
				this.getMassage()
			} else {
				this.hasLogin = false
				getApp().globalData.hasLogin = false
				this.userInfoDetail = {}
			}
		},
		methods: {
			getMassage() {
				let params = {
					page: 1,
					limit: 1,
					status: 0,
				}
				messageListApi(params).then(res => {
					this.massageNum = res.data.total
				})
			},
			toUserInfo() {
				this.$navigateTo('/pages/user/user')
				if (this.isLogin) {
					this.$navigateTo('/pages/user/user')
				}
			},
			getUserInfo() {
				userInfoApi().then(res => {
					console.log(res, '详细用户信息')
					this.userInfoDetail = res.data
				})
			},
			toLogin() {
				wx.navigateTo({url: '/pages/login/login'})
			},
			pageTo(url) {
				wx.navigateTo({url: url})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #9EC8F9;
		padding: 0 10px;
		overflow: scroll;
	}

	.user {
		background: #fff;
		border-radius: 10px;
		padding: 0 10px;
		position: relative;
		margin-top: 10vw;

		.userInfo {
			display: flex;
			
			.message {
				position: absolute;
				right: 10px;
				top: 8px;
				.icon {
					width: 30px;
				}
			}
			.userPhoto {
				width: 74px;
				height: 74px;
				border-radius: 50%;
				border: solid 3px #6BAFFF;
				position: relative;
				top: -20px;
				background: #dedede;
			}

			.info {
				padding: 10px;

				.name {
					font-weight: 600;
				}

				.loginText {
					font-weight: 600;
				}

				.id {
					margin-top: 5px;
					font-size: 13px;
				}
			}
		}

		.row {
			display: flex;
			justify-content: space-around;

			.box {
				display: flex;
				flex-direction: column;
				text-align: center;
				padding: 20px 10px;

				.label {
					margin-top: 5px;
					font-size: 15px;
				}

				.value {
					font-size: 20px;
					font-weight: 600;
				}
			}
		}
	}

	.menus {
		margin-top: 20px;
		background: #fff;
		border-radius: 10px;

		// padding: 0 10px;
		.title {
			position: relative;
			left: -10px;
			top: -10px;
			width: calc(100% + 10px);
			height: 55px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.menuList {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			padding: 20px 20px 0 20px;

			.menu {
				margin-bottom: 30px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 36px;
					height: 36px;
				}

				span {
					margin-top: 10px;
					font-size: 14px;
				}
			}
		}
	}
</style>