jigesi/pages/my/userInfo/index.vue

<template>
	<view class="page">
		<navBar title="个人资料" :back="true" color="black" background="white" />

		<view class="content">
			<view class="item" style="border-radius: 0rpx 0rpx 0rpx 24rpx;;">
				<view class="line" @click="chooseAvatar">
					<view class="left">
						头像
					</view>
					<view class="right">
						<image :src="userInfo&&userInfo.head?userInfo.head:picUrl+'/static/other/defaultAvatar.png'"
							mode="" class="avatar"></image>
						<image src="/static/my/arr_r.png" mode="" class="arr"></image>
					</view>
				</view>
				<view class="line">
					<view class="left">
						昵称
					</view>
					<view class="right"
						style="width: 80%;margin-left: 50rpx;display: flex;justify-content: space-between;">
						<input ref='nickInput' :focus="focus" type="text" v-model="userInfo.nickname"
							placeholder="请输入昵称" style="width: 90%;text-align: right;">
						<image @click="updateNickName" :src="picUrl+'/static/my/bj.png'" mode="" class=""
							style="width: 24rpx;height: 24rpx;margin-left: 8rpx;"></image>
					</view>
				</view>
				<view class="line" @click="showSex=true">
					<view class="left">
						性别
					</view>
					<view class="right">
						<view class="" style="margin-right: 20rpx;">
							{{!userInfo.sex?'男':'女'}}
						</view>
						<image src="/static/my/arr_r.png" mode="" class="arr"></image>
					</view>
				</view>
			</view>

			<view class="item" style="">
				<view class="line">
					<view class="left">
						真实姓名
					</view>
					<view class="right" style="width: 70%;">
						<input type="text" v-model="userInfo.name" placeholder="请输入真实姓名"
							style="width: 100%;text-align: right;">
					</view>
				</view>

				<view class="line" @click.stop="showDate=true">
					<view class="left">
						生日
					</view>
					<view class="right">
						{{userInfo.birthday?userInfo.birthday:'请选择'}}
					</view>
				</view>

				<view class="line">
					<view class="left">
						手机号
					</view>
					<view class="right" style="width: 70%;">
						<input type="text" v-model="userInfo.phone" placeholder="请输入手机号"
							style="width: 100%;text-align: right;">
					</view>
				</view>
			</view>
			<u-button text="修改" @click="update" color="#333"></u-button>

			<view class="" style="margin-top: 20rpx;">
				<u-button text="退出登录" @click="logoOut" color="#333"></u-button>
			</view>
		</view>



		<u-action-sheet :actions="list" :title="title" :show="showSex" cancelText="取消" @close="showSex=false"
			@select="handleSelSex"></u-action-sheet>

		<u-datetime-picker ref="datetimePicker" :formatter="formatter" @cancel="showDate = false" @confirm="confirmDate"
			:show="showDate" :minDate="new Date('1960-1-1').getTime()" :maxDate="Date.now()" v-model="value1"
			mode="date" confirmColor="#E77817"></u-datetime-picker>

		<!-- <u-loading-page :loading="loading" image="/static/index/logo.png" loading-text="页面加载中..."></u-loading-page> -->

		<privacy-popup @confirmP="confirmP" @cancleP="cancleP" :showPrivateBox="showPop"></privacy-popup>
	</view>
</template>

<script>
	import uploadUrl from '@/common/config.js'
	import moment from 'moment'
	import PrivacyPopup from "@/components/privacyPopup/index.vue";
	PrivacyPopup
	import {
		getUserInfoReq,
		updateUserInfoReq,
	} from '@/api/test/index.js'
	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				showPop: false,

				showDate: false,
				value1: Number(new Date()),
				picUrl: this.$picUrl,
				avatarUrl: '',
				showSex: false,
				nickName: '',
				sex: '男',
				list: [{
						name: '男'
					},
					{
						name: '女'
					}
				],

				userInfo: null,
				loading: true,

				focus: false,

			}
		},

		async onLoad(o) {
			this.handlePrivate()
			let res = await getUserInfoReq()
			if (res.code == 0) {
				this.userInfo = res.data
				// this.userInfo = null
				this.loading = false
			} else {
				this.loading = false
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		methods: {
			cancleP() {
				this.showPop = false
			},
			handlePrivate() {
				let _this = this

				if (getApp().globalData.showPrivacy) {

					_this.showPop = true
				} else {
					_this.showPop = false
				}
			},

			// 用户同意隐私内容
			confirmP() {
				this.showPop = false
				let _this = this
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log('res', res.tempFilePaths[0]);
						_this.upImg(res.tempFilePaths[0])
					}
				})

			},
			updateNickName() {
				console.log('昵称输入框的引用--------------', this.$refs);
				this.focus = true
			},
			logoOut() {
				uni.showModal({
					title: '提示',
					content: '确认退出?',
					confirmColor: '#F7790C',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.setStorageSync('switchs', [1, 0, 0])
							uni.reLaunch({
								url: '/pages/my'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async update() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (this.userInfo.phone && !phoneReg.test(this.userInfo.phone)) {
					return this.$toast('请输入合法的手机号')
				}

				let p = {
					nickname: this.userInfo.nickname,
					head: this.userInfo.head,
					phone: this.userInfo.phone,
					sex: this.userInfo.sex,
					name: this.userInfo.name,
					birthday: this.userInfo.birthday
				}
				// p = {
				// 	nickname: null,
				// 	head: null,
				// 	phone: null,
				// 	sex: null,
				// 	name: null,
				// 	birthday: null
				// }
				let res = await updateUserInfoReq(p)
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			confirmDate(e) {
				this.userInfo.birthday = moment(this.$refs.datetimePicker.innerValue).format("YYYY-MM-DD")
				this.showDate = false
			},
			handleSelSex(e) {
				if (e.name == '男') {
					this.userInfo.sex = 0
				} else {
					this.userInfo.sex = 1
				}
				this.showSex = false
			},

			chooseAvatar() {
				let _this = this
				if (getApp().globalData.showPrivacy) {
					_this.showPop = true;
					return;
				} else {
					uni.chooseImage({
						count: 1,
						success(res) {
							console.log('res', res.tempFilePaths[0]);
							_this.upImg(res.tempFilePaths[0])
						}
					})
				}


			},
			upImg(file) {
				console.log('upImg的file', file)
				let _this = this
				uni.uploadFile({
					url: uploadUrl.baseUrl + '/api/upload',
					filePath: file,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data'
					},
					formData: {
						'fileType': 'images',
						'dirName': 'cert',
						'tag': 'lamp'
					},
					success: function(uploadRes) {
						let result = JSON.parse(uploadRes.data)
						if (result.code == 0) {
							_this.userInfo.head = result.data.file
							console.log('上传后的头像url地址', result.data.file)
						}
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>