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">
					<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="setPicker">
				<picker mode="date" :value="userData.birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="content">
						<view class="edit_title">
							<text>生日</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{userData.birthday=='null'?" ":userData.birthday}}</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="hobbyList" :value="userData.tag"  @change="handelHobby">
					<view class="content">
						<view class="edit_title">
							<text>兴趣标签</text>
						</view>
						<view class="input_details">
							<view class="details">
								<view class="uni-input text">{{hobbyList[userData.tag]}}</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-container" 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: ['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: {
			// 获取渲染数据
			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 => {
					console.log('获取渲染数据',res[0][0]);
					
					this.userData=res[0][0]
				})
			},
			// 取消操作
			closePopup() {
				this.showPopup = false;
				// this.showPopupConfirm = false;
			},
			// 确认操作
			conf() {
				this.showPopup = false;
				this.showPopupConfirm=true
				console.log('要上传修改的数据',this.userData);
				this.$request('/updateUserInfo', "POST", this.userData).then(res => {
					console.log('修改的数据',res);
					
					console.log('this',this);
					this.$request('/selectUserInfo', 'POST', {
						oId: this.$store.state.user.openid
					}).then(res => {
						console.log('获取', 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
			},
			// handelHobby(e){
			// 	this.userData.tag = e.detail.value
			// },
			// // 生日
			// bindDateChange(e) {
			// 	this.userData.birthday = e.detail.value
			// },
			// handelGender(e) {
			// 	this.gender = this.genderList[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:'',//职称
					// birthday: '',//生日
					// tag:null, //兴趣标签
					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-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 520rpx;
		height: 260rpx;
		z-index: 1000;
		// display: none;

		.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>