gzh_chuanyuan/pages/user/reset.vue

<template>
	<view class="release">
		<view class="release-hd">
			<view class="b">
				<view class="pic" @click="uploadImg()">
					<image v-if="avatar1" class="img" :src="avatar1"></image>
					<image v-else class="img" :src="staticUrl('/static/release-upload.png')"></image>
				</view>
			</view>
			<view class="a">
				昵称<input v-model="nickname" type="text" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="release-fd" @click="toSubmit()">提交信息</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {},
				avatar: "",
				avatar1: "",
				nickname: "",
			};
		},
		onReady() {
			this.userInfo = uni.getStorageSync("userInfo");
			this.nickname = this.userInfo.nickname
			this.avatar = this.userInfo.avatar
			this.avatar1 = this.userInfo.avatar1
		},
		methods: {
			//上传图片
			uploadImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						console.log(res.tempFilePaths[0])
						uni.uploadFile({
							name: 'file',
							header: {
								userToken: uni.getStorageSync('userToken')
							},
							url: this.$baseUrl+'api/upload',
							filePath: res.tempFilePaths[0],
							success: (upRes) => {
								let end = JSON.parse(upRes.data)
								that.avatar = end.data.name
								that.avatar1 = end.data.url
							},
							fail: (err) => {
								console.log("toUpload err",err)
								console.log(err)
							}
						});
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			async toSubmit() {
				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none',
					})
					return
				}
				const { code, data, message } = await this.$api.updateMember({
					avatar: this.avatar,
					nickname: this.nickname,
				});
				if(code == 200){
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.release {
	width: 100%;
	padding: 25rpx;
	overflow: hidden;
	box-sizing: border-box;
	&-hd{
		padding: 30rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 20rpx;
		.b{
			overflow: hidden;
			.pic{
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				margin: 0 auto;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
		.a{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #222222;
			line-height: 42rpx;
			margin-top: 20rpx;
			input{
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 42rpx;
				margin-left: 20rpx;
			}
		}
	}
	&-fd{
		width: 320rpx;
		line-height: 98rpx;
		background: linear-gradient(-90deg, #3399EA, #38BCFF);
		border-radius: 98rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		z-index: 2;
		margin-left: -160rpx;
	}
}
</style>