XLJK-web/xinlijiankang-uniapp-main/pages/lecturer/modifyInfo/modifyInfo.vue

<template>
	<view class="container">
		<view class="ui-all">
			<form @submit="getUserProfile">
				
				<view class="avatar">
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="getInfo">
						<view class="imgAvatar">
							<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
						</view>
						<text class="avatarUrl-text">设置头像</text>
					</button>
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="getInfo-btn-box">授权获取头像</button>
				</view>
				<view class="ui-list" style="flex-direction: column;align-items: flex-start;">
					<view style="display: flex;align-items: center;width: 100%;">
						<text class="ui-list-text">昵称</text>
						<input type="nickname" placeholder="点击使用微信昵称" v-model="nickname" name="nickName" placeholder-class="place" class="ui-list-input" @input = "bindnickName">
							<!-- <button class="ui-list-btn-box">使用微信昵称</button> -->
						</input>
					</view>
					<view style="font-size: 24rpx;color: #ff0000;">*点击使用微信昵称</view>
				</view>
				
				<button class="save" type="primary" formType="submit" hover-class="hoverClass">确认</button>
			</form>
		</view>

	</view>
</template>

<script>
	import { base_url } from '../../../apis/index.config.js'
	export default {

		data() {
			return {
				member_id:'',
				memberInfo:'',
				value: '请填写',
				url: '',
				nickname: '',
				avater: '',
			}

		},
		onShow() {
			this.member_id = uni.getStorageSync('member_id');
			this.memberInfo = uni.getStorageSync('memberInfo');
			// 获取用户信息
			this.getMemberInfo();
		},
		methods: {
			bindnickName(e) {
				this.nickname = e.detail.value;
			},
			//获取用户信息
			getMemberInfo(loading = true) {
				let that = this;
				let id = uni.getStorageSync('id');
				this.$request.getuserinfo({
					id
				}).then( res =>{
					console.log(res)
					that.avater = res.data.avater;
					that.nickname = res.data.nickname == '微信用户'?'':res.data.nickname;
				}).catch( e=>{
					console.log(e)
				})
			},
			// avatarChoose() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success(res) {
			// 			that.imgUpload(res.tempFilePaths);
			// 			const tempFilePaths = res.tempFilePaths;
			// 		}
			// 	});
			// },
			// 获取头像
			onChooseAvatar(e) {
				let that = this;
				console.log(e)
				const {
					avatarUrl
				} = e.detail
				that.avater = avatarUrl;
				
			},

			getphonenumber(e) {
				if (e.detail.iv) {
					console.log(e) //传后台解密换取手机号
					uni.showToast({
						title: '已授权',
						icon: 'none',
						duration: 2000
					})
				}
			},
			getUserProfile(e) {
				let that = this;
				let p = {
					nickname: e.detail.value.nickName,
					avater: that.avater?that.avater:'',
				}
				if(!p.avater){
					uni.showToast({
						title: '请先设置头像',
						icon: 'none'
					})
					return
				}
				if(!p.nickname){
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
					return
				}
				that.updata(p);
			},
			async updata(datas) {
				//传后台
				let that = this;
				await that.$request.saveuserInfo(datas).then( res =>{
					uni.showToast({
						title: '修改成功！',
						icon:'success'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						})
					}, 1500);
				}).catch( e=>{
					console.log(e)
				})
			},
			imgUpload(file) {
				let that = this;
				uni.uploadFile({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url: 'https://ocr.lfwhzb.com/api/upload/image', //需传后台图片上传接口
					filePath: file[0],
					name: 'file',
					formData: {
						type: 'user_headimg'
					},
					success: function(res) {
						var data = JSON.parse(res.data);
						data = data.data;
						that.avater = that.url + data.img;

						that.headimg = that.url + data.img;


					},
					fail: function(error) {
						console.log(error);
					}
				});
			},

		},
		onLoad() {}

	}
</script>

<style lang="less">
	page{
		background-color: #fff;
	}
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.getInfo {
				line-height: 1;
				background: #fff;
				display: flex;
				align-items: center;
				border: none;
				margin: 0;
				padding: 0;
			}

			.getInfo::after {
				border: none;
			}

			.imgAvatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.avatarUrl-text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 30rpx;
			}

			// &:after {
			// 	content: ' ';
			// 	width: 20rpx;
			// 	height: 20rpx;
			// 	border-top: solid 1px #030303;
			// 	border-right: solid 1px #030303;
			// 	transform: rotate(45deg);
			// 	-ms-transform: rotate(45deg);
			// 	/* IE 9 */
			// 	-moz-transform: rotate(45deg);
			// 	/* Firefox */
			// 	-webkit-transform: rotate(45deg);
			// 	/* Safari 和 Chrome */
			// 	-o-transform: rotate(45deg);
			// 	position: absolute;
			// 	top: 85rpx;
			// 	right: 0;
			// }
			.getInfo-btn-box{
				width: auto;
				font-size: 26rpx;
				padding: 10rpx 30rpx;
				color: #fff;
				background-color: #1684FC;
				border-radius: 6px;
				margin: 0;
				line-height: 1.5;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			button{
				line-height: 1.5;
				margin: 0;
				font-size: 26rpx;
				padding: 10rpx 30rpx;
				margin-left: 10rpx;
			}
			button.ui-list-btn-box{
				color: #fff;
				background-color: #1684FC;
			}
			.ui-list-text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				width: auto;
				text-align: center;
				padding-right: 20rpx;
			}

			.ui-list-input {
				color: #030303;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				flex: 1;
				padding: 10rpx 20rpx;
				background: #f2f2f2;
				
			}
			.picker-box {
				width: 90%;
				color: #030303;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
			}

			// textarea {
			// 	color: #030303;
			// 	font-size: 30rpx;
			// 	vertical-align: middle;
			// 	height: 150rpx;
			// 	width: 100%;
			// 	margin-top: 50rpx;
			// }

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 26rpx;
			right: 0;
		}

		.save {
			background: #1684FC;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
	.hoverClass{
		opacity: 0.8;
	}
</style>