设置页面修改

pages/my/setting.vue

@@ -1,43 +1,236 @@
 <template>
-	<view>
-		<view class="list-row" @click="quitClick">
-			<icon class="list-icon login-out-icon"></icon>
-			<text>退出登录  </text>
+	<view class="mobile-setting-page">
+		<view class="setting-list-box">
+			<view class="list-row no-jt-row img-list-row">
+				<text>头像</text>
+				<img class="head-img" :src="settingData.icon" v-if="settingData.icon">
+				<icon class="phone-default-userImg setting-default-userImg" v-else></icon>
+			</view>
+			<view class="list-row no-jt-row">
+				<text>用户名</text>
+				<text class="row-content">{{settingData.userName}}</text>
+			</view>
+			<!-- <view class="list-row" @click="goToPage('realName')">
+				<text>真实姓名</text>
+				<text class="row-content">{{settingData.realName}}</text>
+			</view>
+			<view class="list-row" @click="goToPage('gender')">
+				<text>性别</text>
+				<text class="row-content" v-if="settingData.gender===0"></text>
+				<text class="row-content" v-if="settingData.gender===1">男</text>
+				<text class="row-content" v-if="settingData.gender===2">女</text>
+			</view>
+			
+			<view class="list-row" @click="goToPage('shengri')">
+				<text>生日</text>
+				<text class="row-content">{{settingData.birthday}}</text>
+			</view>
+			
+			<view class="list-row" @click="goToPage('tel')">
+				<text>电话</text>
+				<text class="row-content">{{settingData.tel}}</text>
+			</view>
+			<view class="list-row" @click="goToPage('xgmm')">
+				<text>修改密码</text>
+				<text class="row-content">{{settingData.xgmm}}</text>
+			</view> -->
+			<view class="list-row no-jt-row" @click="goToPage('qlhc')">
+				<text>清理缓存</text>
+				<text class="row-content"></text>
+			</view>
 		</view>
+		<view @click="quitClick" class="exit-login-btn">退出登录</view>
+		<real-name-dialog ref="realNameDialogRef" @confirm-btn="realNameBtn"></real-name-dialog>
+		<tel-dialog ref="telDialogRef" @confirm-btn="telBtn"></tel-dialog>
+		<password-dialog ref="passwordDialogRef" @confirm-btn="passwordBtn"></password-dialog>
+		<birthday-dialog ref="birthdayDialogRef" @confirm-btn="birthdayBtn"></birthday-dialog>
+		<gender-dialog ref="genderDialogRef" @confirm-btn="genderBtn"></gender-dialog>
 	</view>
 </template>
 
 <script setup>
+import {reactive,ref} from "vue";
 import {logout} from '@/api/login.js'
 import {toast} from "@/utils/common";
+import {onLoad} from '@dcloudio/uni-app';
+import {getUserInfo,getUserUpRealName,getUserUpTel,getUserUpPassword,getUserUpBirthday,getUserUpGender} from '@/api/my.js'
+import {useUserCache} from "@/utils/userCache.js"
 import cacheManager from '@/utils/cacheManager.js';
