medicine-xcx/pages/my/information/index.vue

<template>
	<view class="user-info flex-1">
		<view class="row">
			<text>头像</text>
			<view class="pic_box">
				<view class="pic_box">
					<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
						<u-avatar size="80" :src="form.headUrl || ''" @click="selectFile"></u-avatar>
					</button>
				</view>
			</view>
		</view>
		<view class="row" @click="toPage">
			<text>昵称</text>
			<u-input v-model="form.nickName" disabled input-align="right" placeholder="请设置姓名" @click="toPage" />
		</view>
		<view class="row flex align-center">
			<text>手机号码</text>
			<u-input v-model="form.phone" disabled input-align="right" placeholder="请设置手机号码" />
			<!-- <text>{{ form.phone }}</text> -->
		</view>
		<view class="row  flex align-center">
			<text>性别</text>
			<view class="flex align-center" @click="showPopup('sexShow')">
				<u-input v-model="form.sex" disabled placeholder="请设置性别" input-align="right"
					@click="showPopup('sexShow')" />
				<u-icon name="arrow-right" class="m-l-10"></u-icon>
			</view>
		</view>
		<view class="row flex align-center">
			<text>生日</text>
			<view class="flex-1 flex align-center justify-end" @click="showPopup('birthdayShow')">
				<u-input v-model="form.birthday" disabled placeholder="您还未设置生日" input-align="right"
					@click="showPopup('birthdayShow')" />
				<u-icon name="arrow-right" class="m-l-10"></u-icon>
			</view>
		</view>
		<u-select v-model="sexShow" :list="sexList" @confirm="sexConfirm" />
		<u-picker mode="time" v-model="birthdayShow" @confirm="birthdayConfirm" confirm-color="#01AEEA" />
	</view>
</template>

