duantuihe/pages/my/userInfo/index.vue

<template>
	<view class="container">
		<navBar title="个人资料" :back="true" color="#333333" background="#FFFFFF" />
		<!-- <u-loading-page :loading="showLoadingPage" image="/static/other/loadingIcon.png"
			icon-size="46"></u-loading-page> -->

		<loadingPage v-if="showLoadingPage" />

		<view class="outerBox">
			<view class="upBox">

				<button v-if="userInfo.avatar" class="avatarBox" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar">
					<image :src="userInfo.avatar" mode="" class="upIcon"></image>
					</image>
				</button>

				<button v-else class="avatarBox" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="picBase+'upCamera.png'" mode="heightFix" class="upIcon1">
				</button>
			</view>

			<view class="label">
				个人资料
			</view>

			<view class="editBox">
				<view class="item">
					<view class="left">
						昵称
					</view>
					<view class="right">
						<input placeholder="请输入昵称" v-model="userInfo.name" type="nickname" @input="onInputNickname" />
						<image :src="picBase+'edit2.png'" mode="heightFix" class="editIcon"></image>
					</view>
				</view>
				<view class="item">
					<view class="left" style="width:100rpx ;">
						手机号
					</view>
					<view class="right">
						<input type="number" placeholder="请输入手机号" v-model="userInfo.mobile" />
						<image :src="picBase+'edit2.png'" mode="heightFix" class="editIcon"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						ID号
					</view>
					<view class="right">
						{{'00000000'+userInfo.id}}
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn b1" @click="updateUserInfo">
				保存修改
			</view>
			<view class="btn b2" @click="logoOut">
				退出登录
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserInfo
	} from '@/api/index/index.js'
	import uploadUrl from '@/common/config.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				showLoadingPage: true,


				picBase: this.$picBase2,
				// userInfo: {
				// 	// avatar: this.$picBase2 + 'logo.png',
				// 	avatar: '',
				// 	nackname: '海绵宝',
				// 	phone: '10928309109',
				// 	id: '237429302'
				// },
				mode: 0,

				userInfo: {
					avatar: '',
					name: '',
					mobile: ''
				},
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showLoadingPage = false
			}, 1000)
			this.getUserInfo()
		},
		methods: {
			// 输入框输入或选择微信昵称
			onInputNickname(event) {
				console.log('onInputNickname-----------', event);
				this.userInfo.name = event.target.value;
			},

			onChooseAvatar(e) {
				console.log('onChooseAvatar(e)------e', e.detail.avatarUrl);
				this.upImg(e.detail.avatarUrl)
			},

			async updateUserInfo() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.userInfo.avatar) {
					return this.$toast('请上传头像')
				}
				if (!this.userInfo.name) {
					return this.$toast('请输入昵称')
				}
				if (!this.userInfo.mobile || !phoneReg.test(this.userInfo.mobile)) {
					return this.$toast('请输入合法的手机号')
				}

				let p = {
					name: this.userInfo.name,
					avatar: this.userInfo.avatar,
					mobile: this.userInfo.mobile
				}
				this.userInfo
				console.log('更新用户信息参数--------', p);
				let res1 = await updateUserInfo(p)
				console.log('更新用户信息返回值--------', res1);
				if (res1.code == 0) {
					this.$toast('保存成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					this.$toast(res1.message)
				}
			},
			async getUserInfo() {
				let res1 = await getUserInfo()
				console.log('用户信息返回值--------2', res1);
				if (res1.code == 0) {
					uni.setStorageSync('userInfo', res1.data)
					this.userInfo = res1.data
				} else {
					this.$toast(res1.message)
				}
			},
			logoOut() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					confirmColor: '#017AFF',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/my/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// upload() {
			// 	let _this = this
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success(res) {
			// 			console.log('res', res.tempFilePaths[0]);
			// 			_this.upImg(res.tempFilePaths[0])
			// 		}
			// 	})

			// },

			upImg(file) {
				console.log('upImg的file', file)
				let _this = this
				uni.uploadFile({
					url: uploadUrl.baseUrl + '/api/avatar/upload',
					filePath: file,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
						'Authorization': uni.getStorageSync('token')
					},
					formData: {
						'fileType': 'images',
						'dirName': 'cert',
						'tag': 'lamp'
					},
					success: function(uploadRes) {
						let result = JSON.parse(uploadRes.data)
						if (result.code == 0) {
							_this.userInfo.avatar = result.data.url
							console.log('上传后的头像url地址', result.data.url)
						}
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>