【feat】【第一版开发】

1.第一版联调完成

App.vue

@@ -1,7 +1,8 @@
 <script>
 	export default {
 		onLaunch: function() {
-			console.log('App Launch')
+			console.log('App Launch');
+			interceptorInit();
 		},
 		onShow: function() {
 			console.log('App Show')
@@ -10,6 +11,24 @@
 			console.log('App Hide')
 		}
 	}
+	
+	/**
+	 * 拦截器初始化
+	 */
+	const interceptorInit = () => {
+		uni.addInterceptor('navigateTo', {
+		    invoke(data) {
+		        const token = uni.getStorageSync('token');
+		        if (!token) {
+		            uni.reLaunch({
+		                url: "/pages/login/login"
+		            });
+		            return false; // 阻止跳转
+		        }
+		    }
+		});
+	}
+	
 </script>
 
 <style>

pages.json

@@ -3,28 +3,28 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "打卡结算"
 			}
 		},
 		{
 			"path" : "pages/login/login",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "登录"
 			}
 		},
 		{
 			"path" : "pages/userInfo/userInfo",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "用户中心"
 			}
 		},
 		{
 			"path" : "pages/detail/detail",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "编辑"
 			}
 		}
 	],

pages/index/index.vue

@@ -1,11 +1,9 @@
 <template>
 	<view class="container page-bg">
 		<view class="header-container">
-			<navigator url="/pages/login/login">
-				<view class="user-info">
-					<uni-icons type="person" size="30" color="#FFFFFF"></uni-icons>
-				</view>
-			</navigator>
+			<view class="user-info" @click="goUserInfoPage">
+				<uni-icons type="person" size="30" color="#FFFFFF"></uni-icons>
+			</view>
 		</view>
 		<view class="settle-container">
 			<view class="settle-text-container">
@@ -17,10 +15,8 @@
 		<view class="task-container">
 			<view class="task-header">
 				<view class="task-title">任务（3个）</view>
-				<view class="task-add-btn">
-					<navigator url="/pages/detail/detail">
-						<uni-icons type="plusempty" size="30" color="#406CE7"></uni-icons>
-					</navigator>
+				<view class="task-add-btn" @click="goPunchInDetailPage">
+					<uni-icons type="plusempty" size="30" color="#406CE7"></uni-icons>
 				</view>
 			</view>
 			<view class="task-item" v-for="punchIn in punchIns" :key="punchIn.punchInId">
@@ -36,7 +32,7 @@
 					<view class="item-btn" @click="doPunchIn(punchIn.punchInId)">完成</view>
 				</view>
 				<view class="item-detail-list">
-					<view class="item-detail" v-for="punchInRecord in punchIn.punchInRecords">
+					<view class="item-detail" v-for="punchInRecord in punchIn.punchInRecords" :key="punchInRecord.punchInDate">
 						<view class="detail-text">
 							<uni-dateformat :date="punchInRecord.punchInDate" format="M月d日"></uni-dateformat>
 						</view>
@@ -118,7 +114,32 @@
 		getPunchIn();
 	}
 	
+	/**
+	 * 跳转用户用心
+	 */
+	const goUserInfoPage = () => {
+		uni.navigateTo({
+			url: "/pages/userInfo/userInfo"
+		});
+	}
+	
+	/**
+	 * 获取打卡编辑页面
+	 */
+	const goPunchInDetailPage = () => {
+		uni.navigateTo({
+			url: "/pages/detail/detail"
+		})
+	}
+	
 	onMounted(() => {
+		let token = uni.getStorageSync("token");
+		// 如果还没登录就结束获取数据
+		if (!token) {
+			reward.value = 0;
+			punchIns.value = [];
+			return;
+		}
 		// 获取奖励
 		getReward();
 		// 获取打卡

pages/login/login.vue

@@ -15,25 +15,50 @@
 </template>
 
 <script setup>
+	import { ref } from 'vue';
 	import { loginApi } from '@/service/apis.js';
-	const login = () => {
-		uni.getProvider({
+	/**
+	 * 头像
+	 */
+	const avatar = ref("");
+	
+	/**
+	 * 昵称
+	 */
+	const nickname = ref("");
+	
+	const login = async () => {
+		// 获取供应商
+		let providerResult = await uni.getProvider({
 			service: 'oauth'
-		}).then((res) => {
-			return uni.login({
-				provider: res.provider[0]
-			});
-		}).then((res) => {
-			return loginApi.login({"code": res.code});
-		}).then((res) => {
-			uni.setStorageSync('token', res);
-			// uni.setStorageSync('userInfo', res.data.userInfo);
-			// uni.switchTab({
-			// 	url: '/pages/index/index'
-			// });
-		}).catch((err) => {
-			console.log(err);
 		});
+		const provider = providerResult.provider[0];
+		
+		// 获取登录的code
+		let loginResult = await uni.login({
+			provider
+		});
+		
+		// 获取用户的头像和昵称
+		let userInfoResult = await uni.getUserInfo({
+			 provider
+		});
+		
+		// 获取后端token
+		let token = await loginApi.login({
+			"code": loginResult.code,
+			"avatar": userInfoResult.userInfo.avatarUrl,
+			"nickname": userInfoResult.userInfo.nickName
+		});
+		
+		// 保存token
+		uni.setStorageSync('token', token);
+		
+		// 登录结束返回主页
+		uni.navigateTo({
+			url: "/pages/index/index"
+		})
+		
 	}
 </script>
 

pages/userInfo/userInfo.vue

@@ -9,13 +9,18 @@
 			<view class="avator-container">
 				<uni-icons type="person" size="130" color="#FFFFFF"></uni-icons>
 			</view>
-			<view class="btn-container">注销</view>
+			<view class="btn-container" @click="logout">注销</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-	
+	const logout = () => {
+		uni.removeStorageSync("token");
+		uni.reLaunch({
+			url: "/pages/index/index"
+		});
+	}
 </script>
 
 <style lang="scss" scoped>

utils/request.js

@@ -10,8 +10,7 @@ export default function request(config = {}) {
 	// url = '/api' + url;
 	url = 'http://localhost:8080' + url;
 	// 添加token
-	header['Authorization'] =
-		'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjIsImV4cCI6MTczNTI2MDg5M30.wfoJ22OryiQtQRwuhZNKKEvYjS-ux-bvWyluw8w6LnE';
+	header['Authorization'] = uni.getStorageSync('token');
 
 	return new Promise((resolve, reject) => {
 		uni.request({