我的页面开发

api/my.js

@@ -22,4 +22,16 @@ export function getMineInfo(data = {}) {
     data,
     timeout: 20000
   })
+}
+
+export function getMineLogout(data = {}) {
+  return request({
+    url: '/app/mine/logout',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
 }

common/styles/global/components.scss

@@ -107,7 +107,18 @@ view{box-sizing: border-box;}
 	.segmented-control--text{height: 80rpx!important;}
 	.segmented-control__text{font-size: 32rpx!important;}
 }
-	
+/***** 通用弹窗  *****/		
+.phone-common-dialog{
+	width: 660rpx;border-radius: 12rpx;background-color: #fff;padding-top: 24rpx;
+	.common-title{padding-top: 24rpx;font-size: 34rpx;color: #333;text-align: center;}
+	.common-content{font-size: 32rpx;color: #666;margin:32rpx 48rpx 48rpx;line-height: 1.6;}
+	.content-center-class{text-align: center;}
+	.content-left-class{text-align: left;}
+	.common-btn-box{display: flex;flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px;}
+	.not-confirm-btn,.confirm-btn{height: 90rpx;line-height: 90rpx;flex:1;text-align: center;font-size: 30rpx;}
+	.not-confirm-btn{color: #666;}
+	.confirm-btn{border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px;color: #3fd2a1;}
+}	
 /***** 查询框  *****/	
 .phone-search-box{
 	width: 100%;height: 110rpx;background-color:#f4f6fa;

components/dialog/commonDialog.vue

@@ -1,14 +1,13 @@
-<!-- 中弹窗 二行文字 -->
 <template>
 	<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false"
-	 mask-background-color="rgba(255, 255, 255, 0.6);">
-	 <view class="ezy-tip-dialog tip-middle-dialog">
-		<view class="tip-content-box">
-			<view class="tip-title">{{title}}</view>
-			<view class="tip-content">{{content}}</view>
-			<view class="tip-btn-box">
-				<view class="not-confirm-btn" @click="handleClose"></view>
-				<view class="confirm-btn" @click="confirmBtn"></view>
+	 mask-background-color="rgba(0, 0, 0, 0.4)">
+	 <view class="phone-common-dialog">
+		<view class="common-body-box">
+			<view class="common-title">{{title}}</view>
+			<view class="common-content" :class="dialogContentClass">{{content}}</view>
+			<view class="common-btn-box">
+				<view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
+				<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
 			</view>
 		</view>
 	 </view>
@@ -20,13 +19,28 @@
 	const props = defineProps({
 	  title: {
 	    type: String,
-	    default: '提示'
+	    default: ''
 	  },
 	  content: {
 	    type: String,
 		require: true,
 	    default: ''
 	  },
+	  dialogContentClass: {
+	    type: String,
+	  	require: true,
+	    default: 'content-center-class'
+	  },
+	  notBtn: {
+	    type: String,
+	  	require: true,
+	    default: '取消'
+	  },
+	  okBtn: {
+	    type: String,
+	  	require: true,
+	    default: '确认'
+	  },
 	});
 	const commonPopup = ref(null); // 索引
 	const $emit = defineEmits(['confirm-btn'])

pages/client/my/index.vue

@@ -12,19 +12,19 @@
 		</view>
 		
 		<view class="my-num-box">
-			<view class="num-item-box">
+			<view class="num-item-box" @click="goToPage('ks')">
 				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kaoshiCount"
 				:customStyle="{background: '#ff2527'}" :text="myInfoData.kaoshiCount" />
 				<icon class="ks-icon"></icon>
 				<text class="num-title">考试管理</text>
 			</view>
-			<view class="num-item-box">
+			<view class="num-item-box" @click="goToPage('lx')">
 				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.lianxiCount"
 				:customStyle="{background: '#ff2527'}" :text="myInfoData.lianxiCount" />
 				<icon class="lx-icon"></icon>
 				<text class="num-title">练习管理</text>
 			</view>
-			<view class="num-item-box">
+			<view class="num-item-box" @click="goToPage('kc')">
 				<uni-badge class="uni-badge-left-margin my-num-badge" v-if="myInfoData.kechengCount"
 				:customStyle="{background: '#ff2527'}" :text="myInfoData.kechengCount" />
 				<icon class="kc-icon"></icon>
@@ -33,11 +33,11 @@
 		</view>
 		
 		<view class="my-list-box">
-			<view class="list-row" @click="telClick">
+			<view class="list-row" @click="goToPage('grcj')">
 				<icon class="list-icon user-icon"></icon>
 				<text>修改个人信息</text>
 			</view>
-			<view class="list-row" @click="checkWrong">
+			<view class="list-row" @click="goToPage('cj')">
 				<icon class="list-icon score-icon"></icon>
 				<text>成绩列表</text>
 			</view>
@@ -48,14 +48,18 @@
 		</view>
 		<!-- 底部区域 -->
 		<customTabbarClient></customTabbarClient>
+		<common-dialog ref="commonDialogRef" :title="exitTitle" :content="exitContent"@confirm-btn="exitBtn"></common-dialog>
 	</view>
 </template>
 
 <script setup>
+	import {toast} from "@/utils/common";
 	import {onLoad} from '@dcloudio/uni-app';
-	import {getMineUser,getMineInfo} from '@/api/my.js'
+	import cacheManager from '@/utils/cacheManager.js';
+	import {getMineUser,getMineInfo,getMineLogout} from '@/api/my.js'
 	import {reactive,ref} from "vue";
 	import customTabbarClient from "@/components/custom-tabbar/custom-tabbar-client.vue"
+	import commonDialog from '@/components/dialog/commonDialog.vue';
 	let myInfoData = reactive({
 		userImg: '',
 		userName: '',
@@ -64,10 +68,43 @@
 		kechengCount: '',
 		lianxiCount: '',
 	});
+	const commonDialogRef = ref(null);
+	const exitContent = '你确定要执行这个操作吗？';
+	const exitTitle = '退出登录';
 	function getMyInit() {
 		getUserInfo();
 		getNumInfo();
 	}
+	// 获取用户头像
+	function goToPage(data){
+		switch (data) {
+		    case 'ks':
+		        uni.redirectTo({
+		        	url:'/pages/client/Kaoshi/list'
+		        })
+		        break;
+		    case 'lx':
+		        uni.redirectTo({
+		        	url:'/pages/client/Lianxi/list'
+		        })
+		        break;
+		    case 'kc':
+		        uni.redirectTo({
+		        	url:'/pages/client/Kecheng/list'
+		        })
+		        break;
+			case 'cj':
+			    uni.redirectTo({
+			    	url:'/pages/client/Chengji/list'
+			    })
+			    break;
+			case 'grcj':
+			    uni.redirectTo({
+			    	url:'/pages/client/my/myInfo'
+			    })
+			    break;
+		}
+	}
 	function getUserInfo(){
 		getMineUser({}).then(res => {
 			myInfoData.userImg= res.data.icon;
@@ -83,9 +120,22 @@
 		})
 	}
 	function exitLogin(){
+		commonDialogRef.value.handleShow();
 		
 	}
-	
+	function exitBtn(){
+		getMineLogout().then(res => {
+			console.log(res,'res');
+			toast('退出登录成功')
+			console.log(6666,'666');
+			cacheManager.clearAll();
+			uni.reLaunch({
+				url: '/pages/Login/index'
+			});
+		}).catch(err => {
+			toast('退出登录失败，请稍后重试')
+		})
+	}
 	onLoad(() => {
 		getMyInit()
 	})