pet_server/pages/mine/editMine.vue

<template>
	<view class="content">
		<view class="edit">
			<view class="edit_p">修改资料</view>
			<view class="edit_a">
				<image :src="images ? images :'https://ldc365.cn/assets/static/moren.png'" class="edit_img" mode=""></image>
				<view class="edit_p1" @click="chooseImg">修改头像</view>
				<view class="edit_b">
					<view class="edit_p2">手机号</view>
					<view class="edit_p3">{{userinfo.mobile}}</view>
				</view>
				<view class="edit_b">
					<view class="edit_p2">昵称</view>
					<view class="edit_c" @click="inputDialogToggle">
						<input class="edit_p4" v-model="nickname"></input>
						<view class="edit_d">修改</view>
					</view>
				</view>
				<!-- 输入框示例 -->
				<uni-popup ref="nickname" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" value="" :beforeClose="true" placeholder="请输入昵称" @confirm="dialogInputConfirm" @close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog.vue"
	export default {
		data() {
			return {
				images: '',
				userinfo: {},
				nickname: ''
			}
		},
		onLoad() {
			this.GetUser()
		},
		components: {
			uniPopup,
			uniPopupDialog
		},
		methods: {
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			dialogInputConfirm(val) {
				uni.hideLoading()
				this.nickname = val
				// 关闭窗口后，恢复默认内容 
				this.$refs.nickname.close()
				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: "none"
					});
					return
				}
				this.request('/user/profile', {
					nickname: this.nickname
				}, 'post').then(res => {
					uni.showToast({
						title: '修改成功',
						icon: "none"
					});
				});
			},
			inputDialogToggle() {
				this.$refs.nickname.open()
			},
			dialogClose() {
				this.$refs.nickname.close()
			},
			//获取用户信息
			GetUser() {
				this.request('/user/index', '', 'post').then(res => {
					this.userinfo = res.data
					this.images = res.data.avatar
					this.nickname = res.data.nickname
				});
			},
			//选择图片
			chooseImg() {
				var _this = this;
				uni.chooseImage({
					sourceType: ["camera", "album"], //拍摄照片或者相册中选取
					sizeType: "compressed", //照片类型(这里选择进行压缩)
					count: 1, //可以选中的最大数量为8张
					success: (res) => {
						res.tempFilePaths.forEach(items => {
							uni.showLoading({
								title: '正在上传中...'
							});

							uni.uploadFile({
								url: this.url + '/common/upload', //图片上传接口
								filePath: items,
								fileType: 'image',
								name: 'file',
								header: {
									"token": uni.getStorageSync('token')
								},

								success: (res) => {
									uni.hideLoading();
									_this.images = JSON.parse(res.data).data.url
									_this.request('/user/profile', {
										avatar: _this.images
									}, 'post').then(res => {
										uni.showToast({
											title: '上传成功',
											icon: "none"
										});
									});
								},
								fail: (err) => {
									uni.hideLoading();
									console.error(err);
									uni.showToast({
										title: '上传失败'
									});
								}
							});
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background-color: #F2F2F2;
	}

	.edit {
		width: 702rpx;
		margin: 30rpx auto;

		.edit_p {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 42rpx;
			color: #000000;
			opacity: 1;
		}

		.edit_a {
			width: 100%;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;
			padding: 32rpx 22rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			text-align: center;
			padding-bottom: 15rpx;

			.edit_img {
				width: 118rpx;
				height: 118rpx;
				background: rgba(0, 0, 0, 0);
				border-radius: 50%;
				opacity: 1;
			}

			.edit_p1 {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #FF0000;
				opacity: 1;
				margin-top: 15rpx;
				margin-bottom: 80rpx;
			}

			.edit_b {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 35rpx auto;

				.edit_p2 {
					width: 100rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #B5B5B5;
					opacity: 1;
					margin-right: 30rpx;
					text-align: left;
				}

				.edit_p3 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					opacity: 1;
					text-align: left;
					width: 580rpx;
				}

				.edit_c {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 580rpx;

					.edit_p4 {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						opacity: 1;
						text-align: left;
					}

					.edit_d {
						background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAaCAYAAABozQZiAAAAAXNSR0IArs4c6QAAAt5JREFUOE+NlE1oXFUYhp/33pnMOAabJlAUNT9QRyi4cuPGRVy4FFp14iJkMiHD0J1boYurlNKiRJqCEk2ZOyMaydqFCxfiTkRFUBRsGKMitKLItM2d8c69XznTTG3M77c8nOf5znk551MYNlcQr4B96nveqxsbG9eDIEg5QilsNG8CDwKpwWeW9KrDw8N/lEql5DBeYaPxEehFYAiIwb7wpGo+n//1MIFWV1dH/ezQFcEZSTkz6wFf+p4quVyudZBAZqZmszlqpsuI05IeMLPY4FvSZH5zc/NaEAROuKvkVpxgbW1trBv3ljzptMvACYAfLE3Kk5OTP05PT+8S9GFXQRB44+PjY/L9N4XcFYbvCuwnwXyn0/m+Vqs54b26B98v8Hz/EnhnwB7aDvFnT5qPoui7+wU74J0nyFx0IQLHAHfka6moxFH0zUCwCx4IisXiaDeOL4l+BiNOYGa/eKLcarW+DoLg3z3hgWBqauq4mS4gXgKOAwlmm2DlQqHw1b7wQPDYqVMjmU7nvKU2I8kJUrDfBDMHwgPBxMTECclbAmaQPBei0PuHwsvLy7nCyMgTGWMdeBJwTIRx7kC4Xq/nfd8/mRofA0UgY2YOvOL7WtoXdqCXyxUt7jnwpAOBLYzlOO5erlarN/aEHUg2+xS95ENJk9vgLSx9O47jd6rV6nWXxy7YgZKeRl4IONAHblpqb/m+Vubm5m4M3ucOuN8xk3mGxK5KjA9ALL0YRd7Vs2f/A3d0dqkeGxt71nrJe5IeNzMf1MY4n6ZxY2Fh4c///8l+5/X19aHb3e5zSm0FeBTwzKwt7HVJzXK5/Nee/9mBURQ9b+hd4BEHgrUN3kjiOFxcXPx7v1mmMPzgBdTveOJugNY2KSBJwkql8s9BQ1Bh2GghuXDcFVyq57JZvzE7O9s+wvRs/g48vP0AXisU8o1SqXTrMLCfdr3efFk+00ifd7e2PqnValtHAd2eO0rLRREIfTTIAAAAAElFTkSuQmCC')no-repeat center right;
						background-size: 13rpx 21rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #B5B5B5;
						opacity: 1;
						padding-right: 30rpx;
						line-height: 45rpx;
						min-width: 5em;
					}
				}
			}
		}
	}
</style>