count-pass-app/pages/info/userInfo.vue

<template>
	<view class="userinfo">
		<u-sticky>
			<view class="avatar-box">
				<view class="avatar">
					<Oss @upload="uploadSuccess" fliename='avatar'>
						<!-- <u-avatar v-if="ruleForm.avatar" size='100' :src="ruleForm.avatar" @click="avatarChange"></u-avatar>
            <u-icon name="camera" size='80' color='#70a7ff' v-else  @click="avatarChange"></u-icon> -->
						<u-avatar v-if="ruleForm.avatar" size='100' :src="ruleForm.avatar"></u-avatar>
						<u-icon name="camera" size='80' color='#70a7ff' v-else></u-icon>
					</Oss>
				</view>
			</view>
		</u-sticky>

		<view class="userinfo-form">
			<u-form labelPosition="top" :model="ruleForm" :rules="rules" ref="form1" labelWidth='90'>

				<u-form-item label="用户名" borderBottom prop="username">
					<u-icon name="account" color='#4680F9' class="item-icon"></u-icon>
					<u--input readonly v-model="ruleForm.username" border="none" placeholder="用户名"></u--input>
				</u-form-item>

				<u-form-item label="手机号" borderBottom prop="phone">
					<u-icon name="phone" color='#4680F9' class="item-icon"></u-icon>
					<u--input readonly v-model="ruleForm.phone" border="none" placeholder="手机号"></u--input>
				</u-form-item>

				<u-form-item label="昵称" borderBottom prop="nickname">
					<u-icon name="account" color='#4680F9' class="item-icon"></u-icon>
					<u--input v-model="ruleForm.displayName" border="none" placeholder="昵称"></u--input>
				</u-form-item>

				<u-form-item label="姓名" borderBottom prop="name">
					<u-icon name="account" color='#4680F9' class="item-icon"></u-icon>
					<u--input v-model="ruleForm.username" border="none" placeholder="姓名"></u--input>
				</u-form-item>

				<!-- 		<u-form-item label="邮箱" borderBottom prop="email">
					<u-icon name="email" color='#4680F9' class="item-icon"></u-icon>
					<u--input v-model="ruleForm.email" border="none" placeholder="邮箱"></u--input>
				</u-form-item> -->

				<u-form-item label="原密码" borderBottom prop="password">
					<u-icon name="lock" color='#4680F9' class="item-icon"></u-icon>
					<u--input type='password' v-model="ruleForm.password" border="none" placeholder="原密码"></u--input>
				</u-form-item>

				<u-form-item label="新密码" borderBottom prop="newpassword1">
					<u-icon name="lock" color='#4680F9' class="item-icon"></u-icon>
					<u--input type='password' v-model="ruleForm.newpassword1" border="none" placeholder="原密码">
					</u--input>
				</u-form-item>

				<u-form-item label="确认密码" borderBottom prop="newpassword2">
					<u-icon name="lock" color='#4680F9' class="item-icon"></u-icon>
					<u--input type='password' v-model="ruleForm.newpassword2" border="none" placeholder="确认密码">
					</u--input>
				</u-form-item>
			</u-form>
		</view>
		<view class="edit-btn">
			<u-button type="primary" @click="submit">{{$t("base.button.confirm")}}</u-button>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		editUserInfo
	} from "../../api/user"
	import {
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		isValidateNoneMobile
	} from "../../utils/util";
	import Oss from '../../components/oss/oss'
	export default {
		data() {
			const validatePhone = (rule, value, callback) => {
				if (isValidateNoneMobile(value)[0]) {
					callback(new Error(isValidateNoneMobile(value)[1]));
				} else {
					callback();
				}
			};
			const validatePass = (rule, value, callback) => {
				if (this.ruleForm.password !== "") {
					if (value !== this.ruleForm.newpassword1) {
						callback(new Error("两次输入密码不一致!"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			return {
				userInfo: {},
				version:"",
				ruleForm: {
					username: "",
					password: "",
					newpassword1: "",
					newpassword2: "",
					avatar: "",
					phone: "",
					displayName: "",
					name: "",
					email: ""
				},
				rules: {
					phone: [{
						required: false,
						validator: validatePhone,
						trigger: "blur"
					}],
					password: [{
						required: true,
						min: 6,
						message: "原密码不少于6位",
						trigger: "blur",
					}, ],
					newpassword1: [{
						required: false,
						min: 6,
						message: "新密码不少于6位",
						trigger: "blur",
					}, ],
					newpassword2: [{
						required: false,
						validator: validatePass,
						trigger: "blur"
					}, ],
				},
			}
		},
		components: {
			Oss,
		},
		onLoad() {
			let n = 'http://tmp/eFy1HaBDvtBra84709346813f00bf69c1bccc175211c.jpg'.indexOf('/')
			console.log(n);
			this.getUserInfo()
		},
		methods: {
			...mapActions({
				logout: 'user/logout'
			}),
			...mapMutations({
				setUserInfo: 'user/login'
			}),
			uploadSuccess(data) {
				console.log(data, this);
				this.ruleForm.avatar = data.url
			},
		
			getUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo')
				this.ruleForm.password = undefined;
				this.ruleForm.newpassword1 = undefined;
				this.ruleForm.newpassword2 = undefined;
				this.ruleForm.username = this.userInfo.username;
				this.ruleForm.phone = this.userInfo.phone;
				this.ruleForm.avatar = this.userInfo.avatar;
				this.ruleForm.displayName = this.userInfo.displayName;
				this.ruleForm.email = this.userInfo.email;
				// getUserInfo().then(res=>{
				//   if(res.statusCode == 200){
				//     this.userInfo = res.data.data.sysUserDTO
				//     // this.userInfo = uni.getStorageSync('userInfo')
				//     this.ruleForm.password = undefined;
				//     this.ruleForm.newpassword1 = undefined;
				//     this.ruleForm.newpassword2 = undefined;
				//     this.ruleForm.username = this.userInfo.username;
				//     this.ruleForm.phone = this.userInfo.phone;
				//     this.ruleForm.avatar = this.userInfo.avatar;
				//     this.ruleForm.nickname = this.userInfo.nickname;
				//     this.ruleForm.name = this.userInfo.name
				//     this.ruleForm.email = this.userInfo.email;
				//   }

				// })
			},
			updataUserInfo() {
				getUserInfo().then(res => {
					if (res.statusCode === 200) {
						debugger
						this.userInfo = res.data.data.sysUser
						this.ruleForm.password = undefined;
						this.ruleForm.newpassword1 = undefined;
						this.ruleForm.newpassword2 = undefined;
						this.ruleForm.username = this.userInfo.username;
						this.ruleForm.phone = this.userInfo.phone;
						this.ruleForm.avatar = this.userInfo.avatar;
						this.ruleForm.nickname = this.userInfo.nickname;
						this.ruleForm.name = this.userInfo.name
						this.ruleForm.email = this.userInfo.email;
						uni.setStorageSync('userInfo', res.data.data.sysUser)
						this.setUserInfo(res.data.data.sysUser)
					}
				})
			},
			// avatarChange(){
			//   uni.chooseImage({
			//     count:1,
			//     crop:{
			//       width:375,
			//       height:375
			//     },
			//     success:(res)=>{
			//       this.uploadFilePromise(res.tempFilePaths[0]).then(res=>{
			//         if(res.statusCode == 200){
			//           this.ruleForm.avatar = res.data.data.url
			//         }else{
			//           uni.showToast({
			//             title: res.data.msg,
			//             icon: 'none',
			//             duration: 2000
			//           })
			//         }
			//       })

			//     }
			//   })
			// },
			// uploadFilePromise(url,) {
			//   return new Promise((resolve, reject) => {
			//     let a = uni.uploadFile({
			//       url: '/admin/sys-file/upload',
			//       filePath: url,
			//       name: 'file',
			//       header:{
			//         'Authorization': 'Bearer ' + uni.getStorageSync('token'),
			//       },
			//       success: (res) => {
			//         res.data=JSON.parse(res.data)
			//         setTimeout(() => {
			//           resolve(res)
			//         }, 1000)
			//       }
			//     });
			//   })
			// },
			submit() {
				let _this = this
				this.$refs.form1.validate().then(res => {
					editUserInfo(this.ruleForm).then(res => {
						if (res.statusCode == 200 && res.data.code == 0) {
							uni.$u.toast(_this.$t("userinfo.setSucceeded"))
							this.updataUserInfo()
						}else{
							uni.$u.toast(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors);
					uni.$u.toast(errors[0].message)
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.userinfo {

		// padding: 32rpx;
		.avatar-box {
			position: relative;
			background-color: #4680F9;
			height: 100rpx;
			border-bottom-right-radius: 80rpx;
			border-bottom-left-radius: 80rpx;
			margin-bottom: 140rpx;

			.avatar {
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				border: 2px solid #4680F9;
				bottom: -80rpx;
				left: calc(50% - 80rpx);
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.avatar-wrap {
			margin: auto;
		}

		.userinfo-form {
			padding: 0 64rpx 150rpx;

			.item-icon {
				margin-right: 20rpx;
			}
		}

		.edit-btn {
			position: fixed;
			bottom: 0;
			// height: 150rpx;
			padding: 24rpx 64rpx;
			width: calc(100% - 128rpx);
			background-color: #fff;
			border-top-right-radius: 60rpx;
			border-top-left-radius: 60rpx;
			z-index: 2000;
		}
	}

	.bottom-back {
		margin-top: 10px;
		width: 750rpx;
		height: 44px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* #ifndef APP-NVUE */
		border: none;
		/* #endif */
		border-width: 0;
		border-radius: 0;
		background-color: #FFFFFF;
	}

	.bottom-back-text {
		font-size: 33rpx;
	}

	/deep/ .u-form-item {
		margin-bottom: 24rpx;
	}

	/deep/ .u-button--primary {
		color: #fff;
		background-color: #4680F9;
		border-color: #4680F9;
		border-width: 1px;
		border-style: solid;
		border-radius: 20rpx;
	}

	/deep/ .u-form-item__body__right__content {
		flex-direction: row;
	}
</style>