工作台

pages/user/info.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="content">
+		<view class="info-flex">
+			<label>头像</label>
+			<u-avatar
+				class="upd-active"
+				shape="square"
+				:src="avatar.url"
+				:default-url="require('@/static/imgs/default-active.png')"
+				@click="updAvatar"
+			></u-avatar>
+		</view>
+		<view class="info-flex">
+			<label>昵称</label>
+			<input class="info-input" maxlength="8" v-model="nickname" type="text" placeholder="昵称" @blur="onNickname">
+		</view>
+	</view>
+</template>
+
+<script>
+	import { info, updInfo } from '@/apis/interfaces/user.js'
+	import { uploads } from '@/apis/interfaces/uploading.js'
+	export default {
+		data() {
+			return {
+				nickname: '',	// 用户昵称
+				avatar	: {
+					url	: '',
+					path: ''
+				},	// 上传头像
+			};
+		},
+		created() {
+			this.getInfo()
+		},
+		methods: {
+			// 获取用户资料
+			getInfo(){
+				uni.showLoading({
+					title: '加载中...'
+				})
+				info().then(res => {
+					let { nickname, avatar} = res
+					this.nickname = nickname
+					this.avatar	  = {
+						url	: avatar,
+						path: ''
+					}
+					uni.hideLoading()
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			},
+			// 更新昵称
+			onNickname(e){
+				this.updInfo('nickname', this.nickname)
+			},
+			// 更新资料
+			updInfo(key, val){
+				uni.showLoading({
+					title: '加载中...',
+					mask : true
+				})
+				updInfo(key, val).then(res => {
+					uni.showToast({
+						title: '修改成功',
+						icon : 'none',
+					})
+				}).catch(err => {
+					this.getInfo()
+					uni.showToast({
+						title: err.message,
+						icon : 'none'
+					})
+				})
+			},
+			// 更新头像
+			updAvatar(){
+				uni.chooseImage({
+					count: 1,
+					crop : {
+						width	: 300,
+						height	: 300 
+					},
+					success: res => {
+						if(res.tempFilePaths.length > 0){
+							uni.showLoading({
+								title: '上传中...',
+								mask : true
+							})
+							uploads([{
+								name: 'avatar',
+								uri : res.tempFilePaths[0]
+							}]).then(updRes => {
+								let { path, url } = updRes
+								this.avatar = {
+									url	: url[0],
+									path: path[0]
+								}
+								this.updInfo('avatar', path[0])
+							}).catch(updErr => {
+								uni.showToast({
+									title: updErr.message,
+									icon : 'none'
+								})
+							})
+						}
+					},
+					fail: err => {}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		padding-top: 30rpx;
+	}
+	// 编辑信息
+	.info-flex{
+		background: white;
+		padding: 20rpx 30rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		line-height: 60rpx;
+		position: relative;
+		overflow: hidden;
+		&::after {
+		    content: "";
+			position: absolute;
+			left: 30rpx;
+			bottom: 0;
+			width: 100%;
+			height: 1rpx;
+			z-index: 2;
+			background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
+		}
+		&:last-child::after{
+			display: none;
+		}
+		label{
+			font-size: 30rpx;
+			color: #111;
+			width: 200rpx;
+		}
+		.info-input{
+			width: calc(100% - 200rpx);
+			text-align: right;
+		}
+		.upd-active{
+			width: 88rpx;
+			height: 88rpx;
+			border-radius: $radius;
+			position: relative;
+			overflow: hidden;
+		}
+	}
+</style>