<script>
	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	import {
		mapState
	} from "vuex";
	import config_img from "@/utils/js/config.js";
	import {
		UPLOAD_IMG
	} from '@/config/settings.js'
	import {
		TOKEN_HEADER_NAME
	} from '@/config/settings.js'
	export default {
		data() {
			return {
				uploadUrl: UPLOAD_IMG,
				status: 'watch',
				img_url: config_img.img_url,
				form: {
					nickName: '',
					sex: '',
					phone: '',
					headUrl: '',
					birthday: ''
				},
				sexShow: false,
				birthdayShow: false,
				sexList: [{
						value: "1",
						label: "男",
					},
					{
						value: "2",
						label: "女",
					},
				],
			};
		},
		onLoad() {
			console.log(this.userInfo)
			const getUserInfo = this.$storage.getStorage("__user_info")
			this.form = getUserInfo
			this.form.birthday = this.form.birthday.substr(0, 10)
			uni.$on('EDITNAME', val => {
				this.form.nickName = val
				this.editUserInfo({
					nickName: val
				})
			})
		},
		computed: {
			// ...mapState({
			//   userInfo: (state) => state.userInfo,
			// }),
			// disabled () {
			// 	return this.status === 'edit' ? false : true
			// },
			// btnTxt () {
			// 	return this.status === 'edit' ? '保存' : '修改'
			// }
		},
		onUnload() {
			this.$off('EDITNAME')
		},
		
		methods: {
			onChooseAvatar(e) {
				console.log("===================")
				console.log(e)
			},
			preserve() {
				if (this.status === 'watch') return this.status = 'edit'
				console.log(this.$refs.uUpload.lists, this.fileList)
			},
			onSuccess(data) {
				this.setUserInfo({
					headUrl: data.result
				});
			},
			sexConfirm(arr) {
				this.form.sex = arr[0].label
				this.editUserInfo({
					sex: this.form.sex
				})
			},
			birthdayConfirm(time) {
				let {
					year,
					month,
					day
				} = time;
				this.form.birthday = `${year}-${month}-${day}`;
				this.editUserInfo({
					birthday: this.form.birthday
				})
			},
			showPopup(key) {
				if (!this.disabled) this[key] = true
			},
			toPage() {
				this.$tools.navigateTo({
					url: `/pages/my/information/editName?name=${this.form.nickName}`
				})
			},
			editUserInfo(params = {}, status = 0) {
				uni.showLoading();
				this.$api('editUserInfo', params)
					.then(res => {
						uni.hideLoading();
						let {
							code,
							message,
							result
						} = res
						this.$Toast(message)
						if (code === 200) {
							if (status == 1) {
								// 上传图片
								console.log(params.headUrl, 12313)
								this.form.headUrl = params.headUrl
							}
							// 更新用户信息
							this.getUserInfo();
						}
					}).catch(err => {
						uni.hideLoading();
						this.$Toast(err.message)
					})
			},
			selectFile(e) {
				console.log(e)
				// disabled
				uni.showActionSheet({
					itemList: ['拍照', '选择一张照片'],
					success: res => {
						this.chooseImage(res.tapIndex)
					},
					fail: err => {
						// this.$Toast(err.errMsg);
					}
				})
			},
			// 更新用户信息
			getUserInfo() {
				return new Promise((resolve, reject) => {
					this.$api('getUserInfo').then(res => {
						let {
							code,
							result,
							message
						} = res;
						if (code == 200) {
							this.$storage.removeStorage('__user_info')
							let userInfo = {
								...result.account,
								...result.userInfo
							}
							// 更新用户信息缓存
							// this.userInfo = userInfo
							this.$storage.setStorage("__user_info", userInfo)
							// this.getAddressInfo();
							resolve(result)
						} else {
							reject(message)
						}
					}).catch(err => {
						reject(err.message)
					})
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					success: res => {
						res.tempFiles.map((val, index) => {
							// this.fileList.push({
							// 	url: val.path,
							// 	progress: 0,
							// 	error: false,
							// 	file: val,
							// });

							uni.uploadFile({
								url: this.uploadUrl,
								filePath: val.path,
								name: 'file',
								header: {
									[TOKEN_HEADER_NAME]: this.$store.state.userToken
								},
								success: res => {
									console.log(res)
									const img = JSON.parse(res.data)
									this.editUserInfo({
										headUrl: img.result
									}, 1)
								},
								fail: err => {
									console.log(err)
								}
							})
						});
					},
					fail: error => {
						this.$Toast(error);
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.user-info {
		padding-bottom: 140rpx;

		&-footer {
			z-index: 1;
			height: 120rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;

			/deep/.u-btn {
				width: 660rpx;
				height: 80rpx;
			}
		}
	}

	.pic_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		/deep/.u-list-item {
			margin: 0;
			width: 89rpx !important;
			height: 89rpx !important;
			border-radius: 50%;

			.u-preview-image {
				width: 89rpx;
				height: 89rpx;
				border-radius: 50%;
			}

			image {
				width: 89rpx;
				height: 89rpx;
				border-radius: 50%;
				overflow: hidden;
				// border: 1px solid #707070;
			}
		}

		image {
			width: 89rpx;
			height: 89rpx;
			border-radius: 50%;
			// border: 1px solid #707070;
		}
	}

	/deep/ .u-calendar__action {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.row {
		width: 691rpx;
		height: 110rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #000000;
		padding-left: 10rpx;
		padding-right: 37rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;

		.data_time {
			padding-right: 30rpx;
		}
	}

	.content {
		width: 520rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.contentRow {
			display: flex;
			flex-direction: column;

			text {
				margin-left: 18rpx;
				margin-top: 20rpx;
				font-size: 45rpx;
				font-weight: bold;
			}

			/deep/ u-input {
				flex: 1;
				margin: 10rpx 30rpx 10rpx;
			}
		}

		.btn_box {
			display: flex;

			.close {
				width: 180rpx;
				color: #707070;
			}

			.change {
				background-color: #01aeea;
				color: #fff;
				width: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>