nzhbsr/pages/user/menu.vue

<template>
	<view class="content">
		<view class="" style="height: 40rpx;">

		</view>
		<view class="user-wrap flex">
			<view class="user-name">
				{{userInfo.username}}
			</view>
			<view class="user-invit">
				邀請碼：{{userInfo.invit}}
			</view>
		</view>
		<!-- <view class="user-list flex">
			<image src="../../static/icon/mu1.png" mode="" class="left-img"></image>
			<view class="">
				語言
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<view class="user-list flex">
			<image src="../../static/icon/mu2.png" mode="" class="left-img"></image>
			<view class="">
				幫助中心
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex">
			<image src="../../static/icon/mu3.png" mode="" class="left-img"></image>
			<view class="">
				通知
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex">
			<image src="../../static/icon/mu4.png" mode="" class="left-img"></image>
			<view class="">
				修改密碼
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex">
			<image src="../../static/icon/mu5.png" mode="" class="left-img"></image>
			<view class="">
				提幣地址
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="user-list flex">
			<image src="../../static/icon/mu6.png" mode="" class="left-img"></image>
			<view class="">
				實名認證
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="loginout" @click="cancel()">
			退出
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		getUser,
		loginout
	} from '@/api/login.js'

	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad() {

		},
		onShow() {
			this.getUser()
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			...mapMutations('user', ['login', 'setUserInfo', 'logout']),
			getUser() {
				let obj = this
				getUser().then(res => {
					console.log(res)
					obj.setUserInfo(res.data)
				})
			},
			cancel() {
				// this.$refs.popup.open();
				let obj = this;
				uni.showModal({
					content: '确定要退出登录么',
					success: e => {
						if (e.confirm) {
							loginout().then(res => {
								obj.logout();
								uni.switchTab({
									url: '/pages/index/index'
								})
							})


						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}

	.user-wrap {
		width: 674rpx;
		height: 147rpx;
		margin: auto;
		background: #F9F9F9;
		border-radius: 10rpx;
		flex-direction: column;
		padding-left: 27rpx;
		justify-content: center;
		align-items: start;
		text-align: left;

		.user-name {
			font-size: 34rpx;
			font-weight: 500;
			color: #636572;
		}

		.user-invit {
			padding: 20rpx 0;
			font-size: 22rpx;
			font-weight: 500;
			color: #636572;
		}
	}

	.user-list {
		width: 691rpx;
		height: 104rpx;
		background: #FFFFFF;
		// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06)
		border-radius: 28rpx;
		margin: 20rpx auto;
		// padding: 0 25rpx;

		.left-img {
			width: 50rpx;
			height: 50rpx;
		}

		view {
			padding-left: 20rpx;
			flex-grow: 1;
			font-size: 29rpx;
			font-weight: bold;
			color: #5D5D5D;
		}

		.right-img {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.loginout {
		width: 675rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		color: #000;
		background-color: #f4d03c;
		margin: 50rpx auto;
		border-radius: 20rpx;
		font-weight: bold;
	}
</style>