pillow_customize_app/pages/pages_zhentou/myPage/myPage.vue

<template>
	<view>
		<view class="person_box">
			<view class="avatar_warp">
				<text>头像</text>
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="avatar-box">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar"></image>
					<image v-else :src="avatarUrl" class="avatar"></image>
				</button>
			</view>
			<view class="nickname_warp">
				<text>昵称</text>
				<input v-if="userInfo.phone" @blur="formSubmit" v-model="userInfo.username" class="nickname" type="nickname" placeholder="请输入昵称" />
				<input v-else class="nickname" type="nickname" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="cnt-box">
			<view class="title">用户功能</view>
			<view class="li_box" @click="returnOrder">
				<view class="li_left">
					<image src="../../../static/image/icon-order.png" style="width: 40rpx; height: 40rpx;margin-right: 13rpx;">
					</image>
					我的订单
				</view>
				<image src="../../../static/image/icon-arrow-right.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
			<view class="li_box" @click="returnAddress">
				<view class="li_left">
					<image src="../../../static/image/icon-address.png" style="width: 40rpx; height: 40rpx;margin-right: 13rpx;">
					</image>
					收货地址管理
				</view>
				<image src="../../../static/image/icon-arrow-right.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
			<view class="li_box" @click="returnContact">
				<view class="li_left">
					<image src="../../../static/image/icon-contact.png" style="width: 40rpx; height: 40rpx;margin-right: 13rpx;">
					</image>
					售后服务
				</view>
				<image src="../../../static/image/icon-arrow-right.png" style="width: 40rpx; height: 40rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickName: '',//默认值
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				userInfo: {
					username: '',
					avatar: '',
					phone: ''
				}
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
				this.userInfo.avatar = this.userInfo.avatar ? this.userInfo.avatar : this.avatarUrl;
			} else {
				this.userInfo.avatar = this.avatarUrl;
			}
		},
		methods: {
			//获取昵称
			formSubmit(e) {
				console.log(e.detail)
				if(e.detail.value) {
					this.updateNickname(e.detail.value);
				}
			},
			//获取头像
			chooseavatar(e) {
				if(!this.userInfo.phone) {
					this.avatarUrl = e.detail.value;
					return;
				}
				uni.uploadFile({
					url: getApp().globalData.baseUrl + '/blade-resource/oss/endpoint/put-file',
					filePath: e.detail.avatarUrl,
					name: "file",
					fileType: 'image',
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						let _data = JSON.parse(res.data);
						if (_data.code == 200) {
							this.updateAvatar(_data.data.link);
						}else if(_data.code == 401){
							this.doLogin();
						}
					}
				})
			},
			updateAvatar(avatarUrl) {
				uni.request({
					url: getApp().globalData.baseUrl + '/weChatUser/update',
					method: 'POST',
					data: {
						id: this.userInfo.id,
						avatar: avatarUrl,
					},
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.userInfo.avatar = avatarUrl;
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
						} else if (res.data.code == 401) {
							this.doLogin();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			updateNickname(nickName) {
				uni.request({
					url: getApp().globalData.baseUrl + '/weChatUser/update',
					method: 'POST',
					data: {
						id: this.userInfo.id,
						username: nickName,
					},
					header: {
						'Blade-Auth': 'bearer ' + uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.userInfo.username = nickName;
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
						} else if (res.data.code == 401) {
							this.doLogin();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			returnOrder() {
				uni.navigateTo({
					url: "/pages/pages_zhentou/order/order"
				})
			},
			returnContact() {
				uni.navigateTo({
					url: "/pages/pages_zhentou/contact/contact"
				})
			},
			returnAddress() {
				uni.navigateTo({
					url: "/pages/pages_zhentou/myPage/address"
				})
			},
			//登录
			doLogin() {
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				uni.request({
					url: getApp().globalData.baseUrl + '/blade-auth/getToken',
					method: 'POST',
					data: {
						openId: getApp().globalData.openId,
						phone: this.userInfo.phone
					},
					header: {
						'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.person_box {
		margin: 30rpx;
		padding: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		background-color: #fff;
		border-radius: 30rpx;

		.avatar_warp {
			display: flex;
			justify-content: space-between;
			align-items: center;

			button::after {
				border: 0;
				border-radius: 20rpx;
			}

			button {
				width: 100rpx;
				height: 100rpx;
				background-color: none;
				padding: 0;
			}

			.avatar-box {
				margin: 0;
				overflow: hidden;

				.avatar {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.nickname_warp {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			.nickname {
				width: 554rpx;
				text-align: right;
				border: 0;
			}
		}
	}

	.cnt-box {
		min-height: calc(100vh - 220rpx - 30rpx);
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 30rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			padding: 30rpx 30rpx 42rpx 30rpx;
		}
	}

	.li_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 37rpx;
		margin: 0 16rpx 52rpx 30rpx;

		.li_left {
			display: flex;
			align-items: center;
		}
	}
</style>