duantuihe/pages/my/userInfo/index.vue

<template>
	<view class="container">
		<navBar title="个人资料" :back="true" color="#333333" background="#FFFFFF" />
		<view class="outerBox">
			<view class="upBox">

				<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="" class="upIcon" @click="upload"></image>
				<image v-else :src="picBase+'upCamera.png'" mode="heightFix" class="upIcon1" @click="upload"></image>

			</view>

			<view class="label">
				推荐奖励
			</view>

			<view class="editBox">
				<view class="item">
					<view class="left">
						昵称
					</view>
					<view class="right">
						<input type="text" placeholder="请输入昵称" v-model="userInfo.nackname" />
						<image :src="picBase+'edit2.png'" mode="heightFix" class="editIcon"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						手机号
					</view>
					<view class="right">
						<input type="number" placeholder="请输入手机号" v-model="userInfo.phone" />
						<image :src="picBase+'edit2.png'" mode="heightFix" class="editIcon"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">
						ID号
					</view>
					<view class="right">
						{{userInfo.id}}
					</view>
				</view>
			</view>


			<view class="btnBox">
				<view class="btn b1">
					保存修改
				</view>
				<view class="btn b2" @click="logoOut">
					退出登录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	import uploadUrl from '@/common/config.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				userInfo: {
					// avatar: this.$picBase2 + 'logo.png',
					avatar: '',
					nackname: '海绵宝',
					phone: '10928309109',
					id: '237429302'
				},
				mode: 0
			}
		},
		onLoad() {

		},
		methods: {

			logoOut() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					confirmColor: '#017AFF',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							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/upload',
					filePath: file,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data'
					},
					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.file
							console.log('上传后的头像url地址', result.data.file)
						}
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},
		}
	}
</script>

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