yicangzongtai_app_240321/pages/government/personalData.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="box">
			<view class="item">
				<view class="item_l">头像</view>
				<view class="item_r" @click="getHead">
					<view class="item_r_text">
						<image v-if="user.headPhoto" :src="$getImgPath(user.headPhoto)" mode=""></image>
						<image v-else src="/static/default-avatar.png" mode=""></image>
					</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="openModal('nickname','昵称')">
				<view class="item_l">昵称</view>
				<view class="item_r">
					<view class="item_r_text">{{user.nickname}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item">
				<view class="item_l">手机号</view>
				<view class="item_r">
					<view class="item_r_text">{{$onDesensitization('tel', user.mobile || '')}}</view>
				</view>
			</view>
			<view class="item" @click="openModal('gender','性别')">
				<view class="item_l">性别</view>
				<view class="item_r">
					<view class="item_r_text">{{user.gender==0?'未知':user.gender==1?'男':user.gender==2?'女':''}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="openModal('email','邮箱')">
				<view class="item_l">邮箱</view>
				<view class="item_r">
					<view class="item_r_text">{{user.email}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="pickerShow=true">
				<view class="item_l">生日</view>
				<view class="item_r">
					<view class="item_r_text">{{user.birthday}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<u-button type="primary" hover-class="hoverClass" @click="submit()">提交修改</u-button>
		</view>

		<u-modal v-model="show" :title="title" show-cancel-button @confirm="modalConfirm" @cancel="modalCancel"
			confirm-color="#3EBCD0">
			<view class="slot-content">
				<u-input v-if="title!='性别'" v-model="value" input-align="center" type="text" focus
					:placeholder="'请输入'+title" />
				<u-radio-group v-if="title=='性别'" v-model="value">
					<u-radio :name="1">男</u-radio>
					<u-radio :name="2">女</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
		<u-picker v-model="pickerShow" :default-time="user.birthday||''" mode="time" confirm-color="#3EBCD0"
			@confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/api/government.js"
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '个人资料',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					// backgroundColor: [0, '#2cba28'],
					rightSlot: true,
				},
				user: {},
				value: "",
				show: false,
				title: "昵称",
				pickerShow: false,
				btnLoading: false
			}
		},
		onLoad() {
			this.getUserData()
		},
		methods: {
			openModal(key, title) {
				this.key = key;
				this.title = title;
				this.value = this.user[key];
				this.show = true;
			},
			modalCancel() {
				this.show = false;
			},
			modalConfirm() {
				this.user[this.key] = this.value
			},
			pickerConfirm(e) {
				this.user.birthday = e.year + '-' + e.month + '-' + e.day;
				this.pickerShow = false;
			},
			async getHead() {
				let that = this;
				// #ifdef APP-PLUS
				let flag = await permision.showAuthTipModal("android.permission.READ_EXTERNAL_STORAGE")
				if (!flag) return
				// #endif
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					crop: {
						quality: 100, // 图片裁剪质量
						width: 100, // 裁剪的宽度
						height: 100, //裁剪的高度
						resize: false //是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示
					},
					success: (res) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						let tempFilePaths = res.tempFilePaths[0]
						uni.uploadFile({
							url: this.$mConfig.baseUrl + '/common/upload',
							filePath: tempFilePaths,
							name: 'file',
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								this.user.headPhoto = data.data.url
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
							},
							fail(fail){
								if ([0, 11, 12].includes(fail.code)) return;
								permision.showManualAuth('android.permission.READ_EXTERNAL_STORAGE');
							},
							complete: () => {
								uni.hideLoading();
							}
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				})

			},
			submit() {
				if (this.btnLoading) return
				this.btnLoading = true;
				if (!this.user.nickname) {
					uni.showToast({
						icon: "none",
						title: '请输入昵称！',
						duration: 2000,
						mask: true
					});
					this.btnLoading = false;
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				this.$yghttp.post('/user/personalData/update', this.user).then(res => {
					uni.hideLoading();
					this.btnLoading = false;
					uni.showToast({
						title: '修改成功！',
						icon: 'success',
						duration: 1000
					})
				}).catch(() => {
					this.btnLoading = false;
					uni.hideLoading();
				})
			},
			getUserData() {
				getUserInfo().then(res => {
					this.user = res.data
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.box {
		padding: 0rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);

			.item_l {
				font-size: 30rpx;
				font-weight: 700;
			}

			.item_r {
				display: flex;
				align-items: center;

				.item_r_text {
					margin-right: 20rpx;
					font-weight: bold;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.btnBox {
		width: 100%;
		// display: flex;
		// justify-content: center;
		margin-top: 150rpx;
	}

	.u-btn {
		width: 534rpx;
		border-radius: 10rpx;
		background: rgb(64, 149, 229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}

	.hoverClass {
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}

	.slot-content {
		padding: 40rpx;
		text-align: center;
	}

	.iconfont_yige {
		color: #333333;
		opacity: 0.5;
		font-weight: 700;
	}

	/deep/ .u-drawer-content-visible {
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
	}
</style>