shuzi/pages/user/personal.vue

<template>
	<view class="content">
		<view class="box" style="margin-top: 60rpx;">
			<view class="left">头像</view>
			<view class="right" @click="chooseImg" v-if="img == ''"><image class="img" :src="userInfo.avatar" mode=""></image></view>
			<view class="right" v-else @click="chooseImg"><image class="img" :src="img" mode=""></image></view>
		</view>
		<view class="box">
			<view class="left">昵称</view>
			<input class="right" type="text" v-model="name" placeholder="修改昵称" placeholder-class="placeholder" />
		</view>
		<view class="box">
			<view class="left">手机号</view>
			<view class="right" style="color: #999;">{{ phone }}</view>
		</view>
		<view class="box">
			<view class="left">实名认证</view>
			<view class="right" @click="navTo('/pages/user/realName')" v-if="userInfo.real_name_check == null || userInfo.real_name_check.status == 2">未认证 ></view>
			<view class="right" v-else>{{ userInfo.real_name_check.status == 1 ? '已认证' : '审批中' }} ></view>
		</view>
		<button class="button" @click="confirm">提交</button>
	</view>
</template>

<script>
import { userEdit } from '@/api/set.js';
import { realname } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
import { upload } from '@/api/order.js';
export default {
	data() {
		return {
			name: '',
			phone: '',
			img: ''
		};
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	onLoad() {
		console.log(this.userInfo);
		this.name = this.userInfo.nickname;
		this.phone = this.userInfo.phone;
		console.log(this.userInfo);
	},
	methods: {
		chooseImg() {
			let obj = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['album'], //从相册选择
				success: e => {
					obj.img = e.tempFilePaths[0];
					// upload({
					//  	filename: ''
					// }).then(res=>{
					//  console.log(res,'res');
					//  	obj.img = res[0].url
					// })
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		confirm() {
			userEdit({ nickname: this.name, avatar: this.img })
				.then(e => {
					this.$api.msg('修改成功');
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/user'
						});
					}, 1000);
					console.log(e);
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: #111111;
	width: 750rpx;
	height: 100%;

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #aeaeae;
		padding: 30rpx 40rpx;

		.left {
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.right {
			font-size: 26rpx;
			font-weight: 400;
			color: #ffffff;
			text-align: right;
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.button {
		margin-top: 160rpx;
		width: 690rpx;
		height: 80rpx;
		background: $bgBaseBg;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 80rpx;
	}
}
</style>