xiaochengxu/components/Mine/Mine.vue

<!--主页的个人中心-->
<template>
	<view class="main">
		<view class="back"/>
		<image class="top" src="../../static/images/wode/bg_3.png" mode="widthFix">
			<u-navbar
				title="个人中心"
				:safeAreaInsetTop="true"
				:fixed="true"
				bgColor="#FFFFFF00"
				:isShowLeftIcon="false"
			/>
			<view class="top_head_area" :key="Player.user_token">
				<view class="head_background">
					<image v-if="Player.headimgurl != ''" :src="Player.headimgurl" class="user_head_image"/>
					<image v-else class="head" src="../../static/images/wode/touxaingkuang.png" mode="widthFix" />
				</view>	
				<view v-if="Player.nickname != ''" class="player_nick_name_show" @click="onTouchToShowMineCenter">
					<text style="font-size: 32rpx;font-weight: bold;color: #333333;position: absolute;left: 10rpx;top: 10rpx;">{{Player.nickname}}</text>
					<text style="font-size: 26rpx;font-weight: 400;color: #D49B4B;position: absolute;left: 10rpx;top: 60rpx;">点击查看个人主页 ></text>
				</view>
				<text v-else class="nickname" @click="onTouchToLogin">登录 | 注册</text>
			</view>
			<view class="walletBox">
				<text class="wallet_title" @click="onTouchEye">钱包</text>
				<image class="eye_close" src="../../static/images/wode/bukejian.png" mode="widthFix" v-if="!isMoneyVisiable" @click="onTouchEye" :catchtouchmove="true"></image>
				<image class="eye_close" src="../../static/images/wode/kejian.png" mode="widthFix" v-else="isMoneyVisiable" @click="onTouchEye" :catchtouchmove="true"></image>
				<view class="wallet_number_box">
					<text class="wallet_number" v-if="!isMoneyVisiable" @click="onTouchEye" :catchtouchmove="true">******</text>
					<text class="wallet_number" v-if="isMoneyVisiable" @click="onTouchEye" :catchtouchmove="true">{{getMoneyFormat()}}</text>
				</view>
				<view style="width: 100rpx;height: 100%;position: absolute;right: 5rpx;border-radius: 20rpx;" @click="onTouchToEnterWallet"></view>
				<u-icon name="arrow-right" customStyle="width: 14rpx;height: 25rpx;position: absolute;top: 53rpx;right: 30rpx;"/>
			</view>
		</image>
		<view class="body">
			<view v-for="(item,index) in items" :key="index" class="item" @click="onTouchItem(index)">
				<image :src="item.icon" class="item_icon" />
				<view class="item_title_box">
					<text class="item_title">{{item.title}}</text>
					<view v-if="index == 0">
						<text v-if="Player.needrealname == 1" class="item_message">
							{{item.message}}
						</text>
						<text v-else class="item_message_success">您已完成实名认证</text>
					</view>
					<view v-else>
						<text v-if="item.message != null" class="item_message">{{item.message}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" customStyle="width: 12rpx;height: 21rpx;position: absolute;top: 45rpx;right: 20rpx;"/>
			</view>
		</view>
	</view>
</template>

<script>
	var Player = getApp().globalData.Player;
	export default {
		name:"Mine",
		data() {
			return {
				Player,
				///当前金额是否可见，默认是不可见的，当用户未登录的时候，不能点击眼睛来打开
				isMoneyVisiable : false,
				items : [
					{
						title : "实名认证",
						icon : "../../static/images/wode/shiming.png",
						message : "提现必须进行实名认证",
					},
					{
						title : "官方客服",
						icon : "../../static/images/wode/kefu2.png",
						message : null,
					},
					{
						title : "帮助",
						icon : "../../static/images/wode/bangzhu.png",
						message : null,
					},
				],
			};
		},
		methods:{
			///点击了登录|注册按钮
			onTouchToLogin(){
				uni.navigateTo({
					url:"/pages/WxLogin/WxLogin",
				});
			},
			
			onTouchItem(index){
				console.log(index);
				var Player = getApp().globalData.Player;
				
				if(index == 0){
					if(!Player.isLogined()){
						uni.$u.toast('请先登录');
						return;
					}
					uni.navigateTo({
						url:"/pages/Verified/Verified"
					})
				}else if(index == 2){
					uni.navigateTo({
						url:'/pages/HelpView/HelpView'
					})
				}else if(index == 1){
					//官方客服
					uni.navigateTo({
						url:'/pages/CustomerService/CustomerService'
					})
				}
			},
			///点击查看个人主页
			onTouchToShowMineCenter(){
				uni.navigateTo({
					url:'/pages/MineCenter/MineCenter'
				});
			},
			///格式化当前的钱
			getMoneyFormat(){
				var m = Player.balancescore;
				var st = "￥" + this.$utils.formatMoney(m);
				return st;
			},
			///点击了开眼和闭眼的图标
			onTouchEye(){
				var nt = this.isMoneyVisiable;
				if(!nt){
					//如果当前状态不可见，判断用户是否登录了，如果是，才能转换成可见
					var token = Player.user_token;
					if(!token || token == ''){
						uni.$u.toast("请先登录");
						return;
					}
				}
				this.isMoneyVisiable = !this.isMoneyVisiable;
			},
			/**
			 * 点击并进入钱包界面
			 */
			onTouchToEnterWallet(){
				var Player = getApp().globalData.Player;
				if(Player.user_token != ''){
					//如果有token，那么可以进入钱包界面
					uni.navigateTo({
						url:'/pages/Wallet/Wallet'
					})
				}else{
					//否则，要求他登录
					uni.$u.toast("请先登录");
				}
			},
			doNothing(e){
				e.preventDefault();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.back{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background:#F6F6F6
	}
	.main{
		position: relative;
	}
	.top{
		position: relative;
		width: 750rpx;
		height: 495rpx;
		top: 0;
		left: 0;
		right: 0;
		//background-color: #0081FF;
	}
	///头像-名字-登录|注册区域
	.top_head_area{
		width: 100%;
		height: 150rpx;
		//background-color: #1CBBB4;
		position: absolute;
		top: 200rpx;
	}
	///头像背景是一个白色的圆
	.head_background{
		width: 138rpx;
		height: 138rpx;
		//background: #0081FF;
		border-radius: 50%;
		opacity: 1;
		position: absolute;
		left: 24rpx;
		top: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	///头像的大小
	.head{
		width: 125rpx;
		height: 125rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	///用户的微信头像
	.user_head_image{
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
	}
	///昵称或者登录|注册
	.nickname{
		width: 400rpx;
		height: 46rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 182rpx;
		top: 52rpx;
		//background-color: #1CBBB4;
	}
	
	.player_nick_name_show{
		width: 400rpx;
		height: 110rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 182rpx;
		top: 25rpx;
		//background-color: #1CBBB4;
	}
	
	//本来是导航栏的，但是那玩意儿好像不支持，所以现在没用
	.title{
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		top: 100rpx;
		left: 303rpx;
		
	}
	///钱包外包围框
	.walletBox{
		width: 702rpx;
		height: 132rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.06);
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
		left: 24rpx;
		bottom: 96rpx;
	}
	.wallet_title{
		width: 64rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 30rpx;
		top: 44rpx;
	}
	///闭着的眼睛的图片
	.eye_close{
		width: 31rpx;
		height: 15rpx;
		position: absolute;
		left: 110rpx;
		top: 59rpx;
	}
	///钱包的数字的外包围，为了让钱包的数字可以居中显示
	.wallet_number_box{
		position: absolute;
		text-align: center;
		height: 45rpx;
		width: 400rpx;
		top: 48rpx;
		left: 151rpx;
		text-align: center;
		//background-color: #9000FF;
	}
	///钱包数字
	.wallet_number{
		height: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 45rpx;
		opacity: 1;
	}
	//下方的实名认证那些玩意儿
	.body{
		width: 702rpx;
		height: 340rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		//background-color: #2979FF;
		position: relative;
		left: 24rpx;
		top: -56rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	///一行的内容，比如 实名认证，在线客服的外包围框
	.item{
		width: 100%;
		height: 110rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
		position: relative;
	}
	///每一行的图标的大小，位置等
	.item_icon{
		width: 33rpx;
		height: 33rpx;
		position: absolute;
		left: 0;
		top: 39rpx;
	}
	///为了让每一行的标题和下方的message可以显示正确，这个是他们的外包围
	.item_title_box{
		height: 100rpx;
		width: 600rpx;
		//background-color: #2979FF;
		position: relative;
		left: 50rpx;
		top: 5rpx;
	}
	///每一行的标题，例如 实名认证
	.item_title{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 0rpx;
		top: 30rpx;
	}
	///每一行的提示信息，例如：提现必须进行实名认证
	.item_message{
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 0;
		bottom: 2rpx;
	}
	.item_message_success{
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #D49B4B;
		opacity: 1;
		position: absolute;
		left: 0;
		bottom: 2rpx;
	}
</style>