null/pages/mine/userCenter.vue

<template>
	<view class="page">
		<view class="flex-col section_1">
			<view class="justify-between align-center group" @tap="tapAvatar">
				<text class="text">头像</text>
				<view class="flex-row">
					<image
						:src="userInfo.avatar ? userInfo.avatar : '/static/temp/pro.png'"
						class="image_1"
					/>
					<image
						src="/static/my_rarrow.png"
						class="image_2 image_3"
					/>
		 	</view>
			</view>
			<view class="flex-col">
				<view class="justify-between align-center group" @tap="showNickPanel">
					<text class="text">昵称</text>
					<view class="flex-row">
						<text class="text_4 clamp">昵称昵称</text>
						<image
							src="/static/my_rarrow.png"
							class="image_2 image_3"
						/>
					</view>
				</view>
				<view class="flex-col">
					<view class="justify-between align-center group">
						<text class="text">姓名</text>
						<view class="flex-row">
							<text class="text_4 clamp">姓名姓名姓名</text>
							<image
								src="/static/my_rarrow.png"
								class="image_2 image_3"
							/>
					    </view>
					</view>
				</view>
				<view class="flex-col">
					<view class="justify-between align-center group" @tap='tapSex'>
						<text class="text">姓别</text>
						<view class="flex-row">
							<text class="text_4 clamp">姓别</text>
							<image
								src="/static/my_rarrow.png"
								class="image_2 image_3"
							/>
					    </view>
					</view>
				</view>
				<view class="flex-col">
					<picker mode="date"  @change="onDate" :end="curDate" >
						<view class="justify-between align-center group">
							<text class="text">生日</text>
							<view class="flex-row">
								<text class="text_4 clamp">1998-12-18</text>
								<image
									src="/static/my_rarrow.png"
									class="image_2 image_3"
								/>
							</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		
		<popup ref="nickRef" :isStopMaskHide="true">
			<view class="flex-col section_3 nick-panel">
			  <text class="text_14">修改昵称</text>
			  <view class="flex-col group_14">
				<view class="flex-col">
				  <view class="group_16 align-center">
					<text class="text_15">原昵称：</text>
					<text class=" text_16 clamp">{{panelOVal}}</text>
				  </view>
				  <view class="flex-col items-start text-wrapper">
					  <input type="text" class="text_17" placeholder="请输入昵称" v-model="panelVal">
					  <!-- <text class="text_17">支持2-16位中英文、数字</text> -->
				  </view>
				</view>
				<view class="flex-row group_17">
				  <view class="flex-col items-center text-wrapper_1" @tap="cancel"><text class="text_18">取消</text></view>
				  <view class="flex-col items-center text-wrapper_2" @tap="confirm"><text class="text_19">确认更改</text></view>
				</view>
			  </view>
			</view>	
		</popup>
		<KXChoose ref="sexRef" @rundata="onSex" />
	</view>
</template>

<script>
import KXChoose from '@/components/kx-choose.vue'
export default {
	components:{
		KXChoose,
	},
	data() {
		return {
			nickname:'',
			panelType:'', //修改昵称nick，姓名name
			panelVal:'', //输入值
			panelOVal:'', //原值
			curDate:'',
			sexs:[{name:'男'},{name:'女'}]
		};
	},
	onLoad() {
		this.curDate= this.$tools.handleDate(new Date());
	},
	methods:{
		onDate(e){
			console.log('onDate--',e.detail.value)
		},
		tapSex(){
			this.$refs.sexRef.open(this.sexs);
		},
		onSex({item,items}){
			console.log('onSex---',item,items)
		},
		showNickPanel(){
			this.$refs.nickRef.show()
		},
		hideNickPanel(){
			this.$refs.nickRef.hide()
		},
		cancel(){
			this.hideNickPanel()
		},
		async confirm(){
			this.cancel();
			let pRes = await this.$request('user.profile',{nickname:this.nickname})
			this.$tools.msg(pRes.msg);
			this.nickname = '';
			this.$store.dispatch('user/getUserInfo')
		},
		async tapAvatar(){
			let res = await this.$tools.uploadImg();
			let pRes = await this.$request('user.profile',{avatar:res.fullurl})
			this.$tools.msg(pRes.msg);
			this.avatar = res.fullurl;
			this.$store.dispatch('user/getUserInfo')
		},
		tapLink(){
			if(!this.userInfo.bsnlink){
				this.$tools.msg('您的地址尚未生成')
				return;
			}
			this.navTo('/pages/mine/chainAddr')
		}
	}
};
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding-top: 10rpx;
}

// . {
// 	text-transform: uppercase;
// }
.section_1 {
	background-color: #ffffff;
	border-radius: 20rpx;
	width: 690rpx;
	margin: 0  auto;
}
.group {
	height: 108rpx;
	// padding: 30rpx 24rpx 30rpx 31rpx;
	border-bottom: solid 2rpx #0000000f;
	.text {
		margin: 10rpx 0;
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang;
	}	
	.image_1 {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
	}	
	.text_4 {
		color: #999999;
		font-size: 30rpx;
		font-family: PingFang;
		// line-height: 29rpx;
		letter-spacing: 2.7rpx;
		max-width: 400rpx;
	}
	.image_2 {
		width: 8rpx;
		height: 15rpx;
	}
	.image_3 {
		margin-left: 10rpx;
		align-self: center;
	}	
	
}


.section_3 {
  padding: 30rpx 37rpx 34rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
}
.text_14 {
  align-self: center;
  color: #333333;
  font-size: 34rpx;
  font-family: PingFang;
  line-height: 32rpx;
  letter-spacing: 1.36rpx;
}
.group_14 {
  margin-top: 38rpx;
}
.group_17 {
  margin-top: 41rpx;
  padding: 0 20rpx;
}
.group_16 {
  align-self: center;
  line-height: 27rpx;
}
.text-wrapper {
  margin-top: 30rpx;
  // padding: 24rpx 0 23rpx;
  background-color: #f1f1f1;
  border-radius: 10rpx;
  width: 500rpx;
    .text_17 {
	  // margin-left: 37rpx;
	  padding: 0 37rpx;
	  color: #333;
	  font-size: 28rpx;
	  font-family: PingFang;
	  letter-spacing: 1.12rpx;
	  height: 74rpx;
	  line-height: 74rpx;
	  width: 100%;
	}

}
.text-wrapper_1 {
  padding: 19rpx 0 18rpx;
  background-color: #ececec;
  border-radius: 10rpx;
  width: 194rpx;
  height: 64rpx;
}
.text-wrapper_2 {
  margin-left: 72rpx;
  padding: 19rpx 0 18rpx;
  background-color: #363636;
  border-radius: 10rpx;
  width: 194rpx;
  height: 64rpx;
}
.text_15 {
  color: #333333;
  font-size: 28rpx;
  font-family: PingFang;
  line-height: 27rpx;
  letter-spacing: 1.12rpx;
}
.text_16 {
  color: #333333;
  font-size: 28rpx;
  font-family: PingFang;
  line-height: 27rpx;
  letter-spacing: 2.52rpx;
  max-width: 360rpx;
}
.text_18 {
  color: #333333;
  font-size: 28rpx;
  font-family: PingFang;
  line-height: 27rpx;
  letter-spacing: 1.12rpx;
  text-align: center;
}
.text_19 {
  color: #ffffff;
  font-size: 28rpx;
  font-family: PingFang;
  line-height: 27rpx;
  letter-spacing: 1.12rpx;
   text-align: center;
}
</style>