teaching-uniapp/pages/mineEdit/mineEdit.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>

		<view class="editBox">
			<view class="edit_avatar">
				<view class="edit_title">
					<text>头像</text>
				</view>
				<view class="userAvatar" @click="updateava">
					<image :src="userData.avatar"></image>
				</view>
			</view>
			<view class="setName">
				<view class="edit_title">
					<text>姓名</text>
				</view>
				<view class="input_details">
					<view class="nickname">
						<input type="text" style=" text-align: right;" maxlength="10" placeholder="请输入昵称"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);"
							v-model="userData.username" />
					</view>
				</view>
			</view>
			<view class="setPicker">
				<picker mode="selector" :range="genderList" :value="userData.sex" @change="handelGender">
					<view class="content">
						<view class="edit_title">
							<text>性别</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{genderList[userData.sex]}}</view>
							</view>
							<view class="arrow">
								<image
									src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="setPicker">
				<picker mode="selector" :range="schoolList" :value="userData.school" @change="handelSchool">
					<view class="content">
						<view class="edit_title">
							<text>学校</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{userData.school}}</view>
							</view>
							<view class="arrow">
								<image
									src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="setPicker">
				<picker mode="selector" :range="speList" :value="userData.spe" @change="handelspe">
					<view class="content">
						<view class="edit_title">
							<text>专业</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{userData.spe}}</view>
							</view>
							<view class="arrow">
								<image
									src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="setPicker">
				<picker mode="selector" :range="rankList" :value="userData.rankl" @change="handelrank">
					<view class="content">
						<view class="edit_title">
							<text>职称</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{userData.rankl}}</view>
							</view>
							<view class="arrow">
								<image
									src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right_gray.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>

			<view class="setIntro">
				<view class="edit_title">
					<text>简介</text>
				</view>
				<view class="input_details">
					<view class="selfdomIntro">
						<textarea type="text" placeholder="请输入你的个性签名" maxlength="75"
							placeholder-style="font-size: 28rpx; color: rgb(153, 153, 153);" style="color: black;"
							v-model="userData.brief" />
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn">
				<button @click="saveInfo">保存修改</button>
				<button @click="gotoLogin">退出登录</button>
			</view>
		</view>



		<!-- 弹窗 -->
		<view>
			<view class="mask" v-show="showPopup" @click="closePopup"></view>
			<view class="popup-container" v-show="showPopup">
				<view class="popup">
					<view class="header">
						<text>确认修改</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="closePopup">取消</view>
						<view class="confirm-btn" @click="conf">确认</view>
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="popup-container2" style="height: 175px;" v-show="showPopupConfirm">
				<view class="popup">
					<view class="header" style="margin-top: 15px;">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static//gou1.png" mode="aspectFill">
						</image>
						<text style="margin-bottom: 24px;">修改成功</text>
					</view>

				</view>
			</view>
		</view>






	</view>
</template>

<script>
	export default {
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				navBarData: {
					title: '个人资料',
					btn: 1
				},



				// 相别选项
				genderList: ['男', '女'],
				//学校选项
				schoolList: ['深圳信息XX学院', '深圳XX学院', '深圳XX学院'],
				//专业选项
				speList: ['互联网', '网络通信', '航空', '汽修', '珠宝', '文秘', '设计'],
				//职称选项
				rankList: ['教授', '副教授', '讲师','助教','其他'],
				// rankList: ['xx', 'xx', 'xx'],
				// 兴趣选项
				hobbyList: ['篮球', '编程', '钢琴', '美术', '摄影'],

				gender: '男',
				school: 'xx学院',

				//控制弹窗
				showPopup: false,
				//修改成功弹窗
				showPopupConfirm: false,
				// isFirstShow: true,

				// 用户信息数据
				userData: {
					oid: '',
					avatar: '', //头像
					username: '', //用户名
					sex: '', //用户性别
					school: '', //学校
					spe: '', //专业
					rankl: '', //职称
					brief: '', //用户简介
				}


			};
		},
		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		// 	endDate() {
		// 		return this.getDate('end');
		// 	}
		// },
		methods: {
			// 上传图片
			updateava() {
				let that = this
				uni.chooseImage({
					count: 1, // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];

						const uploadTask = uni.uploadFile({
							url: 'http://139.159.246.165:7006/img', // post请求地址
							filePath: tempFilePaths,
							name: 'file', // 待确认
							header: {
								// 不要写这个不然报错
								// 'Content-Type': 'multipart/form-data',
							},
							formData: {
								// 携带的用户数据
								// userId: that.$store.getters.getUser._id, // 用户ID
							},
							success: function(res) {
								// console.log(res);
								that.userData.avatar=res.data
								
							},
							fail: function(uploadFileFail) {
								console.log('Error:', uploadFileFail.data);
							},
							complete: () => {
								// 接口调用结束的回调函数（调用成功、失败都会执行）
								// console.log('Complete:');
							}
						});


					}
				});

			},
			// 获取渲染数据
			getData() {
				const value = this.$store.state.user.openid;
				if (value == '') return
				// console.log('????', this.$store.state.user.openid);
				this.$request('/selectUserInfo', "POST", {
					openid: this.$store.state.user.openid
				}).then(res => {
					// 假如简介为null
					if(!res[0][0].brief){
						res[0][0].brief=''
					}
					// console.log('获取渲染数据', res[0][0]);
					this.userData = res[0][0]
				})
			},
			// 取消操作
			closePopup() {
				this.showPopup = false;
			},
			// 确认操作
			conf() {
				this.showPopup = false;
				this.showPopupConfirm = true
				console.log(' this.userData', this.userData);
				this.$request('/updateUserInfo', "POST", this.userData).then(res => {

					// console.log('this', this);
					this.$request('/selectUserInfo', 'POST', {
						oId: this.$store.state.user.openid
					}).then(res => {
						console.log('获取caozuo', res[0][0]);
						this.$store.dispatch('asyncUpdateUser', res[0][0])
					})
					setTimeout(() => {
						this.showPopupConfirm = false
						this.getData()
					}, 1500)
				})
			},
			// 点击保存修改
			saveInfo() {

				const value = this.$store.state.user.openid;
				if (value == '') return uni.showToast({
					title: '未登录',
					icon: 'none'
				})
				if (!this.userData.username) {
					return uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
				}
				this.showPopup = true
			},
			// 选择用户性别
			handelGender(e) {
				console.log(e);
				this.userData.sex = e.detail.value
			},
			
			// 学校
			handelSchool(e) {
				console.log(e);
				this.userData.school = this.schoolList[e.detail.value]
			},
			// 专业
			handelspe(e) {
				console.log('handelspe', e);
				this.userData.spe = this.speList[e.detail.value]
				console.log('???', this.userData.spe);
			},
			// 职位
			handelrank(e) {
				console.log(e);
				this.userData.rankl = this.rankList[e.detail.value]
			},
			// 兴趣
			handeHobby(e) {
				this.userData.tag = e.detail.value
			},

			// 清除vuex的数据
			gotoLogin() {
				let user = {
					openid: '',
					avatar: '', //头像
					username: '', //用户名
					sex: '', //用户性别
					school: '', //学校
					spe: '', //专业
					rankl: '', //职称
					brief: '', //用户简介
				}

				this.$store.dispatch('asyncUpdateUser', user)
				uni.navigateTo({
					url: '/pages/login_Wechat/login_Wechat'
				})
				// 清除本页面数据
				this.userData = {}
			},
		},
		onReady() {
			console.log(this.$store.state);
			this.getData()
		}
	}
