fangtanhua/pages/mine/userinfo.vue

<template>
	<view class="userinfo u-flex-col u-col-center">
		<view class="user-head" @click="changehead">
			<image v-if="userinfo.headimg" :src="userinfo.headimg" class="head" mode=""></image>
			<image v-else src="../../static/images/head.png" class="head" mode=""></image>
			<image src="../../static/images/xiangji.png" class="change" mode=""></image>
		</view>
		<input type="text" placeholder="请输入昵称" class="input" v-model="userinfo.name">
		<view class="user-btn" @click="save">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					headimg:'',
					name:''
				},
				ossdata:{}
			}
		},
		onLoad() {
			this.getuser()
			this.getoss()
		},
		methods: {
			getoss(){
				this.$u.post('/api/Upload/getSignedUrl').then(res => {
					this.ossdata = res.data
				})
			},
			changehead(){
				uni.chooseImage({
					count: 1,
					success: (img) => {
						var key = this.ossdata.key + new Date().getTime() + Math.floor(Math.random() * 150) + '.png'
						uni.uploadFile({
							url: this.ossdata.host, //输入你的bucketname.endpoint
							filePath: img.tempFilePaths[0],
							name: 'file',
							formData: {
								key: key,
								policy: this.ossdata.policy, // 输入你获取的的policy
								OSSAccessKeyId: this.ossdata.OSSAccessKeyId, // 输入你的AccessKeyId
								success_action_status: '200', // 让服务端返回200,不然，默认会返回204
								signature: this.ossdata.Signature, // 输入你获取的的signature
							},
							success: (res) => {
								if (res.statusCode == 200) {
									this.userinfo.headimg = this.ossdata.host + '/' + key
									this.$u.post('/api/Member/edit_member_info',{
										type:1,
										headimg:this.userinfo.headimg
									}).then(res => {
										this.$u.toast(res.msg)
									})
								}
							},
							fail: (err) => {
								console.log(err);
							}
						})
					}
				})
			},
			save(){
				if(!this.userinfo.name){
					this.$u.toast("请输入昵称")
					return
				}
				this.$u.post('/api/Member/edit_member_info',{
					type:2,
					name:this.userinfo.name
				}).then(res => {
					this.$u.toast(res.msg)
				})
			},
			getuser() {
				this.$u.post('/api/Member/member_info').then(res => {
					this.userinfo = res.data
				})
			}
		}
	}

</script>

<style lang="scss">
	.userinfo {
		.user-btn {
			position: fixed;
			bottom: 200rpx;
			left: 24rpx;
			width: 702rpx;
			line-height: 82rpx;
			background: #1F7EFF;
			border-radius: 8rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.input {
			width: 400rpx;
			height: 100rpx;
			text-align: center;
			border-bottom: 2rpx solid rgba(216, 216, 216, 1);
		}

		.user-head {
			width: 256rpx;
			height: 256rpx;
			border-radius: 100%;
			position: relative;
			margin: 102rpx 0 30rpx 0;

			.head {
				width: 256rpx;
				height: 256rpx;
				border-radius: 100%;
			}

			.change {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 78rpx;
				height: 78rpx;
				z-index: 10;
			}
		}
	}

</style>