增加退出登陆

pages/index.vue

@@ -93,7 +93,7 @@ import { useDict } from '@/utils/dict.js'
 import { chooseLocationInit, locateTheCurrentAddress } from '@/utils/adress'
 import CustomTabBar from '@/components/CustomTabBar/index.vue'
 import { regionAddresstree } from '@/api/home.js'
-
+import { getToken } from '@/utils/auth'
 
 const rightList = ref([])
 const leftList = ref([])
@@ -284,9 +284,14 @@ onShow(() => {
 const addresstree = ref([]);
 
 onMounted(async () => {
+
+
   const res_dara = await regionAddresstree()
   addresstree.value = res_dara.data;
-  locateTheCurrentAddress(res_dara.data)
+
+  const token  = getToken();
+  if(token){
+    locateTheCurrentAddress(res_dara.data)
     .then((res) => {
       console.log('locateTheCurrentAddress', res)
       data.address = res
@@ -296,6 +301,11 @@ onMounted(async () => {
       console.log('获取地址失败!', error)
       getList()
     })
+  }else{
+      //设置默认角色
+  uni.setStorageSync('userType', 1);
+  getList();
+  }
 })
 
 onUnload(() => {})

pages/mine.vue

@@ -1,78 +1,82 @@
 <template>
-	<view >
+	<view>
 		<view class="mine-container">
 			<view class="mine-header">
-			<up-image width="136rpx" height="136rpx" :show-loading="true" :src="userInfo.avatar"></up-image>
-			<view class="header-info">
-				<text class="info-name">{{ userInfo.nickName }}</text>
-				<up-icon name="setting-fill" size="25" @click="handLsetTing" v-if="userType == 1"></up-icon>
+				<up-image width="136rpx" height="136rpx" :show-loading="true" :src="userInfo.avatar"></up-image>
+				<view class="header-info">
+					<text class="info-name" @click="onLogin">{{ userInfo.nickName }}</text>
+					<up-icon name="setting-fill" size="25" @click="handLsetTing" v-if="userType == 1"></up-icon>
+				</view>
 			</view>
-		</view>
 
-		<view class="status-card2" v-if="userType == 1">
-				<view  v-for="(listItem, listIndex) in userList" :key="listIndex"
-					@click="onClick(listItem)">
+			<view class="status-card2" v-if="userType == 1">
+				<view v-for="(listItem, listIndex) in userList" :key="listIndex" @click="onClick(listItem)">
 					<view class="status-card-item2">
 						<view class="status-card2-left">
-						<view class="grid-img-box">
-							<up-icon :name="listItem.iconName" :size="22"></up-icon>
+							<view class="grid-img-box">
+								<up-icon :name="listItem.iconName" :size="22"></up-icon>
+							</view>
+							<text class="grid-text">{{ listItem.name }}</text>
 						</view>
-						<text class="grid-text">{{ listItem.name }}</text>
-					</view>
-					<up-icon name="arrow-right"></up-icon>
+						<up-icon name="arrow-right"></up-icon>
 					</view>
-					<up-divider v-if="listIndex !== userList.length -1"></up-divider>
+					<up-divider v-if="listIndex !== userList.length - 1"></up-divider>
 				</view>
-		</view>
+			</view>
 
-		<view class="list-box" v-if="userType == 2">
-			<view class="mine-card price-card" >
-				<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
-					:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }" @click="onClick(item)">
-					<view class="price-name flex-center"> {{ item.name }} </view>
-					<view class="price-data flex-center">
-						{{ index === 0 ? '¥' : '' }}<up-count-to :startVal="0" :endVal="data[item.key]"
-							:decimals="item.decimals"></up-count-to>
+			<view class="list-box" v-if="userType == 2">
+				<view class="mine-card price-card">
+					<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
+						:style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }" @click="onClick(item)">
+						<view class="price-name flex-center"> {{ item.name }} </view>
+						<view class="price-data flex-center">
+							{{ index === 0 ? '¥' : '' }}<up-count-to :startVal="0" :endVal="data[item.key]"
+								:decimals="item.decimals"></up-count-to>
+						</view>
+						<text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.balance] }}</text>
 					</view>
