公司小程序
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

<!--个人中心-->>
<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>