lnyk/pages/user/user.vue

<template>
	<view class="container">
		<view class="user-box flex">
			<view class="user-info">
				<view class="name">我的</view>
				<view class="phone">{{phone}}</view>
				<view class="uuid">UID：{{userInfo.uid}}</view>
				<view class="level-box">
					<image class="image" src="../../static/img/img28.png"></image>
					<view class="level">V{{userInfo.level}}</view>
				</view>
			</view>
			<image class="header" :src="userInfo.avatar"></image>
		</view>
		<view class="list-box">
			<view class="list-title">我的工具</view>
			<view class="list-cell flex" @click="navTo('/pages/calculation/index')">
				<view class="cell-info flex_item">
					<image src="../../static/tabBar/tab-calculation-current.png" style="width: 40rpx; height: 40rpx;"></image>
					<view class="cell-name">我的算力</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="navTo('/pages/user/myTeam')">
				<view class="cell-info flex_item">
					<image src="../../static/img/img17.png"></image>
					<view class="cell-name">我的社区</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="navTo('/pages/index/share')">
				<view class="cell-info flex_item">
					<image class="img1" src="../../static/img/img18.png"></image>
					<view class="cell-name">邀请链接</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
		     	<view class="list-cell flex" @click="navTo('/pages/user/payment')">
				<view class="cell-info flex_item">
					<image class="img2" src="../../static/img/img19.png"></image>
					<view class="cell-name">支付密码</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="navTo('/pages/user/loginPass')">
				<view class="cell-info flex_item">
					<image class="img3" src="../../static/img/img20.png"></image>
					<view class="cell-name">登录密码</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="navTo('/pages/user/meaasge')">
				<view class="cell-info flex_item">
					<image class="img4" src="../../static/img/img21.png"></image>
					<view class="cell-name">消息通知</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="server()">
				<view class="cell-info flex_item">
					<image class="img4" src="../../static/img/img47.png"></image>
					<view class="cell-name">联系客服</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="list-cell flex" @click="navTo('/pages/set/set')">
				<view class="cell-info flex_item">
					<image class="img5" src="../../static/img/img22.png"></image>
					<view class="cell-name">设置</view>
				</view>
				<image src="../../static/img/img23.png"></image>
			</view>
			<view class="submit" @click="toLogout">退出登录</view>
		</view>
		<!-- 申请退款弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-dox">
					<image class="popup-logo" src="../../static/img/img48.png"></image>
					<view class="pop-title">已为您定制专属客服</view>
					<image class="popup-text" src="../../static/img/img50.png"></image>
					<view class="pop-tip">微信咨询客服</view>
				</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/img49.png"></image></view>
		</uni-popup>
	</view>
</template>
<script>
import { getUserInfo,getUser } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { logout } from '@/api/set.js';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			userInfo:'',
			phone:'',
		};
	},
	onLoad(option){
		saveUrl();
	},
	onShow() {
		// 判断是否已经登录
		if (this.hasLogin) {
			this.loadBaseData();
		} else {
			this.userInfo = '';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadBaseData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	computed: {
		...mapState('user', ['hasLogin'])
	},
	methods: {
		...mapMutations('user', ['setUserInfo','logout']),
		// 加载初始数据
		loadBaseData() {
			let obj = this;
			getUserInfo({})
				.then(({ data }) => {
					obj.userInfo = data;
					var tel = obj.userInfo.account;
					var reg = /^(\d{3})\d{4}(\d{4})$/;
					obj.phone = tel.replace(reg, "$1****$2");
					obj.setUserInfo(data);
				})
				.catch(e => {
					console.log(e);
				});
		},
		server(){
			this.$refs.popup.open();
		},
		close(){
			this.$refs.popup.close();
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//退出登录
		toLogout() {
			let obj = this;
			uni.showModal({
				content: '确定要退出登录么',
				success: e => {
					if (e.confirm) {
						logout({}).then(e => {
							obj.logout();
							uni.navigateTo({
								url:'/pages/public/login'
							})
						})
						.catch(e => {
							console.log(e);
						});
					}
				}
			});
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding-bottom: 50rpx;
	}
}
.user-box{
	width: 100%;
	height: 440rpx;
	padding: 60rpx 35rpx;
	background-image: url(../../static/img/logo.png);
	background-size: 100% 100%;
	color: #FFFFFF;
	align-items: flex-start;
	.header{
		width: 125rpx;
		height: 125rpx;
		border-radius: 100%;
		margin-top: 10%;
	}
}
	.user-info{
		padding-left: 30rpx;
		.name{
			font-weight: 500;
			font-size: 48rpx;
		}
		.phone{
			font-size: 42rpx;
			font-weight: 500;
			color: #FFFFFF;
			padding-top: 50rpx;
		}
		.uuid{
			font-size: 30rpx;
			padding-top: 20rpx;
		}
		.level-box{
			margin-top: 25rpx;
			position: relative;
			.image{
				width: 128rpx;
				height:45rpx;
			}
			.level{
				position: absolute;
				top: 12rpx;
				left: 62rpx;
				font-size: 24rpx;
				color: #826740;
				font-weight: bold;
			}
		}
	}
.list-box{
	width: 100%;
	margin-top: -60rpx;
	background-color: #FFFFFF;
	border-top-right-radius: 70rpx;
	border-top-left-radius: 70rpx;
	padding: 60rpx 66rpx 0rpx 55rpx;
	.list-title{
		font-weight: bold;
		color: #333333;
		font-size: 36rpx;
	}
	.list-cell{
		padding-top: 40rpx;
		border-bottom: 1rpx solid #F3F3F3;
		padding-bottom: 30rpx;
		.cell-info{
			image{
				width: 49rpx;
				height: 38rpx;
			}
			.cell-name{
				padding-left: 17rpx;
				color: #666666;
				font-size: 30rpx;
				font-weight: 500;
			}
		}
		image{
			width: 16rpx;
			height: 25rpx;
		}
	}
}
.img1{
	width: 46rpx !important;
	height: 40rpx !important;
}
.img2{
	width: 40rpx !important;
	height: 42rpx !important;
}
.img3{
	width: 42rpx !important;
	height: 42rpx !important;
}
.img4{
	width: 42rpx !important;
	height: 41rpx !important;
}
.img5{
	width: 44rpx !important;
	height: 40rpx !important;
}
//弹窗
.popup {
	width: 640rpx;
	background-color: #FFFFFF;
	border-radius: 15rpx;
	text-align: center;
	.popup-dox{
		position: relative;
		top: -60rpx;
		.popup-logo {
			width: 460rpx;
			height: 132rpx;
		}
		.pop-title{
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			padding: 25rpx 0rpx;
			margin-bottom: 50rpx;
		}
		.popup-text{
			width: 400rpx;
			height: 400rpx;
			margin-bottom: 50rpx;
		}
		.pop-tip{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}

.close_icon {
	width: 60rpx;
	height: 60rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.submit{
			margin: 37rpx auto 38rpx;
			width: 560rpx;
			background-color: #fff;
			color: #5771DF;
			text-align: center;
			// padding:26rpx 0rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: #5771DF 1px solid;
			border-radius: 50rpx;
			font-size: 28rpx;
			
		}
</style>