jiansheng/pages/user/portrait/portrait.vue

<template>
	<view>
		<image src="@/static/bg.png" mode="" style="width: 100%;height: 928rpx;"></image>
		<view class="top">
			<view class="xuzou" @click="fanhui">
				<uni-icons type="left" size="18"></uni-icons>
				<text class="title">更新信息</text>
			</view>
		</view>
		<view class="form">
			<uni-row>
				<uni-col :span="12">
					头像:
				</uni-col>
				<uni-col :span='5' :offset="7">
					<uni-file-picker @delete='touxiangimg' v-model="imageValue" fileMediatype="image" @select="select" :limit="1" mode="grid"
						@success="success" :image-styles="imageStyles" @fail="fail" />
				</uni-col>
			</uni-row>
			<view style="border-bottom: 1px solid #999999;"></view>
			<uni-row>
				<uni-col :span="8">
					昵称:
				</uni-col>
				<uni-col :span='8' :offset="8">
					<input class="uni-input" style="margin-top: 20px;text-align: center;" v-model="FormData.name"
						placeholder="请输入昵称" />
				</uni-col>
			</uni-row>
		</view>
		<view class="subbtn" @click="subbtn">
			确认
		</view>
		<view class="fottuichu" @click="outLogin">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FormData: {
					name: '',
					avatar:''
				},
				title: '更新信息',
				imageValue: [],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						color: "#999999",
						width: 1,
						style: 'dashed',
						radius: '100px'
					}
				},
			}
		},
		onShow() {
			this.memberInfo()
		},
		
		methods: {
			memberInfo() {
				this.$api.memberInfo().then(res => {
					this.userxixin = res.data
					this.FormData.avatar=this.userxixin.avatar
					console.log('this.userxixin ',this.userxixin );
				})
			},
			outLogin() {
				this.$api.outLogin().then(res => {
					uni.removeStorageSync("token")
					uni.reLaunch({
						url: '/pages/login/login'
					})
				})
			},
			fanhui(){
				uni.navigateBack()
			},
			select(e) {
				console.log(123, e);
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl = tempFilePaths[0]
				uni.uploadFile({
					url: 'https://bodybuilding.njrenzhou.cn/api/uploadFile',
					filePath: imgUrl,
					name: 'file',
					formData: {
						file_type: '1',
						file: imgUrl
					},
					success: (res) => {
						this.imageValue = []
						let urldata = JSON.parse(res.data)
						this.FormData.avatar=urldata.data.file_id
						this.imageValue.push({
							url: urldata.data.url,
							extname: 'png',
							name: 'png'
						})
					}
				});
			},
			touxiangimg(){
				this.FormData.avatar=''
			},
			subbtn() {
				console.log(787,this.imageValue[0]);
				this.$api.memberUpdate({nickname:this.FormData.name,avatar:this.FormData.avatar}).then(res=>{
					console.log(123,res);
					if(res.code==200){
						uni.switchTab({
							url: "/pages/user/index"
						})
					}
				})
			},
			// 上传成功
			success(e) {
				console.log(11111);
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			detail() {
				uni.navigateTo({
					url: "/pages/user/notice/detail/detail"
				})
			},
			handleBack() {
				uni.navigateBack({
					delta: 2
				})
				// console.log(1344444);
				// uni.switchTab({
				// 	url: "/pages/user/index"
				// })
			},
			toPage() {
				console.log(1111232)
				uni.navigateTo({
					url: "/pages/user/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fottuichu {
		width: 702rpx;
		height: 80rpx;
		background: #999999;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
		text-align: center;
		line-height: 80rpx;
		border-radius: 25rpx;
		margin: 500rpx auto;
	}
	.top {
		display: flex;
		position: absolute;
		top: 96rpx;
		left: 20rpx;
	}
	
	.title {
		padding-left: 14rpx;
	}
	.subbtn {
		margin-top: 40rpx;
		margin-left: 50rpx;
		text-align: center;
		line-height: 98rpx;
		color: #fff;
		width: 660rpx;
		height: 98rpx;
		background: #0D5DC9;
		border-radius: 49rpx;
	}

	.form {
		width: 700rpx;
		height: 250rpx;
		background: #FFFFFF;
		line-height: 120rpx;
		padding: 25rpx;
		margin-top: -765rpx;
	}

	.custom-navigation-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 220rpx;
		/* #ifdef MP-WEIXIN */
		margin-top: -230rpx;
		/* #endif */
	}

	.left-button,
	.right-button {
		padding: 0 12px;
	}
</style>