question_uniapp/pages/mine/info.vue

<template>
	<view class="page">
		<nav-bar title="Personal details" bgColor="#F5f5f5"></nav-bar>
		<view class="cell_list" @click="dialogVisible = true">
			<view class="cell_left txt">Head portrait</view>
			<view class="cell_right arrow">
				<image :src="avatar" mode="aspectFill"></image>
			</view>
		</view>
		<z-prompt :value="nickname" options="nickname" text="Please enter a nickname" @confirm="onNameChange" :options="popupOptions">
			<view class="cell_list">
				<view class="cell_left txt">User name</view>
				<view class="cell_right arrow">{{ nickname }}</view>
			</view>
		</z-prompt>
		<view class="cell_list">
			<view class="cell_left txt">User ID</view>
			<view class="cell_right ">{{id}}</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">Account</view>
			<view class="cell_right">{{account}}</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">Identity</view>
			<view class="cell_right">{{identity}}</view>
		</view>

		<popup v-model="dialogVisible">
			<view class="popup_content">
				<view @click="takePhoto">Photograph</view>
				<view @click="onUnloadImg">My Album Selection</view>
			</view>
			<view class="popup_content1">
				<view>Cancel</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import zPrompt from '@/components/common/prompt';
	import Popup from '@/components/common/popup';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			Popup,
			zPrompt
		},
		data() {
			return {
				popupOptions: {
					placeholder: ''
				},
				avatar: '',
				nickname: '',
				id: '',
				account: '',
				identity: '',
				dialogVisible: false,
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			this.avatar = this.userInfo.avatar || "/static/images/tx.png";
			this.nickname = this.userInfo.nickname || "";
			this.phone = this.userInfo.phone || "";
			this.id = this.userInfo.id || "";
			this.account = this.userInfo.username || "";
			this.identity = this.userInfo.group;
			this.$http.get('/api/role/detail?lang='+this.$i18n.locale).then(res => {
				this.identity =  res.data.name;
			});
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			//修改昵称
			onNameChange(e) {
				this.nickname = e.value;
				e.close();
				let data = {
					nickname: e.value
				};
				this.$http.post('/api/user/profile', data).then(res => {
					if(res.code == 0){
						this.userInfo.nickname = e.value;
						this.setUserInfo(this.userInfo);
					}
				});
			},
			takePhoto() {
			    uni.chooseImage({
			        count: 1, // 默认9, 设置图片的最大选择数，设置为1表示拍一张照片
			        sourceType: ['camera'], // 可以设置拍照或相册选择，这里只设置拍照
			        success: (res) => {
			            const tempFilePaths = res.tempFilePaths; // 临时路径
			            this.onUnloadImg(tempFilePaths[0]); // 上传图片
			        }
			    });
			},
			//修改头像
			onUnloadImg() {
				this.$http.urlImgUpload("/api/user/avatar", {
					count: 1
				}).then(res => {
					this.avatar = res[0].url;
				});
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.cell_list {
		padding: 30rpx 30rpx;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 8rpx;
	}

	.popup_content {
		padding: 20rpx 10rpx;
		background-color: #FFFFFF;
		text-align: center;
		width: 90vw;
		margin-left: 5vw;
		border-radius: 10px;
		line-height: 60px;
		margin-bottom: 10px;
		font-size: 17px;
		font-weight: 500;
		color:#333;
	}
	.popup_content1 {
		background-color: #FFFFFF;
		text-align: center;
		width: 90vw;
		margin-left: 5vw;
		border-radius: 10px;
		line-height: 60px;
		margin-bottom: 20px;
		font-size: 17px;
		font-weight: 500;
		color:#333;
	}
	.cell_right image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
</style>