xiaochengxu/pages/MineCenter/MineCenter.vue

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