yunshan/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/myCalculation')">
				<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/charge')">
				<view class="cell-info flex_item">
					<image src="../../static/user/charge.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/revenue')">
				<view class="cell-info flex_item">
					<image src="../../static/img/img54.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/sharerevenue')">
				<view class="cell-info flex_item">
					<image src="../../static/img/img53.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.jpg"></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/user/bg.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: #141E47;
		text-align: center;
		// padding:26rpx 0rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: #141E47 1px solid;
		border-radius: 50rpx;
		font-size: 28rpx;

	}
</style>