uniProject/pages/my/setting.vue

<template>
	<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';
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>
</style>