app_evaluating/pages/mine/index.vue

<template>
	<view>
		<view class="content">
			<view class="image">
				<view class="image-content">
					<image class="background" :src="backImg" mode="aspectFill">
				</view>
				<view class="image-avatar">
					<image class="avatar" :src="titlePhotoSrc" mode="aspectFill" @error="imgLoadError" @tap="choseImg">
						<view v-if="userInfoObj != null">
							<view style="text-align: center;color: #FFFFFF;">{{userInfoObj.name}}</view>
							<view style="text-align: center;color: #FFFFFF;">{{userInfoObj.phone}}</view>
						</view>
						<view v-else>
							用户名
							手机号
						</view>
				</view>
			</view>

			<uni-list style="width: 93%;">
				<uni-list-item style="width: 100%;" title="修改个人信息" thumb="../../static/mine/ic_mine_center.png" @click="changeInfo"></uni-list-item>
				<uni-list-item style="width: 100%;" title="修改密码" thumb="../../static/mine/ic_pwd.png" @click="changePwd"></uni-list-item>
				<uni-list-item style="width: 100%;" title="退出" thumb="../../static/mine/ic_logout.png" @click="logout"></uni-list-item>
			</uni-list>

		</view>
	</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import common from '../../common/common.js'
	var _self;
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				token: '',
				userInfoObj: null,
				titlePhotoSrc: '../../static/mine/mine_bg.png',
				backImg: '../../static/mine/mine_bg.png'
			}
		},
		onShow() {
			var appToken = uni.getStorageSync('appToken');
			if (!appToken) {
				uni.reLaunch({
					url: '../login/index'
				});
			}
			_self.token = appToken
			var userInfoStr = uni.getStorageSync('userInfo');
			if (!userInfoStr) {
				uni.reLaunch({
					url: '../login/index'
				})
			} else {
				_self.userInfoObj = JSON.parse(userInfoStr);
				_self.titlePhotoSrc = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + _self.userInfoObj.avatar
				_self.backImg = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + _self.userInfoObj.avatar
				// _self.backImg = '../static/mine/mine_bg.png'
				// _self.titlePhotoSrc = '../static/mine/mine_bg.png'
			}
		},
		onLoad() {
			_self = this;

			var userInfoStr = uni.getStorageSync('userInfo');
			if (!userInfoStr) {
				uni.reLaunch({
					url: '../login/index'
				})
			} else {
				_self.userInfoObj = JSON.parse(userInfoStr);
				_self.titlePhotoSrc = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + _self.userInfoObj.avatar
				_self.backImg = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + _self.userInfoObj.avatar
				// _self.backImg = '../static/mine/mine_bg.png'
				// _self.titlePhotoSrc = '../static/mine/mine_bg.png'
			}
		},
		methods: {
			choseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: "头像上传中...",
						})
						var startIndex = res.tempFilePaths[0].lastIndexOf("/");
						var fileName = res.tempFilePaths[0].substring(startIndex + 1, res.tempFilePaths[0].length);
						uni.uploadFile({
							url: common.userCenterBaseUrl + '/app/file/uploadimage',
							filePath: res.tempFilePaths[0],
							name: 'image',
							formData: {
								"image": fileName
							},
							header: {
								"token": _self.token
							},
							success: res => {
								if (res.statusCode == '200') {
									var imgData = res.data;
									var imgIdObj = JSON.parse(imgData);
									_self.titlePhotoSrc = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + imgIdObj.data
									_self.backImg = common.userCenterBaseUrl + '/route/file/downloadfile/true/' + imgIdObj.data
									_self.userInfoObj.avatar = imgIdObj.data
									var uStr = JSON.stringify(_self.userInfoObj);
									uni.setStorageSync('userInfo', uStr);
									_self.changeUserInfo(_self.userInfoObj);

								} else {
									uni.hideLoading()
									uni.showToast({
										title: "上传失败,请重试",
										duration: 1000
									})
								}
							},
							fail: (error) => {
								uni.hideLoading()
								uni.showToast({
									title: "上传失败,请重试",
									duration: 1000
								})
							}
						});
					}
				});
			},
			changeUserInfo(uStr) {
				var urlPath = common.userCenterBaseUrl + '/app/user/updateuserinfo';
				uni.request({
					method: 'PUT',
					url: urlPath,
					data: {
						'email': uStr.email,
						'name': uStr.name,
						'phone': uStr.phone,
						'avatar': uStr.avatar
					},
					header: {
						'token': _self.token,
					},
					success(res) {
						uni.showToast({
							title: "上传成功",
							duration: 1000
						})
					},
					fail(error) {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败,请重试',
							duration: 1000
						})
					}
				})
			},
			imgLoadError(e) {
				_self.titlePhotoSrc = '../../static/mine/mine_bg.png'
				_self.backImg = '../../static/mine/mine_bg.png'
				// _self.titlePhotoSrc = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
				// _self.backImg = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
			},
			changePwd() {
				uni.navigateTo({
					url: './changePwdPage'
				})
			},
			changeInfo() {
				uni.navigateTo({
					url: './changeMineInfo'
				})
			},
			logout() {
				var self = this;
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							uni.removeStorage({
								key: 'appToken',
								success() {
									_self.$RULE.token = '';
								}
							})
							uni.removeStorage({
								key: 'userInfo',
								success() {
									uni.redirectTo({
										url: '../login/index'
									});
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.content {}

	.content .image {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content .image .image-content {
		width: 100%;
	}

	.content .image .image-content .background {
		width: 100%;
		height: 450rpx;
	}

	.content .image .image-avatar {
		position: fixed;
		align-self: center;
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
	}

	.content .image .image-avatar .avatar {
		width: 185rpx;
		height: 185rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
		border-radius: 90rpx;
	}

	.content .user-username {}

	.content .user-name {}

	.confirm-logout-box {
		width: 400rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		text-align: center;
		border-radius: 20rpx;
	}

	.confirm-logout-box .confirm-logout-message {
		height: 140rpx;
		line-height: 140rpx;
	}

	.confirm-logout-box .confirm-logout-bottons .confirm {
		float: left;
		width: 199rpx;
		text-align: center;
		border-top: 1px solid silver;
		border-right: 1px solid silver;
	}

	.confirm-logout-box .confirm-logout-bottons .cancel {
		float: right;
		width: 199rpx;
		text-align: center;
		border-top: 1px solid silver;
		border-left: 1px solid silver;
	}

	.item-li {
		width: 100%;
		/* display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center; */
	}
</style>