</script>

<style lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		overflow: hidden;
		// display: none;
	}

	.popup-container2 {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 520rpx;
		height: 260rpx; 
		z-index: 1000;
		border-radius: 16rpx;
		// display: none;
		box-shadow: 0rpx 3rpx 10rpx 5rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		.popup {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.header {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 24px;
				font-size: 34rpx;
				font-weight: 600;

				image {
					width: 150rpx;
					height: 150rpx;
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}

			.footer {
				width: 100%;
				display: flex;
				overflow: hidden;

				.cancel-btn {
					width: 50%;
					height: 100rpx;
					background-color: #F7F7F7;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					border-bottom-left-radius: 16rpx;
					line-height: 50px;
				}

				.confirm-btn {
					width: 50%;
					height: 100rpx;
					background-color: #0081FE;
					color: #fff;
					font-size: 34rpx;
					text-align: center;
					line-height: 50px;
				}
			}
		}
	}

	.edit_title {
		display: flex;
		align-items: center;
		font-size: 32rpx;

	}

	.editBox {
		width: 100%;
		// height: 800rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top: 1px solid #E7E7E7;
		padding: 0 18px;

		.edit_avatar {
			height: 164rpx;
			display: flex;
			justify-content: space-between;

			.userAvatar {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.setName {
			display: flex;
			justify-content: space-between;
			height: 92rpx;
			border-top: 1px solid #E7E7E7;

			.input_details {
				display: flex;
				align-items: center;
				flex-direction: row;

				.nickname {
					width: 350rpx;
					text-align: end;
					// padding-right: 10rpx;
					// margin-right: 10rpx;
					font-size: 28rpx;
					color: rgb(153, 153, 153);
				}
			}
		}

		.setPicker {
			height: 92rpx;
			border-top: 1px solid #E7E7E7;

			.content {
				height: 92rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input_details {
					display: flex;
					align-items: center;

					.details {
						display: flex;
						flex-direction: row;

						.text {
							font-size: 28rpx;
							color: rgb(153, 153, 153);
						}
					}

					.arrow {
						display: flex;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
		}

		.setIntro {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 230rpx;
			border-top: 1px solid #E7E7E7;

			.input_details {
				display: flex;
				align-items: center;

				.selfdomIntro {
					width: 100%;
					height: 120rpx;

					textarea {
						width: 100%;
						height: 120rpx;
						font-size: 28rpx;
						color: rgb(153, 153, 153);
					}
				}
			}
		}
	}

	.btnBox {
		position: absolute;
		margin: 0 85rpx;
		bottom: 40px;

		.btn {
			button {
				width: 580rpx;
				height: 88rpx;
				border: none;
				border-radius: 100rpx;
				border: 1px solid lightgray;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
				text-align: center;

				&:first-child {
					background-color: rgb(0, 86, 168);
					color: white;
					margin-bottom: 24rpx;
				}

				&::after {
					border: none;
				}
			}
		}
	}
</style>