-					<text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.balance] }}</text>
 				</view>
-			</view>
 
-			<view class="mine-card status-card" >
-				<view class="status-card-item" v-for="(listItem, listIndex) in adminList" :key="listIndex +'adminList'"
-					@click="onClick(listItem)">
-					<view class="grid-img-box">
-						<up-icon :name="listItem.iconName" color="rgba(51, 51, 51, 1)" size="25"></up-icon>
+				<view class="mine-card status-card">
+					<view class="status-card-item" v-for="(listItem, listIndex) in adminList"
+						:key="listIndex + 'adminList'" @click="onClick(listItem)">
+						<view class="grid-img-box">
+							<up-icon :name="listItem.iconName" color="rgba(51, 51, 51, 1)" size="25"></up-icon>
+						</view>
+						<text class="grid-text">{{ listItem.name }}</text>
 					</view>
-					<text class="grid-text">{{ listItem.name }}</text>
 				</view>
-			</view>
 
-		
-			<view class="mine-card count-card" >
-				<view class="count-title">订单统计</view>
-				<view class="count-list">
-					<view class="count-item" v-for="(item, index) in orderList" :key="index +'orderList'" @click="onClick(item)">
-						<up-count-to :startVal="0" :endVal="data[item.key]"
-							:color="data[item.key] > 0? 'rgba(221, 94, 69, 1)':''"></up-count-to>
-						<text class="count-item-text">{{ item.name }}</text>
+
+				<view class="mine-card count-card">
+					<view class="count-title">订单统计</view>
+					<view class="count-list">
+						<view class="count-item" v-for="(item, index) in orderList" :key="index + 'orderList'"
+							@click="onClick(item)">
+							<up-count-to :startVal="0" :endVal="data[item.key]"
+								:color="data[item.key] > 0 ? 'rgba(221, 94, 69, 1)' : ''"></up-count-to>
+							<text class="count-item-text">{{ item.name }}</text>
+						</view>
 					</view>
 				</view>
-			</view>
 
-			<view class="mine-card rate-card" >
-				<view class="count-title">好评率</view>
-				<view class="rate-list">
-					<view class="rate-box">
-						<label class="rate-count">{{ rateValue }}</label>
-						<text class="rate-text">优秀</text>
+				<view class="mine-card rate-card">
+					<view class="count-title">好评率</view>
+					<view class="rate-list">
+						<view class="rate-box">
+							<label class="rate-count">{{ rateValue }}</label>
+							<text class="rate-text">优秀</text>
+						</view>
+						<up-rate v-model="rateValue" active-color="rgba(255, 87, 4, 1)" inactive-color="#b2b2b2"
+							gutter="20" readonly></up-rate>
 					</view>
-					<up-rate v-model="rateValue" active-color="rgba(255, 87, 4, 1)" inactive-color="#b2b2b2" gutter="20"
-						readonly></up-rate>
+				</view>
+
+				<view class="logout-box">
+					<view class="logout-btn" @click="onLogou">退出登陆</view>
 				</view>
 			</view>
 		</view>
-		</view>
 		<CustomTabBar page="mine" />
 	</view>
 </template>
