shangmenanmo/additionalvue/user/portrait/portrait.vue

<template>
	<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>
</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'
					}
				},
			}
		},
		methods: {
			select(e) {
				console.log(123, e);
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl = tempFilePaths[0]
				uni.uploadFile({
					url: 'https://logistics.njrenzhou.cn/api/uploadFile',
					filePath: imgUrl,
					name: 'file',
					formData: {
						file_path: imgUrl,
						file_type: '1',
						storage: 'local',
						file: imgUrl
					},
					success: (res) => {
						this.imageValue = []
						let urldata = JSON.parse(res.data)
						this.FormData.avatar=urldata.data.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">
	.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;
	}

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

	.title {
		flex: 1;
		// text-align: center;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
</style>