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.
393 lines
8.3 KiB
393 lines
8.3 KiB
<!--个人中心-->>
|
|
<template>
|
|
<view class="main">
|
|
<view class="back"/>
|
|
<u-navbar
|
|
title="个人主页"
|
|
:safeAreaInsetTop="true"
|
|
:fixed="true"
|
|
bgColor="#FFFFFF00"
|
|
:placeholder="true"
|
|
/>
|
|
<u-line :dashed="false" color="#E2E2E2" customStyle="border: 1rpx solid #E2E2E2;"></u-line>
|
|
<view class="body">
|
|
<u-form
|
|
labelPosition="left"
|
|
ref="form1"
|
|
:model="player"
|
|
:rules="rules"
|
|
:labelStyle="form_tile_title"
|
|
>
|
|
<u-form-item v-for="(item,index) in rules" :key="item.getValue(player)" :prop="index" borderBottom :ref="index" @click="onTouchOneItem">
|
|
<view class="form_item_global">
|
|
<text class="form_title_global">
|
|
{{item.title}}
|
|
</text>
|
|
<view v-if="index == 'headUrl'">
|
|
<image :src="item.getValue(player)" class="head"/>
|
|
</view>
|
|
<input
|
|
:placeholder="item.message"
|
|
class="form_input_global"
|
|
placeholder-class="form_input_placeholder_global"
|
|
:value="item.getValue(player)"
|
|
@blur='(object)=>{
|
|
onBlurCallback(index,object);
|
|
}'
|
|
v-else-if="item.enableInput"
|
|
/>
|
|
<view v-else>
|
|
<text v-if="item.getValue(player) == ''" class="form_input_placeholder_global">{{item.message}}</text>
|
|
<text class="form_title_global" v-else>{{item.getValue(player)}}</text>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<u-gap height="37rpx" />
|
|
<view class="intro_box">
|
|
<text class="item_title" style="position: absolute;left: 0;">简介</text>
|
|
<view class="intro_area">
|
|
<textarea
|
|
class="textarea"
|
|
placeholder="请输入您的简单介绍"
|
|
placeholder-class='form_holder'
|
|
@blur="onEditPlayerIntro"
|
|
:value="player.intro"
|
|
>
|
|
</textarea>
|
|
</view>
|
|
</view>
|
|
<u-gap height="40rpx" />
|
|
<button class="confirm_button_global" @click="doConfirm" hover-class="confirm_button_hover_class">
|
|
确认
|
|
</button>
|
|
<u-gap height="20rpx" />
|
|
<button class="cancel_button_global" hover-class="cancel_button_hover_class" @click="doLoginOut">退出登录</button>
|
|
<u-gap height="100rpx" />
|
|
<min-picker
|
|
:startTime="startTime"
|
|
:endTime="endTime"
|
|
@cancel="onDateSelectCanceled"
|
|
@sure="onDateSelectConfirm"
|
|
:show="isDateSelectShowing"
|
|
heightRpx="500"
|
|
:currentTime="currentTime"
|
|
></min-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
mounted() {
|
|
this.$refs.form1.setRules(this.rules);
|
|
},
|
|
data() {
|
|
return {
|
|
player : this.$Define.Player,
|
|
///生日选择器是否在活动中
|
|
isDateSelectShowing : false,
|
|
rules:{
|
|
///头像
|
|
headUrl : {
|
|
type : 'string',
|
|
|
|
title : '头像',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.headUrl == ''){
|
|
return "../../static/images/wode/touxiang_6.png";
|
|
}
|
|
return player.headUrl;
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
name : {
|
|
type : 'string',
|
|
|
|
title : '昵称',
|
|
|
|
key : 'name',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.nickName == ''){
|
|
return "没有获取到昵称";
|
|
}
|
|
return player.nickName;
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
sex : {
|
|
type : 'string',
|
|
|
|
title : '性别',
|
|
|
|
key : 'sex',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.sex == 0){
|
|
return "女";
|
|
}
|
|
return '男';
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
phone : {
|
|
type : 'string',
|
|
|
|
title : '手机号码',
|
|
|
|
key : 'phone',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.phone == ''){
|
|
return "没有获取到电话号码";
|
|
}
|
|
return player.phone;
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
birthday : {
|
|
type : 'string',
|
|
|
|
title : '生日',
|
|
|
|
key : 'birthday',
|
|
|
|
message : '未选择',
|
|
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取当前可以显示的值
|
|
getValue(player){
|
|
return player.birthday;
|
|
},
|
|
validator:(object)=>{},
|
|
},
|
|
profession : {
|
|
type : 'string',
|
|
|
|
title : '职业',
|
|
|
|
key : 'profession',
|
|
|
|
message : '未填写',
|
|
//是否允许输入
|
|
enableInput : true,
|
|
|
|
trigger : 'blur',
|
|
///获取里面的值
|
|
getValue(player){
|
|
return player.profession;
|
|
},
|
|
///输入了数据，这里验证
|
|
validator:(object)=>{
|
|
this.player.profession = object.detail.value;
|
|
},
|
|
},
|
|
},
|
|
form_tile_title : {
|
|
width: '170rpx',
|
|
height: '37rpx',
|
|
fontSize: 26,
|
|
fontWeight: 500,
|
|
color: 'black',
|
|
},
|
|
startTime : [1900,1,1],
|
|
endTime : 2022,
|
|
currentTime : this.getCurrentDateSelectTime(),
|
|
};
|
|
},
|
|
methods:{
|
|
///从player的birtday数据来初始化
|
|
getCurrentDateSelectTime(player){
|
|
var player = this.$Define.Player;
|
|
if(player.birthday == ''){
|
|
return null;
|
|
}
|
|
var str = player.birthday;
|
|
//以-分割
|
|
var arr = str.split('-');
|
|
//需要转换称number
|
|
return [parseInt(arr[0]),parseInt(arr[1]),parseInt(arr[2])];
|
|
},
|
|
///显示生日选择器
|
|
onOpenDateSelect(){
|
|
this.isDateSelectShowing = true;
|
|
},
|
|
///当生日选择器点击了确认，返回了一个日志
|
|
onDateSelectConfirm(e){
|
|
console.log(e);
|
|
//关闭选择器
|
|
this.isDateSelectShowing = false;
|
|
//更新用户的生日系统
|
|
var year = parseInt(e.a);
|
|
var mouth = parseInt(e.b);
|
|
var day = parseInt(e.c);
|
|
var str = year + "-" + mouth + "-" + day;
|
|
this.player.birthday = str;
|
|
this.currentTime = [year,mouth,day];
|
|
//console.log(this.$Define.Player);
|
|
},
|
|
///生日选择器取消了选择
|
|
onDateSelectCanceled(){
|
|
this.isDateSelectShowing = false;
|
|
},
|
|
///当前几了某一行item，回调参数为当前的prop，prop内容为rules里面的key
|
|
onTouchOneItem(prop){
|
|
console.log(prop);
|
|
if(prop == 'birthday'){
|
|
//点击的是生日，弹出生日选择器
|
|
this.isDateSelectShowing = true;
|
|
return;
|
|
}
|
|
},
|
|
///当某些输入框失去焦点
|
|
onBlurCallback(key,obj){
|
|
var item = this.rules[key];
|
|
if(item != null){
|
|
item.validator(obj);
|
|
}
|
|
|
|
},
|
|
///用户更新了自己的简介
|
|
onEditPlayerIntro(obj){
|
|
console.log(obj);
|
|
this.player.intro = obj.detail.value;
|
|
},
|
|
///点击了确认按钮
|
|
doConfirm(){
|
|
console.log("You just confirmed!");
|
|
},
|
|
///退出登录
|
|
doLoginOut(){
|
|
console.log("You just loginout!");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.back{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background:#FFFFFF
|
|
}
|
|
.main{
|
|
opacity: 1;
|
|
border-radius: 0px;
|
|
overflow: scroll;
|
|
touch-action: auto;
|
|
flex-direction: column;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.body{
|
|
width: 702rpx;
|
|
height: 920rpx;
|
|
position: relative;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
left: 24rpx;
|
|
}
|
|
|
|
.head{
|
|
width: 97rpx;
|
|
height: 97rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 6rpx;
|
|
}
|
|
|
|
.intro_box{
|
|
width: 702rpx;
|
|
height: 200rpx;
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
left: 24rpx;
|
|
//background-color: #0081FF;
|
|
}
|
|
|
|
.intro_area{
|
|
width: 702rpx;
|
|
height: 166rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #E2E2E2;
|
|
opacity: 1;
|
|
border-radius: 12rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 60rpx;
|
|
}
|
|
|
|
.textarea{
|
|
width: 662rpx;
|
|
height: 126rpx;
|
|
//background-color: #1CBBB4;
|
|
left: 20rpx;
|
|
top: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.confirm_button{
|
|
width: 702rpx;
|
|
height: 90rpx;
|
|
background: #D49B4B;
|
|
opacity: 1;
|
|
border-radius: 93rpx;
|
|
position: relative;
|
|
left: 24rpx;
|
|
top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm_text{
|
|
width: 72rpx;
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|