weapp-v3/pages/information/information.vue

<template>
	<view class="info">
		<custom-nav :title="title" :to-back="toBack"></custom-nav>
		<view class="avatar_box">
			<button class="avatar_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>
		<view class="name_box">
			<view>昵称</view>
			<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickname" @change="getVal" />
		</view>
		<view class="btn_box" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	import { //引入 api
		SaveUserInfo,
		SaveUserAvatar
	} from '../../api.js'

	export default {
		data() {
			return {
				avatarUrl: defaultAvatarUrl, //用户头像
				nickname: '', //用户昵称
				title: '授权头像昵称'
			}
		},
		onLoad(ops) {
			if (ops.from) {
				this.title = '修改头像昵称'
			}
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
			},
			getVal(e) {
				this.nickname = e.detail.value
			},
			save() {
				if (!this.avatarUrl) {
					uni.showToast({
						title: '头像不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.nickname) {
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
					return
				}

				let _this = this
				uni.uploadFile({
					filePath: this.avatarUrl,
					name: 'file',
					url: `https://api.jiuweiyun.cn/api/user/SaveUserAvatar`, //服务器端接收图片的路径
					header: {
						type: 2
					},
					success: res => {
						let data = JSON.parse(res.data)
						this.saveSub(data.data.path)
					},
					fail: err => {
						uni.showToast({
							title: '上传头像失败'
						})
					}
				})
			},
			saveSub(avatar) {
				let _this = this;
				_this.$ajax.get(
					`${SaveUserInfo}?nickname=${this.nickname}&avatar=${avatar}`
				).then(([, {
					data: res
				}]) => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '../index/index'
						})
						uni.setStorageSync('nickName', this.nickname)
						uni.setStorageSync('avatar', this.avatarUrl)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.info {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.avatar_box {
		margin: 100rpx 0 40rpx 0;

		button {
			margin: 0;
			padding: 0;
			outline: none;
			border-radius: 0;
			background-color: transparent;
		}

		button::after {
			border: none;
		}

		.avatar_btn {
			.avatar {
				width: 240rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}
		}

		.avatar_btn:active {
			outline: none;
			box-shadow: none;
		}
	}

	.name_box {
		width: 100%;
		display: flex;
		just-content: flex-start;
		align-items: center;
		border: 2rpx solid #efefef;
		height: 120rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		line-height: 120rpx;

		view {
			font-size: 34rpx;
			font-weight: bold;
			margin-right: 24rpx;
		}

		input {
			width: 80%;
			height: 100%;
			font-size: 34rpx;
		}
	}

	.btn_box {
		width: 560rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
		opacity: 1;
		border-radius: 44rpx;
		color: #fff;
		margin: 60rpx auto 0;

	}
</style>