puqiang/pages/mine/Myprofile.vue

<template>
	<view>
		<view class="setBox">
			<view class="setList" @tap="setHead" style="height: 140rpx;line-height: 120rpx;">
				<text style="font-size: 30rpx;color: #333333;">头像</text>
				<image src="/static/images/arrow.png" class="more">
				</image>
				<image
					:src="picUrl||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/zkgj/headPicture.png'"
					class="headPicture"></image>
			</view>
			<view>
				
				<navigator class="setList" :url="'/pages/mine/nickname?userName=' + name + '&imgSrc=' + imgSrc">
					<text style="font-size: 30rpx;color: #333333;">昵称</text>
					<image src="/static/images/arrow.png" class="more"></image>
					<text class="userName">{{name||"暂无昵称"}}</text>
				</navigator>
				
				<navigator class="setList" url="/pages/mine/signature">
					<text style="font-size: 30rpx;color: #333333;">签名</text>
					<image src="/static/images/arrow.png"	class="more"></image>
					<text class="userName">{{personalProfile||"暂无签名"}}</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../utils/util.js");
	var config = require("../../config");

	export default {
		data() {
			return {
				userInfo: {},
				picUrl: "",
				name: "",
				personalProfile: ""
			};
		},
		onShow: function() {
			const userInfo = uni.getStorageSync("weapp_session_userInfo_data");
			this.userInfo = userInfo;
			this.picUrl = userInfo.picUrl;
			this.name = userInfo.name;
			this.personalProfile = userInfo.personalProfile;
		},
		methods: {
			// 图片上传
			setHead: function() {
				var _this = this;

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					// original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					// album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						// success
						_this.imgSrc = res.tempFilePaths; //图片路径

						

						_this.uploadimg();
					},
					fail: function() { // fail
					},
					complete: function() { // complete
					}
				});
			},
			//上传图片至服务器
			uploadimg: function() {
				var that = this; //获取本地用户信息
				const tempFilePaths = that.imgSrc;
				if (tempFilePaths.length < 1) {
					util.showNone("请上传图片");
					return false;
				}
				console.log(tempFilePaths);
				uni.uploadFile({
					url: config.service.uploadHeadImg,
					header: {
						"Access-Token": uni.getStorageSync('weapp_session_login_data').token
					},
					filePath: tempFilePaths[0],
					name: 'file',
					success(res) {
						console.log(res);
						const result = JSON.parse(res.data);
						if (result.code == 10000) {
							console.log(result.data);
							that.picUrl = result.data;
							that.userInfo.picUrl = result.data;
							uni.setStorageSync("weapp_session_userInfo_data", that.userInfo);
							util.showSuccess('修改成功');
						} else {
							util.showNone(result.message != '' ? result.message : '操作失败，请重新尝试');
							return false;
						}
					},
					fail(err) {
						console.log(err);
					}
				});;
			}
		}
	};
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.setBox {
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.setList {
		width: 100%;
		height: 100rpx;
		background: #fff;
		box-sizing: border-box;
		line-height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.headPicture {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		float: right;
		object-fit: cover;
		-o-object-fit: cover;
		border: 1rpx solid #ccc;
	}

	.userName {
		float: right;
	}

	.more {
		width: 18rpx;
		height: 32rpx;
		float: right;
		margin-top: 32rpx;
		margin-left: 20rpx;
	}

	.save {
		width: 100%;
		height: 87rpx;
		text-align: center;
		line-height: 87rpx;
		color: #fff;
		font-size: 32rpx;
		background: #0A6EE9;
		margin: 32rpx auto 36rpx;

	}
</style>