xiaochengxu/pages/MineCenter/MineCenter.vue

<!--个人中心-->>
<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			title="个人主页"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF00"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<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>
						<view v-else-if="index == 'phone'">
							<!--手机号码要特殊处理-->
							<button v-if="item.getValue(player) == ''" class="phone_get_button" open-type="getPhoneNumber" @getphonenumber="onTouchToGetPhone">点击获取手机号码></button>
							<text v-else class="form_title_global">{{item.getValue(player)}}</text>
						</view>
						<view v-else style="width: 550rpx;height: 110rpx;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
							<input
								:placeholder="item.message"
								class="form_input_global"
								placeholder-class="form_input_placeholder_global"
								:value="item.getValue(player)"
								@blur='(object)=>{
									onBlurCallback(index,object);
								}'
								v-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>
					</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.introduction"
				>
				</textarea>
			</view>
		</view>
		<u-gap height="50rpx" />
		<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>
		<min-picker 
			:startTime="startTime"
			:endTime="endTime"
			@cancel="onDateSelectCanceled"
			@sure="onDateSelectConfirm"
			:show="isDateSelectShowing"
			heightRpx="500"
			:currentTime="currentTime"
		></min-picker>
		<u-modal :show="isShowLogoutModal" 
			title="提示"
			content="您确定要退出当前账号吗？"
			confirmText="退出"
			@confirm="onConfirmLogout"
			@cancel="onCancelLogout"
			:closeOnClickOverlay="true"
			:showCancelButton="true"
			@close="onCancelLogout"
		/>
	</view>
</template>

<script>
	var Define = getApp().globalData.Define;
	var Player = getApp().globalData.Player;
	import {post} from '@/common/api.js'
	export default {
		mounted() {
			this.$refs.form1.setRules(this.rules);
		},
		data() {
			return {
				player : Player,
				///生日选择器是否在活动中
				isDateSelectShowing : false,
				///是否显示退出提示的确认框
				isShowLogoutModal : false,
				rules:{
					///头像
					headUrl : {
						type : 'string',
						
						title : '头像',
						
						message : '',
						//是否允许输入
						enableInput : false,
	
						///获取里面的值
						getValue(player){
							if(player.headimgurl == ''){
								return "../../static/images/wode/touxiang_6.png";
							}
							return player.headimgurl;
						},	
						
						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 "未知";
							}else if(player.sex == 1){
								return '男';
							}else{
								return '女';
							}
							
						},
						
						validator:(object)=>{},
					},
					phone : {
						type : 'string',
						
						title : '手机号码',
						
						key : 'phone',
						
						message : '请输入您的电话号码',
						//是否允许输入
						enableInput : true,
						///获取里面的值
						getValue(player){
							return player.phone;
						},
						
						validator:(object)=>{
							this.player.phone = object.detail.value;
						},
					},
					birthday : {
						type : 'string',
						
						title : '生日',
						
						key : 'birthday',
						
						message : '未选择',
						
						//是否允许输入
						enableInput : false,
						
						///获取当前可以显示的值
						getValue(player){
							return player.birthday;
						},
						validator:(object)=>{},
					},
					profession : {
						type : 'string',
						
						title : '职业',
						
						key : 'occupation',
						
						message : '未填写',
						//是否允许输入
						enableInput : true,
						
						trigger : 'blur',
						///获取里面的值
						getValue(player){
							return player.occupation;
						},
						///输入了数据，这里验证
						validator:(object)=>{
							this.player.occupation = object.detail.value;
						},
					},
				},
				form_tile_title : {
					height: '37rpx',
					fontSize: 26,
					fontWeight: 500,
					color: 'black',
				},
				startTime : [1900,1,1],
				endTime : 2022,
				currentTime : this.getCurrentDateSelectTime(),
			};
		},
		methods:{
			onBackTouched(){
				uni.navigateBack({
					
				});
			},
			///从player的birtday数据来初始化
			getCurrentDateSelectTime(){
				var player = 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];
			},
			///生日选择器取消了选择
			onDateSelectCanceled(){
				this.isDateSelectShowing = false;
			},
			///当前几了某一行item，回调参数为当前的prop，prop内容为rules里面的key
			onTouchOneItem(prop){
				console.log(prop);
				if(prop == 'birthday'){
					//点击的是生日，弹出生日选择器
					this.isDateSelectShowing = true;
					return;
				}
				if(prop == "phone"){
					//弹出获取手机号码的授权信息
					
					return;
				}
			},
			///当某些输入框失去焦点
			onBlurCallback(key,obj){
				var item = this.rules[key];
				if(item != null){
					item.validator(obj);
				}
				
			},
			///用户更新了自己的简介
			onEditPlayerIntro(obj){
				console.log(obj);
				this.player.introduction = obj.detail.value;
			},
			///点击了确认按钮
			async doConfirm(){
				let phone	= this.player.phone;
				if(!uni.$u.test.mobile(phone)){
					uni.$u.toast('请输入正确的电话号码');
					return;
				}
				let data = {
					birthday 		: this.player.birthday,
					introduction 	: this.player.introduction,
					occupation 		: this.player.occupation,
					phone			: this.player.phone,
				};
				uni.showLoading({
				});
				let res = await post('users/updateselfinfo',data);
				console.log(res);
				uni.hideLoading();
				if(res.length > 1){
					//成功以后，退出当前界面
					uni.navigateBack({
						
					});
				}
			},
			///退出登录
			doLoginOut(){
				console.log("You just loginout!");
				this.isShowLogoutModal = true;
			},
			///点击按钮，开始获取用户的手机号码
			async onTouchToGetPhone(e){
				var phonenumber 	= await this.$utils.wechatGetPlayerPhoneNumberBack(e);
				if(!phonenumber){
					return;
				}
				this.player.phone 	= phonenumber;
			},
			///同意退出当前账号
			onConfirmLogout(){
				//干掉当前的token,让他从新去获取，把当前player里面数据都干掉
				uni.clearStorageSync();	//清理掉所有缓存
				var Player = getApp().globalData.Player;
				Player.clear();
				this.isShowLogoutModal = false;
				uni.$u.toast('退出成功');
				uni.navigateBack({
					
				});
			},
			///取消退出，啥也不做
			onCancelLogout(){
				this.isShowLogoutModal = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/**
	 * <view v-else-if="index == 'phone'">
			<!--手机号码要特殊处理-->
			<button v-if="item.getValue(player) == ''" class="phone_get_button" open-type="getPhoneNumber" @getphonenumber="onTouchToGetPhone">点击获取手机号码></button>
			<text v-else class="form_title_global">{{item.getValue(player)}}</text>
		</view>
	 */
	button::after{border: none;padding: 0;}
	.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;
		border-radius: 50%;
	}
	///点击获取手机号码的按钮
	.phone_get_button{
		width: 550rpx;
		height: 110rpx;
		background-color: #F6F6F6;
		//text-align: right;
		font-size: 28rpx;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border: none;
		
	}
	
	.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;
	}
	.item_title{
		height: 37rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
</style>