ds_mobile_app/mobile/pages/user/info.vue

<template>
	<view class="container">
		<view class="list_cell m_t mem_avatar_wrap flex_row_between_center" hover-class="cell_hover"
			:hover-stay-time="50" @click="setAvatar">
			<text class="cell_tit">{{$L('修改会员头像')}}</text>
			<view class="flex_row_end_center">
				<view class="avatar" :style="{backgroundImage: 'url('+memberAvatar+')', backgroundSize:'cover'}" />
				<text class="cell_more iconfont iconziyuan11"></text>
			</view>
		</view>

		<view class="list_cell m_t" hover-class="cell_hover" :hover-stay-time="50">
			<text class="cell_tit">{{$L('会员名')}}</text>
			<view>
				<text class="cell_right_con">{{memberName}}</text>
			</view>
		</view>

		<view class="list_cell b_b m_t" @click="changeNickName" hover-class="cell_hover" :hover-stay-time="50">
			<text class="cell_tit">{{$L('昵称')}}</text>
			<view>
				<text class="cell_right_con">{{memberNickName}}</text>
				<text class="cell_more iconfont iconziyuan11"></text>
			</view>
		</view>
		<view hover-class="cell_hover" :hover-stay-time="50">
			<picker @change="selSex" :value="gender" :range="sexArray">
				<view class="list_cell b_b">
					<text class="cell_tit">{{$L('性别')}}</text>
					<view class="flex_row_end_center">
						<view class="uni_birthday">{{sexArray[gender]}}</view>
						<text class="cell_more iconfont iconziyuan11"></text>
					</view>
				</view>
			</picker>
		</view>
		<view  hover-class="cell_hover" :hover-stay-time="50">
			<picker mode="date" :end="filters.getDateTime(endtime)" :value="memberBirthday" @change="selBirthDay">
				<view class="list_cell">
				<text class="cell_tit">{{$L('生日')}}</text>
					<view class="flex_row_end_center">
						<view class="uni_birthday">{{memberBirthdayCon}}</view>
						<text class="cell_more iconfont iconziyuan11"></text>
					</view>
				</view>
			</picker>
		</view>
	</view>
</template>
<script module="filters" lang="wxs" src="@/utils/filter.wxs"></script>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				memberAvatarLocal: '',
				memberAvatar: getApp().globalData.imgUrl + 'default/member-avatar.png', //会员头像
				memberName: '',
				memberNickName: '', //昵称
				gender: 0,
				sexArray: ['保密', '男', '女'],
				memberBirthday: '',
				memberBirthdayCon: '请选择生日',
				endtime: new Date().getTime()
			};
		},
		onLoad() {
			this.getMmeberInfo();
		},
		computed: {
			...mapState(['userInfo', 'userCenterData'])
		},
		methods: {
			...mapMutations(['setUserCenterData']),
			//获取会员信息
			getMmeberInfo() {
				let _this = this;
				this.$request({
					url: 'v3/member/front/member/memberInfo',
					method: 'GET'
				}).then(res => {
					if (res.state == 200) {
						let result = res.data;
						_this.memberAvatar = result.memberAvatar;
						_this.memberName = result.memberName;
						_this.memberNickName = result.memberNickName;
						_this.gender = result.gender;
						_this.memberBirthdayCon = result.memberBirthday ? result.memberBirthday : '请选择生日';
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {

				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			//选择生日
			selBirthDay(e) {
				this.saveMemInfo('memberBirthday', e.detail.value);
			},
			//选择性别
			selSex(e) {
				this.saveMemInfo('gender', e.detail.value);
			},
			//更新会员昵称
			updateMemInfo(val) {
				this.memberNickName = val;
				//更新个人信息数据
				this.userCenterData.memberNickName = val;
				this.setUserCenterData(this.userCenterData);
			},
			//保存会员信息
			saveMemInfo(index, val) {
				
				if(val==this[index]){
					return
				}
				
				let param = {};
				param.url = 'v3/member/front/member/updateInfo';
				param.data = {};
				param.method = 'POST';
				param.data[index] = val;
				this.$request(param).then(res => {
					this.$api.msg(res.msg);
					if (res.state != 200) {
						this.$api.msg(res.msg);
					} else {
						if (index == 'memberAvatar') {
							this.memberAvatar = this.memberAvatarLocal;
							//更新个人信息数据
							this.userCenterData.profilePic = this.memberAvatar;
							this.userCenterData.memberAvatar = this.memberAvatar;
							this.setUserCenterData(this.userCenterData);

						} else if (index == 'memberBirthday') {
							this[index] = val;
							this.memberBirthdayCon = val;
						} else {
							this[index] = val;
						}
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//设置头像
			setAvatar() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						if (res.tempFiles[0].size > 20971520) {
							uni.showToast({
								title: '超出了文件限制20M',
								icon: 'none',
								duration: 700
							})
						} else {
							uni.uploadFile({
								url: getApp().globalData.apiUrl + 'v3/oss/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {
									'source': 'headImg',
									'file': res.tempFiles[0]
								},
								success: (uploadFileRes) => {
									let result = JSON.parse(uploadFileRes.data);
									if (result.state == 200) {
										_this.memberAvatarLocal = result.data.url;
										_this.saveMemInfo('memberAvatar', result.data.path);
									} else {
										uni.showToast({
											title: uploadFileRes.msg,
											icon: 'none',
											duration: 700
										})
									}
								},
								fail: (uploadFileRes) => {
									uni.showToast({
										title: uploadFileRes.msg,
										icon: 'none',
										duration: 700
									})
								}
							});
						}
					},
				});
			},
			//修改昵称事件
			changeNickName() {
				uni.navigateTo({
					url: `/pages/user/changeInfo?nickName=${this.memberNickName?encodeURIComponent(this.memberNickName):''}`
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
	}

	.list_cell {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		line-height: 100rpx;
		height: 100rpx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.cell_hover {
			background: #fafafa;
		}

		&.b_b:after {
			left: 20rpx;
		}

		&.m_t {
			margin-top: 20rpx;
		}

		.cell_more {
			color: $main-third-color;
			font-size: 18rpx;
			margin-left: 10rpx;
		}

		.cell_tit {
			flex: 1;
			font-size: 28rpx;
			color: #2D2D2D;
			margin-right: 10rpx;
		}

		.cell_right_con,
		.uni_birthday {
			color: #949494;
			font-size: 26rpx;
		}

		&.mem_avatar_wrap {
			height: 120rpx;
			line-height: 120rpx;
		}

		.avatar {
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
			background-size: 100%;
			background-position: center center;
			background-repeat: no-repeat;
			overflow: hidden;
			background-color: #F8F6F7;
		}
	}
</style>