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">{{schoolList[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="date" :value="userData.birthday" :start="startDate" :end="endDate" @change="bindDateChange">
				<!-- <picker mode="date" :value="userData.date" @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="mask" v-show="showPopupConfirm" @click="closePopup"></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学院'],
				// 兴趣选项
				hobbyList: ['篮球','编程','钢琴','美术','摄影'],
				
				gender: '男',
				school: 'xx学院',

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

				// 用户信息数据
				userData: {
					oid:'',
					avatar: '', //头像
					username: '', //用户名
					sex:null, //用户性别
					school:null,//学校
					birthday: '',//生日
					tag:null, //兴趣标签
					brief: '', //用户简介
				}


			};
		},
		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		// 	endDate() {
		// 		return this.getDate('end');
		// 	}
		// },
		methods: {
			// 获取渲染数据
			getData(){
				const value = this.$store.state.user.openid;
				if (value == '') return
				
				this.$request('/selectUserInfo', "POST", {openid: this.$store.state.user.openid,}).then(res => {
					console.log('获取渲染数据',res[0][0]);
					// res[0][0].birthday=
					if(res[0][0].birthday==null) res[0][0].birthday=''
					if(res[0][0].brief==null) res[0][0].brief=''
					this.userData=res[0][0]
					// this.userData.oid=res[0][0].oid
					// this.userData.avatar=res[0][0].avatar
					// this.userData.username=res[0][0].username
					// this.userData.sex=res[0][0].sex?res[0][0].sex :''
					// this.userData.school=res[0][0].school?res[0][0].school :''
					// this.userData.birthday=res[0][0].birthday ?res[0][0].birthday :''
					// this.userData.tag=res[0][0].tag ?res[0][0].tag :''
					// this.userData.brief=res[0][0].brief ?res[0][0].brief :''
				})
			},
			// 取消操作
			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);
					
					this.$request('/selectUser', 'POST', {
						oId: uni.getStorageSync('oId'),
					}).then(res => {
						console.log('selectUser', 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) {
				this.userData.school = e.detail.value
			},
			// 兴趣
			handeHobby(e) {
				this.userData.tag = e.detail.value
			},
			
			// 清除vuex的数据
			gotoLogin() {
				console.log(this.$store.state.user);
				let user = {
					avatar: "",
					birthday: "",
					brief: "",
					id: "",
					openid: "",
					school: "null",
					sex: null,
					tag: null,
					username: "暂无"
				}
				
				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%;
				// flex: 1;
				display: flex;
				// justify-content: space-around;
				// align-items: end;
				// padding-top: 17px;
				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: 840rpx;
		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: 216rpx;
			border-top: 1px solid #E7E7E7;

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

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

					textarea {
						width: 100%;
						height: 88rpx;
						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>