hongze_yb_xcx/pages-user/mysetting.vue

<template>
	<view class="mysetting-page">
		<view class="form-cont">
			<vew class="item">
				<text>头像</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
					<image :src="avatar" mode="aspectFill" class="avatar"></image>
					<image src="@/static/upload_avatar.png" class="avatar_ico"></image>
				</button>
			</vew>
			<view class="item">
				<text>昵称</text>
			  <input v-model="nickname" type="nickname" class="nick-field" placeholder="请输入昵称"/>
			</view>
		</view>
		<view class="btn-cont">
			<van-button round size="large" block color="#DBA665" @click="saveMySetting">保存</van-button>
			<van-button round size="large" block color="#F5F5F5" class="cancel" @click="cancel">取消</van-button>
		</view>
		<view class="bottom-text">专注为全球投资者提供中立客观的研究服务</view>
	</view>
</template>

<script>
	import { apiSetMyinfo } from '@/api/user'
	import { uploadToServer } from '@/utils/upload.js'
	export default {
		data() {
			return {
				avatar: '',
				nickname:'',
			}
		},
		methods: {
			chooseAvatar(e) {
				console.log(e)
				const { avatarUrl } = e.detail;
				
				uploadToServer(avatarUrl).then(res => {
					this.avatar = res;
				})
			},
			
			/* 保存我的设置 */
			async saveMySetting() {
				if(!this.avatar || !this.nickname ) return  uni.showToast({
          title: '请先设置头像和昵称哦～',
          icon: 'none'
        })
				
				const { code } =  await apiSetMyinfo({ nick_name: this.nickname, head_img_url: this.avatar  })	
				if(code !== 200) return
				
				uni.showToast({
				  title: '保存成功',
				  icon: 'none',
					success: ()=> {
						setTimeout(() =>{
							this.cancel()
						},1000)
					}
				})
			},
			
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			initData() {
				const { head_img_url,nick_name } = this.userInfo;
				this.avatar = head_img_url;
				this.nickname = nick_name;
			}
		},
		onShow() {
			this.initData()
		}
	}
</script>

<style lang="scss">
.mysetting-page {
	padding: 120rpx 60rpx;
	.form-cont {
		.item {
			font-size: 34rpx;
			display: flex;
			margin-bottom: 30rpx;
			&:first-child {
				align-items: center;
			}
			.avatar-wrapper {
				position: relative;
				margin-left: 50rpx;
				background: #fff;
				padding: 0;
				&::after {
					border: none;
				}
				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
				.avatar_ico {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					bottom: 24rpx;
					right: 0;
					z-index: 2;
				}
			}
			.nick-field {
				font-size: 32rpx;
				width: 478rpx;
				margin-left: 50rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DFAD6F;
			}
		}
	}
	.btn-cont {
		padding: 0 40rpx;
		margin-top: 150rpx;
		.cancel .van-button{
			color: #999 !important;
			margin-top: 30rpx;
		}
	}
	.bottom-text {
		width: 100%;
		position: fixed;
		left: 50%;
		text-align: center;
		color: #999999;
		transform: translateX(-50%);
		bottom: 10%;
	}
}
</style>