You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
9.2 KiB
386 lines
9.2 KiB
<!--主页的个人中心-->
|
|
<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>
|
|
|