wurenji-xcx/pages/main/set/userinfo/userinfo.vue

<template>
	<view class="user">
		<view class="top">
			<view class="left">
				<!-- <image @click="chooseImage" v-if="userinfo.headUrl" :src="userinfo.headUrl" mode=""></image> -->
				<view class="page-container1-face-image" v-if="userinfo.headUrl" @click="onDiscernHandle">
					<u--image :showLoading="true" :src="userinfo.headUrl" width="100rpx" height="100rpx"></u--image>
				</view>
				<view v-else class="name" @click="onDiscernHandle">
					<span>
						{{userinfo.realName.slice(-2)}}
					</span>
				</view>
				<view class="txt">
					<div>
						{{userinfo.realName}}
					</div>
					<div v-if="userinfo.postName">
						{{userinfo.postName}} 岗位
					</div>
				</view>
			</view>
			<view class="right">

			</view>
		</view>
		<u-form :model="userinfo" ref="uForm" border-bottom label-width="180rpx">
			<view class="main">
				<view class="list">
					<!-- <u-form-item label="性别:">
						{{userinfo.sex}}
					</u-form-item>
					<u-form-item label="年龄:"> {{userinfo.age}}
					</u-form-item> -->
					<u-form-item label="手机号:" prop="mobile">
						<span v-if="!update">{{userinfo.mobile}}</span>
						<u-input v-else border="false" v-model="userinfo.mobile" />
					</u-form-item>
					<u-form-item label="电子邮箱:" prop="email">
						<span v-if="!update">{{userinfo.email}}</span>
						<u-input v-else border="false" v-model="userinfo.email" />
					</u-form-item>
					<!-- <u-form-item label="部门:"> {{userinfo.deptName}}
					</u-form-item>
					<u-form-item label="岗位:"> {{userinfo.postName}}
					</u-form-item> -->
				</view>
				<!-- <view style="display: flex;justify-content: space-between;padding: 0 30rpx;margin-bottom: 20rpx;">
					<view class="">
						默认银行卡
					</view>
					<view style="text-align: center;color: #3C9CFF;" @click='toBackInfo'>
						银行卡管理
					</view>
				</view>
				<div class="list" v-if='userinfo.bankName'>
					<u-form-item label="银行卡:" prop="bankName">
						{{userinfo.bankName}}
					</u-form-item>
					<u-form-item label="银行卡号:" prop="bankCard">
						<span>{{userinfo.bankCard}}</span>
					</u-form-item>
				</div>
				<div class="list" v-else style="padding: 0 30rpx">
					<span style="color: red;">您当前未添加银行卡，为避免影响工资发放和报销，请及时添加银行卡！</span>
				</div> -->
			</view>
		</u-form>
		<u-toast style="display: none;" ref="uToast"></u-toast>
		<view class="btns" v-if="!update">
			<u-button @click="update=!update" type="primary">编辑</u-button>
		</view>
		<view class="btns" v-else>
			<u-button @click="submit" class="save" type="primary">保存</u-button>
			<u-button @click="update=!update">取消</u-button>
		</view>
	</view>
</template>