@@ -86,10 +90,11 @@ import {
 import store from "@/store"
 import { getVolunteerAccountInfo, volunteerOrderStatistics } from "@/api/mine";
 import CustomTabBar from '@/components/CustomTabBar/index.vue'
-
-
+import { getToken } from '@/utils/auth'
+import { showConfirm } from '@/utils/common'
 const userInfo = ref({
-	avatar: '/static/serverImg/mine/user.png'
+	avatar: '/static/serverImg/mine/user.png',
+	nickName: '登陆/注册'
 })
 const data = ref({
 	balance: 0.0,
@@ -146,7 +151,7 @@ const orderList = ref([{
 ]);
 
 
-const userType = uni.getStorageSync('userType') //读取本地存储
+const userType = uni.getStorageSync('userType'); //读取本地存储
 
 const adminList = ref(
 	[
@@ -167,8 +172,8 @@ const adminList = ref(
 		{
 			name: '用户端',
 			iconName: 'account',
-      operate: () => {
-        uni.setStorageSync('userType', 1);
+			operate: () => {
+				uni.setStorageSync('userType', 1);
 				uni.reLaunch({
 					url: '/pages/index'
 				});
@@ -213,7 +218,25 @@ const userList = ref([
 		}
 	}
 ]);
+const onLogin = () => {
+	const token = getToken();
+	!token && store.dispatch('LogOut').then(res => {
+		uni.reLaunch({ url: '/pages/login' })
+	})
+}
 
+const onLogou = () => {
+	showConfirm('确认退出登陆吗？').then(res => {
+		if (res.confirm) {
+			store.dispatch('LogOut').then(res => {
+				// uni.reLaunch({ url: '/pages/login' })
+				uni.reLaunch({
+					url: '/pages/index'
+				});
+			})
+		}
+	})
+}
 const onClick = (record) => {
 	console.log('record', record, record.page);
 	if (record.page) {
@@ -267,8 +290,12 @@ const geUserInfo = () => {
 }
 
 onShow(() => {
-	geUserInfo();
-	init();
+	const token = getToken();
+	if (token) {
+		geUserInfo();
+		init();
+	}
+
 })
 
 const init = async () => {
@@ -567,7 +594,8 @@ const init = async () => {
 	margin-top: 24rpx;
 	padding: 30rpx 30rpx;
 	background-color: #fff;
-	.status-card-item2{
+
+	.status-card-item2 {
 		// height: 88rpx;
 		width: 100%;
 		display: flex;
@@ -577,10 +605,26 @@ const init = async () => {
 		.status-card2-left {
 			display: flex;
 			align-items: center;
+
 			.grid-img-box {
 				margin-right: 12rpx;
 			}
 		}
 	}
 }
+
+.logout-box {
+	margin-top: 24rpx;
+
+	.logout-btn {
+		border-radius: 16rpx;
+		background: rgba(221, 94, 69, 1);
+		padding: 24rpx 0;
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: 400;
+		line-height: 48rpx;
+		color: rgba(255, 255, 255, 1);
+	}
+}
 </style>

store/modules/user.ts

@@ -113,6 +113,9 @@ const user: Module<UserState, UserState> = {
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
           removeToken()
+
+          uni.setStorageSync('userType', 1)
+          uni.setStorageSync('userId', null)
           storage.clean()
           resolve(res)
         }).catch(error => {

utils/request.ts

@@ -42,13 +42,24 @@ const request = <T>(config:RequestConfig):Promise<ResponseData<T>> => {
       // @ts-ignore
       const msg:string = errorCode[code] || data.msg || errorCode['default']
       if (code === 401) {
-        showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
-          if (res.confirm) {
-            store.dispatch('LogOut').then(res => {
-              uni.reLaunch({ url: '/pages/login' })
-            })
-          }
-        })
+        // showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
+        //   if (res.confirm) {
+        //     store.dispatch('LogOut').then(res => {
+        //       uni.reLaunch({ url: '/pages/login' })
+        //     })
+        //   }
+        // })
+
+        uni.showToast({
+          title: '登陆后可以享受更多的服务哦',
+          icon: 'none',
+        });
+        setTimeout(() => {
+          store.dispatch('LogOut').then(res => {
+            uni.reLaunch({ url: '/pages/login' })
+          })
+        }, 500);
+
         reject('无效的会话，或者会话已过期，请重新登录。')
       } else if (code === 500) {
         toast(msg)