jiansheng/pages/user/portrait/portrait.vue

<template>
	<view>
		<image src="@/static/bg.png" mode="widthFix" class="bg" style="width: 100%;height: 928rpx;"></image>
		<view class="top" :style="{'padding-top': top+'px'}">
			<view class="xuzou" @click="fanhui">
				<uni-icons type="left" size="22" style="margin-left: 25rpx;"></uni-icons>
				<text class="title">修改个人信息</text>
			</view>
		</view>
		<view class="content" :style="{'top': (top+44)+'px'}">
			<view class="form">
				<uni-row>
					<uni-col :span="12">
						头像:
					</uni-col>
					<uni-col :span='5' :offset="7">
						<uni-file-picker @delete='touxiangimg' :disable-preview="true" :del-icon="false" 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 style="border-bottom: 1px solid #999999;"></view>
			</view>
			<button  class="subbtn" @click="subbtn">确认</button>
			<view class="fottuichu" @click="outLogin">退出登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				FormData: {
					name: '',
					avatar:''
				},
				title: '更新信息',
				imageValue: [],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						color: "#999999",
						width: 1,
						style: 'dashed',
						radius: '100px'
					}
				},
			}
		},
		onLoad() {
			this.top = uni.getSystemInfoSync().statusBarHeight
			this.memberInfo()
		},
		
		methods: {
			memberInfo() {
				this.$api.memberInfo().then(res => {
					this.userxixin = res.data
					this.FormData.avatar=this.userxixin.avatar_id
					this.imageValue={
					  "name": this.userxixin.avatar.indexOf(".png") !=-1?'png':'jpg',
					  "url": this.userxixin.avatar
					}
					this.FormData.name=this.userxixin.nickname
					console.log('this.userxixin ',this.FormData );
				})
			},
			outLogin() {
				const that = this;
				uni.showModal({
					title: '温馨提示',
					content: "你是否要确定退出？",
					confirmColor: "#F8A617",
					confirmText: "退出",
					success(res) {
						if(res.confirm){
							that.$api.outLogin().then(res => {
								uni.showToast({
									title: "退出成功"
								})
								setTimeout(()=>{
									uni.removeStorageSync("token")
									uni.navigateBack({delta: 1})
								},2000)
							})
						}
					}
				})
			},
			fanhui(){
				uni.navigateBack()
			},
			select(e) {
				console.log(123, e);
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl = tempFilePaths[0]
				uni.uploadFile({
					url: this.ymurl+'/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=>{
					if(res.code==200){
						uni.showToast({
							title: "修改成功"
						})
						setTimeout(()=>{
							uni.navigateBack({delta: 1})
						},2000)
					}
				})
			},
			// 上传成功
			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: 700rpx;
		line-height: 98rpx;
		background: #000;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		height: 98rpx;
		border-radius: 98rpx;
		margin: 30rpx auto;
	}
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		background: #f5f5f5;
	}
	.content{
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
		z-index: 2;
	}
	.top {
		width: 100%;
		left: 0;
		z-index: 22;
		top: 0;
		height: 88rpx;
		overflow: hidden;
		position: fixed;
	}
	.top .xuzou{
		width: 100%;
		height: 88rpx;
		display: flex;
		position: fixed;
		align-items: center;
		position: relative;
		z-index: 23;
	}
	.top .hs{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.title {
		padding-left: 14rpx;
	}
	.subbtn {
		margin-top: 300rpx;
		text-align: center;
		line-height: 98rpx;
		color: #fff;
		width: 700rpx;
		height: 98rpx;
		background: #F8A617;
		border-radius: 98rpx;
	}

	.form {
		width: 700rpx;
		height: 250rpx;
		line-height: 120rpx;
		padding: 25rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.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>