uniAppXCX/pages/mine/mine.vue

<template>
	<view class="container">
		<view class="user">
			<view class="userInfo">
				<image class="userPhoto" src=""></image>
				<view class="info">
					<view class="name" v-if="hasLogin">
						{{userInfo.nickName}}
					</view>
					<view class="loginText" @click="wxLogin" v-else>
						点击登录
					</view>
					<view class="id">
						ID: {{userId}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="box">
					<view class="value" style="color: #FF2C43;">
						1000
					</view>
					<view class="label">
						积分
					</view>
				</view>
				<view class="box">
					<view class="value">
						2
					</view>
					<view class="label">
						优惠卷
					</view>
				</view>
			</view>
		</view>
		<view class="menus">
			<view class="title">
				<image src="/static/img/mine/title.png" mode=""></image>
			</view>
			<view class="menuList">
				<view class="menu">
					<image src="/static/img/mine/menu1.png"></image>
					<span>地址管理</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu2.png"></image>
					<span>消费记录</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu3.png"></image>
					<span>加群交流</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu4.png"></image>
					<span>游戏规则</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu5.png"></image>
					<span>用户协议</span>
				</view>
				<view class="menu">
					<image src="/static/img/mine/menu6.png"></image>
					<span>联系客服</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginByWeixinApi
	} from "@/api/user.js"
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: null,
				userId: '-',
				hasLogin: false,
			}
		},
		onShow() {
			//获取用户的登录信息
			if (getApp().globalData.hasLogin) {
				let userInfo = wx.getStorageSync('userInfo');
				this.userInfo = userInfo
				this.hasLogin = true
			}
		},
		methods: {
			wxLogin: function(e) {
				console.log('111')
				let _this = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res1) => {
						console.log(res1, 'res111')
						wx.login({
							success: function(res2) {
								console.log(res2, 'res222')
								if (res2.code) {
									let params = {
										code: res2.code,
										userInfo: res1.userInfo
									}
									_this.executeLoginApi(params)
								}
							},
							fail: function(err) {
								reject(err);
							}
						});
					},
					fail: () => {
						console.log('微信登录失败')
						// util.showErrorToast('微信登录失败');
					}
				})
			},
			executeLoginApi(params) {
				let _this = this
				console.log(222)
				loginByWeixinApi(params).then(res => {
					console.log('调用登录api', res)
					//存储用户信息
					wx.setStorageSync('userInfo', res.data.userInfo);
					wx.setStorageSync('token', res.data.token);
					wx.setStorageSync('userId', res.data.userId);
					getApp().globalData.hasLogin = true;
					
					_this.userInfo = wx.getStorageSync('userInfo');
					_this.userId = wx.getStorageSync('userId');
					_this.hasLogin = true
				})
			}
		}
	}
</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;

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