mudi-app/pages/user/userEdit/userEdit.vue

<template>
	<view class="userEdit">
		<u-navbar back-text="返回" title="个人资料" :title-bold="true"></u-navbar>
		<view class="info" v-if="userInfo">
			<view class="userImg">
				<u-image width="160rpx" height="160rpx" :src="userInfo.headImgPath" @click="toUserEdit"
					v-if="userInfo.headImgPath" border-radius="50%"></u-image>
				<u-image width="160rpx" height="160rpx" src="../../../static/mes3.png" @click="toUserEdit" v-else>
				</u-image>
				<view class="photo" @click="updeteImg">
					<u-image width="60rpx" height="60rpx" src="../../../static/photo.png"
						style="margin-left: 12rpx;transform: translateY(5rpx);"></u-image>
				</view>
			</view>
			<view class="name">
				<view class="left">
					昵称
				</view>
				<view class="right" @click="editName">
					{{userInfo.nickname}}
					<u-image width="32rpx" height="32rpx" src="../../../static/clear.png"
						style="margin-left: 12rpx;"></u-image>
				</view>
			</view>
			<view class="phone">
				<view class="left">
					账号
				</view>
				<view class="right">
					{{userInfo.mobile}}
				</view>
			</view>
		</view>

		<view class="back" @click="isBackUser = true">
			退出登录
		</view>
		<u-modal v-model="show" v-show="show" negative-top="200rpx" confirm-color="#BFC2CC" :class="{active: isSubmit}"
			@cancel="show =false;newName = ''" @confirm="confirm" :show-cancel-button="true" :show-title="false">
			<view class="title">
				修改昵称
			</view>
			<view class="input">
				<u-input v-model="newName" :focus="true" :placeholder="userInfo.nickname" :border="true" />
			</view>
		</u-modal>
		
		<u-modal v-model="isBackUser" :show-cancel-button="true" confirm-color="red" @confirm="back" content="是否确定退出登录?"></u-modal>
	</view>
</template>

<script>
	import config from '../../../config/config.js' 
	export default {
		data() {
			return {
				show: false,
				newName: '',
				photo: '',
				userInfo: null,
				action: config.baseUrl + '/member/member/uploadHeadImage',
				isBackUser:false,
			}
		},
		methods: { 
			editName() {
				this.show = true
			},
			async confirm() {
				if (!this.isSubmit) {
					this.show = true
					return
				}
				this.userInfo.nickname = this.newName
				let res = await this.$u.api.user.upUserInfo({
					ticket: this.user.ticket,
					nickname: this.userInfo.nickname,
				})
				console.log(this.userInfo, 99000)
				this.$u.vuex('user.userInfo', this.userInfo)
				this.newName = ''

			},
			
			beforeUpload(index, list) {
				// 只上传偶数索引的文件
				console.log(index, list)
			},
			back() {
				this.$u.vuex('user.userInfo', '')
				this.$u.vuex('user.ticket', '')
				uni.navigateTo({
					url:'../../index/login'
				})
			},
			async updeteImg() {
				let _then = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: config.baseUrl + '/home/uploadFile',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								path: 'head'
							},
							success: async (fileRes) => {
								let fileData = JSON.parse(fileRes.data)
								console.log(_then)
								_then.userInfo.headImgPath = fileData.data.url
								await _then.$u.api.user.upUserInfo({
									headImgPath: _then.userInfo.headImgPath
								})
							}
						})
					}
				})
			}
		},
		computed: {
			isSubmit() {
				return this.newName !== ''
			},
			fileList() {
				let src = this.userInfo.headImgPath
				return [{url:src}]
			}
			
		},
		onLoad() {
			this.userInfo = JSON.parse(JSON.stringify(this.user.userInfo))
			console.log(this.userInfo, 6677)
		},
		onShow() {
			this.userInfo = this.user.userInfo
		}
	}
</script>

<style lang="scss" scoped>
	.userEdit {
		height: 100%;
		background-color: #f5f7fa;

		.userImg {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 280rpx;

			.photo {
				position: absolute;
				top: 155rpx;
				left: 355rpx;
			}

			/deep/ .u-list-item {
				background-color: #FFFFFF;
				border: 0;
			}
		}


		.info {
			padding: 0 36rpx;
			// padding-top: 60rpx;	
			background-color: #FFFFFF;
		}

		.name,
		.phone {
			display: flex;
			align-items: center;
			height: 108rpx;
			border-bottom: 2rpx solid #F7F9FC;

			.right,
			.left {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				flex: 1;
			}
		}

		.back {
			margin-top: 120rpx;
			height: 108rpx;
			background-color: #FFFFFF;
			line-height: 108rpx;
			color: #F44D4D;
			text-align: center;
		}

		.title {
			height: 140rpx;
			line-height: 140rpx;
			border-radius: 24rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
		}

		.input {
			margin-bottom: 48rpx;
			padding: 0 36rpx;
		}

		.active {
			/deep/ .hairline-left {
				color: #0000ff !important;
			}
		}

	}
</style>