jje_uniapp/myPages/userInfo/index.vue

<template>
	<view class="page">

		<view class="outView">

			<form @submit="inputValue">

			<view class="flex-row justify-between bordBot" >
				<view class="key flex-col justify-center ">
					<text>头像</text>
				</view>
					<button class="photoView" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image class="photoImage" :src="userInfo.selfPhotoUrl || '/static/me/ud4.png'"></image>
					</button>
			</view>

			<view class="flex-row justify-between bordBot" >
				<view class="key flex-col justify-center ">
					<text>昵称</text>
				</view>
				<view class="nikeName flex-col justify-center">
					<input type="nickname" name="nickname" v-model="userInfo.ncikName"   placeholder="请输入昵称"/>
				</view>
			</view>

			<view class="flex-row justify-between bordBot" >
				<view class="key flex-col justify-center ">
					<text>性别</text>
				</view>
				<picker class="picker"  @change="genderChange" mode='selector'  range-key="gender" :value="genderIndex" :range="genderList">
					<view class="flex-row justify-end groupItemContent">
						<text v-if="userInfo.sex == 0">男</text>
						<text v-else-if="userInfo.sex == 1">女</text>
						<text v-else-if="userInfo.sex == 2">未知</text>
						<text v-else>请选择性别</text>
						<u-icon name="arrow-right" color="#666" size="18"></u-icon>
					</view>
				</picker>
			</view>

			<view class="flex-row justify-between bordBot" >
				<view class="key flex-col justify-center ">
					<text>生日</text>
				</view>
				<picker class="picker" @change="birthdayChange" mode='date'  range-key="label" >
					<view class="flex-row justify-end groupItemContent">
						<text>{{userInfo.birthday || '请选择出生日期' }}</text>
						<u-icon name="arrow-right" color="#666" size="18"></u-icon>
					</view>
				</picker>
			</view>

				<view class="flex-row justify-between bordBot" >
					<view class="key flex-col justify-center ">
						<text>手机号</text>
					</view>
					<view class="flex-row justify-end groupItemContent" @click="settingTelphone">
						<text>{{userInfo.phone? userInfo.phone : '绑定手机号' }}</text>
						<u-icon name="arrow-right" color="#666" size="18"></u-icon>
					</view>
				</view>

<!--			<view class="flex-row justify-between bordBot" >-->
<!--				<view class="key flex-col justify-center ">-->
<!--					<text>实名认证</text>-->
<!--				</view>-->
<!--				<view class="flex-row justify-end groupItemContent" @click="gotoRealNameAuth">-->
<!--					<text>{{userInfo.isAttestation? '已认证' : '未实名认证，去认证' }}</text>-->
<!--					<u-icon name="arrow-right" color="#666" size="18"></u-icon>-->
<!--				</view>-->
<!--			</view>-->

			<button class="updateButton"  formType="submit">
				<text>保存</text>
			</button>

			</form>


		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			photoUrl:'',
			userInfo: {},
			genderIndex:0,
			genderList: [{gender:'男',id:'0'},
				  		 {gender:'女',id:'1'},
						 {gender:'未知',id:'2'}],
		};
	},
	mounted() {
	},
	onShow() {

		// 用户信息
		this.userInfo = uni.getStorageSync('userInfo')

		if (this.userInfo.selfPhoto){
			this.getImgUrlByOssId(this.userInfo.selfPhoto)
		}


	},
	methods: {

		settingTelphone(){
			uni.navigateTo({
				url:'/myPages/setting/setting-telphone'
			})
		},

		inputValue(e){
			console.log('+++++++++++++inputValue+++++++++++',e)
			this.userInfo.ncikName = e.detail.value.nickname
			this.saveUserInfo()
		},

		// 选择性别
		genderChange(e){
			console.log(e.detail.value)
			this.userInfo.sex = e.detail.value
		},

		//选择的日期
		birthdayChange(e){
			console.log(e.detail.value)
			this.userInfo.birthday = e.detail.value
		},

		// 去实名认证
		gotoRealNameAuth(){
			uni.navigateTo({
				url: '/myPages/realNameAuth/index',
			})
		},
		// 保存用户信息
		saveUserInfo(){
			// 保存数据
			this.$api.saveUserInfo(this.userInfo).then((res)=>{
				console.log(res)
				// 刷新用户信息
				this.getUserInfo();
				uni.showToast({
					title: "操作成功"
				})
				// setTimeout(res=>{
				// 	uni.switchTab({
				// 		url: '/pages/index/index',
				// 	},2000)
				// })

			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},

		getUserInfo(){
			this.$api.getUserInfo().then(res=>{
				console.log('++++++++++++获取用户信息++++++++++++++++++',res)
				uni.setStorageSync('userInfo',res.data.data)
				this.userInfo = res.data.data
				if (this.userInfo.selfPhoto){
					this.getImgUrlByOssId(this.userInfo.selfPhoto)
				}
			})

		},

		getImgUrlByOssId(Id){
			this.$api.getImage(Id).then(res=>{
				this.userInfo.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
				this.$set(this.userInfo)
			});
		},
		//头像上传

		chooseavatar(e){
			let that = this
			let avatarUrl =e.detail.avatarUrl
			console.log(e.detail.avatarUrl)
			uni.uploadFile({
				url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
				filePath:avatarUrl,
				name: 'file',
				header: {
					// "Content-Type": "multipart/form-data",
					// 'X-Access-Token': uni.getStorageSync('token'),
					'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
				},
				success: (uploadFileRes) => {
					let res = JSON.parse(uploadFileRes.data)
					console.log('+++++++++++++++++chooseavatar+++++++++++++++++++++++',uploadFileRes.data)
					that.userInfo.selfPhoto=res.data.ossId
					that.userInfo.selfPhotoUrl = res.data.url.replace(/^http:/, "https:")
				}
			});

		},
	}
};
</script>

<style lang="scss">
	@import '/common/css/common.css';
	@import './index.rpx.css';
</style>