<script>
	import Config from '@/common/Config.js'
	import upload from '../../../../uni_modules/uview-ui/libs/config/props/upload';
	export default {
		data() {
			return {
				fileList: [],
				update: false,
				userinfo: {
					realName: ""
				},
				rules: {
					email: [{
						required: true,
						message: '请输入邮箱',
					}],
					bankName: [{
						required: true,
						message: '请输入开户行',
					}],
					bankCard: [{
						required: true,
						message: '请输入银行卡号',
					}],

				}
			}
		},
		onShow() {
			this.getinfo()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			toBackInfo() {
				uni.navigateTo({
					url: '/pages/main/set/userinfo/backInfo'
				})
			},
			// 选择图片方法
			onDiscernHandle() {
				let that = this
				console.log(1111);
				if (this.fileList.length !== 0 && !this.update) {
					// 预览图片
					uni.previewImage({
						urls: [this.userinfo.headUrl],

					});
					return false;
				}
				uni.chooseImage({
					count: 1, // 选择文件的数量，这里选择一个文件
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; // 获取选择的文件路径
						// 上传文件
						uni.uploadFile({
							url: `${Config.baseUrl}/sys/oss/uploadAndCreateEnclosure`, // 上传服务器的地址
							filePath: tempFilePaths[0], // 要上传的文件路径
							name: 'file', // 服务器接收文件的字段名
							success: function(uploadRes) {
								that.userinfo.headUrl = JSON.parse(uploadRes.data).data[0].src
								console.log(JSON.parse(uploadRes.data), that.userinfo);
								// 上传成功后的逻辑处理
							},
							fail: function(err) {
								console.log('上传失败', err);

								// 上传失败后的逻辑处理
							}
						});
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList = [];
				this.userinfo.headUrl = ''
			},

			//获取个人信息
			getinfo() {
				this.$api.to_http(`/sys/user/info`, "GET").then((res) => {
					if (!res.data.data.bankName) {
						res.data.data.bankName = '农业银行'
					}
					this.userinfo = res.data.data
					this.fileList[0] = {
						url: res.data.data.headUrl
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(11);
					} else {
						console.log('验证失败');
					}
				});
				if (!this.userinfo.email || !this.userinfo.mobile || !this.userinfo.bankName || !this.userinfo.bankCard) {
					return uni.$u.toast('请完成必填项')
				}
				this.$api.to_http(`/sys/user/mobileUpdateInfo`, this.userinfo, "POST").then((res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					this.$api.to_http(`/sys/user/updateAvatar`, {
						id: this.userinfo.id,
						avatar: this.userinfo.headUrl
					}, "POST").then((res) => {
						if (res.data.code != 0) {
							return uni.$u.toast(res.data.msg)
						}
						uni.setStorageSync('userInfo', this.userinfo)
						uni.$u.toast(res.data.msg)
					})
				})
			},
		}
	}
</script>


<style>
	.user .u-form-item {
		border-bottom: 1px solid #e1dddd;
		padding: 0 30rpx;
	}

	.user .u-input.u-input--square {
		padding: 0 !important;
	}

	.user .u-upload {
		flex: none;
	}
</style>
<style scoped lang="less">
	.user {
		background: #F2F6FF;
		position: absolute;
		height: 100vh;
		width: 100%;

		.btns {
			margin: 0 auto;
			// margin-top: 300rpx;
			width: 100%;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;
			position: absolute;
			display: flex;

			.save {
				margin-right: 40rpx;
			}
		}
	}

	.user .top {
		background: #fff;
		padding: 20rpx 40rpx;
	}

	.user .top .txt {
		margin-left: 20rpx;
	}

	.name {
		background: #39BDFD;
		color: #fff;
		text-align: center;
		border-radius: 50%;
		height: 50px;
		width: 50px;

		span {

			line-height: 50px;
			display: inline-block;
			font-size: 16px;
		}
	}

	.user .top image {
		width: 100rpx;
		height: 100rpx;
		background-color: #999;
		border-radius: 16rpx;
	}

	.user .top .left {
		display: flex;
		align-items: center;
	}

	.user .main {
		// padding: 0 20rpx;
		margin-top: 30rpx;
		padding-bottom: 0;

		.list {
			background: #fff;
			margin-bottom: 30rpx;
		}
	}

	.user .main .li {
		display: flex;
		margin-bottom: 40rpx;
		border-bottom: 1px solid #f1f1f1;
		padding: 15rpx;
		box-sizing: border-box;
		font-size: 28rpx
	}

	.user .main .li:last-child {
		border: none;
	}

	.user .main .li .title {
		width: 200rpx;
		color: #999;
	}
</style>