great_mobileui/center/memberinfo.vue

<template>
	<view class="pages">
		<u-navbar
			title="个人信息"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="cell-title">个人信息</view>
			<u-cell-group :border="false" :customStyle="{background:'#fff','border-radius':'20rpx'}">
				<!-- <u-cell  title="头像">
					<u-avatar slot="right-icon" :src="memberInfo.avatar" size="80rpx"></u-avatar>
				</u-cell> -->
				<view class="avatar u-flex u-row-between u-border-bottom">
					<text>头像</text>
					<view class="right">
						<u--image :src="memberInfo.avatar" shape="circle" width="80rpx" height="80rpx"></u--image>
						<u-upload
							 width="80rpx"
							 height="80rpx"
						    :fileList="fileList"
						    @afterRead="afterRead"
							:previewImage="false"
							multiple
						    name="name"
						    :maxCount="2"
						></u-upload>
					</view>
				</view>
				<u-cell title="姓名" v-if="memberInfo.isAuth==1" @click="$u.toast('不允许修改')" :value="vuex_member_info.name" :border="true"></u-cell>
				<u-cell title="昵称" @click="nameShow=true" :value="vuex_member_info.nickName" :border="true"></u-cell>
				<!-- <u-cell title="性别" @click="handleChangeSex" :value="memberInfo.sex|filterSex"></u-cell> -->
				<!-- <u-cell title="生日" :value="memberInfo.birthdayTime||'未设置'" @click="handleChangeBirthday" :isLink="true"></u-cell> -->
				<!-- <u-cell title="会员等级" :value="memberInfo.levelName"></u-cell> -->
				<u-cell title="实名制认证" @click="factorAuth" :value="memberInfo.isAuth==1?'已认证':'去认证'"></u-cell>
			</u-cell-group>
			<u-button text="取消登录" type="error" @click="logOut" :customStyle="{'margin-top': '120rpx'}"></u-button>
			<u-datetime-picker
				:show="timeShow"
				:minDate="new Date().getTime()-365*100*24*3600*1000"
				v-model="birthday"
				:maxDate="new Date().getTime()"
				@confirm="updateBirthday"
				mode="date"
				:closeOnClickOverlay="true"
				@close="timeShow = false"
				@cancel="timeShow = false"
			></u-datetime-picker>
		</view>
		<u-modal :show="nameShow"  title="修改昵称" @confirm="changeName" @cancel="nameShow=false" :showCancelButton="true" >
			<view class="slot-content">
				<u--input
				    placeholder="请输入内容"
				    border="surround"
				    v-model="tempName"
					maxlength="8"
				  >
				</u--input>
			</view>
		</u-modal>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {uploadImg} from '../utils/uploadImg.js'
	export default {
		components:{
			
		},
		data() {
			return {
				showSex:false,
				sex:'',
				nameShow:false,
				tempName:'',
				uploadFileUrl:this.$commonConfig.uploadFileUrl,
				timeShow:false,
				birthday:'',
				memberInfo:{},
				fileList:[],
				avatarUrl:'',
				actions: [
					{name: '男',val:1},
					{name: '女',val:2},
					{name: '保密',val:0},
				],
			}
		},
		onShow() {	
			this.getMemberInfo();
			// console.log('1111',this.uploadFileUrl);
		},
		onLoad() {

		},
		methods: {
			logOut(){
				this.$u.vuex('vuex_member_info', {});
				this.$u.vuex('vuex_user_info', {});
				uni.$u.route('/pages/index/index')
				// this.getMemberInfo()
			},
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_user_info.userId}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					// console.log('memberInfo',this.memberInfo);
					this.$u.vuex('vuex_member_info', res.data);
					}).catch(err=>{
					console.log('memberInfo',err);
				})
			},
			handleChangeSex(){
				if(this.memberInfo.isAuth==1){
					this.$refs.uToast.show({
						type: 'default',
						message: "实名信息不能修改！",
					})
				}else{
					this.showSex = true
				}
			},
			handleChangeBirthday(){
				if(this.memberInfo.isAuth==1){
					this.$refs.uToast.show({
						type: 'default',
						message: "实名信息不能修改！",
					})
				}else{
					this.timeShow = true
				}
			},
			updateBirthday(e){
				// console.log('000',e);
				let birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.birthday = birthday;
				this.updateMemberInfo('birthday');
				this.timeShow = false;
			},
			// 新增图片
			async afterRead(event){
				//使用这个封装
				const result = await uploadImg(event,this.fileList)
				let parseResult = JSON.parse(result.data).data;
				console.log('urlurl',parseResult.url);
				this.avatarUrl = parseResult.url;
				if(!this.avatarUrl){
					uni.showToast({
						title: '上传失败!',
						icon: "error"
					});
					return
				};
				this.updateMemberInfo('avatar');
				let item = this.fileList[result.fileListLen]
				this.fileList.splice(result.fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '成功',
					url: JSON.parse(result.data).data
				}));
			},
			updateMemberInfo(type){
				let params ={
					id:this.vuex_user_info.userid
				};
				if(type == 'avatar'){
					params.avatar = this.avatarUrl;
				}else if(type == 'birthday'){
					params.birthdayTime = this.birthday;
				}else if(type == 'nickName'){
					if(!this.tempName){
						uni.showToast({
							title:'请输入昵称',
							icon:'error'
						})
						return
					}
					params.nickName = this.tempName;
				}else if(type == 'sex'){
					params.sex = this.sex;
				}
				this.$u.api.updateMemberInfo(params).then(res=>{
					this.getMemberInfo();
					this.nameShow = false;
				}).catch(err=>{
					console.log('err',err);
				})
			},
			changeName(){
				this.updateMemberInfo('nickName');
				console.log('memberInfo',this.memberInfo);
			},
			sexSelect(e){
				this.sex = e.val;
				this.updateMemberInfo('sex')
				console.log('sexSelect',e);
			},
			factorAuth(){
				if(this.memberInfo.isAuth==1){
					uni.showToast({
						title:'已认证',
						icon:'none'
					})
					return
				}
				uni.$u.route('/center/factorauth', {
					backUrl: '/center/center'
				});
			}
		}
	}
</script>
<style>
page{
	background-color: #F7F7F9;
}
</style>
<style lang="scss" scoped>
.cell-title{
	font-size: 28rpx;
	font-weight: 400;
	color: #7F7F7F;
	margin-bottom: 34rpx;
}
.avatar{
	padding: 10px 15px;
	font-size: 15px;
	color: #303133;
	.right{
		position: relative;
		/deep/ .u-upload{
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}
	}
}
</style>