-function quitClick(){
-	uni.showModal({
-	        title: '提示',
-	        content: '你确定要执行这个操作吗？',
-	        success: (res) => {
-	          if (res.confirm) {
-	            // 用户点击了确定按钮，执行你的操作
-	            console.log('用户点击了确定');
-	           quit()
-	          } else if (res.cancel) {
-	            // 用户点击了取消按钮
-	            console.log('用户点击了取消');
-	          }
-	        }
-	      });
-	
-	 }
-function quit (){
-		logout().then(res=>{
-			console.log('logout')
-			toast('退出登录成功')
-			cacheManager.clearAll();
-		}).catch(err => {
-		toast('退出登录失败，请稍后重试')
+import realNameDialog from './components/realNameDialog.vue';
+import telDialog from './components/telDialog.vue';
+import passwordDialog from './components/passwordDialog.vue';
+import birthdayDialog from './components/birthdayDialog.vue';
+import genderDialog from './components/genderDialog.vue';
+
+let settingData = reactive({
+		icon: '',
+		userName: '',
+		realName: '',
+		gender:'',
+		birthday: '',
+		tel:'',
+	});
+	
+	onLoad(() => {
+		getSettingInit()
 	})
 	
-}
+	function getSettingInit(){
+		getUserInfo({}).then(res => {
+			settingData.icon = res.data.icon;
+			settingData.userName = res.data.userName;
+			settingData.realName = res.data.realName;
+			settingData.gender = res.data.gender;
+			settingData.birthday = res.data.birthday;
+			settingData.tel = res.data.tel;
+		})
+	}
+	
+	/***** 跳转 *****/
+	function goToPage(data){
+		switch (data) {
+			case 'realName':
+			    realNameDialogRef.value.handleShow();
+			break;
+			case 'gender':
+			    genderDialogRef.value.handleShow();
+			break;
+			case 'shengri':
+			    birthdayDialogRef.value.handleShow();
+			break;
+			case 'tel':
+			    telDialogRef.value.handleShow();
+			break;
+			case 'xgmm':
+			    passwordDialogRef.value.handleShow();
+			break;
+			case 'qlhc':
+			    clearLocation()
+			break;
+		}
+	}
+	
+	
+	function clearLocation(){
+		// 清理考试缓存
+		useUserCache().removeCache('kaoshiCache');
+	}
+	
+	function quitClick(){
+		uni.showModal({
+				title: '提示',
+				content: '你确定要执行这个操作吗？',
+				success: (res) => {
+				  if (res.confirm) {
+					// 确定
+					quit()
+				  } else if (res.cancel) {
+					// 取消
+				  }
+				}
+			  });
+		
+		 }
+		 
+	function quit (){
+			logout().then(res=>{
+				toast('退出登录成功')
+				uni.navigateTo({
+					url: '/pages/login'
+				});
+				cacheManager.clearAll();
+				
+			}).catch(err => {
+			toast('退出登录失败，请稍后重试')
+		})
+		
+	}
+	/***** 真实姓名 *****/
+	const realNameDialogRef = ref(null);
+	function realNameBtn(data){
+		console.log(data,'data');
+		settingData.realName = data;
+		const opt = {
+			realName: settingData.realName,
+		}
+		getUserUpRealName(opt).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: '更新成功'
+				})
+				realNameDialogRef.value.handleClose();
+			}
+		})
+	}
+	
+	/***** 电话 *****/
+	const telDialogRef = ref(null);
+	function telBtn(data){
+		console.log(data,'data');
+		settingData.tel = data;
+		const opt = {
+			tel: settingData.tel,
+		}
+		getUserUpTel(opt).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: '更新成功'
+				})
+				telDialogRef.value.handleClose();
+			}
+		})
+	}
+	
+	/***** 修改日期 *****/
+	const birthdayDialogRef = ref(null);
+	function birthdayBtn(data){
+		settingData.birthday = data;
+		const opt = {
+			brithday: settingData.birthday,
+		}
+		getUserUpBirthday(opt).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: '更新成功'
+				})
+				birthdayDialogRef.value.handleClose();
+			}
+		})
+	}
+	
+	/***** 修改性别 *****/
+	const genderDialogRef = ref(null);
+	function genderBtn(data){
+		settingData.gender = data;
+		const opt = {
+			gender: data,
+		}
+		getUserUpGender(opt).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: '更新成功'
+				})
+				birthdayDialogRef.value.handleClose();
+			}
+		})
+	}
+	
+	/***** 修改密码 *****/
+	const passwordDialogRef = ref(null);
+	function passwordBtn(data){
+		const opt = {
+			passwordOld: data.oldPassWord,
+			passwordNew: data.newPassWord, 
+		}
+		getUserUpdatePassword(opt).then(res => {
+			if (res.data) {
+				uni.showToast({
+					title: '更新成功'
+				})
+				passwordDialogRef.value.handleClose();
+			}
+		})
+	}
 </script>
 
 <style>